:root{
  --papel:#ebe9e4;
  --tinta:#121212;
  --gris:#6e6c67;
  --linea:rgba(18,18,18,.18);
  --sans:"Archivo",Helvetica,Arial,sans-serif;
  --serif:"EB Garamond",Garamond,Georgia,serif;
  --pad:clamp(18px,4.4vw,64px);
  --w:100; /* ancho de letra según la velocidad, lo mueve app.js */
  --ws:100;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--tinta);font:400 clamp(18px,1.3vw,21px)/1.5 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h2{font:700 clamp(30px,3.2vw,52px)/1 var(--sans);letter-spacing:-.02em;font-variation-settings:"wdth" 80;margin-bottom:.8em}
.grande{font:400 clamp(26px,2.5vw,40px)/1.18 var(--serif);margin-bottom:.8em;letter-spacing:-.005em}
.elastico{font-variation-settings:"wdth" var(--w)}
.elastico-suave{font-variation-settings:"wdth" var(--ws)}

/* barra */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:baseline;padding:18px var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
.top>*{pointer-events:auto}
.mark{font:800 22px/1 var(--sans);text-transform:uppercase;letter-spacing:-.01em;text-decoration:none;color:inherit}
.top-link{font:500 15px var(--sans);color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

.velo{position:fixed;left:var(--pad);bottom:16px;z-index:20;font:500 12px/1 var(--sans);letter-spacing:.02em;color:#fff;mix-blend-mode:difference;font-variant-numeric:tabular-nums}
.velo b{font-weight:700}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;padding:12vh var(--pad) 5vh;position:relative}
.titulo{font:850 clamp(64px,13vw,230px)/.8 var(--sans);text-transform:uppercase;letter-spacing:-.035em;white-space:nowrap;text-align:center;margin-bottom:3vh}
.caballo{position:relative;width:min(70vw,980px,72svh);aspect-ratio:1050/750;align-self:center;background:#d9d6cf}
.caballo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1) contrast(1.05) sepia(.08)}
.caballo img.on{opacity:1}
.hero-pie{display:flex;justify-content:space-between;gap:6vw;width:min(70vw,980px,72svh);margin-top:3vh}
.hero-pie .sub{font:700 15px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.hero-pie p:last-child{max-width:26em;text-align:right}
.cita{width:min(70vw,980px,72svh);margin-top:2.4vh;font:400 12px/1.4 var(--sans);color:var(--gris)}
@media (max-width:760px){
  .hero{padding-top:14vh}
  .caballo,.hero-pie{width:100%}
  .hero-pie{flex-direction:column}.hero-pie p:last-child{text-align:left}
  .cita{width:100%;margin-top:4vh}
}

/* peso: las fotos se atrasan un poco, como algo que tiene masa */
.peso{transform:translate3d(0,var(--lag,0px),0);will-change:transform}

/* quieto */
.quieto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:center;padding:20vh var(--pad)}
.quieto-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.quieto-txt p{max-width:27em;margin-bottom:1em}
.quieto-txt p:last-child{font-style:italic}
.quieto h2{font-size:clamp(44px,5.4vw,96px)}
@media (max-width:760px){.quieto{grid-template-columns:1fr}}

/* ley */
.ley{padding:16vh var(--pad) 18vh;display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;align-items:start;border-top:1px solid var(--linea)}
.ley-año{grid-column:1/-1;font:800 14px var(--sans);letter-spacing:.06em}
.ley-frase{grid-column:1/-1;font:800 clamp(44px,6.6vw,120px)/.92 var(--sans);letter-spacing:-.035em;margin:3vh 0 10vh;max-width:14em}
.ley-txt{grid-column:2/7}
.ley-txt p{margin-bottom:1em;max-width:26em}
.ley-txt p:last-child{font-style:italic}
.ley-foto{grid-column:8/13;margin-top:-4vh}
.ley-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:760px){.ley{display:block}.ley-foto{margin-top:6vh}}

/* por qué */
.porque{background:var(--tinta);color:var(--papel);padding:18vh var(--pad) 20vh}
.porque h2{font-size:clamp(40px,4.6vw,80px);margin-bottom:10vh}
.porque-cuerpo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:4vw}
.razones{list-style:none}
.razones li{font:800 clamp(30px,4.1vw,72px)/1.02 var(--sans);letter-spacing:-.03em;padding:5vh 0;border-top:1px solid rgba(235,233,228,.16);opacity:.22;transition:opacity .6s;font-variation-settings:"wdth" var(--ws)}
.razones li.on{opacity:1}
.razones-fotos{position:sticky;top:18vh;height:64vh}
.razones-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.razones-fotos img.on{opacity:1}
@media (max-width:760px){.porque-cuerpo{grid-template-columns:1fr}.razones-fotos{display:none}.razones li{opacity:1}}

/* rastro */
.rastro{height:260vh;position:relative}
.rastro-escena{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.rastro h2{font-size:clamp(30px,3.4vw,58px);line-height:1.02;margin-bottom:6vh}
#rastro{width:100%;height:auto;mix-blend-mode:multiply}
.rastro-pie{font:400 13px/1.4 var(--sans);color:var(--gris);margin-top:2vh}

/* huellas */
.huellas{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;padding:8vh var(--pad) 22vh}
.huellas figcaption{font-style:italic;margin-top:14px;max-width:24em}
.h-a{grid-column:1/9}
.h-a img{width:100%;aspect-ratio:16/9;object-fit:cover}
.h-b{grid-column:8/12;margin-top:14vh}
.h-b img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:760px){.huellas{display:block}.h-b{margin-top:8vh;width:80%}}

/* costumbre */
.costumbre{position:relative;min-height:120svh;background:#000;color:var(--papel);display:flex;align-items:flex-end;overflow:hidden}
.costumbre-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.costumbre-txt{position:relative;z-index:2;padding:0 var(--pad) 14vh;max-width:900px}
.costumbre h2{font-size:clamp(48px,7vw,130px)}
.costumbre-txt p:last-child{max-width:30em}

/* hacia */
.hacia{padding:20vh var(--pad);display:grid;justify-items:center;text-align:center;background:#fff}
.hacia-foto{width:min(820px,100%)}
.hacia-foto img{width:100%}
.hacia .grande{margin-top:6vh;max-width:18em;font-size:clamp(28px,3vw,50px)}

/* frenar */
.frenar{padding:20vh var(--pad);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:center;border-top:1px solid var(--linea)}
.frenar h2{font-size:clamp(48px,7vw,130px)}
.frenar-txt p:not(.grande){max-width:26em;margin-bottom:1em}
.prueba{font:700 15px var(--sans)!important;text-transform:uppercase;letter-spacing:.06em;margin-top:5vh}
.caballo.chico{width:100%;max-width:none}
.frenar-estado{grid-column:2;font:500 14px var(--sans);color:var(--gris);margin-top:-3vh}
@media (max-width:760px){.frenar{grid-template-columns:1fr}.frenar-estado{grid-column:1}}

/* obra */
.obra{padding:18vh 0 16vh;background:var(--tinta);color:var(--papel);overflow:hidden}
.obra-txt{padding:0 var(--pad);max-width:1000px}
.obra-txt p:not(.grande){max-width:30em;color:#bdbab3}
.cinta{margin-top:12vh}
.cinta-pista{display:flex;gap:2vw;padding-left:var(--pad);width:max-content;transform:translate3d(var(--x,0px),0,0);will-change:transform}
.cinta figure{width:clamp(220px,24vw,380px)}
.cinta img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cinta figcaption{font:500 13px var(--sans);margin-top:10px;color:#bdbab3}

/* sala */
.sala{padding:20vh var(--pad) 20vh}
.sala h2{font-size:clamp(48px,7vw,130px)}
.sala>.grande{max-width:22em}
.turnos{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr);gap:4vw;margin-top:10vh;border-top:1px solid var(--tinta);padding-top:3vh}
.t-n{font:700 13px var(--sans);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3vh}
.dias{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2vw}
.dias button,.horas button{display:flex;justify-content:space-between;align-items:baseline;text-align:left;padding:12px 0;border-bottom:1px solid var(--linea);font:600 clamp(17px,1.3vw,20px) var(--sans);font-variation-settings:"wdth" 85;transition:color .2s}
.dias button span,.horas button span{font:400 15px var(--serif);font-style:italic;color:var(--gris)}
.dias button[aria-pressed=true],.horas button[aria-pressed=true]{color:#fff;background:var(--tinta);padding-left:10px;padding-right:10px}
.dias button[aria-pressed=true] span,.horas button[aria-pressed=true] span{color:#bdbab3}
.horas{display:flex;flex-direction:column}
.horas button:disabled{color:#aaa7a0;cursor:default}
.t-vacio{font-style:italic;color:var(--gris)}
label{display:block;font:600 13px var(--sans);color:var(--gris);margin-bottom:18px}
label input{display:block;width:100%;border:0;border-bottom:1px solid var(--tinta);background:none;padding:8px 0;font:400 22px var(--serif);color:var(--tinta);outline:none}
.t-precio{font-size:16px;color:var(--gris);margin:2vh 0}
.pedir{background:var(--tinta);color:var(--papel);padding:16px 26px;font:700 15px var(--sans);text-transform:uppercase;letter-spacing:.06em;transition:opacity .3s}
.pedir:disabled{opacity:.2;cursor:default}
.t-listo{margin-top:8vh;font:400 clamp(26px,2.5vw,40px)/1.2 var(--serif);max-width:24em}
.t-listo small{display:block;font:400 14px var(--sans);color:var(--gris);margin-top:2vh}
@media (max-width:760px){.turnos{grid-template-columns:1fr;gap:6vh}}

/* pie */
.pie{background:var(--tinta);color:var(--papel);padding:10vh var(--pad) 6vh;overflow:hidden}
.pie-mark{font:850 clamp(80px,19vw,340px)/.8 var(--sans);text-transform:uppercase;letter-spacing:-.04em;white-space:nowrap;margin-bottom:8vh}
.pie-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;font:400 13px/1.5 var(--sans);color:#bdbab3}
.pie a{color:var(--papel)}
@media (max-width:760px){.pie-cols{grid-template-columns:1fr}}

/* aparecer */
.sube{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.sube.ver{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}