/* ===========================================================
   NEKO · INICIO

   Port de `Inicio.dc.html` (handoff de Claude Design, 12/8/2026).

   QUÉ SE HA RESPETADO Y QUÉ SE HA CAMBIADO:

   · **Medidas y animaciones: las del diseño.** El banner a 16:4.5, las
     esquinas de 24, el cartel destacado a 3:4 con 288px de ancho, las
     miniaturas de 84px, los ocho @keyframes con sus tiempos.

   · **Tipografías y color: los del proyecto.** El mock traía Manrope y
     #F6EFE5 / #7A1728; aquí es Inter + Playfair sobre los tokens de
     `styles.css`, igual que en Mi Espacio y por el mismo motivo.

   · **La barra lateral NO se toca.** El diseño la reproduce entera
     (logo, menú, chip PRONTO, pie «NSC · 2026»), pero eso ya existe y lo
     pinta `nav.js` para las catorce páginas. Reimplantarla desde aquí
     habría dejado el inicio con un menú distinto al del resto.

   · **Los controles del banner se quedan.** El diseño los quita: su
     banner solo rota solo. Pero es contenido en movimiento que se
     autoavanza, y el criterio 2.2.2 de WCAG exige poder pararlo. El
     botón de pausa ya existía y se mantiene, junto a los puntos y las
     flechas, superpuestos sobre la imagen en vez de debajo.
   =========================================================== */

/* ---------------------------------------------------------
   ANIMACIONES — las del diseño, con sus nombres
   --------------------------------------------------------- */
@keyframes ini-rise  { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } }
@keyframes ini-fade  { from { opacity:0 } to { opacity:1 } }
@keyframes ini-pop   { 0% { opacity:0; transform:scale(.7) rotate(-12deg) } 55% { transform:scale(1.14) rotate(6deg) } 100% { opacity:1; transform:scale(1) rotate(0) } }
@keyframes ini-wink  { 0%,86%,100% { transform:rotate(0) scale(1) } 91% { transform:rotate(-9deg) scale(1.12) } 96% { transform:rotate(7deg) scale(1.08) } }
@keyframes ini-ken   { 0% { transform:scale(1.02) } 100% { transform:scale(1.11) } }

/* El emoji guiña cada seis segundos y el cartel del destacado hace un Ken
   Burns continuo. Son movimiento perpetuo, así que se apagan enteros para
   quien pida menos animación. */
@media (prefers-reduced-motion: reduce) {
  .ini-saludo *, .ini-banner *, .ini-eventos *,
  .ini-saludo, .ini-banner, .ini-eventos {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   SALUDO
   --------------------------------------------------------- */
.ini-saludo { margin-bottom: var(--space-4); }
.ini-saludo h1 {
  margin: 0;
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.9vw, 2.375rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  animation: ini-rise .75s cubic-bezier(.2,.7,.3,1) both;
}
.ini-neko {
  width: 52px; height: auto; display: block; flex: none;
  animation: ini-pop .8s cubic-bezier(.2,.8,.3,1) both,
             ini-wink 6s ease-in-out 1.2s infinite;
}
.ini-coma { color: var(--text-muted); }

/* El nick va con el degradado burdeos→oro recortado sobre el texto.
   `background-clip:text` necesita que el color sea transparente, y si el
   navegador no lo soporta el texto quedaría invisible: por eso el color
   base se declara antes y solo se pisa dentro del @supports. */
.ini-nick { color: var(--burgundy-700); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ini-nick {
    background: linear-gradient(92deg, var(--burgundy-700) 0%, #A8433F 45%, var(--ini-oro) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ---------------------------------------------------------
   BANNER DE PORTADA

   16:4.5 es la proporción del diseño, y la que se le pide al staff en el
   panel: 1600 × 450. `aspect-ratio` mantiene la caja aunque no haya
   ninguna imagen todavía, así que la portada no da un salto al cargar.
   --------------------------------------------------------- */
.ini-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 4.5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--burgundy-800);
  box-shadow: 0 10px 34px rgba(61,10,22,.16);
  margin-bottom: var(--space-4);
  animation: ini-rise .85s cubic-bezier(.2,.7,.3,1) .18s both;
}
/* Sin banners que enseñar la sección se esconde entera, en vez de dejar
   una caja burdeos vacía ocupando media portada. */
.ini-banner[hidden] { display: none; }

.ini-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s ease;
  pointer-events: none;
}
.ini-slide.es-activa { opacity: 1; pointer-events: auto; }
.ini-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El bisel interior y el degradado del pie, del diseño. Va por encima de
   la imagen pero no intercepta el clic. */
.ini-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
              inset 0 -70px 90px -60px rgba(92,15,32,.8);
}

/* Texto opcional sobre el banner: si el staff pone título o texto, se
   pintan abajo a la izquierda sobre el degradado que ya hay. */
.ini-slide-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 2vw, 26px) clamp(16px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 4px;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5);
  pointer-events: none;
}
.ini-slide-texto .tit {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.1;
}
.ini-slide-texto .sub { font-size: clamp(.8rem, 1.2vw, .95rem); color: rgba(255,255,255,.85); }

/* Controles superpuestos, abajo a la derecha. */
.ini-banner-mandos {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-full);
  background: rgba(20,6,10,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ini-banner-mandos button {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; transition: background .25s ease;
}
.ini-banner-mandos button:hover { background: rgba(255,255,255,.28); }
.ini-banner-mandos svg { width: 13px; height: 13px; }
.ini-banner .ico-play { display: none; }
.ini-banner.en-pausa .ico-play { display: block; }
.ini-banner.en-pausa .ico-pause { display: none; }

.ini-puntos { display: flex; gap: 6px; padding-inline: 3px; }
.ini-puntos button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.4); border: none; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.ini-puntos button[aria-selected="true"] { background: #fff; width: 18px; border-radius: var(--r-full); }

/* Con un solo banner no hay nada que recorrer ni que pausar. */
.ini-banner.es-unico .ini-banner-mandos { display: none; }

/* ---------------------------------------------------------
   PRÓXIMOS EVENTOS
   --------------------------------------------------------- */
.ini-eventos { display: flex; flex-direction: column; gap: 18px; margin-bottom: var(--space-4);
  animation: ini-rise .85s cubic-bezier(.2,.7,.3,1) .3s both; }
.ini-eventos-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ini-eventos-cab h2 { margin: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.ini-eventos-cab a { font-size: .82rem; font-weight: 700; color: var(--burgundy-700); }

/* ---------- el hueco reservado mientras llegan ----------
   Mide lo mismo que `.ini-destacado` a proposito: los eventos vienen de
   Firestore y tardan ~1,9 s, y sin esto la seccion aparecia de golpe y
   empujaba media portada hacia abajo. Las medidas se copian del
   destacado; si alli cambia el padding o el ancho del cartel, aqui
   tambien. */
.ini-esqueleto{
  display: flex; flex-wrap: wrap; gap: clamp(22px, 2.8vw, 44px);
  padding: clamp(22px, 2.2vw, 34px);
  background: linear-gradient(120deg, #6B1526, var(--burgundy-800) 60%, #4C0E1A);
  border-radius: 24px;
}
.ini-esqueleto-cartel{
  flex: none; width: clamp(200px, 21vw, 288px); aspect-ratio: 3/4;
  border-radius: 16px; background: rgba(255,255,255,.07);
}
.ini-esqueleto-datos{
  flex: 1 1 260px; display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.ini-esqueleto-datos span{
  display: block; height: 18px; border-radius: 9px; background: rgba(255,255,255,.07);
}
.ini-esqueleto-cartel, .ini-esqueleto-datos span{
  animation: ini-latido 1.4s ease-in-out infinite;
}
@keyframes ini-latido{50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){
  .ini-esqueleto-cartel, .ini-esqueleto-datos span{animation:none;}
}

/* ---------- el destacado ---------- */
.ini-destacado {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 2.8vw, 44px);
  padding: clamp(22px, 2.2vw, 34px);
  background: linear-gradient(120deg, #6B1526, var(--burgundy-800) 60%, #4C0E1A);
  border-radius: 24px; color: #fff;
  box-shadow: 0 10px 34px rgba(61,10,22,.18);
}
.ini-destacado-cartel {
  flex: none; width: clamp(200px, 21vw, 288px); aspect-ratio: 3/4;
  border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center;
}
.ini-destacado-cartel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: ini-ken 18s ease-in-out infinite alternate;
}
.ini-destacado-cartel .brand-logo { width: 64px; height: 92px; color: rgba(255,255,255,.22); }

/* `min-width` NO es 0, y es justo lo que arregla el desbordamiento en movil.
   El cartel de al lado es `flex:none` con 200 px de minimo, asi que en una
   pantalla de 375 px quedaban 77 px para esta columna: con `min-width:0` se
   dejaba aplastar hasta ahi en vez de forzar el salto de linea que el
   `flex-wrap:wrap` del padre ya ofrecia, y los dos botones —que van con
   `white-space:nowrap` y suman 176 px— se salian de la pantalla. Medido el
   15/8/2026 contra produccion: la portada tenia 436 px de ancho de scroll en
   una pantalla de 375.

   Con un minimo de 260 px, cuando no caben los dos al lado la columna salta
   sola debajo del cartel y se lleva el ancho entero. Sin media query: es el
   propio flex el que decide, asi que vale igual para 320 que para 430. */
.ini-destacado-datos {
  flex: 1 1 260px; min-width: min(100%, 260px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 14px 0;
}
.ini-et {
  padding: 7px 15px; border-radius: var(--r-full);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  font-size: .69rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ini-destacado-datos h3 {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 1.02;
  /* A 34 px, el nombre de un evento de una sola palabra larga no cabe en una
     pantalla estrecha, y `text-wrap:pretty` reparte lineas pero no parte
     palabras. Los titulos los escribe el club, asi que esto no se puede
     resolver acortando el texto. */
  text-wrap: pretty; overflow-wrap: break-word; max-width: 100%;
}
.ini-destacado-meta { margin: 0; font-size: 1.06rem; color: rgba(255,255,255,.8); }
.ini-destacado-acc { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.ini-btn-claro {
  padding: 15px 26px; border-radius: 12px; border: none;
  background: #fff; color: var(--burgundy-800);
  font-family: var(--font-ui); font-size: .94rem; font-weight: 700; white-space: nowrap;
  transition: transform .25s ease, box-shadow .3s ease;
}
.ini-btn-claro:hover { color: var(--burgundy-800); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.ini-btn-fantasma {
  padding: 15px 26px; border-radius: 12px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); color: #fff;
  font-family: var(--font-ui); font-size: .94rem; font-weight: 700; white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
.ini-btn-fantasma:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-2px); }

/* ---------- los siguientes, en rejilla ---------- */
.ini-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
@media (max-width: 380px) { .ini-rejilla { grid-template-columns: minmax(0, 1fr); } }

.ini-tarjeta {
  display: flex; align-items: center; gap: 18px; padding: 16px;
  background: var(--surface); border: 1px solid rgba(61,10,22,.09);
  border-radius: 18px; box-shadow: 0 2px 14px rgba(61,10,22,.06);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ini-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(61,10,22,.14); }
.ini-tarjeta-cartel {
  flex: none; width: 84px; aspect-ratio: 3/4; border-radius: 11px; overflow: hidden;
  background: var(--lienzo); border: 1px solid rgba(61,10,22,.08);
  display: grid; place-items: center;
}
.ini-tarjeta-cartel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ini-tarjeta-cartel .brand-logo { width: 26px; height: 38px; color: rgba(61,10,22,.22); }
.ini-tarjeta-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ini-tarjeta-et {
  font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--burgundy-700);
}
.ini-tarjeta-nom { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.15; }
.ini-tarjeta-meta { font-size: .82rem; color: rgba(61,10,22,.55); }

/* ---------------------------------------------------------
   EL ORO DE ESTA PANTALLA

   Mismo caso que en Mi Espacio: `styles.css` no tiene token de oro («SIN
   naranja, SIN oro», dice su cabecera) y el de `eawards.css` no se carga
   aquí. Solo se usa como remate del degradado del nick, sin texto
   encima, así que no necesita medida de contraste.
   --------------------------------------------------------- */
.shell-scroll { --ini-oro: #C9922B; }

/* ---------------------------------------------------------
   LOS MANDOS DEL BANNER, MAS PEQUEÑOS EN MOVIL (16/8/2026)

   A 375 px la capsula se comia el centro del banner y tapaba el texto
   que viene dentro del arte. Se encoge lo visible y se acerca a la
   esquina.

   ⚠️ LO QUE NO SE ENCOGE ES LA ZONA QUE SE PULSA. Los botones ya iban
   por debajo de los 44 px que pide el proyecto, y hacerlos mas pequenos
   a secas los dejaria casi imposibles de acertar con el dedo justo en la
   pantalla donde mas se usan. El `::after` estira el area sensible hasta
   44 px sin pintar nada: se ve un boton de 22 px y se pulsa uno de 44.
   --------------------------------------------------------- */
@media (max-width: 600px) {
  .ini-banner-mandos {
    right: 8px; bottom: 8px; gap: 5px;
    padding: 4px 6px;
    background: rgba(20,6,10,.55);   /* algo mas opaco: es mas pequeno */
  }
  .ini-banner-mandos button { width: 22px; height: 22px; position: relative; }
  .ini-banner-mandos svg { width: 11px; height: 11px; }

  /* El area de dedo, invisible y centrada en el boton. */
  .ini-banner-mandos button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }

  .ini-puntos { gap: 4px; padding-inline: 2px; }
  .ini-puntos button { width: 6px; height: 6px; }
  .ini-puntos button[aria-selected="true"] { width: 14px; }
}

/* ---------------------------------------------------------
   EL BANNER NO SE MUEVE A MANO (16/8/2026)

   Peticion del cliente: «quitar el poder mover el banner para que se
   pueda leer bien». Fuera las flechas y los puntos, en TODAS las
   medidas: el arte de los banners trae su propio texto y los mandos se
   le montaban encima. Los banners siguen rotando solos.

   ⚠️ EL BOTON DE PAUSA SE QUEDA, Y NO ES UN OLVIDO. Esto se mueve solo,
   y el criterio 2.2.2 de las WCAG exige poder pararlo: sin el, quien
   necesite mas tiempo para leer —o a quien el movimiento le moleste— no
   tiene forma de detenerlo. Ya estaba anotado en CLAUDE.md como decision
   tomada («los mandos se quedan aunque el diseño no los dibuje»).
   Al quedarse solo, la capsula pasa de ~150 px a ~40 y deja de tapar.

   Se ocultan con `display:none` y no quitando el HTML para no tocar
   `app.js`, que sigue pintando los puntos y moviendo el foco. `none` los
   saca tambien del arbol de accesibilidad, asi que un lector de pantalla
   no anuncia botones que no se ven.
   --------------------------------------------------------- */
#iniPrev,
#iniNext,
.ini-puntos { display: none; }