/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
html {
  scroll-behavior: smooth;
}





/* =====================================================
   🔹 FLIP BOX (efecto giratorio con frente y reverso)
   ===================================================== */

/* Contenedor principal del flip box */
.flip-box {
  perspective: 1000px;
  width: 100%;
  height: 500px; /* altura fija en escritorio */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Capa interna que hace la animación de giro */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Efecto al pasar el mouse en escritorio */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Caras (frontal y trasera) */
.flip-box-front,
.flip-box-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* siempre ocupan el 100% del contenedor */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 40px;
}

/* Cara frontal (visible al inicio) */
.flip-box-front {
  background: #ffffff;
  color: #000;
  z-index: 2;
}

/* Cara trasera (se muestra al girar) */
.flip-box-back {
  background: #333;
  color: #fff;
  transform: rotateY(180deg);
}

/* Tablet: mostrar dos flip-box por fila */
@media (min-width: 768px) and (max-width: 1024px) {
  .flip-box {
    width: 48%; /* cada caja ocupa casi la mitad */
    margin: 1%; /* pequeño espacio entre cajas */
  }
}

/* Móvil: altura fija diferente */
@media (max-width: 768px) {
  .flip-box {
    height: 450px; /* altura para móviles */
  }
}










/* =====================================================
 *  FLIP BOX Miembros (efecto giratorio con frente y reverso) 
   ===================================================== */

/* Contenedor principal del flip box */
.flip-boxm {
  perspective: 1000px;
  width: 350px;
  height: 600px; /* altura fija en escritorio */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Capa interna que hace la animación de giro */
.flip-box-innerm {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Efecto al pasar el mouse en escritorio */
.flip-boxm:hover .flip-box-innerm {
  transform: rotateY(180deg);
}

/* Caras (frontal y trasera) */
.flip-box-frontm,
.flip-box-backm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* siempre ocupan el 100% del contenedor */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 0px;
}

/* Cara frontal (visible al inicio) */
.flip-box-frontm {
  background: #ffffff;
  color: #000;
  z-index: 2;
}

/* Cara trasera (se muestra al girar) */
.flip-box-backm {
  background: #333;
  color: #fff;
  transform: rotateY(180deg);
}

/* Tablet: mostrar dos flip-box por fila */
@media (min-width: 768px) and (max-width: 1024px) {
  .flip-boxm {
    width: 48%; /* cada caja ocupa casi la mitad */
    margin: 1%; /* pequeño espacio entre cajas */
  }
}

/* Móvil: altura fija diferente */
@media (max-width: 768px) {
  .flip-boxm {
    height: 450px; /* altura para móviles */
  }
}






/* =====================================================
   🔹 ACCORDION (estilo de títulos en acordeones)
   ===================================================== */

.elementor-widget-n-accordion .e-n-accordion-item-title {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px #999999 solid; /* solo línea inferior */
}

/* =====================================================
   🔹 DIRECTIVA TABS (tabs personalizados para fichas)
   ===================================================== */

/* Contenedor general de los tabs */
.directiva-tabs {
  width: 100%;
  font-family: 'Prata', serif; /* Fuente aplicada a todo el bloque */
}

/* Contenido de cada tab (oculto por defecto) */
.tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

/* Tab activo (visible) → se muestra en flex */
.tab-content.active {
  display: flex;
  align-items: flex-start; 
  justify-content: flex-start;
}

/* =====================================================
   🔹 BOTONERA DE TABS (lista de cargos/nombres)
   ===================================================== */

/* Botonera como GRID → ordenado en filas y columnas */
.tab-buttons {
  margin-top: 20px;
  display: grid;
  gap: 20px 40px; /* espacio entre filas y columnas */
  font-family: 'Prata', serif;
}

/* Botones individuales */
.tab-buttons button {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Prata', serif;
  transition: color 0.3s, transform 0.2s;
}

/* Cargo (ej. Presidenta, Director) */
.tab-buttons .cargo {
  display: block;
  font-weight: 600;
  font-size: 18px;
  color: #111;
  margin-bottom: 3px; /* pequeño espacio entre cargo y nombre */
}

/* Nombre (ej. Jessica Rodríguez Gutierrez) */
.tab-buttons .nombre {
  display: block;
  font-size: 16px;
  color: #555;
}

.tab-buttons button.active {
  position: relative; /* necesario para posicionar el pseudo-elemento */
  padding-bottom: 6px; /* espacio entre texto y línea */
}

.tab-buttons button.active::after {
  content: "";
  position: absolute;
  bottom: 0;              /* justo en el borde inferior */
  left: 50%;              /* referencia desde el centro */
  transform: translateX(-50%); /* centra la línea */
  width: 100%;             /* ocupa la mitad del ancho */
  height: 1px;            /* grosor de la línea */
  background: #000;       /* color de la línea */
}

/* Estado activo → resalta cargo y nombre */
.tab-buttons button.active .cargo,
.tab-buttons button.active .nombre {
  color: #000;
  font-weight: 700;
}

/* Hover con desplazamiento sutil */
.tab-buttons button:hover {
  transform: translateX(5px);
}

/* =====================================================
   🔹 ANIMACIÓN
   ===================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =====================================================
   🔹 RESPONSIVE
   ===================================================== */

/* Desktop: 3 columnas */
@media (min-width: 1025px) {
  .tab-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: 2 columnas */
@media (min-width: 768px) and (max-width: 1024px) {
  .tab-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: 1 columna */
@media (max-width: 767px) {
  .tab-buttons {
    grid-template-columns: 1fr;
    gap: 20px; /* menos separación en móvil */
  }
}





/* =====================================================
   🔹 TEXTO VERTICAL (ej. "Presidenta")
   ===================================================== */

/* Estilo base: Desktop (pantallas grandes) */
.vertical-text {
  writing-mode: vertical-rl;           /* coloca el texto en vertical de arriba hacia abajo */
  -webkit-writing-mode: vertical-rl;   /* compatibilidad Safari */
  transform: rotate(180deg);           /* invierte la dirección para leerlo de abajo hacia arriba */
  text-align: center;                  /* centra el texto dentro del contenedor */
  font-family: 'Prata', serif;         /* tipografía */
  font-size: 18px;                     /* tamaño de letra base */
  font-weight: 600;                    /* peso de la letra */
}

/* =====================================================
   🔹 RESPONSIVE → TABLET
   ===================================================== */
@media (max-width: 1024px) {
  .vertical-text {
    writing-mode: horizontal-tb;       /* vuelve el texto a horizontal */
    -webkit-writing-mode: horizontal-tb;
    transform: none;                   /* quita el giro */
    text-align: left;                  /* alinea a la izquierda (más natural en horizontal) */
    font-size: 16px;                   /* reduce tamaño en tablet */
  }
}

/* =====================================================
   🔹 RESPONSIVE → MÓVIL
   ===================================================== */
@media (max-width: 767px) {
  .vertical-text {
    font-size: 14px;                   /* aún más pequeño en pantallas móviles */
  }
	  .tab-buttons .cargo {
    font-size: 14px;
  }
}










/* =====================================================
   🔹 MENÚ VERTICAL ELEMENTOR — Solo líneas (sin flecha)
   Aplica a: <ul class="elementor-nav-menu sm-vertical">
   ===================================================== */

.elementor-nav-menu.sm-vertical .menu-item{
  list-style: none;
}

.elementor-nav-menu.sm-vertical .menu-item > .elementor-item{
  display: flex;                 /* mantiene buen alineado si el texto ocupa 2 líneas */
  justify-content: flex-start;   /* texto a la izquierda */
  align-items: center;
  width: 100%;
  padding: 12px 0;
  font-family: 'Prata', serif;
  font-size: 18px;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #fff; /* línea blanca visible */
  line-height: 1.4;
  transition: color .25s ease;
}

.elementor-nav-menu.sm-vertical .menu-item:last-child > .elementor-item{
  border-bottom: none;           /* sin línea en el último */
}

.elementor-nav-menu.sm-vertical .menu-item > .elementor-item:hover{
  color: #000;
}










/* =====================================================
   🔹 EFECTO ZOOM EN FONDO (Animado siempre)
   ===================================================== */

.fondo-zoom {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;      /* siempre cubre el contenedor */
  width: 100%;
  min-height: 100vh;           /* Desktop por defecto */
  animation: zoomInOutDesktop 20s ease-in-out infinite;
}

/* Keyframes para Desktop */
@keyframes zoomInOutDesktop {
  0%   { background-size: 100%; }
  50%  { background-size: 110%; }
  100% { background-size: 100%; }
}

/* =====================================================
   🔹 RESPONSIVE ALTURAS Y ANIMACIONES
   ===================================================== */

/* Tablet → 60vh y animación ajustada */
@media (max-width: 1024px) {
  .fondo-zoom {
    min-height: 60vh;
    animation: zoomInOutTablet 20s ease-in-out infinite;
  }

  @keyframes zoomInOutTablet {
    0%   { background-size: 150%; }
    50%  { background-size: 160%; } /* un poco más para compensar */
    100% { background-size: 150%; }
  }
}

/* Móvil → 50vh y animación ajustada */
@media (max-width: 767px) {
  .fondo-zoom {
    min-height: 50vh;
    animation: zoomInOutMobile 20s ease-in-out infinite;
  }

  @keyframes zoomInOutMobile {
    0%   { background-size: 160%; }
    50%  { background-size: 170%; } /* más grande para cubrir */
    100% { background-size: 160%; }
  }
}











/* =====================================================
   🔹 ESTILO PERSONALIZADO ACORDEÓN MIEMBRO
   ===================================================== */

#acordeon-miembro .elementor-accordion-item {
  border: none; /* quita bordes por defecto */
  margin-bottom: 15px; /* espacio entre ítems */
}

#acordeon-miembro .elementor-accordion-title {
  display: flex;
  justify-content: center;       /* centra horizontal */
  align-items: center;
  font-family: 'Prata', serif;
  font-size: 18px;
  font-weight: 400;
  color: #111;
  position: relative;
  padding-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #000; /* línea debajo del título */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Flecha personalizada solo para este acordeón */
#acordeon-miembro .elementor-accordion-title::after {
  content: "⌄";  /* flecha hacia abajo (puedes cambiarla por → o un SVG) */
  font-size: 16px;
  color: #000;
  position: absolute;
  bottom: -22px;   /* coloca debajo de la línea */
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

/* Estado activo → flecha rota */
#acordeon-miembro .elementor-accordion-item.active .elementor-accordion-title::after {
  transform: translateX(-50%) rotate(180deg);
}

/* Hover */
#acordeon-miembro .elementor-accordion-title:hover {
  color: #000;
}

/* Contenido */
#acordeon-miembro .elementor-tab-content {
  padding: 15px 10px;
  font-size: 15px;
  line-height: 1.6;
}








/* =====================================================
   🎨 HEADER PRINCIPAL AIA
   ===================================================== */
.aia-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 9999;
}

.aia-header.scrolled {
  background: #000; /* Fondo negro en scroll */
}

.aia-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 5px 40px;
  display: flex;
  justify-content: space-between; /* logo a la izquierda, resto a la derecha */
  align-items: center;
}

.aia-logo img {
  height: 70px;
  transition: all 0.3s ease;
}

/* 🔹 Idioma + Hamburguesa */
.aia-right {
  display: flex;
  align-items: center;
  gap: 20px; /* espacio entre idioma y hamburguesa */
}

.aia-lang {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #fff;
  margin-right: 20px;
  cursor: pointer;
}

.aia-menu-toggle img {
  height: 22px;
  padding-top: 3px;
  cursor: pointer;
}

/* =====================================================
   📱 MENÚ FULLSCREEN
   ===================================================== */
.aia-nav-full {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  /*background: rgba(169, 154, 133, 1); /* Fondo beige/gris claro */
	background-color: rgba(255, 255, 255, 0.98);
  transition: left 0.4s ease;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: 60px 80px;
}

.aia-nav-full.active {
  left: 0;
}

/* Botón cerrar */
.aia-close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 36px;
  cursor: pointer;
  color: #000;
}

/* Título lateral */
.aia-menu-title {
  font-family: 'Prata', serif;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #000;
}

/* Lista de menú */
.aia-nav-full ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aia-nav-full ul li {
  margin: 15px 0;
  /*border-bottom: 1px solid #fff;*/
	border-bottom: 1px solid #000;
  padding-bottom: 10px;
}

.aia-nav-full ul li a {
  font-family: 'Helvetica Now', sans-serif;
  font-size: 18px;
  text-decoration: none;
  color: #000;
  display: flex;
  justify-content: space-between; /* texto a la izq, flecha a la der */
  align-items: center;
}

/* Ítems activos en negrita */
.aia-nav-full ul li.current-menu-item a,
.aia-nav-full ul li.current_page_item a {
  font-weight: 800;
}

/* =====================================================
   📌 SUBMENÚS
   ===================================================== */
.aia-nav-full ul ul.sub-menu {
  max-height: 0;                  /* Ocultos */
  opacity: 0;                     /* Invisibles */
  overflow: hidden;
  margin: 0;
  padding-left: 15px;             /* Sangría a la izquierda */
  border-left: 0px solid rgba(255,255,255,0.3);
  transition: all 0.4s ease;      /* Animación suave */
}

.aia-nav-full li.menu-item-has-children.open > ul.sub-menu {
  max-height: 500px;              /* Altura suficiente para mostrar items */
  opacity: 1;
  margin-top: 10px;
}

/* =====================================================
   📌 FLECHAS EN EL MENÚ AIA (solo SVG)
   ===================================================== */

/* Flecha principal (nivel 0) */
.aia-nav-full .arrow-main {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  background: url("https://aia.whapruebas.com/wp-content/uploads/2025/09/flecha_aia.svg") no-repeat center center;
  background-size: contain;
  transition: transform 0.3s ease;
}

/* Rotar flecha al abrir */
.aia-nav-full li.open > a .arrow-main {
  transform: rotate(180deg);
}

/* Flecha submenú (nivel >=1) */
.aia-nav-full .arrow-sub {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background: url("https://aia.whapruebas.com/wp-content/uploads/2025/09/flecha_aia.svg") no-repeat center center;
  background-size: contain;
}

/* Cambiar solo la flecha de "La Alpaca" */
#aiaNavFull #menu-item-2930 > a .arrow-main {
  background: url("https://aia.whapruebas.com/wp-content/uploads/2025/09/flecha_aia_alpaca.svg") no-repeat center center;
  background-size: contain;
  width: 16px;
  height: 16px;
}

/* Rotación al abrir */
#aiaNavFull #menu-item-2930.open > a .arrow-main {
  transform: rotate(180deg);
}

/* Quitar línea inferior en las subpáginas */
.aia-nav-full ul.sub-menu li {
  border-bottom: none !important; /* elimina la línea */
  padding-bottom: 8px;            /* ajusta el espaciado */
  margin: 8px 0;                  /* espacio más limpio */
}


/* =====================================================
   📱 RESPONSIVE
   ===================================================== */
@media (max-width: 767px) {
  .aia-header-inner {
    padding: 5px 20px;
  }
  .aia-lang { font-size: 12px; }

  .aia-nav-full {
    padding: 60px 20px;
  }

  .aia-menu-toggle img {
    height: 20px;
    padding-top: 3px;
  }
}



















/* =====================================================
   🎨 Ítems activos (resalta la página actual)
   ===================================================== */
.aia-nav-full ul li.current-menu-item a,
.aia-nav-full ul li.current_page_item a {
  font-weight: 800; /* Negrita extra */
}







/* Responsive */
@media (max-width: 767px) {
  .aia-header-inner {
    padding: 5px 20px;
  }
  .aia-lang { font-size: 12px; }
	
	.aia-nav-full {
  left: -100%;
  width: 100%;
  height: 100vh;
  padding: 60px 20px;
}
	
	/* Botón hamburguesa */
.aia-menu-toggle img {
  height: 20px;
  cursor: pointer;
		padding-top:3px;
}

}





/* =====================================================
   🌐 TranslatePress Inline Language Switcher (Links)
   ===================================================== */
/* Contenedor inline */
.aia-lang-switcher {
  display: flex;
  gap: 10px;
  align-items: center;


}

/* Idiomas */
.aia-lang-switcher a {
  font-family: 'Helvetica Now', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Activo (ajústalo según idioma actual) */
.aia-lang-switcher .lang-es.active,
.aia-lang-switcher .lang-en.active {
  font-weight: 800;
  color: #fff;
  pointer-events: none;
}

/* Hover */
.aia-lang-switcher a:hover {
  color: #fff;
}

/* Separador | */
.aia-lang-switcher a:not(:last-child)::after {
  content: "|";
  margin-left: 8px;
  color: #fff;
}








/* =====================================================
   🌐 Botones display none aparecen y desaparecen al cambio de idioma
   ===================================================== */

/* Ocultar los contenedores de los botones en inglés por defecto */
.btn-en { display: none !important; }

/* Cuando está en inglés */
body.translatepress-en_US .btn-en { 
  display: flex !important;   /* Mostrar los botones en inglés */
}
body.translatepress-en_US .btn-es { 
  display: none !important;   /* Ocultar los botones en español */
}