/* ==========================================================================
   Asociación Ander Arteagabeitia — v3
   Sólo vive aquí lo que el CSS exige: tokens, reset, @keyframes, :hover,
   media queries y estados que activa el JS.
   La composición va en estilos en línea sobre el marcado (Construcción §1.3).
   ========================================================================== */

:root{
  /* Paleta — Estilo §2 */
  --crema:#f5f1e4;
  --tinta:#2c2e2a;
  --verde:#8ed462;
  --coral:#ff705d;
  --amarillo:#f5e211;
  --azul:#2ba0ff;
  --gris:#80827f;
  --gris-claro:#d5d5d4;
  --blanco:#ffffff;
  --caqui:#8f8355;

  /* Radios — Estilo §4. 63.75px es la firma: no se redondea a 64. */
  --r-xl:63.75px;
  --r-l:50px;
  --r-m:40px;
  --r-movil:46px;
  --r-pantalla:38px;

  /* Ritmo */
  --sec:clamp(80px,12vh,140px);
  --margen:clamp(24px,5vw,72px);
  --pad-card:clamp(28px,3.4vw,52px);
  --gap:clamp(20px,2.5vw,34px);
  --rail:84px;

  /* Movimiento — Estilo §5 */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* El body NO lleva overflow-x: lo convertiría en contenedor de scroll y
   rompería el position:sticky de la sección de datos (Construcción §1.1). */
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}

/* --- Desplazamiento del contenido por el rail ---------------------------- */
.shell{margin-left:var(--rail)}

/* --- Hueco de imagen ----------------------------------------------------- */
/* Las fotos vienen recortadas, sin fondo: el hueco no lleva relleno para que
   la imagen se integre en el crema. Vacío se marca con una guía tenue que
   desaparece sola en cuanto hay <img> dentro. */
.slot{position:relative}
/* Marcador: velo y guía viven en el estado vacío, así que se van solos en
   cuanto el hueco tiene su <img>. */
.slot:not(:has(img)){background:rgba(44,46,42,.07)}
.slot:not(:has(img))::after{
  content:"";position:absolute;inset:0;
  border:1px dashed rgba(44,46,42,.16);
  border-radius:inherit;pointer-events:none;
}
.slot > img{width:100%;height:100%;object-fit:contain}
/* Dentro del chasis tinta del móvil un velo oscuro es invisible: la guía de
   montaje se aclara para que el hueco se lea como pantalla mientras esté
   vacío. Desaparece igualmente en cuanto llega el pantallazo. */
.slot--oscuro:not(:has(img))::after{
  background:rgba(245,241,228,.07);
  border-color:rgba(245,241,228,.24);
}

/* --- Rail --------------------------------------------------------------- */
.rail-link{position:relative;transition:color .3s var(--ease)}
.rail-link:hover{color:var(--tinta)}
.rail-link .pill{
  position:absolute;inset:-8px -5px;border-radius:var(--r-l);
  background:var(--verde);opacity:0;transform:scale(.8);
  transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:-1;
}
.rail-link.is-active{color:var(--tinta)}
.rail-link.is-active .pill{opacity:1;transform:scale(1)}
.rail-cta:hover{transform:scale(1.08)}

/* --- Botones ------------------------------------------------------------ */
.btn{cursor:pointer;border:0;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-outline:hover{background:var(--tinta);color:var(--crema)}
.btn-outline:hover .dot{background:var(--crema)}

/* --- Hero: animación letra a letra -------------------------------------- */
.letra{display:inline-block;vertical-align:top;opacity:0;animation:letraSube .9s var(--ease) forwards}
@keyframes letraSube{
  from{opacity:0;transform:translateY(56px)}
  to{opacity:1;transform:translateY(0)}
}

/* --- Marquesinas -------------------------------------------------------- */
.marquee{display:flex;width:max-content;will-change:transform}
.marquee-izq{animation:marqIzq linear infinite}
.marquee-der{animation:marqDer linear infinite}
@keyframes marqIzq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqDer{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.contorno{
  color:transparent;
  -webkit-text-stroke:1px var(--crema);
}

/* --- Datos: tarjetas apiladas ------------------------------------------- */
.dato-card{will-change:transform;transform-origin:bottom center;transition:transform .52s var(--ease)}

/* --- Carrusel de mensajes ----------------------------------------------- */
.sin-barra{scrollbar-width:none;-ms-overflow-style:none}
.sin-barra::-webkit-scrollbar{display:none}
.flecha{cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.flecha:hover{transform:scale(1.08)}

/* --- Paneles de la asociación ------------------------------------------- */
.pilar{transition:flex-grow .65s var(--ease)}
@media (min-width:1001px){
  .pilar:hover{flex-grow:1.5}
}

/* --- Formulario --------------------------------------------------------- */
.campo{width:100%;min-width:0;transition:box-shadow .3s var(--ease)}
.campo:focus{outline:none;box-shadow:0 0 0 2px var(--verde)}
.campo::placeholder{color:var(--gris)}

/* --- Historia: el texto acompaña a la foto ------------------------------- */
/* El sticky falla en silencio si algún antepasado tiene overflow distinto de
   visible, o si la foto no es más alta que el texto: de ahí el 3/4. */
.texto-sticky{position:sticky;top:clamp(40px,9vh,90px)}

/* --- Los que están al lado ---------------------------------------------- */
/* La foto sobresale por encima del borde de la tarjeta verde. Por eso la
   tarjeta NO puede llevar overflow:hidden. */
.almu-foto{margin-top:calc(-1 * clamp(34px,5vw,78px))}

/* --- Enlaces del pie ---------------------------------------------------- */
.pie-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;transition:opacity .3s var(--ease)}
.pie-link:hover{opacity:.6}

/* --- Tirabuzón ---------------------------------------------------------- */
.tirabuzon{transition:color .6s var(--ease)}

/* ==========================================================================
   TRAMOS RESPONSIVOS
   El corte funcional sigue siendo 1000px: por debajo desaparecen el rail y la
   pila anclada. Los demás cortes son de composición.
     <=479  móvil estrecho    480–699  móvil
     700–999 tablet           1000–1279 portátil        >=1280 escritorio
   ========================================================================== */

/* --- Tokens por tramo ---------------------------------------------------- */
/* La firma de 63.75px se mantiene intacta de 700px hacia arriba, que es donde
   la tarjeta tiene ancho para sostenerla. Por debajo, un radio de 63.75px
   sobre 327px de ancho es el 19% y la tarjeta pierde la forma. */
@media (max-width:699px){
  :root{
    --r-xl:clamp(26px,7.5vw,40px);
    --r-l:clamp(22px,6vw,32px);
    --r-m:clamp(18px,5vw,26px);
    --r-movil:38px;
    --r-pantalla:30px;
    --sec:clamp(64px,9vh,96px);
    --pad-card:26px;
    --gap:16px;
  }
}

/* --- Tablet y por debajo: sin rail, sin pila anclada --------------------- */
@media (max-width:1000px){
  .shell{margin-left:0;padding-bottom:104px}
  .rail{display:none !important}
  .barra-movil{display:flex !important}
  .tirabuzon{display:none !important}
  .una-col{grid-template-columns:minmax(0,1fr) !important}

  /* Datos: baraja horizontal. En un teléfono el gesto de pasar tarjetas es
     horizontal, y el scroll vertical se deja en paz. */
  .datos-sec{height:auto !important}
  .datos-panel{
    position:static !important;height:auto !important;
    grid-template-columns:minmax(0,1fr) !important;
    padding:var(--sec) 0 !important;gap:clamp(24px,4vh,40px) !important;
    align-items:stretch !important;
  }
  .texto-sticky{position:static}
  .almu-foto{margin-top:0}
  .datos-aside{padding:0 var(--margen)}
  .datos-aside > p:last-child{display:none !important}
  .datos-marco{
    position:relative !important;height:auto !important;
    overflow-x:auto !important;overflow-y:visible !important;
    display:flex;gap:var(--gap);scroll-snap-type:x mandatory;
    padding:0 var(--margen) 12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .datos-marco::-webkit-scrollbar{display:none}
  .dato-card{
    position:relative !important;inset:auto !important;
    transform:none !important;opacity:1 !important;
    flex:0 0 auto;width:86%;max-width:560px;
    height:min(74svh,620px);scroll-snap-align:center;
  }

  /* Etiquetas: la tarjeta entra en el flujo, entre las marquesinas. El
     contenedor de las tiras desaparece del maquetado (display:contents) para
     que las tres filas y la tarjeta sean hermanas y se puedan ordenar: dos
     marquesinas, la tarjeta, y una más debajo. */
  .etiqueta-sec{
    padding:clamp(48px,8vh,220px) 0 !important;
    display:flex;flex-direction:column;gap:clamp(4px,1vh,14px);
  }
  .etiqueta-tiras{display:contents !important}
  .etiqueta-tiras > div:nth-child(1){order:1}
  .etiqueta-tiras > div:nth-child(2){order:2}
  .etiqueta-card{order:3}
  .etiqueta-tiras > div:nth-child(3){order:4}
  .etiqueta-card{
    position:static !important;transform:none !important;
    width:auto !important;max-width:none !important;
    margin:clamp(24px,4vh,40px) var(--margen) !important;
  }

  /* Pilares: altura de contenido, no media pantalla vacía por cada uno */
  .pilares{flex-direction:column}
  .pilar{min-height:0 !important;flex:0 0 auto !important;padding:clamp(32px,6vw,52px) !important}

}

/* --- Tablet: la foto del hero vuelve, sin comerse el texto --------------- */
/* A 72svh de alto la foto ocupaba el 59% del ancho y el párrafo quedaba
   debajo, ilegible. Dimensionada por ancho deja siempre la mitad libre. */
@media (min-width:700px) and (max-width:1000px){
  .hero-foto{width:min(38vw,360px) !important;height:auto !important}
  #top .una-col{max-width:50%}
}

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width:699px){
  .hero-foto{display:none !important}   /* detrás de un titular de 46px no se lee */
  .msg-flechas{display:none !important} /* en táctil sobran y ocupan 52px cada una */
  .hero-botones{flex-direction:column;align-items:stretch}
  .hero-botones .btn{justify-content:center}
  .pie-enlaces{justify-content:flex-start !important}
  .historia-foto{max-width:420px;aspect-ratio:3/4 !important}
  .equipo-card{max-width:320px;margin:0 auto}
  .dato-card{width:88%}
}

/* --- Equipo a dos columnas en cuanto hay ancho --------------------------- */
@media (min-width:480px) and (max-width:1000px){
  .equipo-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .equipo-card{max-width:none}
}

/* --- Portátil: el panel de datos respira ---------------------------------- */
@media (min-width:1001px) and (max-width:1279px){
  .datos-panel{grid-template-columns:.7fr 1.3fr !important}
}

/* --- Pantalla baja: el marco se estira para que no se recorte el texto --- */
@media (min-width:1001px) and (max-height:820px){
  .datos-marco{height:88vh !important}
}

/* --- Barra inferior de navegación ---------------------------------------- */
.barra-movil{display:none}
.hoja-capitulos{display:none}
@media (max-width:1000px){
  .barra-movil{
    position:fixed;left:0;right:0;bottom:0;z-index:60;min-height:64px;
    background:var(--crema);border-top:1px solid var(--gris-claro);
    align-items:center;justify-content:space-between;
    padding:8px 16px 8px var(--margen);
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .barra-movil .capitulo{
    font-size:13px;font-weight:500;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gris);
    display:inline-flex;align-items:center;gap:8px;min-height:44px;
    background:none;border:0;padding:0;cursor:pointer;
  }
  .barra-movil .capitulo svg{transition:transform .35s var(--ease)}
  .barra-movil .capitulo[aria-expanded="true"] svg{transform:rotate(180deg)}

  .hoja-capitulos{
    display:block;position:fixed;left:0;right:0;bottom:64px;z-index:59;
    background:var(--crema);border-top:1px solid var(--gris-claro);
    transform:translateY(101%);visibility:hidden;
    transition:transform .4s var(--ease),visibility .4s var(--ease);
  }
  .hoja-capitulos[data-abierta]{transform:translateY(0);visibility:visible}
  .hoja-capitulos a{
    display:flex;align-items:center;min-height:56px;
    padding:0 var(--margen);font-size:16px;font-weight:500;
    border-bottom:1px solid var(--gris-claro);
  }
  .hoja-capitulos a:last-child{border-bottom:0}
  .hoja-capitulos a.is-active{color:var(--verde)}
}

/* --- Línea de progreso: el tirabuzón por debajo de 1000px ---------------- */
/* Toma el mismo color por sección que ya calcula pintaSwirl(). */
.progreso{display:none}
@media (max-width:1000px){
  .progreso{
    display:block;position:fixed;left:0;top:0;height:3px;z-index:61;
    background:currentColor;color:var(--caqui);
    transition:color .6s var(--ease);width:0;
  }
}

/* ==========================================================================
   CTA FLOTANTE DE LA CARTA SEMANAL
   ========================================================================== */

/* --- Disparadores -------------------------------------------------------- */
.subtab,.subbar{transition:transform .4s var(--ease),opacity .4s ease,box-shadow .4s ease}
.subtab:hover{transform:translateY(-3px)}
.subbar:hover{transform:translateY(-2px)}
.subtab.oculto{opacity:0;pointer-events:none;transform:translateY(160%)}
/* El de móvil vive dentro de la barra, así que se apaga sin desplazarse:
   deslizándolo asomaría por debajo de la barra. */
.subbar.oculto{opacity:0;pointer-events:none}

/* --- Velo ---------------------------------------------------------------- */
.subveil{opacity:0;pointer-events:none;transition:opacity .45s ease}
.subveil.abierto{opacity:1;pointer-events:auto}

/* --- Panel --------------------------------------------------------------- */
.subpanel{position:fixed;z-index:70;transition:transform .55s var(--ease)}

@media (min-width:1001px){
  .subpanel{
    right:0;bottom:24px;width:min(420px,42vw);
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    transform:translateX(103%);
    max-height:88svh;overflow-y:auto;
  }
  .subpanel.abierto{transform:translateX(0)}
  .solo-movil{display:none !important}
}

@media (max-width:1000px){
  .subpanel{
    left:0;right:0;bottom:0;
    border-radius:40px 40px 0 0;
    transform:translateY(103%);
    max-height:92vh;overflow-y:auto;
  }
  .subpanel.abierto{transform:translateY(0)}
  .solo-desktop{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .letra{animation:none;opacity:1}
  .marquee-izq,.marquee-der{animation:none}
  .dato-card{transition:none}
  .hoja-capitulos{transition:none}
  .subpanel,.subveil,.subtab,.subbar{transition:none}
  /* La línea de progreso se queda: es información, no decoración. */
}