/**
Theme Name: Astra child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

* {
  margin: 0;a
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
}


/* =========================================
   CONTENEDOR DE LA CÁPSULA
   ========================================= */
.header-capsule {
  position: fixed;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  /* En desktop tomará max 1340px, en móviles tomará el 100% menos los márgenes de 17px (34px totales) */
  width: calc(100% - 34px);
  max-width: 1340px;
  z-index: 1000;
}

/* =========================================
   NAVBAR PRINCIPAL
   ========================================= */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  border-radius: 42px;

  /* Fondo blanco 80% y Blur uniforme de 4px */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  padding: 0 50px; /* Padding interior para que el contenido respire */
  position: relative;
  z-index: 10; /* Z-index mayor que el offcanvas para estar por delante */
  transition: height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Columnas Flexbox */
.nav-col-left {
  display: flex;
  align-items: center;
}

.nav-col-middle {
  flex-grow: 1; /* Prioridad para crecer */
  display: flex;
  justify-content: center; /* Centramos el menú desktop */
}

.nav-col-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Logo: Medidas Desktop por defecto */
.logo {
  width: 64px;
  height: 62.66px;
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
}

/* =========================================
   MENÚ DESKTOP (Tipografía y Colores)
   ========================================= */
.desktop-menu, .mobile-menu {
  list-style: none;
  display: flex;
  gap: 32px;
}

.desktop-menu li a, .mobile-menu li a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  color: rgba(29, 29, 29, 0.6); /* #1D1D1D al 60% */
  transition: color 0.3s ease;
  transition: font-size 0.3s ease, color 0.3s ease;
}

.desktop-menu li.current-menu-item a, 
.mobile-menu li.current-menu-item a,
.desktop-menu li a:hover, 
.mobile-menu li a:hover {
  color: rgba(114, 124, 55, 1); /* #727C37 al 100% */
}

/* Ajuste para el logo dinámico de WordPress (la clase custom-logo la pone WP) */
.custom-logo {
  width: 64px;
  height: 62.66px;
  object-fit: contain;
  transition: width 0.3s ease, height 0.3s ease;
}
.header-capsule.scrolled .custom-logo {
  width: 52px;
  height: 50.9px;
}

/* Botón Hamburguesa: Oculto en Desktop */
.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: rgba(29, 29, 29, 0.6);
  border-radius: 4px;
  transition: 0.3s;
}

/* =========================================
   MENÚ OFFCANVAS (Desplegable)
   ========================================= */
.offcanvas {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  height: 480px;

  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0 0 42px 42px;

  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 42px;

  /* Se eliminó el transform: translateY(-110%); */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, top 0.3s ease;
}

/* Clase para abrir el menú vía JavaScript */
.offcanvas.open {
  /* Se eliminó el transform: translateY(0); */
  opacity: 1;
  visibility: visible;
}

/* Ajustes menú responsive */
.mobile-menu {
  flex-direction: column;
  align-items: center;
  gap: 46px;
  width: 100%;
}

/* =========================================
   MEDIA QUERIES (TABLET Y MOBILE)
   ========================================= */
@media screen and (max-width: 992px) {
  /* Ocultamos columna del medio (menú desktop) */
  .nav-col-middle {
    display: none;
  }

  /* Mostramos el botón hamburguesa */
  .hamburger-btn {
    display: flex;
  }

  /* Ajustamos el tamaño del logo para móviles según especificaciones */
  .logo {
    width: 40px;
    height: 39.16px;
  }
}

/* =========================================
   ESTADOS AL HACER SCROLL (.scrolled)
   ========================================= */

/* 1. La barra se hace más delgada y los bordes un poco menos redondos */
.header-capsule.scrolled .navbar {
  height: 64px; /* Baja de 84px a 64px */
  border-radius: 32px;
  /* Opcional: un fondo un poco más opaco y una sombra sutil al hacer scroll */
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 2. El logo de desktop se reduce proporcionalmente */
.header-capsule.scrolled .logo {
  width: 52px;
  height: 50.9px;
}

/* 3. La fuente del menú se reduce ligeramente para mantener proporción */
.header-capsule.scrolled .desktop-menu li a {
  font-size: 16px; /* Baja de 18px a 16px */
}

/* 4. Ajustamos el inicio del menú desplegable para que siga saliendo del medio */
.header-capsule.scrolled .offcanvas {
  top: 32px; /* La mitad de la nueva altura (64px / 2) */
}

/* 5. Ajuste del logo en Mobile al hacer scroll */
@media screen and (max-width: 992px) {
  .header-capsule.scrolled .logo {
    width: 32px;
    height: 31.32px;
  }

  .header-capsule.scrolled .hamburger-btn {
    width: 15px;
    height: 12px;
}
}

/* =========================================
   RESET ANTI-ASTRA PARA EL MENÚ PERSONALIZADO
   ========================================= */

/* Resetear el contenedor de la lista (UL) */
.header-capsule ul.desktop-menu,
.header-capsule ul.mobile-menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Resetear los elementos de la lista (LI) */
.header-capsule ul.desktop-menu li,
.header-capsule ul.mobile-menu li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Evita que Astra expanda el alto del li */
}

/* (Opcional) Asegurar que los enlaces no hereden decoraciones extrañas */
.header-capsule ul.desktop-menu li a,
.header-capsule ul.mobile-menu li a {
    text-decoration: none !important;
    box-shadow: none !important; /* Astra a veces añade sombras a los enlaces */
}

/* =========================================
   SOPORTE PARA LA BARRA DE ADMINISTRACIÓN DE WP
   ========================================= */

/* Desktop: Margen original (17px) + Admin bar (32px) = 49px */
.admin-bar .header-capsule {
    top: 49px;
}

/* Mobile (WordPress cambia el alto del admin bar en 782px): 
   Margen original (17px) + Admin bar móvil (46px) = 63px */
@media screen and (max-width: 782px) {
    .admin-bar .header-capsule {
        top: 63px;
    }
}

/* =========================================
   BLINDAJE DEL BOTÓN HAMBURGUESA CONTRA ASTRA
   ========================================= */

/* Reset total para el botón */
.header-capsule button.hamburger-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    display: none; /* Oculto en desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px !important;
    height: 24px !important;
    min-width: unset !important; /* Astra a veces fuerza un ancho mínimo */
    min-height: unset !important; /* Astra a veces fuerza un alto mínimo */
    z-index: 20 !important; /* Asegura que sea clickeable */
}

/* Reset de las 3 líneas (spans) del botón */
.header-capsule button.hamburger-btn span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: rgba(29, 29, 29, 0.6) !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mostrar solo en responsive */
@media screen and (max-width: 992px) {
    .header-capsule button.hamburger-btn {
        display: flex !important;
    }
}

/* Efecto de "X" cuando está activo (opcional pero recomendado) */
.header-capsule button.hamburger-btn.active-btn span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg) !important;
}
.header-capsule button.hamburger-btn.active-btn span:nth-child(2) {
    opacity: 0 !important;
}
.header-capsule button.hamburger-btn.active-btn span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg) !important;
}

/* =========================================
   ESTILOS DEL DIALOG GLOBAL (FORZADO AL CENTRO)
   ========================================= */

.capsula-dialog {
    /* 1. Forzamos que se fije a la PANTALLA y no al inicio de la página */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important; /* Anulamos el margin auto para usar el translate */
    
    /* 2. Estilos visuales de la cápsula */
    border: none !important;
    border-radius: 24px;
    padding: 48px 32px 32px 32px; 
    max-width: 480px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    
    /* 3. Nos aseguramos de que esté por encima del menú y de Astra */
    z-index: 999999 !important; 
}

/* El fondo oscuro sigue igual */
.capsula-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Estilos de la nueva "X" superior derecha */
.btn-cerrar-x {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #1D1D1D;
    opacity: 0.5;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* =========================================
   BOTÓN CERRAR (X) MEJORADO PARA MÓVILES
   ========================================= */

.btn-cerrar-x {
    position: absolute;
    top: 12px;
    right: 12px;
    
    /* Tamaño ideal para toque en móviles (Touch Target) */
    width: 44px;
    height: 44px;
    
    /* Forma y fondo base */
    background-color: rgba(29, 29, 29, 0.05); /* Círculo gris suave visible siempre */
    border: none;
    border-radius: 50%; /* Círculo perfecto */
    padding: 0;
    
    /* Posicionamiento Flex para centrar la X interna */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Transición suave y reseteo de toque táctil en móviles */
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Quita el cuadro azul nativo de Android al tocar */
}

/* Dibujando las líneas de la X con CSS puro para precisión perfecta */
.btn-cerrar-x::before,
.btn-cerrar-x::after {
    content: '';
    position: absolute;
    width: 16px; /* Largo de las líneas */
    height: 2px; /* Grosor de las líneas */
    background-color: #1D1D1D; /* Color del texto original */
    border-radius: 2px; /* Puntas redondeadas */
    transition: background-color 0.3s ease;
}

.btn-cerrar-x::before {
    transform: rotate(45deg);
}

.btn-cerrar-x::after {
    transform: rotate(-45deg);
}

/* Estados Hover (PC) y Active (Mobile) */
.btn-cerrar-x:hover,
.btn-cerrar-x:active,
.btn-cerrar-x:focus {
    background-color: #727C37; /* Tu color verde oliva */
    transform: scale(1.05); /* Pequeño efecto de zoom */
}

/* Las líneas de la X se vuelven blancas al hacer hover/tocar */
.btn-cerrar-x:hover::before,
.btn-cerrar-x:hover::after,
.btn-cerrar-x:active::before,
.btn-cerrar-x:active::after {
    background-color: #ffffff;
}

.btn {
  display: inline-block;
  padding: 11px 48px!important;
  font-size: 18px!important;
  font-weight: 500!important;
  text-decoration: none!important;
  transition: all 0.3s ease!important;
  cursor: pointer!important;
  border-radius: 0px;
}

.btn-primary {
  background-color: #728135!important; /* Color verde oliva */
  color: #ffffff!important;
  border: 1px solid #728135!important;
}

.btn-primary:hover, .btn-primary:focus {
  color: #ffffff;
  background-color: #728135!important; /* Color verde oliva */
  color: #ffffff!important;
  border: 1px solid #728135!important;
}

.btn-outline {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

.btn-outline:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #728135;
}

@media (max-width: 768px) {
  .btn {
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
  }
}

body.modal-abierto {
    overflow: hidden !important;
}

._3d-flip-book {
    transition: opacity 0.35s ease-in-out !important;
    will-change: opacity;
}

.oculto {
  display: none;
}

/* Contenedor principal con el fondo beige de la imagen */
.selector-idiomas-container {
  padding: 15px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* Texto superior "Disponible en:" */
.titulo-selector {
  margin: 0 0 8px 0;
  font-family: sans-serif;
  font-size: 16px;
  color: #4a4237; /* Color oscuro grisáceo/marrón */
  text-align: center;
}

/* Alineación horizontal de las banderas */
.selector-idiomas {
  display: flex;
  gap: 12px; /* Espaciado entre banderas */
  align-items: center;
}

/* Reset del botón HTML para que parezca solo la imagen */
.btn-idioma {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Dimensiones e interacción con las imágenes PNG */
.btn-idioma img {
  width: 32px;  /* Ajusta el ancho deseado */
  height: 20px; /* Ajusta el alto deseado */
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Efecto hover al pasar el cursor */
.btn-idioma:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Indicador visual para la bandera seleccionada */
.btn-idioma.activo img {
  outline: 2px solid #4a4237;
  outline-offset: 2px;
}