/* =========================================================
   layout.css (OPTIMIZADO & RESPONSIVE - 100% REM)
   ========================================================= */

/* Fix Scroll Anclas: Compensa la altura del header fijo */
section[id] {
  scroll-margin-top: calc(var(--alto-encabezado) + 4rem);
}

/* --- HEADER (FIXED) --- */
.encabezado {
  position: fixed; 
  top: 0; left: 0; width: 100%; height: var(--alto-encabezado);
  z-index: 1000; 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border 0.3s, padding 0.3s;
  will-change: transform;
  background: transparent;
  border-bottom: 0.1rem solid transparent;
  contain: layout style;
  padding-top: 2rem; padding-bottom: 2rem;
}

/* Header al hacer scroll (casi negro) */
.encabezado--scrolled {
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.35);
  padding-top: 1rem !important; padding-bottom: 1rem !important;
}

/* Header al hacer scroll (Glassmorphism Light) */
:root[data-theme="light"] .encabezado--scrolled {
  background: rgba(255, 255, 255, 0.90);
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.05);
}

.encabezado--oculto { transform: translateY(-100%); }

.encabezado__contenido {
  height: 100%;
  display: flex;
  align-items: center;
  /* CAMBIO: Distribuye Logo a la izq y Botones a la der */
  justify-content: space-between;
  padding: 0 1rem;
  /* CAMBIO: Necesario para el centrado absoluto del nav */
  position: relative;
}

/* Entrada del header al cargar/refrescar (todas las páginas).
   Va en el contenido interno para no chocar con el transform que
   oculta el header al hacer scroll (.encabezado--oculto). */
@media (prefers-reduced-motion: no-preference) {
  .encabezado__contenido {
    animation: encabezado-entrada 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes encabezado-entrada {
  from { opacity: 0; transform: translateY(-2.6rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- LOGO --- */
.marca { 
  display: inline-flex; align-items: center; z-index: 1001; 
  /* CAMBIO: Ya no empuja con auto, se queda a la izquierda */
  margin-right: 0; 
}

.marca__logo { 
  border-radius: 0 !important; 
  filter: brightness(0) invert(1); 
  height: auto; max-height: 3.2rem; width: auto; display: block;
  transition: filter 0.3s ease;
}

:root[data-theme="light"] .marca__logo { filter: brightness(0); }

/* --- CONTENEDOR BOTONES --- */
.header-acciones {
  display: flex; align-items: center; gap: 1.2rem;
  /* CAMBIO: Asegura que los botones estén sobre el nav si se cruzan */
  z-index: 1001; 
}

/* --- BOTÓN TOGGLE (TEMA E IDIOMA) --- */
.theme-toggle {
  background: transparent;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: all 0.3s ease; z-index: 1002;
}

/* Estilos Light Mode */
:root[data-theme="light"] .theme-toggle {
  color: #0f172a; 
  border-color: rgba(15, 23, 42, 0.15);
  background: rgba(255,255,255,0.5);
}

.theme-toggle:hover { background: rgba(255,255,255,0.1); }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.05); }

/* Estilo Texto Idioma */
.lang-text {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

/* Iconos Tema */
.theme-icon { display: none; }
html:not([data-theme="light"]) .sun { display: block; } 
:root[data-theme="light"] .moon { display: block; }    

/* --- BOTÓN MENÚ MÓVIL --- */
.boton-menu {
  background: transparent; border: none; 
  width: 4.8rem; height: 4.8rem;
  display: flex; align-items: center; justify-content: flex-end; 
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent; z-index: 1002; 
}
@media (min-width: 76.8rem) { .boton-menu { display: none; } }

.boton-menu__icono {
  width: 2.4rem; height: 0.2rem; background: #ffffff; 
  position: relative; border-radius: 0.2rem; transition: background-color 0.3s ease-in-out;
}
:root[data-theme="light"] .boton-menu__icono { background: #0f172a; }

.boton-menu__icono::before, .boton-menu__icono::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 0.2rem; 
  background: inherit; border-radius: 0.2rem; transition: top 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.boton-menu__icono::before { top: -0.8rem; }
.boton-menu__icono::after { top: 0.8rem; }

.boton-menu[aria-expanded="true"] .boton-menu__icono { background-color: transparent; }
.boton-menu[aria-expanded="true"] .boton-menu__icono::before { top: 0; transform: rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__icono::after { top: 0; transform: rotate(-45deg); }


/* --- NAV DESKTOP --- */
.nav { display: none; }

@media (min-width: 76.8rem) {
  .encabezado {
    padding-top: 2.2rem;
    height: auto;
    min-height: var(--alto-encabezado);
    padding-bottom: 2.2rem;
  }

  .nav { 
    display: block; 
    /* CAMBIO: Centrado absoluto perfecto */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin: 0;
  }
  
  .nav__lista {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 3rem;
  }
  
  .nav__enlace {
    font-size: 1.5rem; font-weight: 500; 
    color: #cbd5e1;
    position: relative; padding: 0.5rem 0;
  }
  
  :root[data-theme="light"] .nav__enlace { color: var(--color-texto); }
  
  .nav__enlace:not(.nav__enlace--cta):hover { color: var(--color-primario); }

  .nav__enlace--activo {
    color: var(--color-primario) !important;
    font-weight: 600;
  }

  .nav__enlace--cta {
    display: inline-block; padding: 0.9rem 2.2rem;
    border: 0.1rem solid var(--color-titulo); border-radius: 0;
    color: var(--color-fondo) !important; background: var(--color-titulo);
    font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.06em;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  .nav__enlace--cta:hover {
    background: transparent; color: var(--color-titulo) !important;
  }
}

/* --- MENÚ MÓVIL (Overlay) --- */
body.menu-abierto { overflow: hidden; }

.overlay-menu {
  position: fixed; inset: 0; 
  background: rgba(0,0,0,0.6); opacity: 0; 
  pointer-events: none; transition: opacity 0.3s; 
  z-index: 900; backdrop-filter: blur(0.4rem);
}
.overlay-menu--activo { opacity: 1; pointer-events: auto; }

.menu-movil {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-height: 100vh; 
  overflow-y: auto; background: #0A0A0C;
  transform: translateY(-150%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 950; display: flex; flex-direction: column; align-items: center; 
  padding-top: calc(var(--alto-encabezado) + env(safe-area-inset-top) + 4rem);
  padding-bottom: 4rem; padding-left: 2rem; padding-right: 2rem;
}

:root[data-theme="light"] .menu-movil { background: #F8FAFC; }
:root[data-theme="light"] .menu-movil__enlace { color: #0F172A; }

.menu-movil--abierto { transform: translateY(0); }
.menu-movil__cabecera, #botonCerrarMenu { display: none; }

.menu-movil__contenido {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3rem;
}

.menu-movil__enlace {
  font-size: 2.4rem; font-weight: 600; color: #ffffff;
  text-align: center; text-decoration: none; display: block; width: 100%; padding: 1rem;
}
.menu-movil__enlace:hover { color: var(--color-primario); }
.menu-movil__enlace.nav__enlace--activo { color: var(--color-primario); }

.menu-movil__enlace--cta {
  background: var(--color-titulo); color: var(--color-fondo) !important;
  border-radius: 0; padding: 1.2rem 4rem; display: inline-block; width: auto; margin-top: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.8rem;
}

/* --- SECCIONES GENÉRICAS --- */
.seccion { 
  padding: 6rem 0; 
  content-visibility: auto; contain-intrinsic-size: 800px;
}
.seccion__encabezado { text-align: center; margin-bottom: 4rem; }
.seccion__subtitulo { margin-top: 1rem; font-size: 1.5rem; max-width: 60ch; margin-inline: auto; color: var(--color-texto-muted); }

/* --- TARJETAS GRID --- */
.tarjetas { display: grid; gap: 2rem; }

.tarjeta {
  background: var(--color-superficie); background-clip: padding-box;
  border: 0.1rem solid var(--borde-glass); box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio); padding: 2.5rem;
  display: flex; flex-direction: column; height: 100%;
  transition: 0.3s; will-change: transform;
}

.tarjeta:hover { 
  transform: scale(1.02); background: rgba(255, 255, 255, 0.06); 
  box-shadow: 0 0 2rem rgba(59, 130, 246, 0.15); border-color: rgba(255, 255, 255, 0.2);
}
:root[data-theme="light"] .tarjeta:hover { background: #FFFFFF; border-color: var(--color-primario); }

.tarjeta__icono { 
  width: 5rem; height: 5rem; background: rgba(59, 130, 246, 0.15); 
  border-radius: 1rem; margin-bottom: 1.5rem; border: 0.1rem solid rgba(59, 130, 246, 0.3);
}
.tarjeta__titulo { font-size: 1.8rem; margin-bottom: 1rem; color: var(--color-titulo); }
.tarjeta__texto { flex-grow: 1; margin-bottom: 2rem; color: var(--color-texto); }
.tarjeta__footer { margin-top: auto; }
.tarjeta__enlace { font-weight: 600; color: var(--color-primario); }
.tarjeta__enlace:hover { color: #60a5fa; text-decoration: underline; }

@media (min-width: 76.8rem) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 102.4rem) { .tarjetas { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   FOOTER (Global)
   ========================================================= */
.pie {
  background: #050506; border-top: 0.1rem solid rgba(255, 255, 255, 0.07);
  padding: 6rem 0 7rem 0; margin-top: auto;
}

.pie__grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 76.8rem) { .pie__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; } }

.pie__columna { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.pie__logo { display: block; margin-bottom: 2rem; max-width: 14rem; filter: brightness(0) invert(1); }
:root[data-theme="light"] .pie__logo { filter: brightness(0); }

.pie__copy { color: var(--color-titulo); font-weight: 600; font-size: 1.4rem; margin-bottom: 0.5rem; }
.pie__texto { color: var(--color-texto-muted); font-size: 1.4rem; }
.pie__titulo { color: var(--color-titulo); font-size: 1.6rem; font-weight: 600; margin-bottom: 2rem; }

.pie__nav { display: flex; flex-direction: column; gap: 1rem; width: 100%; align-items: flex-start; }
.pie__enlace { color: var(--color-texto-muted); font-size: 1.4rem; text-decoration: none; transition: color 0.3s ease; text-align: left; }
.pie__enlace:hover { color: var(--color-primario); }

.pie__sociales { display: flex; gap: 1.5rem; }

.social-link {
  color: #fff; background: rgba(255, 255, 255, 0.04);
  width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;
  border-radius: 0; transition: all 0.25s ease; border: 0.1rem solid rgba(255, 255, 255, 0.1);
}
:root[data-theme="light"] .social-link { color: #334155; border-color: #cbd5e1; }
.social-link svg { width: 2rem; height: 2rem; }
.social-link:hover {
  background: var(--color-titulo); color: var(--color-fondo); transform: translateY(-0.3rem);
  border-color: var(--color-titulo);
}

/* FOOTER CENTRADO EN MÓVIL */
@media (max-width: 76.8rem) {
  .pie { text-align: center; }
  .pie__grid { justify-items: center; }
  .pie__columna { align-items: center; text-align: center; }
  .pie__logo { margin-left: auto; margin-right: auto; }
  .pie__copy, .pie__texto, .pie__titulo, .pie__enlace { text-align: center; }
  .pie__nav { align-items: center; }
  .pie__sociales { justify-content: center; }
}

/* SCROLL REVEAL */
.panel--reveal {
  opacity: 0; transform: translateY(9rem) translateZ(0);
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1), transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.panel--reveal.is-visible { opacity: 1; transform: translateY(0) translateZ(0); }
@media (max-width: 600px) { .panel--reveal.is-visible { opacity: 1 !important; transform: none !important; } }
/* Accesibilidad / fallback: con movimiento reducido el contenido no se oculta */
@media (prefers-reduced-motion: reduce) {
  .panel--reveal { opacity: 1; transform: none; transition: none; }
}

/* BOTÓN FLOTANTE WHATSAPP */
.boton-flotante-wa {
  position: fixed; bottom: 3rem; right: 2rem; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  width: 6rem; height: 6rem; background-color: #25D366; color: #fff;
  border-radius: 50%; box-shadow: 0 0.4rem 1.5rem rgba(37, 211, 102, 0.4);
  opacity: 0; transform: scale(0.5); animation: wa-entrada 1s ease-out 2s forwards;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.boton-flotante-wa:hover { transform: scale(1.1); box-shadow: 0 0.6rem 2rem rgba(37, 211, 102, 0.6); background-color: #22c35e; }
.boton-flotante-wa svg { width: 3.2rem; height: 3.2rem; fill: currentColor; }
@keyframes wa-entrada { to { opacity: 1; transform: scale(1); } }
@media only screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) {
  .boton-flotante-wa { bottom: 9rem !important; }
}
@media (max-width: 480px) { .boton-flotante-wa { bottom: 2rem; right: 2rem; width: 5.5rem; height: 5.5rem; } }