/* PROCESO. La página es el recorrido de 90 días: bajar es avanzar.
   Sin JavaScript o con movimiento reducido se ve el estado final de todo.
   Lo que depende de JS va bajo .mov (lo pone app.js) o .js (lo pone el script del head). */

@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(fuentes/montserrat-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fuentes/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fuentes/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fuentes/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fuentes/inter-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fuentes/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fuentes/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Mientras carga Montserrat, una Arial con métricas parecidas: el título no salta. */
@font-face{font-family:"Reserva M";src:local("Arial Bold"),local("Arial");font-weight:800;size-adjust:112%;ascent-override:86%;descent-override:22%}

:root{
  --naranja:#FF6A00;
  --negro:#101010;
  --sup:#1B1B1B;
  --gris-marca:#777;      /* solo en texto grande: sobre #101010 da 4,1:1 */
  --gris-txt:#ADADAD;     /* texto chico: 8,6:1 sobre #101010 y 7,9:1 sobre #1B1B1B */
  --blanco:#fff;
  --incl:29deg;           /* medido de las barras del símbolo: atan(330/596) */
  --tan:.5543;            /* tan(29°), para recortes y márgenes inclinados */
  --sesgo:calc(var(--incl) * -1);
  --m:clamp(16px,5vw,96px);
  --seguro:env(safe-area-inset-bottom,0px);
  --barra-h:69px;         /* alto real del contador, sin el área segura */
  --barra-t:calc(var(--barra-h) + var(--seguro));
  --c0:clamp(48px,9vw,120px); /* alto del chanfle entre secciones */
  --titular:Montserrat,"Reserva M",Arial,sans-serif;
  --texto:Inter,Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.15,1);
  --vh:1vh;
}
@supports (height:1svh){:root{--vh:1svh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--negro);scroll-padding-top:16px;scroll-padding-bottom:calc(var(--barra-t) + 16px)}
body{margin:0;background:var(--negro);color:var(--blanco);font:400 17px/1.55 var(--texto);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;touch-action:manipulation}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
em{font-style:normal;color:var(--naranja)}
a{color:inherit}
i{display:block;font-style:normal}
h1,h2,h3,.reemplazo,.pq-b{font-family:var(--titular);font-weight:800;letter-spacing:-.035em;line-height:.98}
:focus-visible{outline:3px solid var(--blanco);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.saltar{position:fixed;top:8px;left:8px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--blanco);color:var(--negro);font-weight:600;transform:translateY(-200%)}
.saltar:focus-visible{transform:none}

/* ------- Botón: paralelogramo al ángulo del logo. Al pasar el mouse sale la segunda barra de la P. */
.boton{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;color:var(--negro);font:800 16px/1.1 var(--titular);letter-spacing:-.01em;text-decoration:none;text-align:center;white-space:nowrap}
.boton::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--naranja);transform:skewX(var(--sesgo))}
.boton::after{content:"";position:absolute;top:0;bottom:0;left:-18px;width:9px;z-index:-2;background:var(--naranja);opacity:0;transform:translateX(12px) skewX(var(--sesgo));transition:transform .18s var(--ease),opacity .18s}
.boton:hover::after,.boton:focus-visible::after{opacity:1;transform:skewX(var(--sesgo))}
.boton:active::before{transform:skewX(var(--sesgo)) translateY(2px)}
.boton-b{color:var(--blanco)}
.boton-b::before{background:transparent;border:2px solid var(--gris-marca)}
.boton-b::after{background:var(--gris-marca)}

/* ------- Inicio */
.inicio{position:relative;display:flex;flex-direction:column;min-height:calc(calc(var(--vh) * 100) - var(--barra-t) + var(--c0));padding:16px var(--m) calc(var(--c0) + 20px);overflow:hidden;overflow:clip}
.fondo-p{position:absolute;top:-12%;right:-34vw;bottom:-12%;width:92vw;display:flex;gap:7vw;transform:skewX(var(--sesgo));pointer-events:none}
.fondo-p i{flex:0 0 22vw;background:var(--sup)}
.marca{position:relative;align-self:flex-start;display:block;padding:8px 8px 8px 0}
.marca img{width:150px;height:auto}
.titulo{position:relative;margin-top:auto;padding-top:20px;--g:min(19.6vw,calc(var(--vh) * 26));--ch:min(9.6vw,calc(var(--vh) * 6.4))}
.titulo h1{font-size:var(--ch)}
.chica{display:block;line-height:1.04;letter-spacing:-.02em}
/* El margen izquierdo del título sigue la inclinación del logo: cuanto más arriba, más corrido. */
.c1{margin-left:calc(var(--tan) * (var(--g) * 1.9 + var(--ch) * 1.04))}
.c2{margin-left:calc(var(--tan) * var(--g) * 1.9);margin-bottom:.22em}
.tachada{position:relative;display:block;width:max-content;margin-left:calc(var(--tan) * var(--g) * .96);font-size:var(--g);line-height:.98}
/* La palabra se corta a lo largo de la barra: el trozo derecho se desliza por el corte. */
.tachada-a{display:block;color:var(--blanco);opacity:.5;clip-path:polygon(-5% -10%,calc(60% + .34em) -10%,calc(60% - .34em) 115%,-5% 115%)}
.tachada::after{content:"inercia.";content:"inercia." / "";position:absolute;left:0;top:0;color:var(--blanco);opacity:.5;clip-path:polygon(calc(60% + .34em) -10%,115% -10%,115% 115%,calc(60% - .34em) 115%);transform:translate(.1em,-.055em)}
.tajo{--alto:1.2em;position:absolute;z-index:1;left:calc(60% - .17em + .05em);top:calc(.49em - var(--alto) * .52);width:.34em;height:var(--alto);background:var(--naranja);transform-origin:50% 52%;transform:skewX(var(--sesgo))}
.reemplazo{font-size:var(--g);color:var(--naranja);overflow:hidden;overflow:clip;overflow-clip-margin:.04em;padding:.02em 0 .06em;margin-top:-.02em}
.reemplazo span{display:block}
.inicio-pie{position:relative;margin-top:18px}
.inicio-bajada{max-width:30ch;color:var(--blanco);font-size:17px;line-height:1.4}
.botones{display:flex;flex-wrap:wrap;gap:12px 28px;margin:18px 0 0 14px}
.baja{margin-top:18px;color:var(--gris-txt);font-size:15px}
.baja b{font-weight:600;color:var(--blanco)}

@media (prefers-reduced-motion:no-preference){
  .tajo{animation:tajo .22s .35s cubic-bezier(.7,0,.2,1) backwards}
  .tachada-a{animation:apagar .28s .55s linear backwards}
  .tachada::after{animation:apagar .28s .55s linear backwards,deslizar .34s .55s var(--ease) backwards}
  .reemplazo span{animation:entrar .55s .72s var(--ease) backwards}
  .baja b{display:inline-block;animation:baja 1.8s 1.6s ease-in-out 3}
}
@keyframes tajo{from{transform:skewX(var(--sesgo)) scaleY(0)}}
@keyframes apagar{from{opacity:1}}
@keyframes deslizar{from{transform:none}}
@keyframes entrar{from{transform:translate(calc(var(--tan) * -1.15em),1.15em)}}
@keyframes baja{50%{transform:translate(calc(var(--tan) * -.3em),.3em)}}

/* ------- Cortes de sección: el borde superior baja con un chanfle al ángulo del logo. */
.corte{--c:var(--c0);--x:50%;position:relative;z-index:1;margin-top:calc(var(--c) * -1);padding-top:calc(var(--c) + 48px);background:var(--sup);clip-path:polygon(0 var(--c),var(--x) var(--c),calc(var(--x) + var(--c) * var(--tan)) 0,100% 0,100% 100%,0 100%)}

/* Título que entra por una máscara: la línea sube a lo largo de la diagonal y se endereza. */
.t{overflow:hidden;overflow:clip;overflow-clip-margin:.05em;padding-bottom:.08em}
.t>span{display:block}
.mov .t>span{transition:transform .7s var(--ease);will-change:transform}
.mov .t:not(.visto)>span{transform:translate(calc(var(--tan) * -1.1em),115%) skewX(var(--sesgo))}

/* ------- Para quién */
.para-quien{padding-inline:var(--m);padding-bottom:88px}
.para-quien h2{font-size:clamp(46px,13.4vw,172px);max-width:9.5em}
/* La misma línea, otra vez: la repetición es el argumento. Estas filas no se mueven con nada. */
.eco{margin-top:32px;font:800 clamp(26px,8.15vw,132px)/1.12 var(--titular);letter-spacing:-.03em;white-space:nowrap}
.eco p+p{color:var(--blanco);opacity:.42}
.pq-a{margin-top:28px;max-width:24ch;font-size:clamp(20px,5.4vw,34px);line-height:1.3;font-weight:500}
.pq-b{margin-top:56px;font-size:clamp(38px,11vw,132px);line-height:1.02}

/* ------- Inercia contra proceso */
.versus{position:relative;background:var(--negro)}
.versus-fija{display:flex;flex-direction:column;gap:40px;padding:64px var(--m) 72px;overflow:hidden;overflow:clip}
.fila{position:relative;display:flex;flex-direction:column}
.fila-palabra{font-size:clamp(52px,15.5vw,180px)}
.fila-inercia .fila-palabra{color:var(--blanco);opacity:.5}
.fila-proceso .fila-palabra{color:var(--naranja)}
.fila-texto{margin-top:10px;max-width:34ch;font-size:clamp(17px,4.6vw,22px);line-height:1.35}
.aviso,.gigante{display:none}
.barras{--gb:1.6vw;display:flex;gap:var(--gb);margin:18px calc(var(--m) * -1) 0;padding:0 calc(var(--m) * .6)}
.barras i{flex:1 1 0;background:var(--gris-marca);transform:skewX(var(--sesgo))}
.barras-grises{height:clamp(44px,calc(var(--vh) * 8),72px)}
.barras-grises i:last-child{display:none}
.barras-naranjas{height:clamp(170px,calc(var(--vh) * 30),340px)}
.barras-naranjas i{background:var(--naranja);transform-origin:50% 100%;transform:skewX(var(--sesgo)) scaleY(var(--s))}

/* Con movimiento la escena entra entera en cualquier alto: la escalera ocupa lo que sobra. */
.mov .versus{height:calc(var(--vh) * 225)}
.mov .versus-fija{position:sticky;top:0;height:calc(calc(var(--vh) * 100) - var(--barra-t));gap:clamp(10px,calc(var(--vh) * 2.6),36px);padding-block:clamp(10px,calc(var(--vh) * 2.6),28px)}
.mov .fila-palabra{font-size:min(15.5vw,calc(var(--vh) * 9.6))}
.mov .fila-texto{margin-top:6px;font-size:clamp(16px,4.6vw,22px)}
.mov .barras{margin-top:clamp(8px,calc(var(--vh) * 2),18px)}
.mov .barras-grises{height:clamp(26px,calc(var(--vh) * 7),72px);will-change:transform;margin-right:calc(var(--m) * -1 - (100vw - var(--m) * 1.2 + var(--gb)) / 18)}
.mov .barras-grises i:last-child{display:block}
.mov .fila-proceso{flex:1 1 0;min-height:0}
.mov .barras-naranjas{flex:1 1 0;height:auto;min-height:0}

/* El día clavado: gris, enorme, sin moverse mientras la cinta de abajo sí se mueve. Al soltarse se pone naranja, cuenta y sale por la diagonal. */
.mov .gigante{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:.06em;right:var(--m);bottom:clamp(30px,calc(var(--vh) * 6),64px);margin:0;color:var(--gris-marca);font:800 min(68vw,calc(var(--vh) * 42))/.78 var(--titular);letter-spacing:-.06em;pointer-events:none;will-change:transform,opacity}
.gigante span{font:600 clamp(15px,2.2vw,28px)/1 var(--texto);letter-spacing:.04em}
.gigante b{display:block;font-weight:inherit}
.mov .gigante.suelto{color:var(--naranja)}
.mov .gigante.suelto span{visibility:hidden}
.mov .aviso{position:absolute;z-index:1;display:block;top:100%;left:0;margin-top:clamp(8px,calc(var(--vh) * 1.6),14px);font-size:clamp(17px,2.6vw,36px);font-weight:500;line-height:1.2;max-width:14em}

/* ------- 90 */
.noventa{padding:48px var(--m) 96px;overflow:hidden;overflow:clip}
.noventa-num{display:block;font-size:min(64vw,560px);line-height:.8;letter-spacing:-.06em;margin-left:-.04em}
.noventa-frase{display:block;margin-top:.45em;max-width:14em;font-size:clamp(28px,7.6vw,72px);line-height:1.04}
/* Un bloque tipográfico: cada línea llena el ancho, cada una a su tamaño. Con movimiento se prenden de a una, con el mismo barrido diagonal del teléfono. */
/* --k es el ancho de la línea en em, medido en Montserrat con este interletrado; .04em es el aire del recorte, para que la última letra no se corte. */
.tres{--w:calc(100vw - var(--m) * 2);margin-top:72px}
.tres h3{font-size:inherit}
.linea{position:relative;display:block;width:max-content;font-size:calc(var(--w) / (var(--k) + .04));letter-spacing:-.035em;line-height:1;padding:0 .04em .06em 0;overflow:hidden;overflow:clip}
.velo{display:none}
.mov .velo{position:absolute;display:block;top:0;bottom:0;left:-.8em;right:-.8em;background:rgba(16,16,16,.8);will-change:transform}
.mov .velo::before{content:"";position:absolute;top:0;bottom:0;left:0;width:.05em;background:var(--naranja)}

/* ------- Cintas PROCESO A PROCESO: la doble barra de la P cruzando la pantalla */
.cintas{--ancho:clamp(54px,15vmin,170px);--giro:calc(var(--incl) - 90deg);position:relative;min-height:max(calc(var(--vh) * 100),560px);overflow:hidden;overflow:clip;background:var(--negro);display:flex}
.cinta{position:absolute;left:50%;top:50%;width:300vmax;height:var(--ancho);display:flex;align-items:center;white-space:nowrap;font:800 calc(var(--ancho) * .62)/1 var(--titular);letter-spacing:-.02em;overflow:hidden;overflow:clip}
.cinta span{display:block;flex:none;will-change:transform}
.cinta-1{background:var(--naranja);color:var(--negro);transform:translate(-50%,-50%) rotate(var(--giro)) translateY(calc(var(--ancho) * -.78))}
.cinta-2{background:var(--sup);color:var(--gris-txt);transform:translate(-50%,-50%) rotate(var(--giro)) translateY(calc(var(--ancho) * .78))}
.cintas-texto{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(40px,calc(var(--vh) * 9),88px) var(--m) calc(var(--c0) + clamp(24px,calc(var(--vh) * 5),56px));font:800 clamp(23px,7.4vw,84px)/1.06 var(--titular);letter-spacing:-.03em;--alto:9em}
.cintas-a .forma{float:right;width:100%;height:var(--alto);shape-outside:polygon(100% 0,calc(46% + 2.4em) 0,calc(46% + 2.4em - var(--alto) * var(--tan)) var(--alto),100% var(--alto))}
.cintas-a{max-height:calc(var(--alto) * .6)}
.cintas-b{display:flow-root;text-align:left;margin-top:auto}
.cintas-b .forma{float:left;width:100%;height:var(--alto);margin-top:calc(var(--alto) * -.5);shape-outside:polygon(0 0,calc(62% - .4em) 0,calc(62% - .4em - var(--alto) * var(--tan)) var(--alto),0 var(--alto))}

/* ------- La app: pasos con su pantalla. Sin movimiento, una lista. Con movimiento, un teléfono fijo. */
.app{padding-bottom:72px;padding-inline:0}
.app-intro{padding:0 var(--m)}
.app-intro h2{font-size:clamp(44px,12.6vw,150px);max-width:7em}
.app-intro p{margin-top:16px;color:var(--gris-txt);font-size:15px}
.pasos{display:flex;flex-direction:column;gap:56px;margin-top:48px;padding:0 var(--m)}
.paso-txt h3{font-size:clamp(38px,10.6vw,96px)}
.paso-txt p{margin-top:8px;max-width:30ch;font-size:clamp(17px,4.6vw,22px);line-height:1.35}
.tel{position:relative;width:min(68vw,300px);aspect-ratio:860/1864;margin-top:20px;background:var(--negro);border-radius:clamp(20px,5vw,34px);overflow:hidden;outline:2px solid #3A3A3A;outline-offset:-1px}
.tel img{width:100%;height:100%;object-fit:cover}
.barrido,.barrido-i{position:absolute;inset:0}

.indice{display:none}
.mov .escena{height:calc(calc(var(--vh) * 100) + calc(var(--vh) * 240))}
.mov .escena-fija{position:sticky;top:0;height:calc(calc(var(--vh) * 100) - var(--barra-t));overflow:hidden;overflow:clip}
.mov .pasos{position:relative;display:block;height:100%;margin:0;padding:0}
.mov .paso{position:absolute;inset:0}
.mov .paso-txt{position:absolute;z-index:6;top:clamp(12px,calc(var(--vh) * 3),28px);left:var(--m);right:var(--m);opacity:0;transform:translate(-14px,0);transition:opacity .08s linear,transform 0s .08s}
.mov .paso-txt h3{font-size:clamp(30px,9.4vw,96px)}
.mov .paso-txt p{min-height:2.7em}
.mov .paso.activo .paso-txt{opacity:1;transform:none;transition:opacity .18s linear .1s,transform .32s var(--ease) .1s}
.mov .tel{--alto:calc(calc(var(--vh) * 100) - var(--barra-t) - clamp(112px,calc(var(--vh) * 20),150px) - 8px);position:absolute;margin:0;right:var(--m);bottom:-2px;top:auto;left:auto;height:var(--alto);width:auto;max-width:calc(100vw - var(--m) * 2);border-bottom-left-radius:0;border-bottom-right-radius:0}
.mov .barrido{left:-80%;right:-80%;overflow:hidden;will-change:transform}
.mov .barrido-i{will-change:transform}
.mov .barrido-i img{position:absolute;top:0;left:calc(80% / 2.6);width:calc(100% / 2.6);height:100%}
.mov .paso:not(:first-child) .tel{background:transparent;outline-color:transparent}
.mov .paso:not(:first-child) .barrido::before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:0;width:7px;background:var(--naranja)}

/* Índice de las pantallas: dice qué viene. El texto de verdad está en cada paso. */
.mov .indice{position:absolute;z-index:7;display:block;left:var(--m);bottom:clamp(14px,calc(var(--vh) * 3),32px);font:500 14px/1 var(--texto);color:var(--gris-txt)}
.indice li{position:relative;padding:7px 0 7px 16px;white-space:nowrap}
.indice li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:15px;margin-top:-7.5px;background:#3D3D3D;transform:skewX(var(--sesgo))}
.indice li.on{color:var(--blanco)}
.indice li.on::before{background:var(--naranja)}

/* ------- Acompañamiento */
.acompana{background:var(--negro);padding:calc(var(--c) + 56px) var(--m) 88px;z-index:2}
.acompana h2{font-size:clamp(48px,14.4vw,180px)}
/* Lo que hay en lugar del "chau": dos bloques grandes, el segundo colgado de una barra al ángulo del logo. */
.ac-a,.ac-b{--w:calc(100vw - var(--m) * 2);font:800 calc(var(--w) / 9.03)/1.02 var(--titular);letter-spacing:-.035em}
.ac-a{margin-top:56px}
.ac-b{--a:5em;position:relative;margin-top:28px}
.ac-b::before{content:"";position:absolute;top:0;left:calc(var(--a) * var(--tan) / 2);width:.16em;height:var(--a);background:var(--gris-marca);transform:skewX(var(--sesgo))}
.ac-b .forma{float:left;width:calc(var(--a) * var(--tan) + .42em);height:var(--a);shape-outside:polygon(0 0,100% 0,.42em 100%,0 100%)}
.ac-chica{display:block;margin-top:.5em;font:500 clamp(18px,2.2vw,30px)/1.3 var(--texto);letter-spacing:0;color:var(--gris-txt)}

.corta{position:relative;display:inline-block}
.corta-p{display:inline-block;opacity:.5}
.corta i{position:absolute;left:calc(50% - .16em);top:-.08em;width:.32em;height:1.16em;background:var(--naranja);transform-origin:50% 52%;transform:skewX(var(--sesgo))}
.mov .t.visto .corta i{animation:tajo .22s .55s cubic-bezier(.7,0,.2,1) backwards}
.mov .t.visto .corta-p{animation:apagar .28s .75s linear backwards}

/* ------- Agustín: completa sin foto. La doble barra ocupa ese lugar; con foto, la foto va en el mismo corte. */
.agustin{padding:40px var(--m) 96px;overflow:hidden;overflow:clip}
.agustin h2{font-size:clamp(50px,15.6vw,210px)}
.agustin-p{display:flex;gap:18px;height:64px;margin:28px 0 28px 18px;transform:skewX(var(--sesgo))}
.agustin-p i{flex:0 0 34px;background:var(--naranja)}
.foto{margin:28px 0;aspect-ratio:4/5;max-width:440px;clip-path:polygon(calc(var(--tan) * 30%) 0,100% 0,calc(100% - var(--tan) * 30%) 100%,0 100%)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto ~ .agustin-texto{margin-top:0}
.agustin:has(.foto) .agustin-p{display:none}
.agustin-texto{font-size:18px;line-height:1.6;max-width:60ch}
.agustin-texto .forma{display:none}
.agustin-texto .agustin-cita{margin-top:1.4em;font:800 clamp(27px,7vw,56px)/1.08 var(--titular);letter-spacing:-.03em}

/* ------- Cierre */
.cierre{position:relative;z-index:2;padding:0 var(--m) calc(var(--c0) + 56px);background:var(--negro);overflow:hidden;overflow:clip}
.muro{display:flex;gap:.42vw;height:clamp(150px,calc(var(--vh) * 30),340px);align-items:flex-end;margin:0 calc(var(--m) * -1);padding-left:6px}
.muro i{flex:1 1 0;height:100%;background:var(--naranja);transform-origin:50% 100%;transform:skewX(var(--sesgo)) scaleY(var(--s))}
.mov .muro i{transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 9ms)}
.mov .muro:not(.lleno) i{transform:skewX(var(--sesgo)) scaleY(.02)}
/* La mejor línea de la página, justo debajo del muro. */
.cierre-guino{margin-top:clamp(20px,calc(var(--vh) * 4),44px);font:800 clamp(34px,10.4vw,170px)/1.03 var(--titular);letter-spacing:-.035em}
.guino-a{display:block;margin-left:calc(var(--tan) * 1.1em);opacity:.5;text-wrap:balance}
.guino-b{display:block;margin-top:.14em}
.cierre-frase{margin-top:clamp(56px,calc(var(--vh) * 11),120px);max-width:17em;font-size:clamp(27px,7.2vw,76px);line-height:1.06}
.charla{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.globo{position:relative;display:inline-flex;align-items:center;min-height:68px;padding:0 24px;background:var(--blanco);color:var(--negro);font:800 clamp(26px,3vw,38px)/1 var(--titular);letter-spacing:.01em}
.globo::after{content:"";position:absolute;right:20px;top:100%;width:30px;height:18px;background:var(--blanco);transform-origin:0 0;clip-path:polygon(0 0,100% 0,calc(100% - 18px * var(--tan) * 2) 100%,0 100%)}
.globo-t span{display:inline-block}
.cursor{position:absolute;top:50%;left:24px;width:3px;height:30px;margin-top:-15px;background:var(--naranja);display:none}
.mov .charla:not(.escrito) .globo-t span{opacity:0}
.mov .charla:not(.escrito) .globo-t span.ya{opacity:1}
.mov .charla.escribiendo .cursor{display:block;animation:titila .9s steps(2,jump-none) infinite}
@keyframes titila{from{opacity:1}to{opacity:0}}
.boton-g{min-height:68px;margin-left:20px;padding:0 34px;font-size:18px}
.cierre-nota{margin:14px 0 0 20px;color:var(--gris-txt);font-size:15px}

/* ------- Pie: la llegada. Entra con el corte de las secciones y repite las barras del inicio, al revés: negras sobre gris. */
.pie{z-index:3;padding:calc(var(--c) + 56px) var(--m) 28px;overflow:hidden;overflow:clip}
.pie>:not(.pie-p){position:relative}
.pie-p{position:absolute;top:-12%;right:-30vw;bottom:-12%;width:80vw;display:flex;gap:7vw;transform:skewX(var(--sesgo));pointer-events:none}
.pie-p i{flex:0 0 20vw;background:var(--negro)}
.pie-contacto a{display:inline-block;min-height:44px;padding:8px 0;font:800 clamp(21px,5.6vw,56px)/1.12 var(--titular);letter-spacing:-.03em;text-decoration:none;overflow-wrap:anywhere;transition:color .15s linear}
.pie-contacto a:hover{color:var(--naranja)}
.pie-tiendas{margin:32px 0 0 16px;display:flex;flex-wrap:wrap;gap:14px 30px}
.pie-tiendas .boton{min-height:48px;padding:0 18px;font-size:14px}
.pie-base{margin-top:56px}
.pie-descriptor{color:var(--gris-txt);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.pie-legal{margin-top:10px;display:flex;flex-wrap:wrap;gap:0 24px}
.pie-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--gris-txt);font-size:15px;text-decoration:none;text-underline-offset:4px}
.pie-legal a:hover{color:var(--blanco);text-decoration:underline}
.pie-logo{width:100%;margin-top:28px}

/* ------- Contador de recorrido. Sin JS queda pegado abajo con las 90 barras pintadas y el botón a mano. */
.contador{position:sticky;bottom:0;z-index:50;background:var(--negro);border-top:1px solid #2A2A2A;padding:6px var(--m) calc(5px + var(--seguro))}
.tira{display:flex;gap:1px;height:9px;padding-left:5px;margin:0 -8px 0 0;overflow:hidden}
.tira i{flex:1 1 0;background:var(--naranja);transform-origin:50% 100%;transform:skewX(var(--sesgo))}
.contador-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;min-height:44px}
.dia{font:600 15px/1 var(--texto);font-variant-numeric:tabular-nums;white-space:nowrap}
.dia-vivo{display:none}
.dia b{display:inline-block;min-width:2ch;font:800 24px/1 var(--titular);letter-spacing:-.02em;text-align:right;color:var(--naranja)}
.dia small{font:inherit;margin-left:2px;color:var(--gris-txt)}
.boton-c{min-height:44px;padding:0 20px;margin-right:12px;font-size:14px}

.js body{padding-bottom:var(--barra-t)}
.js .contador{position:fixed;left:0;right:0;bottom:0}
.js .dia-fijo{display:none}
.js .dia-vivo{display:inline}
.js .tira i{background:#3D3D3D}
.js .tira i:first-child,.js .tira i.on{background:var(--naranja)}
.js .tira.quieta i.on,.js .tira.quieta i:first-child{background:var(--gris-marca)}
.quieto .dia b{color:var(--blanco)}
.mov .tira i.on{animation:encender .35s var(--ease)}
.mov .tira.quieta i.on{animation:none}
@keyframes encender{from{transform:skewX(var(--sesgo)) scaleY(2.2)}}
.js .boton-c:not(.ve){visibility:hidden;opacity:0;transform:translateY(8px)}
.js .boton-c{transition:opacity .18s linear,transform .25s var(--ease)}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}

/* Celulares bajos: el inicio entra entero arriba del contador, con los dos botones en una línea. */
@media (max-height:720px) and (max-width:639px) and (min-height:460px){
  .inicio{padding-top:6px}
  .titulo{padding-top:6px}
  .inicio-pie{margin-top:8px}
  .inicio-bajada{max-width:none;font-size:14px;line-height:1.3}
  .botones{flex-wrap:nowrap;gap:0 22px;margin:10px 0 0 12px}
  .botones .boton{min-height:46px;padding:0 13px;font-size:14px}
  .baja{margin-top:8px;font-size:14px}
}
@media (max-width:359px) and (min-height:460px) and (max-height:720px){
  .botones{gap:0 14px;margin-left:10px}
  .botones .boton{padding:0 8px;font-size:13px}
}

/* ------- Tablet y escritorio */
@media (min-width:640px){
  :root{--barra-h:59px}
  .contador{display:flex;flex-direction:row-reverse;align-items:center;gap:24px;min-height:var(--barra-t);padding-block:7px calc(7px + var(--seguro))}
  /* Sin botón, la tira llega hasta el margen en vez de dejar su lugar vacío. */
  .js .boton-c:not(.ve){display:none}
  .mov .boton-c.ve{animation:aparece .2s var(--ease)}
  .tira{flex:1;height:26px;gap:2px;margin:0;padding-left:10px}
  .contador-fila{flex:none;margin:0;display:contents}
  .dia{order:3}
  .dia b{font-size:30px}
  .boton-c{order:0;margin:0 12px 0 0}
  .tira{order:1}
}
@media (min-width:900px){
  body{font-size:18px}
  .marca img{width:176px}
  .titulo{--g:min(14.6vw,calc(var(--vh) * 23.5));--ch:min(5vw,calc(var(--vh) * 7.6))}
  .chica{display:inline}
  .c1{margin:0 0 0 calc(var(--tan) * var(--g) * 1.92)}
  .c2{display:inline;margin:0}
  .titulo h1 .chica{line-height:1.1}
  .tachada{margin-top:.11em}
  .fondo-p{right:-6vw;width:60vw;gap:5vw}
  .fondo-p i{flex-basis:14vw}
  .inicio-pie{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:40px;margin-top:22px}
  .botones{margin:0 0 0 18px;justify-content:flex-start}
  .baja{margin:0;font-size:16px;text-align:right}
  .inicio-bajada{font-size:19px}

  .para-quien{padding-bottom:140px}
  .para-quien h2{max-width:none}
  .eco{font-size:clamp(50px,6.6vw,120px);margin-top:44px}
  .pq-a{margin:36px 0 0 auto}
  .pq-b{margin-left:calc(var(--tan) * 2.1em);font-size:clamp(44px,7.4vw,132px)}

  .fila{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:end}
  .fila-palabra{font-size:clamp(80px,10.5vw,170px)}
  .fila-texto{margin:0 0 .5em}
  .barras{grid-column:1/-1;--gb:2vw}
  .barras-naranjas{margin-top:calc(var(--vh) * -13);height:clamp(200px,calc(var(--vh) * 44),460px);pointer-events:none}
  .fila-proceso .fila-palabra,.fila-proceso .fila-texto{position:relative;z-index:1}
  .fila-proceso .fila-texto{max-width:26ch}
  .mov .fila-palabra{font-size:clamp(60px,min(10.5vw,calc(var(--vh) * 17)),170px)}
  .mov .fila-proceso{grid-template-rows:auto minmax(0,1fr)}
  .mov .barras-naranjas{height:auto;align-self:stretch;margin-top:calc(var(--vh) * -13)}
  .mov .gigante{flex-direction:row;font-size:min(38vw,calc(var(--vh) * 60));bottom:calc(var(--vh) * 7)}
  .gigante span{margin-top:.5em}

  .noventa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:32px}
  .noventa-titulo{display:contents}
  .noventa-frase{grid-column:1;grid-row:1;align-self:end;margin:0;font-size:clamp(34px,4.6vw,72px)}
  .noventa-num{grid-column:2;grid-row:1;justify-self:end;font-size:min(36vw,560px);margin:0 -.06em 0 0}
  .tres{grid-column:1/-1;margin-top:96px}

  .cintas-texto{font-size:clamp(40px,4.8vw,84px)}
  .cintas-a{max-width:44%}
  .cintas-a .forma{display:none}
  .cintas-b{max-width:40%;margin-left:auto}
  .cintas-b .forma{display:none}

  .pasos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 40px}
  .paso:nth-child(even){margin-top:120px}
  .mov .pasos{display:block}
  .mov .paso:nth-child(even){margin-top:0}
  .mov .paso-txt{top:50%;right:auto;width:62vw;transform:translate(-14px,-50%)}
  .mov .paso.activo .paso-txt{transform:translateY(-50%)}
  .mov .paso-txt h3{font-size:clamp(70px,9vw,170px);white-space:nowrap}
  .mov .paso-txt p{font-size:clamp(20px,2vw,28px);margin-top:18px;min-height:0;max-width:24ch}
  .mov .tel{--alto:calc(calc(var(--vh) * 100) - var(--barra-h) - 56px);right:12vw;bottom:auto;top:28px;border-radius:32px}

  .acompana h2{font-size:clamp(80px,10.4vw,180px)}
  .ac-a,.ac-b{--w:min(100vw - var(--m) * 2,calc(var(--vh) * 150))}
  .ac-a{margin-top:88px}
  .ac-b{--a:3.5em;margin:48px 0 0 calc(var(--tan) * 16vw)}

  .agustin h2{font-size:clamp(100px,14vw,210px)}
  .agustin-cuerpo{position:relative;margin-top:48px;--a:460px}
  .agustin-cuerpo:has(.foto){--a:640px}
  .agustin-p{position:absolute;left:0;top:0;height:var(--a);width:380px;margin:0 0 0 calc(var(--a) * var(--tan) / 2);gap:32px}
  .agustin-p i{flex:0 0 96px;background:var(--sup)}
  .foto{position:absolute;left:0;top:0;margin:0;width:560px;height:var(--a);max-width:none;aspect-ratio:auto;clip-path:polygon(calc(var(--a) * var(--tan)) 0,100% 0,calc(100% - var(--a) * var(--tan)) 100%,0 100%)}
  .agustin:has(.foto) .agustin-p{display:none}
  .agustin-texto{max-width:1120px;font-size:19px;min-height:var(--a)}
  .agustin-texto .forma{display:block;float:left;width:600px;height:var(--a);shape-outside:polygon(0 0,100% 0,calc(100% - var(--a) * var(--tan)) 100%,0 100%);shape-margin:12px}
  .agustin-texto .agustin-cita{font-size:clamp(34px,3.8vw,56px)}

  .muro{gap:.3vw;height:clamp(200px,calc(var(--vh) * 38),420px)}
  .cierre-guino{font-size:min(5.6vw,calc(var(--vh) * 12))}
  .cierre-frase{font-size:clamp(40px,4.6vw,76px)}
  .charla{flex-direction:row;align-items:flex-start;gap:28px;margin-top:44px}

  .pie-p{right:-6vw;width:60vw;gap:5vw}
  .pie-p i{flex-basis:14vw}
  .pie-cuerpo{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
  .pie-tiendas{flex:none;flex-direction:column;align-items:flex-end;margin:0 16px 8px 0}
  .pie-base{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:88px}
  .pie-legal{margin:0;gap:0 36px}
  .pie-logo{margin-top:20px}
}

/* Escritorios y tablets bajos: el inicio entra entero arriba del contador. */
@media (min-width:640px) and (max-height:720px){
  .inicio{padding-top:8px}
  .marca img{width:150px}
  .titulo{padding-top:8px;--g:min(14.6vw,calc(var(--vh) * 19.5));--ch:min(5vw,calc(var(--vh) * 6.6))}
  .inicio-pie{margin-top:10px}
  .inicio-bajada{font-size:16px;line-height:1.3}
}
@media (min-width:640px) and (max-width:899px) and (max-height:720px){
  .chica{display:inline}
  .c1{margin:0 0 0 calc(var(--tan) * var(--g) * 1.92)}
  .c2{display:inline;margin:0}
  .botones{margin-top:10px}
  .botones .boton{min-height:46px}
  .baja{margin-top:8px}
}
/* Escritorios angostos: el pie del inicio entra en una fila. */
@media (min-width:900px) and (max-width:1140px){
  .inicio-pie{gap:28px}
  .inicio-bajada{max-width:21ch;font-size:15px;line-height:1.3}
  .botones{flex-wrap:nowrap;gap:0 26px}
  .boton{padding:0 24px}
  .baja{max-width:10em;font-size:15px;line-height:1.25}
}