/* ==========================================================================
   COLEGIO HELICE — Capa de movimiento y detalles infantiles
   --------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css. Añade vida a todo el sitio sin tocar el
   sistema base: entradas animadas, garabatos flotantes (estrellas, puntos,
   hélices, plus, triángulos), contadores, marquesina, sello giratorio,
   ondas y microinteracciones. Todo con transform/opacity (60fps) y con
   apagado total en prefers-reduced-motion.
   Paleta: #F5BE0B dorado · #FFD24A dorado claro · #D9A505 dorado oscuro ·
           #1C252C carbón.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes entra {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes entra-rebote {
  0%   { opacity: 0; transform: translateY(30px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flotar-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-24px) rotate(6deg); }
}
@keyframes flotar-b {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50%      { transform: translateY(-18px) translateX(12px) rotate(-8deg); }
}
@keyframes flotar-c {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-14px) rotate(-5deg); }
  66%      { transform: translateY(10px) rotate(7deg); }
}
@keyframes balanceo {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(9deg); }
}

@keyframes girar        { to { transform: rotate(360deg); } }
@keyframes girar-inverso{ to { transform: rotate(-360deg); } }

@keyframes latido-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

@keyframes flotar-marco {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes cinta-mueve {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes subrayado-dibuja {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes resaltado-crece {
  from { background-size: 0% 42%; }
  to   { background-size: 100% 42%; }
}

@keyframes brillo-btn {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(260%) skewX(-18deg); }
}

@keyframes pop-num {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes onda-desliza {
  from { background-position-x: 0; }
  to   { background-position-x: 1440px; }
}

@keyframes rebota-pin {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* --------------------------------------------------------------------------
   2. ENTRADA DEL HERO (al cargar, sin esperar scroll)
   -------------------------------------------------------------------------- */
.hero-texto > * {
  opacity: 0;
  animation: entra 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-texto > *:nth-child(1) { animation-delay: 0.05s; }
.hero-texto > *:nth-child(2) { animation-delay: 0.18s; }
.hero-texto > *:nth-child(3) { animation-delay: 0.31s; }
.hero-texto > *:nth-child(4) { animation-delay: 0.44s; }

.hero .marco-helice {
  opacity: 0;
  animation: entra-rebote 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s forwards,
             flotar-marco 6s ease-in-out 1.4s infinite;
}

.hero-pagina-inner > * {
  opacity: 0;
  animation: entra 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-pagina-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-pagina-inner > *:nth-child(2) { animation-delay: 0.16s; }
.hero-pagina-inner > *:nth-child(3) { animation-delay: 0.27s; }
.hero-pagina-inner > *:nth-child(4) { animation-delay: 0.38s; }

/* Glow del hero: ahora late suavemente */
.hero::before { animation: latido-glow 7s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   3. CAPA DE GARABATOS FLOTANTES (generados por JS)
   -------------------------------------------------------------------------- */
.capa-garabatos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.35s ease-out;
}

.garabato {
  position: absolute;
  display: block;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.garabato.encendido { opacity: 1; }

.garabato svg { display: block; width: 100%; height: 100%; }

/* El contenido del hero/CTA siempre por encima de los garabatos */
.hero-inner,
.hero-pagina-inner,
.banda-cta-inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   4. SELLO GIRATORIO (insignia sobre la foto del hero)
   -------------------------------------------------------------------------- */
.sello {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sello-anillo {
  position: absolute;
  inset: 0;
  animation: girar 18s linear infinite;
}
.sello-anillo text {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--oro);
}

.sello-disco {
  position: absolute;
  inset: 0;
  background: var(--carbon);
  border-radius: 50%;
  border: 2px solid var(--oro);
  box-shadow: 0 14px 34px rgba(28, 37, 44, 0.42);
}

/* Selector con .sello para ganar en especificidad a `.marco-helice img`
   (si no, el isotipo se estira al 100% y se ve como flecha horizontal). */
.sello .sello-nucleo {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 30px;
  object-fit: contain;
  animation: balanceo 4s ease-in-out infinite;
}

@media (max-width: 767px) {
  .sello { width: 74px; height: 74px; left: -6px; bottom: auto; }
  .sello .sello-nucleo { width: auto; height: 22px; }
  .sello-anillo text { font-size: 8px; letter-spacing: 1px; }
}

/* --------------------------------------------------------------------------
   5. MARQUESINA (cinta de palabras con hélices)
   -------------------------------------------------------------------------- */
.cinta {
  display: flex;
  overflow: hidden;
  padding: 20px 0;
  background: var(--oro);
  border-top: 3px solid var(--carbon);
  border-bottom: 3px solid var(--carbon);
  user-select: none;
}

.cinta-pista {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 34px;
  padding-left: 34px;
  white-space: nowrap;
  animation: cinta-mueve 26s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }

.cinta-item {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--carbon);
}
.cinta-item.hueca {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--carbon);
}

.cinta-estrella {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  animation: girar 9s linear infinite;
}

@media (max-width: 767px) {
  .cinta-item { font-size: 20px; }
  .cinta-pista { gap: 24px; padding-left: 24px; }
}

/* --------------------------------------------------------------------------
   6. SUBRAYADOS Y RESALTES DIBUJADOS
   -------------------------------------------------------------------------- */
/* Palabra dorada del hero con garabato dibujado debajo */
.resalte {
  position: relative;
  display: inline-block;
}
.resalte::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -0.16em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C40 2 70 18 100 10 S170 2 198 12' fill='none' stroke='%23F5BE0B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  animation: subrayado-dibuja 0.9s ease 0.9s both;
}

/* Resalte con fondo que crece (otras páginas) */
.resalte-fondo {
  background-image: linear-gradient(180deg, transparent 58%, rgba(245, 190, 11, 0.42) 58%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 42%;
  animation: resaltado-crece 0.8s ease 0.5s forwards;
}

/* --------------------------------------------------------------------------
   7. CONTADORES
   -------------------------------------------------------------------------- */
.dato-numero.contando { animation: pop-num 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* --------------------------------------------------------------------------
   8. REVELADO — variantes direccionales y stagger
   -------------------------------------------------------------------------- */
.revelar[data-anim="izq"]  { transform: translateX(-42px); }
.revelar[data-anim="der"]  { transform: translateX(42px); }
.revelar[data-anim="zoom"] { transform: scale(0.9); }
.revelar[data-anim="rota"] { transform: rotate(-3deg) translateY(24px); }

.revelar[data-anim="izq"].visible,
.revelar[data-anim="der"].visible,
.revelar[data-anim="zoom"].visible,
.revelar[data-anim="rota"].visible { transform: none; }

/* Rebote suave para tarjetas al entrar */
.revelar[data-anim="rebote"] { transform: translateY(34px) scale(0.97); }
.revelar[data-anim="rebote"].visible {
  transform: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   9. MICROINTERACCIONES (hover con más gracia)
   -------------------------------------------------------------------------- */
/* Tarjetas de pilar: se inclinan un pelín al pasar */
.tarjeta-pilar { transition: transform var(--trans), box-shadow var(--trans); }
.tarjeta-pilar:hover { transform: translateY(-8px) rotate(-1.2deg); }
.tarjeta-pilar:hover .pilar-numero { animation: rebota-pin 0.6s ease; }

/* Tarjetas de nivel y persona: leve balanceo de la imagen */
.tarjeta-nivel:hover .tarjeta-nivel-img,
.tarjeta-persona:hover .persona-foto { transform: scale(1.05); }
.tarjeta-nivel-img,
.persona-foto { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Botón dorado con destello que cruza al pasar */
.btn-oro { position: relative; overflow: hidden; }
.btn-oro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.btn-oro:hover::after { animation: brillo-btn 0.75s ease; }

/* Iconos sociales que saltan al pasar */
.red-social:hover { animation: rebota-pin 0.5s ease; }

/* Isotipo (viñeta y marcas de agua) que gira lento y respira */
.seccion-oscura::after,
.hero-pagina::after { animation: girar 60s linear infinite; }
.banda-cta::after   { animation: girar-inverso 50s linear infinite; }

/* Enlace-flecha: la flecha rebota al pasar */
.enlace-flecha:hover::after { animation: rebota-pin 0.5s ease; }

/* --------------------------------------------------------------------------
   10. ONDA DIVISORIA (transición suave entre secciones)
   -------------------------------------------------------------------------- */
.onda-sep {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  line-height: 0;
}
.onda-sep svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   11. SEPARADOR DE HÉLICE — ahora con leve deriva
   -------------------------------------------------------------------------- */
.separador-helice { animation: onda-desliza 24s linear infinite; }

/* --------------------------------------------------------------------------
   12. FONDOS VIVOS — textura y luz en vez de bloques planos
   -------------------------------------------------------------------------- */
/* Secciones claras: patrón sutil de lunares (guiño infantil) */
.seccion-crema {
  background-color: var(--crema);
  background-image: radial-gradient(rgba(245, 190, 11, 0.11) 1.7px, transparent 1.8px);
  background-size: 30px 30px;
  background-position: 0 0;
}
.seccion-blanca {
  background-color: var(--blanco);
  background-image: radial-gradient(rgba(28, 37, 44, 0.05) 1.7px, transparent 1.8px);
  background-size: 32px 32px;
}

/* Secciones oscuras: capas de luz dorada en lugar de carbón plano */
.seccion-oscura {
  background-color: var(--carbon);
  background-image:
    radial-gradient(620px circle at 8% 6%, rgba(245, 190, 11, 0.10), transparent 60%),
    radial-gradient(540px circle at 94% 96%, rgba(245, 190, 11, 0.06), transparent 55%);
}

/* Reflector dorado que sigue al cursor en secciones oscuras */
.seccion-oscura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, -20%),
              rgba(245, 190, 11, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.seccion-oscura.cursor-activo::before { opacity: 1; }

/* --------------------------------------------------------------------------
   13. REFLECTOR EN TARJETAS (brilla donde está el mouse)
   -------------------------------------------------------------------------- */
.tarjeta,
.tarjeta-pilar,
.tarjeta-oscura,
.tarjeta-valor,
.tarjeta-alianza,
.tarjeta-nivel,
.tarjeta-persona { position: relative; }

.tarjeta::after,
.tarjeta-pilar::after,
.tarjeta-oscura::after,
.tarjeta-valor::after,
.tarjeta-alianza::after,
.tarjeta-nivel::after,
.tarjeta-persona::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(200px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(245, 190, 11, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tarjeta:hover::after,
.tarjeta-pilar:hover::after,
.tarjeta-oscura:hover::after,
.tarjeta-valor:hover::after,
.tarjeta-alianza:hover::after,
.tarjeta-nivel:hover::after,
.tarjeta-persona:hover::after { opacity: 1; }

/* En tarjetas con imagen el reflector no debe tapar la foto: va más suave */
.tarjeta-nivel::after,
.tarjeta-persona::after { background: radial-gradient(220px circle at var(--cx, 50%) var(--cy, 50%), rgba(245, 190, 11, 0.13), transparent 62%); }

/* --------------------------------------------------------------------------
   14. CARRUSEL DEL HERO (formato 1:1, crossfade + leve zoom)
   -------------------------------------------------------------------------- */
.carrusel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  overflow: hidden;
  z-index: 1;
}

/* Se usa selector descendente para ganar en especificidad a `.marco-helice img` */
.marco-helice .carrusel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radio-lg);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s ease;
  box-shadow: none;
}
.marco-helice .carrusel-slide.activa {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.9s ease, transform 6.5s ease-out;
}

.carrusel-puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 4;
}

.carrusel-punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.carrusel-punto:hover { background: rgba(255, 255, 255, 0.85); }
.carrusel-punto.activo {
  width: 26px;
  border-radius: 6px;
  background: var(--oro);
}

/* --------------------------------------------------------------------------
   15. FICHAS DE EQUIPO — trayectoria colapsable (misma altura)
   -------------------------------------------------------------------------- */
/* La línea de experiencia queda visible; la lista de estudios se pliega,
   así todas las tarjetas quedan a la misma medida y se expanden al pulsar. */
.persona-meta { margin-top: 18px !important; }

.trayectoria-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 12px;
  padding: 7px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--oro-oscuro);
  transition: color var(--trans);
}
.trayectoria-toggle:hover { color: var(--carbon); }
.trayectoria-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--trans);
}
.trayectoria-abierta .trayectoria-toggle::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Colapso por grid-template-rows (0fr -> 1fr): anima la altura sin JS de
   medición ni estilos inline, así ninguna cascada lo puede romper. */
.trayectoria-colapsable {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease;
}
.trayectoria-colapsable > .persona-estudios {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}
.trayectoria-abierta .trayectoria-colapsable {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   16. FOOTER — enlaces más claros y separación de secciones en móvil
   -------------------------------------------------------------------------- */
.footer-lista a,
.footer-contacto a {
  transition: color var(--trans);
}
.footer-lista a:hover {
  color: var(--oro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  /* Cada sección del footer se separa con una línea sutil para que se lea
     como bloques distintos (El colegio · Educación · Contacto). */
  .site-footer .footer-columna {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 26px;
  }
  /* Enlaces con más área táctil */
  .footer-lista a { padding: 4px 0; }
  .footer-lista { gap: 6px; }
}

/* --------------------------------------------------------------------------
   17. RESPETO A prefers-reduced-motion (apaga TODO el movimiento)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-texto > *,
  .hero .marco-helice,
  .hero-pagina-inner > *,
  .hero::before,
  .sello-anillo,
  .sello-nucleo,
  .cinta-pista,
  .cinta-estrella,
  .resalte::after,
  .resalte-fondo,
  .dato-numero.contando,
  .seccion-oscura::after,
  .hero-pagina::after,
  .banda-cta::after,
  .separador-helice,
  .garabato {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    background-size: 100% 42% !important;
  }
  /* Carrusel: sin animación ni zoom; solo la diapositiva activa queda visible */
  .marco-helice .carrusel-slide {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 0 !important;
  }
  .marco-helice .carrusel-slide.activa { opacity: 1 !important; }
  .trayectoria-colapsable { transition: none !important; }
  .capa-garabatos { display: none !important; }
  .btn-oro::after { display: none !important; }
}