/* =========================================================
   COLECTIVA — La ruta de la gráfica
   Diseño base: pantallas de 1920×1080 → escalado con vw/clamp
   ========================================================= */

:root{
  /* Colores muestreados de las pantallas de referencia */
  --paper:#EAE4DF;      /* claro para textos sobre rojo/morado */
  --bg:#CBE1ED;         /* fondo de la web */
  --orange:#FF9C00;
  --red:#FF2800;
  --teal:#00AB8E;
  --plum:#49273D;
  --ink:#141414;
  --grey:#8A8585;
  --cream:#FBF3D5;

  /* Kit Adobe Fonts atd5dth: forma-djr-deck (400, 700) · mikrobe-variable (400) */
  --f-display:"mikrobe-variable",Impact,"Arial Black",sans-serif;
  --f-text:"forma-djr-deck","Helvetica Neue",Arial,sans-serif;

  --track:-0.025em;
  --pad:clamp(20px,4.6vw,90px);
  --nav-h:clamp(64px,6.4vw,112px);

  --t-body:clamp(15px,1.25vw,24px);
  --t-nav:clamp(12px,1.2vw,23px);
  --t-display:clamp(54px,7.8vw,150px);
  --t-date:clamp(34px,3.8vw,74px);

  --sec-pad:clamp(30px,3.2vw,64px);   /* aire sobre cada sección */

  --ease:cubic-bezier(.35,0,0,1);
  --ease-ui:cubic-bezier(.4,0,.1,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); overflow-x:clip; }
/* el aire de arriba no cuenta al saltar desde el menú */
.que, .fechas, .postula, .prog, .aliados{ scroll-margin-top:calc(-1 * var(--sec-pad)); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-text);
  font-weight:700;          /* Forma DJR Deck Bold: el kit solo trae 400 y 700 */
  font-size:var(--t-body);
  line-height:1.2;
  letter-spacing:var(--track);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,figure,dl,dd{ margin:0; }
a{ color:inherit; }
button{ font:inherit; letter-spacing:inherit; color:inherit; cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.display{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-display);
  line-height:.9;
  letter-spacing:0;
  text-transform:uppercase;
}
.eyebrow{
  text-transform:uppercase;
  font-weight:700;
  font-size:var(--t-nav);
}
.skip{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; text-decoration:none;
}
.skip:focus{ top:12px; }

/* ---------- Botones: un mismo gesto al pasar el mouse ---------- */
.chip-btn, .conv__btn, .form__send, .stop, .fechas__tabs [role="tab"], .nav__toggle{
  transition:transform .3s var(--ease-ui), box-shadow .3s var(--ease-ui), background-color .3s, color .3s;
}
.chip-btn:hover, .conv__btn:hover, .form__send:hover, .stop:hover,
.fechas__tabs [role="tab"]:hover, .nav__toggle:hover,
.chip-btn:focus-visible, .conv__btn:focus-visible, .form__send:focus-visible, .stop:focus-visible{
  transform:translate(-5px,-5px);
  box-shadow:5px 5px 0 var(--plum);
}

/* ---------- reveal on scroll ---------- */
.js .reveal{
  opacity:0;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
.js .reveal[data-from="left"]{ transform:translateX(-8vw) rotate(-1.2deg); }
.js .reveal[data-from="right"]{ transform:translateX(8vw) rotate(1.2deg); }
.js .reveal[data-from="up"]{ transform:translateY(60px) rotate(1deg); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  padding-inline:var(--pad);
  background:transparent;
  color:var(--ink);
  transition:background-color .45s ease, color .45s ease;
}
.nav[data-theme="paper"]{ background:var(--bg); }
.nav[data-theme="red"]{ background:var(--red); }
.nav[data-theme="plum"]{ background:var(--plum); color:var(--paper); }

.nav__logo{
  position:absolute; left:var(--pad);
  width:clamp(96px,7.6vw,150px);
  opacity:0; transform:translateY(-10px);
  transition:opacity .4s, transform .4s var(--ease);
  pointer-events:none;
}
.nav.is-scrolled .nav__logo{ opacity:1; transform:none; pointer-events:auto; }
.nav[data-theme="plum"] .nav__logo img{ filter:invert(1); }

.nav__links{ display:flex; align-items:center; gap:clamp(6px,2.3vw,56px); }
.nav__links a{
  font-size:var(--t-nav);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  padding:.62em .9em;
  transition:transform .35s var(--ease), background-color .3s;
}
.nav__links a:hover{ text-decoration:underline; text-underline-offset:.25em; }
.nav__links a.is-cta{ color:var(--plum); }
.nav[data-theme="plum"] .nav__links a.is-cta{ color:var(--orange); }
.nav__links a[aria-current="true"],
.nav[data-theme="clear"] .nav__links a.is-cta{
  background:var(--teal);
  color:var(--ink);
  transform:scale(1.3);
  text-decoration:none;
}
.nav[data-theme="clear"] .nav__links a.is-cta{ color:var(--plum); }
.nav__links a.is-cta[aria-current="true"]{ color:var(--plum); }

.nav__toggle{
  display:none;
  position:absolute; right:var(--pad);
  background:var(--teal); border:0;
  text-transform:uppercase; font-weight:700; font-size:14px;
  padding:10px 16px;
}

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:49;
  background:var(--red); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 20px) var(--pad) 40px;
}
.menu nav{ display:flex; flex-direction:column; gap:.35em; }
.menu a{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  letter-spacing:0; line-height:.95;
  font-size:clamp(34px,14.6vw,90px);
  text-decoration:none;
}
.menu__foot{ margin-top:40px; text-transform:uppercase; font-size:14px; }

@media (max-width:1023px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav__logo{ opacity:1; transform:none; pointer-events:auto; width:110px; }
  .nav.menu-open{ background:var(--red); color:var(--paper); }
  .nav.menu-open .nav__logo img{ filter:invert(1); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  padding:calc(var(--nav-h) + 3vw) var(--pad) 0;
  overflow:hidden;
  isolation:isolate;
  display:flex; flex-direction:column; align-items:center;
}
.hero__art{
  position:absolute; inset:0; z-index:-1;
  will-change:transform;
}
.hero__still, .hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.hero__title{
  position:absolute; inset:0;
  display:grid; place-content:center;
  text-align:center; will-change:transform, opacity;
}
.hero__logo{ width:clamp(300px,62vw,1180px); margin-inline:auto; }
.hero__tag{
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase;
  color:var(--plum);
  font-size:clamp(18px,2.5vw,48px);
  margin-top:.25em;
}
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.hero__sede{
  position:absolute; bottom:clamp(20px,3vw,56px);
  display:flex; flex-direction:column; align-items:flex-start;
  padding:.5em .9em .6em;
  text-decoration:none;
  transition:transform .35s var(--ease);
}
.hero__sede b{
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase; font-size:clamp(22px,2.4vw,46px); line-height:1;
}
.hero__sede span{ text-transform:uppercase; font-size:var(--t-nav); }
.hero__sede--cuenca{ left:var(--pad); background:var(--red); color:var(--paper); animation:saltoIzq 2.2s ease-in-out infinite; }
.hero__sede--loja{ right:var(--pad); background:var(--plum); color:var(--paper); align-items:flex-end; animation:saltoDer 2.2s ease-in-out .4s infinite; }
.hero__sede:hover{ animation:none; transform:rotate(0deg) translateY(-6px); box-shadow:6px 6px 0 var(--plum); }
@keyframes saltoIzq{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(9px); } }
@keyframes saltoDer{ 0%,100%{ transform:rotate(2deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(9px); } }
 }

@media (max-width:700px){
  /* en vertical: la animación ocupa una banda completa y el texto va debajo */
  .hero{
    min-height:auto;
    padding:calc(var(--nav-h) + 14px) var(--pad) 104px;
    justify-content:flex-start;
  }
  .hero__art{
    position:relative; inset:auto; z-index:0;
    width:calc(100% + var(--pad) * 2);
    margin-inline:calc(var(--pad) * -1);
    aspect-ratio:4/3;          /* banda más alta: recorta algo de los lados */
  }
  .hero__title{ position:static; display:block; margin-top:18px; }
  .hero__logo{ width:min(88%,360px); }
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--red); color:var(--paper);
  overflow:hidden; white-space:nowrap;
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase;
  font-size:clamp(22px,2.6vw,50px);
  padding-block:.35em .4em;
}
.marquee__track{ display:inline-flex; animation:marquee 38s linear infinite; }
.marquee__track span{ padding-right:.5em; }
.marquee__track span::after{ content:"✶"; color:var(--orange); padding-left:.5em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   SOBRE NOSOTROS — ¿Qué es Colectiva?
   ========================================================= */
.que{
  position:relative;
  display:grid;
  grid-template-columns:9.1% 32.8% 4.9% minmax(0,1fr);
  padding-top:var(--sec-pad);
}
@media (max-width:700px){
  :root{ --t-display:14vw; }
  .prog__head .display{ font-size:9.5vw; }
}
.que__photo{ grid-column:2; }
.que__photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:577/839; }
.que__panel{
  grid-column:4;
  background:var(--orange);
  padding:3.4vw 4vw 14vw 3.7vw;
}
.que__panel .display{ color:var(--plum); }
.que__text{
  text-transform:uppercase;
  margin-top:1.6em;
  max-width:46em;
}
.que__callout{
  position:absolute; left:39.2%; bottom:3.8vw; width:32.5%;
  background:var(--red); color:var(--paper);
  text-transform:uppercase;
  padding:1.8vw 1.6vw;
}

@media (max-width:900px){
  .que{ display:flex; flex-direction:column; padding-top:56px; }
  .que__photo{ margin:0 var(--pad); }
  .que__photo img{ aspect-ratio:4/5; max-height:70svh; }
  .que__panel{ margin-top:-40px; margin-left:var(--pad); padding:64px var(--pad) 90px; }
  .que__callout{ position:relative; left:auto; bottom:auto; width:auto; margin:-50px var(--pad) 0 0; padding:22px var(--pad); }
}

/* ---------- Primera edición ---------- */
.primera{
  position:relative;
  display:grid;
  grid-template-columns:44.9% minmax(0,1fr);
  padding:var(--sec-pad) 0 clamp(44px,4.4vw,88px);
}
.primera__block{
  background:var(--orange);
  padding:3.4vw 0 9vw 11.4vw;
}
.primera__strip{          /* en el flujo: se monta sobre el naranja, nunca sobre las fotos */
  position:relative; z-index:2;
  grid-column:1 / -1; justify-self:start;
  width:56%; margin:-4.5vw 0 0 7.1%;
  background:var(--red); color:var(--paper);
  text-transform:uppercase;
  padding:2.2vw 3vw 2.2vw 4vw;
}
.primera__videos{
  grid-column:1 / -1;
  list-style:none; margin:clamp(34px,3.8vw,76px) 0 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,26px);
}
.clip{ position:relative; overflow:hidden; background:var(--plum); aspect-ratio:5/4; }
.clip video{ width:100%; height:100%; object-fit:cover; display:block; }
.js .primera__videos .clip:nth-child(2){ --d:.12s; }
.js .primera__videos .clip:nth-child(3){ --d:.24s; }

.primera__galeria{
  grid-column:1 / -1;
  list-style:none; margin:clamp(12px,1.5vw,28px) 0 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,26px);
}
.clip img{ width:100%; height:100%; object-fit:cover; }
.clip--alto{ aspect-ratio:3/4; }

@media (max-width:760px){
  .primera__videos{ grid-template-columns:1fr; }
  .primera__galeria{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .primera{ display:flex; flex-direction:column; padding-top:var(--sec-pad); }
  .primera__block{ margin-right:var(--pad); padding:40px var(--pad) 70px; }
  .primera__strip{ width:auto; margin:-40px 0 0 var(--pad); padding:22px var(--pad); }
}

/* =========================================================
   LA RUTA
   ========================================================= */
.ruta{ padding:var(--sec-pad) var(--pad) clamp(40px,4vw,80px); }
.ruta__title{
  color:var(--plum); text-align:center;
  font-size:clamp(26px,5vw,96px);
  margin-bottom:clamp(12px,1.4vw,28px);
}

.ruta__map{ position:relative; aspect-ratio:2000/810; }
.ruta__line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ruta__path{
  fill:none;
  stroke:var(--orange);
  stroke-width:52;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;          /* lo mueve el scroll (js/main.js) */
}

/* Los bloques van siempre sólidos: aquí la animación es solo de la línea */
.ruta__stops{ position:absolute; inset:0; list-style:none; margin:0; padding:0; }
.ruta__stops li{ display:contents; }
.stop{
  position:absolute;
  text-decoration:none; cursor:pointer;
  display:flex; flex-direction:column; gap:.3em;
  padding:1.5vw 1.7vw 1.7vw;
  text-transform:uppercase;
}
.stop--teal{ background:var(--teal); left:7%;  top:26%; width:23%; }
.stop--red{  background:var(--red);  color:var(--paper); left:39%; top:42%; width:23%; }
.stop--plum{ background:var(--plum); color:var(--paper); left:71%; top:56%; width:23%; }
.stop__city{
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  font-size:clamp(18px,2.7vw,54px); line-height:1;
}
.stop__info{ font-size:clamp(11px,1.15vw,22px); line-height:1.35; }
.stop__go{
  margin-top:.4em;
  font-size:clamp(11px,1.15vw,22px);
  display:inline-block;
  transition:transform .3s var(--ease-ui);
}
.stop:hover .stop__go{ transform:translateX(5px); }

@media (max-width:760px){
  .ruta__map{ aspect-ratio:auto; padding-left:42px; }
  .ruta__line{ display:none; }
  .ruta__map::before{               /* en vertical, la línea es una barra que crece */
    content:''; position:absolute; left:8px; top:0; bottom:0; width:16px;
    background:var(--orange);
    transform:scaleY(var(--p,0)); transform-origin:top center;
  }
  .ruta__stops{ position:static; display:grid; gap:16px; }
  .stop{ position:static; width:auto; padding:18px 20px 20px; }
  .stop__city{ font-size:34px; }
  .stop__info, .stop__go{ font-size:15px; }
}

/* =========================================================
   FECHAS Y SEDES
   ========================================================= */
.fechas{
  position:relative;
  padding-top:var(--sec-pad);
  overflow:hidden;
}
.fechas__hint{
  text-align:center; text-transform:uppercase;
  font-size:var(--t-nav); color:var(--plum);
  margin-bottom:.7em;
}
.fechas__tabs{
  position:relative; z-index:3;
  display:flex; justify-content:center; gap:4vw;
  margin-bottom:-3.2vw;
}
.fechas__tabs [role="tab"]{
  width:clamp(150px,16.7vw,322px);
  height:clamp(64px,6.5vw,125px);
  border:0;
  background:var(--plum);
  color:var(--grey);
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase;
  font-size:clamp(28px,3.3vw,64px);
}
.fechas__tabs [role="tab"][aria-selected="true"]{ background:var(--red); color:var(--paper); }
/* Al llegar a la sección, la pestaña sin elegir se mueve para que se note que se puede tocar */
.fechas.is-hint .fechas__tabs [role="tab"][aria-selected="false"]{ animation:tabAviso 1.15s var(--ease-ui) 2; }
@keyframes tabAviso{
  0%, 70%, 100%{ transform:none; }
  12%{ transform:translateY(-10px) rotate(-2.5deg); }
  28%{ transform:translateY(0) rotate(1.5deg); }
  44%{ transform:translateY(-5px) rotate(-1deg); }
}

.fechas__stage{
  position:relative;
  height:max(42.5vw, 560px);
}
.fechas__panel{
  position:absolute; top:0; bottom:0; left:0;
  width:46%;
  background:var(--orange);
  padding:max(7.8vw,90px) 4vw 3vw 4.7vw;
  transition:transform 1s var(--ease);
  z-index:1;
}
.fechas[data-sede="loja"] .fechas__panel{ transform:translateX(117.4%); padding-left:6.1vw; }

.sede{ animation:fadeUp .6s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } }
.sede__dias{
  color:var(--plum);
  font-weight:700;
  font-size:var(--t-date);
  line-height:1.12;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.sede__info{
  list-style:none; padding:0;
  margin:clamp(28px,5vw,100px) 0 0;
  text-transform:uppercase;
  font-size:clamp(16px,1.75vw,34px);
  display:grid; gap:.75em;
  letter-spacing:-.03em;
}
.sede__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,2.4vw,44px); }
.chip-btn{
  display:inline-block;
  background:transparent; border:2px solid var(--plum); color:var(--plum);
  text-transform:uppercase; text-decoration:none; font-weight:700;
  font-size:var(--t-nav);
  padding:.55em 1em;
}
.chip-btn:hover{ background:var(--plum); color:var(--orange); }
.sede__count{ margin-top:1.2em; text-transform:uppercase; font-size:var(--t-nav); color:var(--plum); }
.sede__count b{ font-size:1.6em; }

/* Cada ilustración tiene su lado fijo: no se desliza de un lado al otro,
   solo aparece la que toca. Va por encima del panel para montarse sobre el naranja. */
.fechas__ilu{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.ilu{
  position:absolute; bottom:0;
  height:auto;
  transition:opacity .45s var(--ease), transform .6s var(--ease);
}
.ilu--cuenca{ right:0; width:62%; }
.ilu--loja{ left:0; width:54%; }   /* el morado llega justo al panel */
.fechas[data-sede="cuenca"] .ilu--loja,
.fechas[data-sede="loja"] .ilu--cuenca{ opacity:0; transform:translateY(14px); }
.fechas__ilu.hop .ilu{ animation:hop 1s var(--ease); }
@keyframes hop{
  0%{ transform:translateY(0) rotate(0); }
  35%{ transform:translateY(-9%) rotate(-3deg); }
  70%{ transform:translateY(1%) rotate(1deg); }
  100%{ transform:translateY(0) rotate(0); }
}

@media (max-width:900px){
  .fechas__tabs{ margin-bottom:-28px; gap:14px; }
  .fechas__stage{ height:auto; display:flex; flex-direction:column; }
  .fechas__panel{ position:relative; width:auto; margin-right:var(--pad); padding:70px var(--pad) 44px; }
  .fechas[data-sede="loja"] .fechas__panel{ transform:none; margin:0 0 0 var(--pad); padding-left:var(--pad); }
  .fechas__ilu{
    position:relative; inset:auto;
    width:100%; aspect-ratio:1600/1090; margin-top:-20px;
  }
  .ilu--cuenca, .ilu--loja{ width:100%; left:0; right:0; }
}

/* =========================================================
   CONVOCATORIA
   ========================================================= */
.conv{
  background:var(--red);
  color:var(--paper);
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 4vw) var(--pad) 6vw;
}
.conv__q{
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(34px,5.8vw,112px);
  line-height:1.2;
  letter-spacing:-.01em;
}
@media (max-width:900px){ .conv__q br{ display:none; } }
.conv__btn{
  display:grid; place-items:center;
  margin-top:clamp(36px,5.5vw,104px);
  width:clamp(240px,32vw,616px);
  min-height:clamp(110px,12.8vw,246px);
  background:var(--teal); color:var(--plum);
  font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,3.9vw,74px);
  line-height:1.08; letter-spacing:-.03em;
  text-decoration:none;
}
.conv__datos{
  list-style:none; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin:clamp(32px,4vw,72px) 0 0;
}
.conv__datos li{
  border:2px solid var(--paper);
  padding:.5em 1em;
  text-transform:uppercase; font-size:var(--t-nav); font-weight:700;
}
.js .conv__btn.reveal{ --d:.15s; }
.js .conv__datos.reveal{ --d:.3s; }
.conv__count{ margin-top:18px; text-transform:uppercase; font-size:var(--t-nav); }
.conv__help{ margin-top:10px; font-size:var(--t-nav); }
.conv__help a{ text-underline-offset:.2em; }
.menu__foot a{ font:inherit; letter-spacing:inherit; text-transform:none; text-decoration:underline; }
.foot__mail{ text-transform:none; overflow-wrap:anywhere; }

/* ---------- Formulario ---------- */
.postula{ padding:var(--sec-pad) var(--pad) clamp(44px,4.4vw,88px); }
.form{
  max-width:1240px; margin:0 auto;
  background:var(--red);
  padding:0 clamp(14px,3vw,48px) clamp(24px,4.4vw,68px);
}
.form__title{
  color:var(--paper);
  text-transform:uppercase; font-weight:700;
  font-size:clamp(20px,1.9vw,32px);
  padding:1.1em 0 .9em;
}
.form__body{
  background:var(--bg);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.2vw,52px) clamp(20px,3vw,46px);
  padding:clamp(22px,3vw,44px) clamp(18px,2.6vw,40px) clamp(40px,6vw,110px);
  color:var(--plum);
}
.field{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.field--full{ grid-column:1 / -1; }
fieldset.field{ border:0; padding:0; margin:0; }
.field label, .field legend{
  text-transform:uppercase; font-weight:700;
  font-size:clamp(14px,1.15vw,19px);
  padding:0;
}
.field legend{ margin-bottom:14px; }
.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field input[type="tel"], .field textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--red);
  border-radius:0;
  padding:14px 14px;
  font:inherit; letter-spacing:-.02em; color:var(--ink);
  min-height:56px;
}
.field textarea{ resize:vertical; min-height:220px; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--red); outline-offset:0; }
.field input[type="url"]::placeholder{ color:#b7aaa6; }

.checks{
  display:grid; gap:26px 18px;
  padding-left:clamp(0px,9vw,136px);
}
.checks--4{ grid-template-columns:repeat(4,max-content); column-gap:clamp(18px,3vw,48px); }
.checks--3{ grid-template-columns:repeat(3,minmax(max-content,190px)); column-gap:clamp(18px,3vw,48px); }
.checks label{
  display:flex; align-items:center; gap:18px;
  text-transform:uppercase; font-weight:400;
  font-size:clamp(14px,1.15vw,19px);
  cursor:pointer;
}
.checks input{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin:0; flex-shrink:0;
  border:1px solid var(--red); background:transparent;
  cursor:pointer;
  transition:background-color .15s;
}
.checks input:checked{ background:var(--red); }
.checks input:focus-visible{ outline:2px solid var(--plum); outline-offset:2px; }
.field__err{ color:var(--red); font-size:14px; text-transform:uppercase; }
.field.is-invalid input:not([type="checkbox"]):not([type="radio"]){ border-width:2px; background:#fff1ec; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__send:disabled{ opacity:.6; cursor:wait; }
.form__alterno{ text-transform:uppercase; font-size:var(--t-nav); text-underline-offset:.25em; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.form__send{
  background:var(--teal); color:var(--plum); border:0;
  text-transform:uppercase; font-weight:700;
  font-size:clamp(18px,1.6vw,28px);
  padding:.8em 1.5em;
}
.form__status{ text-transform:uppercase; font-weight:700; font-size:15px; }

@media (max-width:900px){
  .form__body{ grid-template-columns:1fr; }
  .checks{ padding-left:0; }
  .checks--4{ grid-template-columns:repeat(2,1fr); }
  .checks--3{ grid-template-columns:repeat(3,auto); }
}

/* =========================================================
   PROGRAMACIÓN
   ========================================================= */
.prog{ padding:var(--sec-pad) var(--pad) clamp(44px,4.4vw,88px); }
.prog__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:clamp(32px,4vw,72px);
}
.prog__head .display{ color:var(--plum); }
.prog__head p{ text-transform:uppercase; text-align:right; font-size:clamp(16px,1.6vw,30px); }
.prog__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,44px); }
.prog-card{
  position:relative;
  padding:clamp(24px,3vw,56px);
  display:flex; flex-direction:column; gap:1.1em;
  min-height:clamp(380px,32vw,600px);
}
.prog-card--teal{ background:var(--teal); }
.prog-card--plum{ background:var(--plum); color:var(--paper); }
.prog-card__n{ font-size:var(--t-nav); }
.prog-card h3{
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase; line-height:.95;
  font-size:clamp(32px,3.6vw,70px);
  max-width:14ch;
}
.prog-card__tag{
  align-self:flex-start;
  background:var(--orange); color:var(--ink);
  text-transform:uppercase; font-weight:700; font-size:var(--t-nav);
  padding:.45em .8em;
}
.prog-card__when{ margin-top:auto; display:grid; gap:.8em; text-transform:uppercase; }
.prog-card__when div{ display:grid; grid-template-columns:5.5em 1fr; gap:1em; border-top:2px solid currentColor; padding-top:.7em; }
.prog-card__when dt{ font-weight:700; }
.prog-card__when i{ font-style:normal; opacity:.65; }
.prog-card__note{ font-size:var(--t-nav); text-transform:uppercase; opacity:.8; }
@media (max-width:900px){
  .prog__grid{ grid-template-columns:1fr; }
  .prog__head p{ text-align:left; }
}

/* =========================================================
   TALLERES — una sola ilustración a lo largo de la sección
   ========================================================= */
:root{
  --t-cielo:#77AFF7;      /* azul del cielo */
  --t-nube:#E5F8FF;       /* nube clara */
  --t-crema:#FCF5E8;      /* "Gratuita" */
  --t-indigo:#32408F;     /* títulos sobre la escena */
  --t-naranja:#FF8F41;    /* ciudades */
  --t-amarillo:#EDE037;   /* horario */
  --t-rosa:#FF80AB;       /* botones del formulario */
}

/* El alto sale de la proporción del archivo (2180x2700): así la ilustración
   entra completa, de una pieza, sin estirarse y sin costuras. */
.tall{
  position:relative; overflow:hidden;
  aspect-ratio:2180 / 2700;
  background:var(--t-cielo);
}
.tall > *{ position:absolute; margin:0; z-index:1; }

/* ---------- La ilustración, en capas, con las nubes en deriva ---------- */
.tall__ilu{ inset:0; z-index:0; }   /* siempre por detrás del texto */
.tall__capa{
  position:absolute; inset:0;
  background-position:center top; background-size:100% 100%; background-repeat:no-repeat;
}
.tall__capa--cielo { background-image:url(../assets/taller-cielo.jpg); }
.tall__capa--nubes2{ background-image:url(../assets/taller-nubes-b.png); }
.tall__capa--nubes1{ background-image:url(../assets/taller-nubes-a.png); }
.tall__capa--escena{ background-image:url(../assets/taller-escena.png); }

/* Se amplían un poco para que al moverse nunca asome el borde recortado.
   Dos velocidades distintas: nunca vuelven a coincidir, así no se nota el bucle. */
.tall__capa--nubes1,
.tall__capa--nubes2{ will-change:transform; }
.tall__capa--nubes1{ animation:deriva1 19s ease-in-out infinite; }
.tall__capa--nubes2{ animation:deriva2 27s ease-in-out infinite; }
/* El margen de la escala (6% y 7.5% por lado) es mayor que el recorrido,
   así el borde recortado del archivo nunca llega a asomar. */
@keyframes deriva1{
  0%,100%{ transform:scale(1.12) translate3d(-4%,  0.6%, 0); }
  50%    { transform:scale(1.12) translate3d( 4%, -1.2%, 0); }
}
@keyframes deriva2{
  0%,100%{ transform:scale(1.15) translate3d( 5.5%, -0.9%, 0); }
  50%    { transform:scale(1.15) translate3d(-5.5%,  0.8%, 0); }
}
@media (prefers-reduced-motion:reduce){
  .tall__capa--nubes1{ animation:none; transform:scale(1.12); }
  .tall__capa--nubes2{ animation:none; transform:scale(1.15); }
}

/* ---------- Cabecera: Gratuita + fechas + horario ---------- */
.tall__cabeza{
  top:8.5%; left:50%; translate:-50% 0;
  width:min(94%, 1100px); text-align:center;
}
.tall__ante{
  color:#fff; text-transform:uppercase;
  font-size:clamp(15px,2.1vw,40px); line-height:1.15;
}
.tall__gratis{
  margin:.02em 0 0; color:var(--t-crema);
  font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; line-height:.92;
  font-size:clamp(46px,8.6vw,170px);
}
.tall__fechas{
  list-style:none; margin:6.5% 0 0; padding:0;
  display:grid; gap:6.5%;
}
.tall__fechas li{ display:grid; gap:.04em; }
.tall__dia{ color:#fff; font-size:clamp(16px,2.1vw,40px); line-height:1.1; }
.tall__mes{
  color:#fff; font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; line-height:.95;
  font-size:clamp(26px,3.9vw,76px);
}
.tall__sede{
  color:var(--t-naranja); font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; line-height:1.05;
  font-size:clamp(17px,2.4vw,46px);
}
.tall__hora{
  margin-top:7%; color:var(--t-amarillo);
  font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(19px,2.7vw,52px);
}

/* ---------- El taller: va a la derecha de la roca, nunca encima ---------- */
.tall__obra{ top:47%; left:14%; width:min(74%, 1200px); }   /* la roca entra al 60.9% */
.tall__ante2{
  color:var(--t-indigo); text-transform:uppercase;
  font-size:clamp(16px,2.3vw,44px); line-height:1.15;
}
.tall__nombre{
  margin:.02em 0 0; color:var(--t-indigo);
  font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; line-height:.92;
  font-size:clamp(27px,4.6vw,90px);
}
.tall__con{
  top:62.5%; left:43%;
  color:var(--t-indigo); text-transform:uppercase;
  font-size:clamp(14px,2vw,38px); line-height:1.15;
}
.tall__con b{
  display:block; font-family:var(--display,inherit); font-weight:700;
  font-size:1.5em; line-height:.95;
}

/* ---------- Botón y plazo ---------- */
.tall__btn{
  top:86%; left:14%;
  background:var(--t-nube); color:var(--t-indigo);
  padding:.5em 1.15em; text-decoration:none;
  font-family:var(--display,inherit); font-weight:700;
  text-transform:uppercase; line-height:1.08; text-align:center;
  font-size:clamp(17px,2.5vw,48px);
}

@media (max-width:900px){
  /* En vertical NO se usan posiciones absolutas: el contenido fluye y se
     reparte solo, así no queda el hueco azul del medio. El alto lo marca el
     propio contenido y la ilustración cubre por detrás. */
  .tall{
    aspect-ratio:auto; min-height:auto;
    display:grid; align-content:start; justify-items:center;
    gap:clamp(12px,1.9vh,20px);
    /* El aire de abajo es a propósito: le deja al paisaje su tercio inferior,
       para que el texto no caiga nunca encima del lagarto ni de la figura. */
    padding:10vh var(--pad) 26vh;
    text-align:center;
  }
  .tall > :not(.tall__ilu){
    position:relative; translate:none; inset:auto;  /* fluye, pero por encima de la ilustración */
    width:100%; max-width:min(100%, 560px);
  }
  /* La ilustración cubre la sección entera: nada de bloques de color liso.
     Para que el recorte lateral sea suave, el alto de la sección lo marca el
     contenido (no la pantalla), así la proporción se acerca a la del archivo. */
  .tall{ background:var(--t-cielo); }
  .tall__capa{ background-size:cover; background-position:31% center; }

  /* El paisaje carga a la derecha: el texto de abajo se alinea a la izquierda
     para no quedar encima de la figura. */
  .tall__obra, .tall__con{ text-align:left; justify-self:start; max-width:76%; }
  .tall__btn { justify-self:start; }

  .tall__cabeza{ display:grid; justify-items:center; gap:clamp(11px,1.8vh,20px); }
  .tall__ante { font-size:clamp(14px,4.2vw,22px); }
  .tall__gratis{ font-size:clamp(50px,15.5vw,86px); }
  .tall__fechas{ margin:0; gap:clamp(11px,1.8vh,20px); }
  .tall__dia  { font-size:clamp(15px,4.4vw,23px); }
  .tall__mes  { font-size:clamp(28px,8.6vw,48px); }
  .tall__sede { font-size:clamp(18px,5.4vw,30px); }
  .tall__hora { margin:0; font-size:clamp(19px,5.8vw,32px); }

  .tall__obra { width:100%; }
  .tall__ante2{ font-size:clamp(14px,4.2vw,22px); }
  .tall__nombre{ font-size:clamp(26px,7.8vw,44px); }
  .tall__con  { padding-left:0; font-size:clamp(14px,4.2vw,22px); }

  .tall__btn{
    width:auto; margin-top:5vh;      /* baja a posarse sobre la roca rosa */
    padding:.5em 1.6em; font-size:clamp(20px,6vw,34px);
  }
}


:where(.btn-vivo){ position:relative; }   /* sin pisar la posición propia del botón */
.btn-vivo{
  isolation:isolate; overflow:hidden;
  animation:flotar 3.4s ease-in-out infinite, latir 3.4s ease-in-out infinite;
  transition:transform .35s var(--ease-ui);
}
.btn-vivo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  transform:translateX(-120%);
}
.btn-vivo:hover::after, .btn-vivo:focus-visible::after{ animation:brillo .75s var(--ease) forwards; }
.btn-vivo:hover, .btn-vivo:focus-visible{ transform:scale(1.045) rotate(-.6deg); animation-play-state:paused; }
.btn-vivo:active{ transform:scale(.98); }
@keyframes flotar{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@keyframes latir{
  0%,100%{ box-shadow:0 0 0 0 rgba(229,248,255,.75); }
  55%    { box-shadow:0 0 0 22px rgba(229,248,255,0); }
}
@keyframes brillo{ from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }
@media (prefers-reduced-motion:reduce){
  .btn-vivo{ animation:none; }
  .btn-vivo::after{ display:none; }
}

/* =========================================================
   ALIADOS
   ========================================================= */
.aliados{
  display:grid; grid-template-columns:44.9% minmax(0,1fr);
  padding-top:var(--sec-pad);
  padding-bottom:clamp(60px,6vw,120px);
  row-gap:clamp(24px,3vw,56px);
}
.aliados__block{ background:var(--orange); padding:4vw 2vw 4vw 7vw; min-width:0; }
.aliados__financia{
  align-self:end;
  padding:0 var(--pad) 0 4vw;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.1vw,20px);
}
.aliados__financia-rotulo{
  margin:0;
  text-transform:uppercase;
  font-size:clamp(17px,1.6vw,30px);
}
/* El archivo del IFAIC mide 455x90 y el escudo llena todo el alto:
   por eso el alto del <img> es el alto del escudo. Mínimo exigido: 100px. */
/* "Con el apoyo de:" — fila propia debajo, alineada con el margen de la página. */
.aliados__apoyo{
  grid-column:1 / -1;
  padding:0 var(--pad);
  margin-top:clamp(34px,4.2vw,76px);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.1vw,20px);
}
/* Cada grupo ocupa su propia línea, de margen a margen */
.aliados__tira{ display:block; width:100%; height:auto; }
.aliados__ifaic{
  display:block;
  width:auto; max-width:100%;
  height:clamp(100px, 10.5vw, 148px);
}
.aliados__logos{
  grid-column:1 / -1;
  list-style:none; margin:0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,28px);
}
.aliados__logos li{
  aspect-ratio:3/2;
  border:2px solid var(--plum);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:12px;
  text-transform:uppercase; font-weight:700; color:var(--plum);
  font-size:clamp(15px,1.4vw,26px);
}
.aliados__logos small{ font-size:12px; font-weight:400; opacity:.6; }
.js .aliados__logos li:nth-child(2){ --d:.1s; }
.js .aliados__logos li:nth-child(3){ --d:.2s; }
@media (max-width:900px){
  .aliados{ grid-template-columns:minmax(0,1fr); }
  .aliados__block{ margin-right:var(--pad); padding:40px var(--pad); }
  .aliados__financia{ padding:0 var(--pad); gap:14px; }
  /* En pantalla de celular no caben los ~504px que pide el escudo de 100px:
     el logo se ajusta al ancho disponible y baja a unos 70px de alto. */
  .aliados__ifaic{ width:100%; height:auto; }
  .aliados__logos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .aliados__logos li{ aspect-ratio:auto; min-height:120px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background:var(--plum); color:var(--paper);
  padding:clamp(70px,8vw,150px) var(--pad) 32px;
}
.foot__top{ text-align:center; }
.foot__logo{ width:clamp(260px,52vw,1000px); margin:0 auto; filter:invert(1); }
.foot__bye{
  font-family:var(--f-display); font-weight:400; letter-spacing:0; text-transform:uppercase;
  color:var(--orange);
  font-size:clamp(20px,2.6vw,50px);
  margin-top:.4em;
}
.foot__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  margin-top:clamp(56px,6vw,120px);
  text-transform:uppercase;
  font-size:var(--t-nav);
  line-height:1.5;
}
.foot__cols h3{ color:var(--orange); font-size:1em; font-weight:700; margin-bottom:.5em; }
.foot__cols a{ text-decoration:none; }
.foot__cols a:hover{ text-decoration:underline; }
.foot__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:clamp(56px,6vw,110px);
  padding-top:20px; border-top:1px solid rgba(234,228,223,.3);
  text-transform:uppercase; font-size:13px;
}
.foot__bottom a{ text-decoration:none; }
@media (max-width:700px){ .foot__cols{ grid-template-columns:1fr; } }


/* =========================================================
   REVELADOS AL HACER SCROLL
   ========================================================= */

/* Texto: cada palabra sube desde detrás de una máscara, con un leve giro */
.js .split .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.js .split .w__i{
  display:inline-block;
  transform:translate3d(0,1.15em,0) rotate(7deg);
  transition:transform .9s var(--ease);
  transition-delay:var(--wd,0s);
  will-change:transform;
}
.js .split.is-in .w__i{ transform:none; }

/* Imágenes: se descubren de abajo hacia arriba mientras se acercan */
.js .img-in{ overflow:hidden; }
.js .img-in img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.12);
  transition:clip-path 1.1s var(--ease), transform 1.4s var(--ease);
}
.js .img-in.is-in img{ clip-path:inset(0 0 0 0); transform:none; }


/* ---------- scroll suave (Lenis) ---------- */
html.lenis, html.lenis body{ height:auto; }
html.lenis-smooth{ scroll-behavior:auto !important; }
html.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
html.lenis-stopped{ overflow:hidden; }



/* ---------- Galería: una pieza a la vez ---------- */
.galeria{
  position:fixed; inset:0; z-index:65;
  background:var(--bg); color:var(--plum);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(12px,1.6vw,28px);
  padding:clamp(18px,2.4vw,44px) var(--pad) clamp(16px,2vw,36px);
}
.galeria__top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.galeria__logo{            /* el logo toma el color morado de la marca */
  display:block;
  width:clamp(110px,12vw,210px); aspect-ratio:1200/329; justify-self:start;
  background:var(--plum);
  -webkit-mask:url(../assets/logo-colectiva.png) center/contain no-repeat;
  mask:url(../assets/logo-colectiva.png) center/contain no-repeat;
}
.galeria__titulo{
  font-family:var(--f-display); font-weight:400; letter-spacing:0;
  text-transform:uppercase; line-height:1;
  font-size:clamp(26px,4.2vw,66px); text-align:center;
}
.galeria__cerrar{
  justify-self:end; background:none; border:0; color:var(--plum);
  font-family:var(--f-text); font-weight:700; line-height:1;
  font-size:clamp(26px,2.8vw,44px);
}
.galeria__visor{
  position:relative; min-height:0; overflow:hidden;
  padding-inline:clamp(50px,7vw,130px);
  touch-action:pan-y;              /* el gesto lateral lo maneja la galería */
}
.galeria__pista{
  display:flex; height:100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.galeria__pista.sin-transicion{ transition:none; }   /* mientras el dedo arrastra */
.galeria__pieza{ position:relative; flex:0 0 100%; }
.galeria__pieza img, .galeria__pieza video{
  position:absolute; inset:0;      /* la pieza se ajusta a la caja, nunca la desborda */
  width:100%; height:100%;
  object-fit:contain;
}
.galeria__flecha{
  position:absolute; top:50%; translate:0 -50%;
  background:none; border:0; color:var(--red);
  font-size:clamp(34px,3.6vw,58px); line-height:1; padding:10px;
  transition:transform .3s var(--ease-ui);
}
.galeria__flecha--izq{ left:clamp(10px,2.4vw,52px); }
.galeria__flecha--der{ right:clamp(10px,2.4vw,52px); }
.galeria__flecha--izq:hover{ transform:translateX(-6px); }
.galeria__flecha--der:hover{ transform:translateX(6px); }
.galeria__pie{
  display:flex; justify-content:space-between; gap:16px;
  text-transform:uppercase; font-size:var(--t-nav);
}
.galeria__barra, .galeria__volver{ display:none; }

/* =========================================================
   MÓVIL — maquetación propia (referencias del cliente)
   ========================================================= */
/* Piezas que solo existen en móvil */
.tira__barra, .pasos, .form__atras, .form__siguiente, .form__cerrar{ display:none; }
.tira, .tira__pista{ display:contents; }

@media (max-width:900px){

  /* ---------- ¿Qué es Colectiva? ---------- */
  .que__photo{ display:none; }
  .que__panel{ background:transparent; margin:0; padding:0 0 0 var(--pad); }
  .que__panel .display{ color:var(--plum); }
  .que__text{
    background:var(--orange); color:var(--plum);
    font-size:19px; line-height:1.3;
    margin:26px 0 0 12%; padding:30px 26px 0 26px;
  }
  .que__text + .que__text{ margin-top:0; padding:22px 26px 34px 26px; }
  .que__callout{ margin:0 var(--pad) 0 0; }

  /* ---------- Primera edición ---------- */
  .primera__block{ background:var(--red); margin:0 6% 0 0; padding:30px var(--pad) 34px; }
  .primera__block .display{ color:var(--bg); }
  .primera__strip{
    background:transparent; color:var(--plum); width:auto;
    font-size:19px; line-height:1.3;
    margin:0; padding:26px var(--pad) 0;
  }

  /* tira: videos y fotos juntos. Avanza al bajar y también con el dedo */
  .tira{
    display:block; margin-top:26px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tira::-webkit-scrollbar{ display:none; }
  .tira__pista{
    display:flex; flex-wrap:nowrap; gap:12px;
    width:max-content; padding:0 var(--pad);
  }
  .primera__videos, .primera__galeria{
    display:flex; flex-wrap:nowrap; gap:12px;
    width:auto; margin:0; padding:0;
  }
  .primera__videos .clip{ width:72vw; aspect-ratio:16/11; }
  .primera__galeria .clip{ width:50vw; }
  .tira__barra{
    display:block; height:6px; margin:16px var(--pad) 0;
    background:rgba(73,39,61,.22);
  }
  .tira__barra span{
    display:block; height:100%; background:var(--orange);
    transform:scaleX(var(--tp,0)); transform-origin:left center;
  }

  /* ---------- La ruta ---------- */
  .ruta__map::before{ display:none; }
  .ruta__map{ padding-left:0; }
  .ruta__title{ text-align:left; }
  .stop{
    position:relative; left:auto; top:auto; width:auto;
    padding:20px calc(var(--pad) + 46px) 22px var(--pad);
  }
  .stop__go{ margin-top:.5em; }
  .stop__go i{
    position:absolute; right:var(--pad); bottom:20px;
    font-size:34px; line-height:1; font-style:normal;
  }

  /* ---------- Fechas y sedes ---------- */
  .fechas__hint{
    font-family:var(--f-display); font-weight:400; letter-spacing:0;
    text-transform:uppercase; color:var(--plum);
    font-size:11.5vw; line-height:1; text-align:left;
    padding:0 var(--pad); margin-bottom:.3em;
  }
  .fechas__tabs{ justify-content:flex-start; gap:10px; padding:0 var(--pad); margin-bottom:-20px; }
  .fechas__stage{ background:var(--orange); }
  .fechas__panel{ background:transparent; margin:0; padding:46px var(--pad) 8px; }
  .fechas[data-sede="loja"] .fechas__panel{ margin:0; padding:46px var(--pad) 8px; }
  .fechas__ilu{ margin-top:0; }

  /* ---------- Galería ---------- */
  .galeria{ grid-template-rows:auto minmax(0,1fr) auto auto auto; gap:14px; padding-top:26px; }
  .galeria__top{ display:block; }
  .galeria__logo{ width:min(52%,210px); }
  .galeria__titulo{ text-align:left; font-size:11vw; margin-top:34px; }
  .galeria__cerrar, .galeria__flecha{ display:none; }
  .galeria__visor{ padding-inline:0; min-height:46vh; }
  .galeria__pie{ font-size:16px; }
  .galeria__barra{
    display:block; height:7px; background:rgba(73,39,61,.22);
  }
  .galeria__barra span{
    display:block; height:100%; background:var(--orange);
    transform:scaleX(var(--gp,0)); transform-origin:left center;
    transition:transform .35s var(--ease);
  }
  .galeria__volver{
    display:grid; place-items:center; justify-self:center;
    width:96px; height:76px; margin-top:18px;
    background:rgba(73,39,61,.2); color:var(--plum); border:0;
    font-size:30px; line-height:1;
  }

  /* ---------- Menú ---------- */
  .menu a{ color:var(--bg); }
  .menu nav{ gap:.42em; }
  .menu__foot{ margin-top:auto; }
  .menu__foot{ line-height:1.9; }

  /* ---------- Formulario: se abre como pantalla y va por pasos ---------- */
  .postula{
    position:fixed; inset:0; z-index:60;
    display:none; overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper); padding:0;
  }
  .postula.is-open{ display:block; }
  .form__cerrar{
    display:block; position:sticky; top:0; margin-left:auto;
    background:none; border:0; font-size:26px; line-height:1;
    padding:14px var(--pad); color:var(--plum); z-index:2;
  }
  .form{ background:transparent; padding:0; max-width:none; }
  .form__title{ color:var(--red); font-size:19px; padding:0 var(--pad) 18px; }
  .pasos{ display:block; padding:0 var(--pad) 22px; }
  .pasos__n{ color:var(--red); text-transform:uppercase; font-size:16px; margin-bottom:10px; }
  .pasos__barra{ height:7px; background:rgba(73,39,61,.22); }
  .pasos__barra span{
    display:block; height:100%; background:var(--orange);
    transform:scaleX(var(--fp,.33)); transform-origin:left center;
    transition:transform .4s var(--ease);
  }
  .form__body{
    background:transparent; grid-template-columns:1fr;
    padding:0 var(--pad) 40px; gap:26px; color:var(--plum);
  }
  .form__body [data-paso]{ display:none; }
  .form[data-paso="1"] [data-paso="1"],
  .form[data-paso="2"] [data-paso="2"],
  .form[data-paso="3"] [data-paso="3"]{ display:flex; }
  .field input[type="text"], .field input[type="url"], .field input[type="email"],
  .field input[type="tel"], .field textarea{
    border:2px solid var(--plum); min-height:66px; background:transparent;
  }
  .field textarea{ min-height:300px; }

  /* categorías y sede como botones */
  .checks{ display:flex; flex-wrap:wrap; gap:10px; padding-left:0; }
  .checks label{
    border:1px solid var(--plum); padding:12px 14px;
    font-size:16px; gap:0;
  }
  .checks input{ display:none; }
  .checks label:has(input:checked){ background:var(--red); color:var(--bg); border-color:var(--red); }

  .form__foot{ gap:12px; align-items:stretch; }
  .form__atras, .form__siguiente{
    display:inline-flex; align-items:center; justify-content:center;
    border:0; text-transform:uppercase; font-weight:700;
  }
  .form__atras{ background:rgba(73,39,61,.2); color:var(--plum); width:74px; font-size:22px; }
  .form__siguiente, .form__send{
    flex:1; background:var(--plum); color:var(--bg);
    font-size:22px; padding:.7em 1em;
  }
  .form[data-paso="1"] .form__atras{ display:none; }
  .form[data-paso="3"] .form__siguiente{ display:none; }
  .form:not([data-paso="3"]) .form__send{ display:none; }
  .form__foot{ flex-wrap:wrap; }
  .form__alterno{ flex-basis:100%; text-align:center; margin-top:6px; }

  /* ---------- Pantalla de enviado ---------- */
  .enviado{
    position:fixed; inset:0; z-index:70;
    background:var(--orange);
    display:grid; grid-template-rows:1fr auto 1fr; align-items:center;
    text-align:center;
  }
  .enviado__titulo{
    align-self:end; color:var(--plum); font-weight:700;
    font-size:clamp(28px,8.6vw,46px); line-height:1.1;
    padding:0 var(--pad) 40px; text-transform:uppercase;
  }
  .enviado__gracias{
    background:var(--bg); color:var(--red);
    text-transform:uppercase; font-size:19px; line-height:1.4;
    padding:26px var(--pad);
  }
  .enviado__btn{
    justify-self:center; align-self:start; margin-top:44px;
    background:var(--teal); color:var(--bg); border:0;
    text-transform:uppercase; font-weight:700; font-size:22px;
    padding:.7em 2.4em;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .js .split .w__i{ transform:none; }
  .js .img-in img{ clip-path:none; transform:none; }
  .ruta__path{ stroke-dashoffset:0; }
}

/* Convocatoria: sede cerrada */
.conv__cerrada{ opacity:.55; text-decoration:line-through; }
/* Botón de postular una vez pasada la fecha: queda a la vista pero inerte */
.is-cerrado{
  pointer-events:none; cursor:default;
  opacity:.65; filter:grayscale(1);
  animation:none !important; box-shadow:none !important;
}
.is-cerrado::after{ display:none; }
.checks label.is-cerrada,
.tsedes label.is-cerrada{ opacity:.45; cursor:not-allowed; }
.tsedes label.is-cerrada small{ font-weight:400; font-size:.62em; letter-spacing:.04em; }
.checks label.is-cerrada small{ font-weight:400; font-size:.72em; letter-spacing:.04em; }
.field__nota{ margin:.6em 0 0; font-size:clamp(13px,1.1vw,18px); opacity:.75; }

/* =========================================================
   PÁGINA DE POSTULACIÓN AL TALLER (taller.html)
   ========================================================= */
.pag-taller{ background:var(--t-cielo); }
.pag-taller main{ min-height:100svh; }
/* El formulario va sobre el paisaje; la pantalla de enviado, sobre el cielo. */
.tform{
  background:var(--t-cielo) url(../assets/ilu-taller.jpg) center bottom/cover no-repeat;
  min-height:100svh;
}
.texito{
  background:var(--t-cielo) url(../assets/ilu-taller.jpg) center top/cover no-repeat;
}

/* El marco rosa con el panel crema dentro */
.tform{ padding:clamp(90px,14vh,170px) var(--pad) clamp(50px,8vh,110px); }
.tform, .texito{ background-attachment:fixed; }
@media (max-width:900px){
  .tform, .texito{ background-attachment:scroll; background-size:auto 190%; }
  .tform { background-position:center 94%; }
  .texito{ background-position:center top; }
}
.tform__marco{
  max-width:1100px; margin:0 auto;
  background:var(--t-rosa);
  padding:clamp(14px,1.6vw,30px);
}
.tform__title{
  margin:0 0 clamp(12px,1.2vw,22px);
  color:var(--t-crema); text-transform:uppercase; font-weight:700;
  font-size:clamp(14px,1.35vw,24px); letter-spacing:.02em;
}
.tform__plazo{
  margin:0 0 clamp(12px,1.2vw,22px);
  color:var(--t-crema); text-transform:uppercase;
  font-size:clamp(12px,1.1vw,19px); opacity:.9;
}
.tform__panel{
  background:var(--paper);
  padding:clamp(24px,3vw,56px) clamp(20px,2.6vw,48px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,42px) clamp(20px,3vw,56px);
}
.tcampo{ min-width:0; border:0; margin:0; padding:0; display:grid; align-content:start; gap:.5em; }
.tcampo--ancho{ grid-column:1 / -1; }
.tcampo--vacio{ display:none; }
.tcampo label, .tcampo legend{
  color:var(--plum); text-transform:uppercase; font-weight:700;
  font-size:clamp(13px,1.15vw,20px); padding:0;
}
.tcampo input, .tcampo textarea{
  width:100%; font:inherit; color:var(--plum);
  background:transparent; border:1px solid var(--red);
  padding:.55em .7em; border-radius:0;
  font-size:clamp(15px,1.2vw,21px);
}
.tcampo textarea{ resize:vertical; min-height:clamp(150px,22vh,280px); }
.tcampo input:focus-visible, .tcampo textarea:focus-visible{
  outline:2px solid var(--t-rosa); outline-offset:1px;
}
.tcampo.is-invalid input, .tcampo.is-invalid textarea{ border-width:2px; background:rgba(255,40,0,.06); }
.tcampo__err{ margin:.2em 0 0; color:var(--red); font-size:clamp(13px,1.05vw,18px); }

/* Sede: casillas cuadradas que se rellenan de rosa */
.tsedes{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,90px); margin-top:.3em; }
.tsedes label{
  display:flex; align-items:center; gap:clamp(12px,1.4vw,26px);
  cursor:pointer; text-transform:uppercase; color:var(--plum); font-weight:400;
}
.tsedes input{
  appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto;
  width:clamp(22px,1.8vw,32px); aspect-ratio:1;
  border:1px solid var(--red); background:transparent; cursor:pointer;
}
.tsedes input:checked{ background:var(--t-rosa); border-color:var(--t-rosa); }
.tsedes input:focus-visible{ outline:2px solid var(--t-rosa); outline-offset:2px; }
.tsedes span{ font-size:clamp(18px,1.9vw,34px); }

.tform__pie{ display:grid; justify-items:center; gap:.7em; margin-top:.4em; }
.tform__enviar{
  border:0; cursor:pointer; font:inherit;
  background:var(--t-rosa); color:var(--plum);
  text-transform:uppercase; padding:.5em 2.4em;
  font-size:clamp(20px,2vw,36px);
  transition:transform .3s var(--ease-ui), filter .3s var(--ease-ui);
}
.tform__enviar:hover, .tform__enviar:focus-visible{ transform:scale(1.04); filter:brightness(1.06); }
.tform__enviar:active{ transform:scale(.98); }
.tform__enviar[disabled]{ opacity:.6; cursor:progress; }
.tform__alterno{
  color:var(--plum); text-decoration:underline; text-underline-offset:.25em;
  font-size:clamp(13px,1.05vw,18px); opacity:.75;
}
.tform__status{ margin:0; color:var(--plum); text-align:center; font-size:clamp(14px,1.1vw,19px); }

/* ---------- Pantalla de enviado ---------- */
.texito{
  min-height:100svh; display:grid; align-content:center; justify-items:center;
  gap:clamp(34px,7vh,90px); padding:12vh var(--pad);
  text-align:center;
}
.texito__titulo{
  margin:0; color:var(--t-indigo); text-transform:uppercase; line-height:1.25;
  font-size:clamp(26px,3.6vw,70px);
}
.texito__btn{
  background:var(--t-rosa); color:var(--t-indigo); text-decoration:none;
  text-transform:uppercase; padding:.5em 2.2em;
  font-size:clamp(20px,2vw,36px);
  transition:transform .3s var(--ease-ui);
}
.texito__btn:hover, .texito__btn:focus-visible{ transform:scale(1.04); }

@media (max-width:760px){
  .tform{ padding:14vh var(--pad) 8vh; }
  .tform__panel{ grid-template-columns:minmax(0,1fr); }
}