/*
Theme Name: Juana Theme
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: BIT
Author URI: http://www.bitcr.net
Description: Tema hijo para personalizaciones del sitio Juana Centroamérica
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.0.0.1762569221
Updated: 2025-11-08 02:33:41

*/

/* =====================
    Juana Centroamérica 
   ===================== */

/* Generales */
* {
  box-sizing: border-box;
}

body, html {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.container, section, .elementor-section {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Base font */
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
  color: #222;
}

h1, h2, h3, .title {
  font-family: 'Nexa Bold', 'Nexa', 'Helvetica', sans-serif;
}

/* Headings */
h1 {
  font-size: 4rem;
  font-weight: 800;
  color: #FFF;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.75rem;
}

/* Underline accent (yellow) for section headings */
.titulo-con-linea {
  position: relative;
  padding-bottom: 0.75rem;
}
.titulo-con-linea::after {
  content: '';
  width: 3.75rem;
  height: 0.25rem;
  background-color: #FFCB05;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Buttons */
body .boton-ver-mas {
  background-color: #FFF;
  color: #000;
  padding: 0.75rem 1.875rem;
  border-radius: 1.875rem;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}
body .boton-ver-mas:hover {
  background-color: #e5b800;
}

/* Outline button style */
body .boton-outline-rojo {
  background-color: transparent;
  color: #D51817;
  border: 2px solid #D51817;
  padding: 0.625rem 1.5rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
body .boton-outline-rojo:hover {
  background-color: #D51817;
  color: #fff;
}

/* Product image or centered visuals */
body .imagen-central {
  display: block;
  margin: 2.5rem auto;
  max-width: 100%;
  height: auto;
}

/* =============================
   Hero con imagen destacada
   ============================= */

body .hero-juana {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 1rem;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

body .hero-juana::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(213, 24, 23, 0.85);
  z-index: 1;
}

body .hero-juana .contenido {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

body .hero-juana .contenido h1 {
  font-size: 2.5rem;
  color: #fff;
  margin: 0;
}

/* ================
    Menu Principal
   ================ */
body .juana-nav-menu a {
	font-family: 'Nexa', 'Helvetica', 'Arial', sans-serif;
	font-size: 2rem !important;
}

/* ========================
    Blog Componente Inicio
   ======================== */
body .blog-post-grid img {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

/* ===========================================
    Botón del grid de Royal Addons: + Ver más
   =========================================== */
.elementor-5 .elementor-element.elementor-element-9ac042a .wpr-grid-item-read-more .inner-block a {
  border: 2px solid #D51817;
  color: #D51817;
  background-color: #fff;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  display: inline-block;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.elementor-5 .elementor-element.elementor-element-9ac042a .wpr-grid-item-read-more .inner-block a:hover {
  background-color: #D51817;
  color: #fff;
}

/* =========================================
    Estilos del carrusel de Smart Post Show
   ========================================= */

/* Botón CTA */
.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a {
  color: #D51817;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  display: inline-block;
  transition: all 0.3s ease;
  margin-top: 1rem;
  text-transform: none;
}

.sp-pcp-post .sp-pcp-post-content .sp-pcp-readmore a:hover {
  background-color: #D51817;
  color: #fff;
}

#pcp_wrapper-229 .pcp-readmore-link {
  background-color: #fff;
  color: #D51817;
  border: 2px solid #D51817;
  border-radius: 2rem;
}

/* Centra todos los elementos de texto en Smart Post Show */
.sp-pcp-post {
  text-align: center;
}

/* Alinea los títulos */
.sp-pcp-post .sp-pcp-title {
  margin: 0.5rem 0;
  font-weight: bold;
}

/* Overlay y destaque de imagen central */
/* Estilo base para todas las imágenes */
.swiper-slide .sp-pcp-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
}

/* Imagen: por defecto más pequeña y opacada */
.swiper-slide .sp-pcp-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(0.85);
  transition: all 0.4s ease;
  filter: brightness(60%);
  border-radius: 20px;
}

/* Imagen del slide activo: sin overlay, zoom y brillo normal */
.swiper-slide-next .sp-pcp-thumb img {
  transform: scale(1);
  filter: brightness(100%);
  z-index: 3;
}

/* ===============================
    Estilos de la página del Blog
   =============================== */
.elementor-402 .elementor-element.elementor-element-2e75a0e .wpr-grid-item-read-more .inner-block a {
  background-color: transparent;
  color: #D51817;
  border: 2px solid #D51817;
  padding: 0.625rem 1.5rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.elementor-402 .elementor-element.elementor-element-2e75a0e .wpr-grid-item-read-more .inner-block a:hover {
  background-color: #D51817;
  color: #fff;
}

/* ====================================
    Estilos del Formulario de Contacto
   ==================================== */
.wpcf7-form label {
  font-family: 'Nexa Bold', 'Nexa', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #222;
  margin: 10px 0 0 10px;
}

.wpcf7-form input {
  background-color: transparent;
  color: #D51817;
  border: 2px solid #D51817;
  padding: 0.625rem 1.5rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.wpcf7-form textarea {
  background-color: transparent;
  color: #D51817;
  border: 2px solid #D51817;
  padding: 0.625rem 1.5rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 5px;
}

.wpcf7-submit:hover {
  background-color: #D51817;
  color: #fff;
}

@media (max-width: 768px) {
  /* Responsive typography */
  body { font-size: 1rem; }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  body .hero-juana {
    padding: 3rem 1rem;
    min-height: 220px;
  }

  body .hero-juana .contenido h1 { font-size: 2rem; }
	
  body .juana-nav-menu a { font-size: 1rem !important; }
  
  body .blog-post-grid img { height: 200px; }
}