/* ============================================================
   312 · three-twelve — landing de validación (IONOS)
   Paleta tomada de layout/layout.jpeg
   ============================================================ */

:root{
  --rojo:#FF3B14;          /* color de marca — sustituye al azul del tema */
  --rojo-osc:#E22F0B;
  --ink:#0B0B0B;           /* negro */
  --ink-2:#1A1A1A;
  --hueso:#EAE7E0;         /* beige de fondo */
  --hueso-cl:#F5F4F0;
  --blanco:#FFFFFF;
  --muted:#8A887F;
  --linea:rgba(11,11,11,.14);

  --f-display:'Anton',Impact,sans-serif;
  --f-titulo:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-texto:'Inter',system-ui,-apple-system,sans-serif;
  --f-marker:'Permanent Marker',cursive;

  --nav-h:64px;
  --wrap:min(1180px,90vw);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--hueso);color:var(--ink);
  font-family:var(--f-texto);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
sup{font-size:.5em;vertical-align:super;line-height:0}
::selection{background:var(--rojo);color:var(--blanco)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--rojo);outline-offset:3px;
}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--ink);color:var(--hueso);padding:10px 14px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- logo ---------- */
.logo{
  font-family:var(--f-titulo);font-weight:700;font-size:20px;
  letter-spacing:-.02em;line-height:1;white-space:nowrap;
}
.logo__dot{color:inherit}
.logo__hy{margin:0 .04em}
.logo--sm{font-size:17px;margin:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-texto);font-weight:700;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 28px;border:2px solid transparent;border-radius:0;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s;
  text-align:center;
}
.btn--red{background:var(--rojo);color:var(--blanco);border-color:var(--rojo)}
.btn--red:hover{background:var(--ink);border-color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--hueso-cl);border-color:var(--ink)}
.btn--ink:hover{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.btn--ghost-light{background:transparent;color:var(--blanco);border-color:var(--blanco)}
.btn--ghost-light:hover{background:var(--blanco);color:var(--rojo)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;background:var(--hueso);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.nav.is-stuck{border-bottom-color:var(--linea);box-shadow:0 1px 14px rgba(0,0,0,.05)}
.nav__in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 0;border-bottom:2px solid transparent;transition:.16s;
}
.nav__links a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
.nav__links .nav__cta{
  background:var(--rojo);color:var(--blanco);padding:11px 20px;border-bottom:none;
}
.nav__links .nav__cta:hover{background:var(--ink);color:var(--blanco)}

/* Instagram en la nav. Va como icono y no como palabra a proposito: la
   barra tiene un solo boton rojo y ese es el registro. Un enlace de texto
   mas competiria con el CTA; el icono se reconoce sin leerlo y no pesa.
   El area pulsable son 40px aunque el dibujo mida 19. */
.nav__links .nav__ig{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-8px;
  color:var(--ink);border-bottom:none;border-radius:50%;
  transition:color .16s,background .16s;
}
.nav__links .nav__ig:hover{color:var(--rojo);background:rgba(11,11,11,.05);border-bottom-color:transparent}

/* El @usuario bajo el boton de la seccion de Instagram. */
.ig__user{
  margin:12px 0 0;font-family:var(--f-titulo);font-size:14px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);
}

.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;height:2.5px;background:var(--ink);margin:5px 0;transition:.2s;transform-origin:center}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu-movil{display:none;flex-direction:column;border-top:1px solid var(--linea);background:var(--hueso)}
.menu-movil[hidden]{display:none}
.menu-movil a{
  padding:16px 5vw;border-bottom:1px solid var(--linea);
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

@media (max-width:860px){
  .nav__links{display:none}
  .burger{display:block}
  .menu-movil:not([hidden]){display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:min(84vh,780px);
  display:flex;align-items:center;justify-content:center;
  background:#2A2A28;overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:38% center;filter:grayscale(1) contrast(1.08)}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45))}
.hero__in{
  position:relative;z-index:2;text-align:center;color:var(--blanco);
  width:100%;padding:70px 6vw calc(88px + 2.6vw) 50%;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
/* Por que el pie lleva vw y no un numero fijo:
   la cinta esta girada -6deg, asi que cuanto mas a la derecha se mira, mas
   alto pasa. El bloque de texto vive en la mitad derecha (padding izquierdo
   del 50%), o sea a ~0,24 anchos de pantalla del centro de la cinta, y ahi
   sube 0,24 * tan(6deg) = 2,5% del ancho. En una panoramica de 3440 px son
   87 px: con el pie fijo en 96 px la cinta pasaba por encima del boton — y
   ademas lo tapaba, porque va en z-index 3 y el texto en 2.
   El pie crece ahora al mismo ritmo que sube la cinta. En movil no aplica:
   alli el bloque va centrado, la cinta pasa recta y la regla de abajo manda. */
.tag{position:relative;line-height:1}
.tag__img{width:min(560px,40vw);filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.tag__img + .tag__fallback{display:none}
.tag__fallback{
  font-family:var(--f-display);font-size:clamp(80px,12vw,150px);
  color:var(--rojo);letter-spacing:-.03em;display:block;
  transform:rotate(-4deg);text-shadow:0 6px 26px rgba(0,0,0,.4);
}
.tag--sm .tag__img{width:min(230px,40vw)}
.hero__logo{
  font-family:var(--f-titulo);font-weight:700;font-size:clamp(22px,4.2vw,46px);
  letter-spacing:-.02em;margin:calc(min(560px,40vw) * -.126) 0 8px;color:var(--blanco);
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
/* Claim bajo el logo: mismo hueco que dejaba antes el logo (26px) para que
   el CTA no se suba, con el margen ahora repartido entre los dos. */
/* En negro, no en blanco: la foto es clara casi entera y en movil el claim cae
   justo sobre la camiseta blanca del chico. El halo es claro, no oscuro — es
   lo que lo despega de la franja oscurecida del pie. */
.hero__claim{
  /* Archivo y no Inter: es la del logo, que va justo encima, e Inter solo esta
     cargada hasta 700. Con el cuerpo mas grande se afloja el interletraje — en
     negrita y muy espaciado, las palabras se desarman. */
  font-family:var(--f-titulo);font-weight:800;
  font-size:clamp(13px,1.9vw,19px);letter-spacing:.10em;text-transform:uppercase;
  margin:0 0 26px;color:var(--ink);
  text-shadow:0 1px 12px rgba(255,255,255,.62);
}
.hero__cta{box-shadow:0 8px 30px rgba(0,0,0,.28)}

@media (max-width:900px){
  /* No caben las dos mitades: el bloque pasa a ancho completo y se pega al
     pie, para que el grafiti caiga sobre la espalda y no le tape la gorra al
     chico. El encuadre ya no se toca aquí: a partir de este mismo ancho el
     <picture> del HTML sirve hero-movil.*, un recorte vertical hecho aparte.
     align-self:stretch es lo que hace que justify-content:flex-end sirva de
     algo: .hero centra sus hijos, asi que sin estirar, el bloque medía justo
     lo que ocupa y el flex-end no movia nada. Al quedar centrado, el CTA
     flotaba a media altura y caia encima del logo de la camiseta — y cuanto
     mas alta la pantalla, mas arriba caia, porque el bloque sube la mitad de
     lo que baja la camiseta. Anclado abajo, el boton se queda siempre en la
     franja limpia entre el estampado y la cinta.
     El pie de 92px sale de esa franja: la cinta gira -6deg y por el extremo
     derecho del boton pasa a ~69px del fondo; el estampado, que escala con
     el alto del hero, no baja de ~157px ni en la pantalla mas corta. */
  .hero__in{padding:110px 5vw 92px;justify-content:flex-end;align-self:stretch}
  .tag__img{width:min(420px,62vw)}
  .hero__logo{margin-top:calc(min(420px,62vw) * -.126)}
}

/* ---------- cinta diagonal NEW DROP SOON ----------
   El bucle es exacto: el JS deja N grupos idénticos en la pista y el paso
   de la animación es 100/N %, o sea justo un grupo. Sin JS quedan los 2
   grupos del HTML y el paso por defecto (50%) sigue cuadrando. */
.ribbon{
  position:absolute;z-index:3;bottom:26px;right:-8%;width:120%;
  transform:rotate(-6deg);background:var(--rojo);
  padding:10px 0;overflow:hidden;pointer-events:none;
}
.ribbon__track{
  display:flex;width:max-content;will-change:transform;
  animation:ribbon-slide var(--ribbon-dur,20s) linear infinite;
}
.ribbon__grupo{display:flex;flex:0 0 auto}
.ribbon__track span{
  font-family:var(--f-titulo);font-weight:800;font-style:italic;
  font-size:15px;letter-spacing:.08em;color:var(--blanco);white-space:nowrap;padding-right:34px;
}
@keyframes ribbon-slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--ribbon-paso,50%) * -1),0,0)}
}
/* fuera de pantalla no pinta nada: se para y se ahorra batería */
.ribbon.is-fuera .ribbon__track{animation-play-state:paused}
/* 12px menos que en escritorio: son los que le faltaban al CTA para no rozar
   la cinta ahora que el bloque del hero baja hasta el pie. Va aqui y no en el
   media query del hero porque aquel esta antes que la regla de arriba y, a
   igual especificidad, mandaba el bottom:26px. */
@media (max-width:900px){
  .ribbon{bottom:14px}
}

/* ============================================================
   BANDAS
   ============================================================ */
.band{padding:clamp(64px,9vw,110px) 0}
.band--red{background:var(--rojo);color:var(--blanco)}
.band--bone{background:var(--hueso);color:var(--ink)}
.band--ink{background:var(--ink);color:var(--hueso-cl)}

.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px;
}
.eyebrow--light{color:rgba(255,255,255,.72)}
.eyebrow--right{text-align:right}

.h-lede{
  font-family:var(--f-titulo);font-weight:500;
  font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 26px;
}
.h-lede em{font-style:italic;font-weight:700}
.h-lede--sm{font-size:clamp(26px,3.6vw,40px)}

.prose p{margin:0 0 15px;font-size:15px;line-height:1.68;max-width:52ch}
.prose p:last-child{margin-bottom:0}
.prose--tight p{font-size:15px}
.prose--tight{margin:0 0 26px}

/* ---------- manifiesto ---------- */
.manifiesto{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(28px,5vw,64px);align-items:center}
.manifiesto__art{position:relative;text-align:center}
.manifiesto__art img{margin-inline:auto;transform:rotate(-3deg)}
.manifiesto__art img + .manifiesto__art-fb{display:none}
.manifiesto__art-fb{
  font-family:var(--f-marker);font-size:clamp(34px,5.5vw,58px);line-height:1.02;
  color:var(--blanco);display:block;transform:rotate(-5deg);
}
.manifiesto__foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:clamp(40px,6vw,74px);flex-wrap:wrap;
}
.cities-line{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.cities-line b{opacity:.6;margin:0 4px}
@media (max-width:760px){.manifiesto{grid-template-columns:1fr}.manifiesto__art{order:-1}}

/* ---------- números ---------- */
.grid-num{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linea)}
.cell{background:var(--hueso-cl);padding:30px 24px 26px;display:flex;flex-direction:column;gap:8px}
.cell__n{font-family:var(--f-display);font-size:clamp(42px,5.5vw,62px);line-height:.9;color:var(--rojo)}
.cell__n i{font-style:normal;opacity:.45;margin:0 1px}
.cell__l{font-size:13px;line-height:1.5;color:#4A4843;max-width:26ch}
.cell--red{background:var(--rojo)}
.cell--red .cell__n{color:var(--blanco)}
.cell--red .cell__l{color:rgba(255,255,255,.9)}
@media (max-width:860px){.grid-num{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-num{grid-template-columns:1fr}}

/* ============================================================
   CONTADOR + FORMULARIO
   ============================================================ */
.comunidad__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);align-items:start}
.comunidad__count{position:sticky;top:calc(var(--nav-h) + 34px)}
.count__label{
  font-family:var(--f-titulo);font-weight:800;font-style:italic;
  font-size:clamp(24px,3.4vw,38px);color:var(--rojo);margin:0 0 2px;letter-spacing:-.02em;
}
.count{
  font-family:var(--f-titulo);font-weight:800;font-style:italic;
  font-size:clamp(38px,7vw,76px);line-height:1;letter-spacing:-.035em;
  display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;
}
.count i{color:var(--rojo);font-style:normal;padding:0 2px}
.count__keys{
  display:flex;gap:2px;margin:10px 0 0;padding:0;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.count__keys span{flex:1;max-width:25%}
.count__note{margin:20px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- formulario ---------- */
.form{margin-top:6px}
.field{margin-bottom:16px}
.field--half{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label,.field--half label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:7px;color:#3B3934;
}
.req{color:var(--rojo)}
.opt{color:var(--muted);font-weight:600;letter-spacing:.08em;text-transform:none;font-size:10.5px}
.field input,.field select{
  width:100%;padding:14px 15px;font-family:var(--f-texto);font-size:15px;
  color:var(--ink);background:var(--blanco);
  border:1.5px solid var(--ink);border-radius:0;
  transition:border-color .16s,box-shadow .16s;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B0B0B' stroke-width='1.8' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer;
}
.field input::placeholder{color:#A9A79F}
.field input:hover,.field select:hover{border-color:var(--rojo)}
.field input:focus,.field select:focus{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(255,59,20,.16);outline:none}
.field.is-bad input,.field.is-bad select{border-color:#C2260A;background:#FFF6F4}
.hint{margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.err{margin:6px 0 0;font-size:12px;font-weight:600;color:#C2260A;min-height:0}
.err:empty{display:none}
/* ---------- LA PRENDA ----------
   Dos columnas: la letra a la izquierda y la plancha de estudio a la derecha.
   El #F9F8F4 de la plancha es EXACTAMENTE el fondo con el que sale la lámina
   de herramientas/preparar-prenda.py (la constante FONDO del script). Si se
   toca uno hay que tocar el otro: en cuanto se separan un par de niveles,
   aparece el canto de la foto recortado contra la plancha. */
.prenda__in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);align-items:center;
}
.prenda__p{font-size:15px;line-height:1.7;color:#55534A;margin:0 0 24px;max-width:44ch}

/* La ficha no describe la prenda, la enumera: lo que se ve en la foto y no
   hace falta contar con frases. */
.prenda__ficha{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.prenda__ficha li{
  position:relative;padding-left:22px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.prenda__ficha li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--rojo);
}
.prenda__ficha sup{font-size:.62em;vertical-align:super}

.prenda__cta{
  font-family:var(--f-texto);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--rojo);
}
.prenda__cta:hover{color:var(--rojo)}

.prenda__plancha{margin:0;background:#F9F8F4}
.prenda__plancha img{display:block;width:100%;height:auto}

@media (max-width:820px){
  /* En columna, y la plancha sin pasarse de grande: a ancho completo la
     camiseta pide toda la pantalla y el resto de la sección se pierde. */
  .prenda__in{grid-template-columns:1fr;gap:24px}
  .prenda__plancha{max-width:420px;margin-inline:auto}
  .prenda__p{margin-bottom:20px}
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.check{display:flex;gap:11px;align-items:flex-start;margin:20px 0 6px;cursor:pointer}
.check input{
  flex:0 0 auto;width:19px;height:19px;margin-top:2px;accent-color:var(--rojo);cursor:pointer;
}
.check span{font-size:12.5px;line-height:1.55;color:#3B3934}
.check a{text-decoration:underline;text-underline-offset:2px}
.check a:hover{color:var(--rojo)}

.form button[type="submit"]{margin-top:14px}
.form__note{margin:12px 0 0;font-size:12px;color:var(--muted);text-align:center}
.form__msg{margin:16px 0 0;font-size:14px;font-weight:600;padding:0}
.form__msg:empty{display:none}
.form__msg.is-ok{background:var(--ink);color:var(--hueso-cl);padding:16px 18px;line-height:1.5}
.form__msg.is-bad{background:#FFF0EC;color:#C2260A;padding:14px 16px;border-left:3px solid #C2260A}
/* Ni bien ni mal: hay que decidir algo. Ni verde ni rojo — hueso y borde negro. */
.form__msg.is-aviso{background:var(--hueso-cl);color:var(--ink);padding:16px 18px;border-left:3px solid var(--ink);line-height:1.5}

/* ---------- Elegir entre cambiar la reserva o apartar otra ---------- */
.decidir{display:grid;gap:2px;margin-top:14px;background:var(--linea)}
.decidir__op{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--blanco);border:0;padding:14px 16px;
  font-family:var(--f-texto);transition:background .15s,color .15s;
}
.decidir__op:hover{background:var(--ink)}
.decidir__op:hover .decidir__t{color:var(--blanco)}
.decidir__op:hover .decidir__s{color:rgba(255,255,255,.72)}
.decidir__op--nueva .decidir__t{color:var(--rojo)}
.decidir__op--nueva:hover{background:var(--rojo)}
.decidir__op--nueva:hover .decidir__t{color:var(--blanco)}
.decidir__t{margin:0;font-size:14px;font-weight:700;letter-spacing:.01em}
.decidir__s{margin:4px 0 0;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--muted)}
.decidir__tope{margin:0;background:var(--blanco);padding:14px 16px;font-size:12.5px;color:var(--muted)}

/* ---------- Recuperar la referencia ---------- */
.recordar{margin-top:22px;border-top:1px solid var(--linea);padding-top:16px}
.recordar__link{
  background:none;border:0;padding:0;cursor:pointer;
  font:600 12.5px var(--f-texto);color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.recordar__link:hover{color:var(--rojo)}
.recordar__form{margin-top:14px}
.recordar__lab{
  display:block;margin-bottom:7px;
  font:700 10.5px var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.recordar__fila{display:flex;gap:8px;flex-wrap:wrap}
.recordar__fila input{
  flex:1;min-width:190px;padding:13px 15px;
  font:15px var(--f-texto);color:var(--ink);background:var(--blanco);
  border:1.5px solid var(--ink);border-radius:0;
}
.recordar__fila input:hover{border-color:var(--rojo)}
.recordar__fila .btn{padding:13px 22px;font-size:12.5px}
/* Segunda línea: qué ha pasado de verdad con el alta. Va con menos peso que
   el titular pero legible — es la parte que evita que alguien se registre
   dos veces o se quede fuera creyendo que está dentro. */
.form__msg-sub{margin:8px 0 0;font-weight:500;font-size:13.5px;line-height:1.5;opacity:.92}
.form__msg-cod{margin:10px 0 0;font-weight:600;font-size:12px;letter-spacing:.04em;opacity:.75}
.form__msg-cod a{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .comunidad__in{grid-template-columns:1fr}
  .comunidad__count{position:static}
  .eyebrow--right{text-align:left}
}
@media (max-width:520px){.field--half{grid-template-columns:1fr}}

/* ============================================================
   U GOT THE FLOW
   ============================================================ */
.flow{position:relative;overflow:hidden}
.flow__ghost{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--f-display);font-size:clamp(46px,9.5vw,120px);
  color:#171717;white-space:nowrap;letter-spacing:-.01em;pointer-events:none;user-select:none;
}
.flow__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;padding-bottom:clamp(40px,8vw,90px)}
.flow__h{
  font-family:var(--f-display);font-size:clamp(46px,8.5vw,104px);line-height:.92;
  color:var(--rojo);margin:14px 0 20px;letter-spacing:-.01em;
}
.flow__marker{
  font-family:var(--f-marker);color:var(--blanco);font-size:.86em;
  border-bottom:5px solid var(--blanco);padding-bottom:2px;margin-left:6px;
  display:inline-block;line-height:1;
}
.flow__sub{font-size:clamp(16px,2vw,20px);font-weight:600;margin:0 0 18px;color:var(--blanco)}
.flow__p{font-size:15px;line-height:1.7;color:#B9B7B0;margin:0 0 14px;max-width:46ch}
.flow__close{font-size:15px;color:#B9B7B0;margin:0}
.flow__close b{color:var(--rojo)}
.flow__media picture{display:block}
.flow__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.04)}
.flow__media{margin:0}
@media (max-width:820px){.flow__in{grid-template-columns:1fr}.flow__media{order:-1}}

/* ============================================================
   CARRUSEL DE DISCIPLINAS (dentro de U GOT THE FLOW)
   Lo monta el JS a partir de config.js → flow. Mientras no lo haga,
   .flow__media es la foto suelta de siempre y estas reglas no pintan nada.
   Formato APAISADO 4:3: es el de las fotos de campaña definitivas, todas
   iguales. El visor tiene su misma forma a propósito — así llenan el hueco
   sin recortarse, y el rótulo rojo de cada una llega entero hasta el borde.
   ============================================================ */
.carrusel{position:relative;max-width:620px;margin-inline:auto;width:100%}
.carrusel__visor{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.carrusel__pista{
  display:flex;margin:0;padding:0;list-style:none;height:100%;
  transition:transform .62s cubic-bezier(.42,0,.16,1);will-change:transform;
}
.carrusel__slide{position:relative;flex:0 0 100%;height:100%;min-width:0}
/* El alto lo manda el visor, no la proporción de la imagen. El filtro
   (contrast, sin grayscale) lo hereda de .flow__media img: las fotos vienen
   en blanco y negro CON el rojo de marca encima y hay que respetarlo. */
.carrusel__slide img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  user-select:none;
}
/* Red de seguridad para una foto que no sea 4:3: se encaja entera en vez de
   llenar el hueco. Hoy no la activa ninguna. El fondo del visor es el mismo
   negro de la sección, así que la banda que sobra no se nota; recortar, en
   cambio, se llevaría el rótulo rojo por delante. */
.carrusel__slide--ancha img{object-fit:contain}

/* Rótulo y canción, DEBAJO de la foto. Cada póster trae su propio texto
   pintado en un sitio distinto: cualquier cosa superpuesta chocaba con uno. */
.carrusel__pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;padding:14px 2px 0;min-height:52px;
  opacity:0;transition:opacity .3s ease;
}
.carrusel__pie.is-on{opacity:1}
.carrusel__rotulo{
  font-family:var(--f-display);font-size:clamp(24px,3.4vw,38px);line-height:1;
  color:var(--blanco);margin:0;letter-spacing:.01em;text-transform:uppercase;
}
.carrusel__tema{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);
  transition:background .2s,border-color .2s,transform .2s;
}
.carrusel__tema:hover{background:rgba(29,185,84,.2);border-color:rgba(29,185,84,.75);transform:translateY(-1px)}
.carrusel__tema[hidden]{display:none}
.carrusel__spot{
  flex:0 0 auto;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231DB954'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6.2 9.1c3.6-1 7.6-.7 10.8 1'/%3E%3Cpath d='M7 12.4c3-.8 6.3-.6 8.9.9'/%3E%3Cpath d='M7.8 15.6c2.4-.6 5-.4 7 .8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.carrusel__tema-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.carrusel__tema-tx b{font-size:13px;font-weight:700;color:var(--blanco)}
.carrusel__tema-tx i{font-size:11px;font-style:normal;color:#B9B7B0;letter-spacing:.04em;text-transform:uppercase}

.carrusel__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(11,11,11,.42);color:var(--blanco);
  font-size:26px;line-height:1;display:grid;place-items:center;padding:0 0 3px;
  transition:background .2s,border-color .2s,opacity .2s;opacity:.75;
}
.carrusel__flecha:hover{background:var(--rojo);border-color:var(--rojo);opacity:1}
.carrusel__flecha--prev{left:12px}
.carrusel__flecha--next{right:12px}

.carrusel__puntos{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.carrusel__punto{
  width:22px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.24);transition:background .2s,width .25s;
}
.carrusel__punto:hover{background:rgba(255,255,255,.5)}
.carrusel__punto.is-on{background:var(--rojo);width:34px}

@media (max-width:520px){
  .carrusel__flecha{width:36px;height:36px;font-size:22px}
  .carrusel__punto{width:16px}
  .carrusel__punto.is-on{width:26px}
}
/* Con "menos movimiento" el carrusel no se mueve solo (lo decide el JS) y
   tampoco desliza ni funde al pasar de foto a mano. */
@media (prefers-reduced-motion:reduce){
  .carrusel__pista{transition:none}
  .carrusel__pie{transition:none;opacity:1}
  .carrusel__tema{transition:none}
}

/* ============================================================
   RESERVA
   ============================================================ */
.reserva__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:10px}
.reserva__perks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.reserva__perks li{
  padding:18px 0;border-top:1px solid rgba(255,255,255,.3);
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);
}
.reserva__perks li:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.reserva__perks b{color:var(--blanco)}
.reserva__card{background:var(--blanco);color:var(--ink);padding:32px 28px}
.reserva__amount{font-family:var(--f-display);font-size:66px;line-height:.9;margin:0;color:var(--rojo)}
.reserva__amount-l{
  margin:8px 0 24px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.reserva__btns{display:grid;gap:10px}
.reserva__card .btn--ghost-light{color:var(--ink);border-color:var(--ink)}
.reserva__card .btn--ghost-light:hover{background:var(--ink);color:var(--blanco)}
.reserva__legal{margin:18px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.reserva__legal a{color:var(--rojo);text-decoration:underline;text-underline-offset:2px}
.bizum-box{
  margin-top:26px;background:var(--ink);color:var(--hueso-cl);
  padding:22px 24px;max-width:560px;
}
.bizum-box p{margin:0 0 8px;font-size:14.5px;line-height:1.6}
.bizum-box__t{font-family:var(--f-titulo);font-weight:700;font-size:20px}
.bizum-box b{color:var(--rojo)}
.link-x{
  background:none;border:0;padding:6px 0;color:var(--hueso-cl);cursor:pointer;
  font:600 12px/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;
}
@media (max-width:820px){.reserva__grid{grid-template-columns:1fr}}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.ig__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ig__grid span{
  aspect-ratio:1;display:block;
  background:repeating-linear-gradient(45deg,#DCD9D2,#DCD9D2 8px,#E4E1DA 8px,#E4E1DA 16px);
}
.ig__grid span:nth-child(2),.ig__grid span:nth-child(6){background:var(--rojo);opacity:.9}
.ig__grid span:nth-child(4){background:var(--ink)}
@media (max-width:760px){.ig__in{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--hueso-cl);padding:44px 0 40px}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.foot__links a{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B9B7B0;
}
.foot__links a:hover{color:var(--rojo)}
.foot__c{margin:0;font-size:11px;letter-spacing:.08em;color:#6A685F}

/* ============================================================
   PÁGINAS SECUNDARIAS (gracias / legales)
   ============================================================ */
.doc{max-width:74ch;margin-inline:auto;padding:clamp(60px,9vw,110px) 0}
.doc h1{font-family:var(--f-titulo);font-weight:700;font-size:clamp(28px,4.4vw,44px);letter-spacing:-.025em;margin:0 0 10px;line-height:1.1}
.doc h2{font-family:var(--f-titulo);font-weight:700;font-size:19px;margin:36px 0 10px;letter-spacing:-.01em}
.doc p,.doc li{font-size:15px;line-height:1.72}
.doc ul{padding-left:20px}
.doc a{color:var(--rojo);text-decoration:underline;text-underline-offset:2px}
.doc__meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.gracias{text-align:center;padding-block:clamp(80px,14vw,170px)}
.gracias .h-lede{margin-bottom:18px}
.gracias__acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* ---------- reserva: pasos y referencia ---------- */
.reserva__paso{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.reserva__ref-l{
  margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.reserva__ref{
  margin:0 0 18px;font-family:var(--f-display);font-size:34px;line-height:1;
  letter-spacing:.02em;color:var(--ink);
}
.bizum-box__n{font-size:13px;color:#B9B7B0;margin-top:12px}
.bizum-box p b[data-bizum-concepto]{
  font-family:var(--f-display);font-size:22px;letter-spacing:.03em;
}
.form__msg-cta{
  display:block;margin-top:12px;font-weight:700;font-size:13px;
  letter-spacing:.03em;color:var(--rojo);
  text-decoration:underline;text-underline-offset:3px;
}
.form__msg-cta:hover{color:var(--blanco)}