/* ============================================================
   CULTIVANA MEDIA — home
   Tipos: veneer (titulares) · Geist Mono (etiquetas) · Geist (texto)
   ============================================================ */

:root{
  --ink:#141414;
  --lime-ink:#5c6b00;   /* lima legible sobre crema */
  --ink-2:#1b1b1b;
  --cream:#f1efe8;
  --lime:#bcd824;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,72px);
  --maxw:1560px;

  --t-display:clamp(64px,15vw,282px);
  --t-sec:clamp(44px,7vw,132px);
  --t-body:clamp(16px,1.1vw,19px);
  /* ============================================================
     ESCALA CV — el sistema de medidas del sitio.
     Todo el texto y todos los margenes, paddings y gaps salen de aqui.
     Cada token llega a su tope alrededor de 1440px y baja solo en
     pantallas mas chicas. Ver ESCALA-CV.md.
     ============================================================ */
  /* --- tipos --- */
  --t-2xs     :clamp(8.5px,0.694vw,10px);
  --t-xs      :clamp(9.5px,0.764vw,11px);
  --t-sm      :clamp(11px,0.868vw,12.5px);
  --t-mono    :clamp(11px,0.903vw,13px);
  --t-md      :clamp(12.5px,0.958vw,13.8px);
  --t-base    :clamp(13.8px,1.076vw,15.5px);
  --t-lg      :clamp(15.5px,1.181vw,17px);
  --t-body    :clamp(16px,1.319vw,19px);
  --t-lead    :clamp(17px,1.528vw,22px);
  --t-xl      :clamp(18px,1.667vw,24px);
  --t-2xl     :clamp(19px,2.083vw,30px);
  --t-3xl     :clamp(22px,2.5vw,36px);
  --t-4xl     :clamp(27px,3.056vw,44px);
  --t-5xl     :clamp(28px,3.889vw,56px);
  --t-6xl     :clamp(31px,4.722vw,68px);
  --t-7xl     :clamp(35px,5.833vw,84px);
  --t-sec     :clamp(44px,9.167vw,132px);
  --t-display :clamp(64px,19.583vw,282px);

  /* --- espacios --- */
  --s1 :clamp(4.3px,0.486vw,7px);
  --s2 :clamp(6.2px,0.694vw,10px);
  --s3 :clamp(8px,0.903vw,13px);
  --s4 :clamp(10px,1.111vw,16px);
  --s5 :clamp(12.4px,1.389vw,20px);
  --s6 :clamp(16px,1.806vw,26px);
  --s7 :clamp(19px,2.361vw,34px);
  --s8 :clamp(24px,3.056vw,44px);
  --s9 :clamp(29px,3.611vw,52px);
  --s10:clamp(34px,4.306vw,62px);
  --s11:clamp(36px,5.139vw,74px);
  --s12:clamp(44px,6.389vw,92px);
  --s13:clamp(53px,7.639vw,110px);
  --s14:clamp(63px,9.167vw,132px);
  --s15:clamp(67px,11.111vw,160px);
  --s16:clamp(84px,13.889vw,200px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:Geist,system-ui,sans-serif;font-weight:500;font-size:var(--t-body);
  line-height:1.5;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
::selection{background:var(--lime);color:var(--ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-weight:630;font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase}

/* ---------- grano ---------- */
/* La capa de ruido queda APAGADA (2026-09-08): ensuciaba todas las letras y
   competia con los tres tipos de veneer, que son los que hacen el efecto.
   El div sigue en el HTML para no mover el orden que usan los estilos
   guardados del editor. Para volver a encenderla, quita el display:none. */
.grain{display:none;
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.115;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}

/* ---------- barra de progreso ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;background:transparent}
.progress i{display:block;height:100%;width:0;background:rgba(241,239,232,.55);transition:width .12s linear}

/* ---------- cursor: un punto que sigue al raton (ref. the1.amsterdam) ----------
   Un solo circulo lima. Sobre algo que se puede clicar se abre y queda como un
   aro. Al apretar se encoge. El cursor del sistema se apaga mas abajo. */
.fcur{position:fixed;top:0;left:0;width:0;height:0;z-index:9996;pointer-events:none;
  opacity:0;display:none;
  transition:opacity .18s linear;will-change:transform,opacity}
.fcur[data-visible="true"]{opacity:1}
.fcur__body{position:absolute;top:0;left:0;display:block;
  width:14px;height:14px;border-radius:50%;
  background:var(--lime);border:1.5px solid var(--lime);
  transform:translate(-50%,-50%);will-change:width,height;
  transition:width .32s var(--ease),height .32s var(--ease),
             background-color .32s var(--ease),border-color .32s var(--ease)}
/* encima de un enlace o un boton: aro vacio */
.fcur[data-interactive="true"] .fcur__body{width:40px;height:40px;
  background:transparent}
/* mientras se aprieta el boton del raton */
.fcur[data-pressed="true"] .fcur__body{width:11px;height:11px;background:var(--lime)}
.fcur[data-interactive="true"][data-pressed="true"] .fcur__body{width:30px;height:30px;
  background:transparent}
/* Esconder la flecha del sistema.
   Antes esto vivia dentro de @media (hover:hover) and (pointer:fine). Ya no
   hace falta: app.js solo pone data-fcur cuando hay raton de verdad, asi que
   el atributo YA es la condicion. Sacarlo del media query quita una forma de
   que la regla no llegue (por ejemplo con la barra de dispositivo de DevTools
   abierta, donde el navegador dice que el puntero es "coarse").

   Se pide dos veces: primero una imagen de 1x1 totalmente transparente y
   despues "none". Hay navegadores que ignoran "none" solo, pero casi ninguno
   ignora una imagen de cursor. Con las dos, gana la que el navegador entienda.
   OJO: si en macOS esta cambiado el tamano del puntero
   (Ajustes → Accesibilidad → Pantalla → Puntero), el sistema manda y ninguna
   pagina web puede esconderlo. Eso se arregla en el Mac, no en el codigo. */
html[data-fcur="true"] .fcur{display:block}
html[data-fcur="true"],
html[data-fcur="true"] body,
html[data-fcur="true"] body *,
html[data-fcur="true"] body ::before,
html[data-fcur="true"] body ::after{
  cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=") 0 0,none!important}
@media (prefers-reduced-motion:reduce){.fcur{display:none!important}}

/* ---------- reveals ---------- */
.ln{display:block;overflow:hidden}
.ln>i{display:block;font-style:normal;transform:translateY(110%);
  transition:transform 1s var(--ease)}
.ln.is-in>i{transform:translateY(0)}
.ln:nth-child(2)>i{transition-delay:.09s}
.ln:nth-child(3)>i{transition-delay:.18s}
.ln:nth-child(4)>i{transition-delay:.27s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- nav ---------- */
/* el menu va pegado a la derecha, junto al icono de buscar (decidido 2026-09-05) */
.nav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;
  justify-content:flex-start;gap:var(--s5);padding:14px var(--pad);
  background:rgba(20,20,20,.0);backdrop-filter:blur(0);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),padding .5s var(--ease)}
.nav.is-stuck{background:var(--ink);backdrop-filter:none;padding-block:var(--s2);
  border-bottom:1px solid rgba(241,239,232,.1)}
.nav__brand{display:flex;align-items:center;gap:var(--s3);font-family:"Geist Mono",monospace;
  font-weight:700;letter-spacing:.13em;font-size:var(--t-md)}
.nav__brand img{width:38px;height:auto}
.nav__links{display:flex;align-items:center;margin-left:auto;gap:var(--s7);
  font-family:"Geist Mono",monospace;font-weight:630;font-size:var(--t-sm);letter-spacing:.14em}
.nav__links a{position:relative;padding-block:4px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--lime);transition:width .5s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__cta{color:var(--cream)}
.nav__cta::after{background:var(--lime)}
/* RESERVAR: el unico enlace del nav que va en pildora, para que se vea que es
   la accion principal. Con seis enlaces el nav se aprieta antes de llegar al
   menu de hamburguesa (900px), asi que ahi se le baja el espacio. */
.nav__cta--btn{background:var(--lime);color:var(--ink);border-radius:100px;
  padding:7px var(--s5);line-height:1;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.nav__cta--btn:hover{background:var(--cream);color:var(--ink);transform:translateY(-2px)}
.nav__cta--btn::after{display:none}
@media (min-width:901px) and (max-width:1200px){.nav__links{gap:var(--s5)}}
@media (max-width:900px){.nav__cta--btn{align-self:flex-start;padding:10px var(--s6)}}
/* ---------- buscador del nav ---------- */
.nav__search{background:none;border:0;padding:6px;cursor:pointer;color:var(--cream);
  display:inline-flex;align-items:center;line-height:0;opacity:.85;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nav__search:hover{opacity:1;transform:scale(1.12)}
.nav__search svg{width:18px;height:18px;display:block}
.srch{position:fixed;inset:0;z-index:9500;background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;
  padding:clamp(70px,10vh,130px) var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.srch.is-open{opacity:1;visibility:visible;transition-delay:0s,0s}
.srch__box{max-width:900px;width:100%;margin-inline:auto;
  border-bottom:2px solid rgba(241,239,232,.28);display:flex;align-items:center;gap:var(--s3);
  padding-bottom:var(--s3)}
.srch__box svg{width:24px;height:24px;flex:0 0 auto;opacity:.6}
.srch__in{flex:1;background:none;border:0;color:var(--cream);outline:0;
  font-family:veneer,Impact,sans-serif;font-size:var(--t-6xl);line-height:1;
  padding:4px 0}
.srch__in::placeholder{color:rgba(241,239,232,.28)}
.srch__x{background:none;border:0;color:var(--cream);cursor:pointer;font-size:var(--t-lead);
  opacity:.6;padding:6px}
.srch__x:hover{opacity:1}
.srch__res{max-width:900px;width:100%;margin:clamp(18px,3vh,36px) auto 0;
  overflow:auto;display:grid;gap:2px}
.srch__hit{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline;
  padding:var(--s3) var(--s3);border-radius:8px;transition:background .3s var(--ease)}
.srch__hit:hover,.srch__hit.is-on{background:rgba(188,216,36,.14)}
.srch__hit b{font-family:veneer,Impact,sans-serif;font-size:var(--t-2xl);
  font-weight:400;line-height:1}
.srch__hit span{color:rgba(241,239,232,.55);font-size:var(--t-md);line-height:1.4}
.srch__hit i{font-style:normal;color:var(--lime);font-family:"Geist Mono",monospace;
  font-size:var(--t-xs);letter-spacing:.12em;grid-column:1;align-self:center}
.srch__none{color:rgba(241,239,232,.5);padding:var(--s5) var(--s3);font-size:var(--t-base)}
@media (max-width:900px){.nav__search{margin-left:auto;margin-right:6px}}

.nav__burger{display:none;background:none;border:0;padding:var(--s2);cursor:pointer}
.nav__burger i{display:block;width:26px;height:2px;background:var(--cream);margin:5px 0;
  transition:transform .45s var(--ease)}
@media (max-width:900px){
  .nav__links{position:fixed;top:0;left:0;width:100vw;height:100svh;
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding-left:var(--pad);background:var(--ink);font-size:var(--t-lead);gap:var(--s6);
    transform:translateY(-102%);opacity:0;visibility:hidden;
    transition:transform .7s var(--ease),opacity .4s var(--ease),visibility 0s linear .7s}
  .nav__links.is-open{transform:none;opacity:1;visibility:visible;transition-delay:0s,0s,0s}
  .nav__burger{display:block;position:relative;z-index:2}
}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.hero__inner{position:relative;z-index:2;padding:0 var(--pad);max-width:var(--maxw);
  margin-inline:auto;width:100%;padding-bottom:clamp(28px,5vh,60px)}
.hero__title{font-family:veneer,Impact,sans-serif;font-size:var(--t-display);
  line-height:.8;letter-spacing:-.008em;color:var(--cream);
  rotate:-1.2deg;transform-origin:left bottom;
  text-shadow:0 6px 40px rgba(0,0,0,.55)}
.hero__sub{margin-top:clamp(16px,2vh,28px);max-width:34ch;font-size:var(--t-body);
  color:rgba(241,239,232,.86);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero__foot{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s4);padding:18px var(--pad) 22px;max-width:var(--maxw);
  margin-inline:auto;width:100%;border-top:1px solid rgba(241,239,232,.16);
  margin-top:clamp(20px,4vh,44px);color:rgba(241,239,232,.7)}
.scrollcue{display:inline-flex;align-items:center;gap:var(--s1);color:rgba(241,239,232,.8)}
.scrollcue i{width:1px;height:26px;background:rgba(241,239,232,.8);display:block;
  animation:cue 1.9s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.25);opacity:.4}45%{transform:scaleY(1);opacity:1}}
@media (max-width:760px){
  .hero__media img{object-position:76% 30%}
  .hero__foot span:last-child{display:none}
}

/* ============ CLIENTES / MARQUEE ============ */
.clients{background:var(--ink);padding:var(--s10) var(--pad)
  calc(var(--s12) + var(--s8));
  border-top:1px solid rgba(241,239,232,.13)}
.clients .eyebrow{color:rgba(241,239,232,.5);border-color:rgba(241,239,232,.18);
  margin-bottom:var(--s11)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:var(--s12);width:max-content;
  will-change:transform}
.marquee__track img{width:clamp(86px,6.6vw,116px);height:auto;opacity:.7;
  filter:invert(1) brightness(1.9);transition:opacity .5s var(--ease)}
.marquee:hover .marquee__track img{opacity:.4}
.marquee__track img:hover{opacity:1}
.clients__note{margin-top:var(--s7);color:rgba(241,239,232,.36);
  padding-top:var(--s5);border-top:1px solid rgba(241,239,232,.13)}
@media (max-width:760px){.clients__note{line-height:1.9}}

/* ============ MANIFIESTO ============ */
.eyebrow{display:flex;align-items:center;gap:var(--s5);color:rgba(20,20,20,.72);
  padding-bottom:var(--s4);border-bottom:1px solid rgba(20,20,20,.18);margin-bottom:var(--s11)}
.eyebrow span,.eyebrow i{color:var(--lime-ink);font-style:normal}
.manifesto{background:var(--cream);color:var(--ink);padding:var(--s15) 0 var(--s13);
  position:relative}
.manifesto__title{font-family:veneer,Impact,sans-serif;font-size:var(--t-sec);line-height:.88;
  color:var(--ink)}
.manifesto__title .accent{color:var(--ink-2)}

.manifesto__scribble{width:min(46vw,520px);margin-top:-.6vw;margin-left:2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .35s}
.manifesto.is-in .manifesto__scribble{clip-path:inset(0 0 0 0)}
.manifesto__cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s11);margin-top:var(--s12);align-items:start}
.manifesto__cols p{color:rgba(20,20,20,.82);max-width:52ch}
.manifesto__cols .big{font-size:var(--t-lead);letter-spacing:.1em;line-height:1.35;
  color:var(--ink)}
.manifesto__cols .big em{font-style:normal;background:var(--lime);color:#1B1B1B;
  padding:.14em .26em .18em;margin:0 -.1em;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
@media (max-width:860px){.manifesto__cols{grid-template-columns:1fr}}
/* barrita de progreso al lado derecho: se mueve mientras bajas la seccion */
.mscroll{position:absolute;right:var(--pad);z-index:2;width:6px;
  top:clamp(90px,11vw,170px);bottom:clamp(60px,7vw,120px);
  background:rgba(20,20,20,.14)}
.mscroll i{position:absolute;left:0;right:0;top:0;height:11%;
  background:var(--lime);transition:top .18s linear}
@media (max-width:860px){.mscroll{display:none}}

/* ============ PORTAFOLIO ============ */
.slidecue{background:var(--cream);display:flex;justify-content:center;
  padding:var(--s11) var(--pad)}
.scrollcue--ink{color:var(--ink);letter-spacing:.16em;
  font-size:var(--t-body);gap:var(--s3)}
.scrollcue--ink i{background:var(--ink);height:40px;width:1.5px}

.work{background:var(--cream);color:var(--ink);padding:var(--s14) 0 0}
.work__head .eyebrow{margin-bottom:var(--s8)}
.sec-title{font-family:veneer,Impact,sans-serif;font-size:var(--t-sec);line-height:.88}
.work__scribble{width:min(30vw,340px);margin-top:-1vw;margin-left:2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.work__head.is-in .work__scribble{clip-path:inset(0 0 0 0)}
.ctc__scribble{display:block;width:min(24vw,290px);margin:-.4vw 0 0 2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.ctc__form.is-in .ctc__scribble{clip-path:inset(0 0 0 0)}

/* ============ PORTAFOLIO: scribbles añadidos ============ */
/* estos van AL LADO del título (derecha), no debajo — por eso el h2 es el
   contenedor posicional y la imagen se saca del flujo con position:absolute */
.gal__head .sec-title,.more__head .sec-title{position:relative}
.gal__scribble,.more__scribble{position:absolute;top:50%;right:0;
  transform:translateY(-55%);margin:0;pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.gal__scribble{width:min(42vw,520px)}
.more__scribble{width:min(34vw,420px)}
.gal__head.is-in .gal__scribble,.more__head.is-in .more__scribble{clip-path:inset(0 0 0 0)}
@media (max-width:860px){
  .gal__head .sec-title,.more__head .sec-title{position:static}
  .gal__scribble,.more__scribble{position:static;display:block;transform:none;
    margin-top:.6em;width:min(60vw,320px)}
}

.p360__scribble{display:block;width:min(24vw,290px);margin:-.4vw 0 0 2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.p360__head.is-in .p360__scribble{clip-path:inset(0 0 0 0)}

.clientes__scribble{display:block;width:min(28vw,320px);margin:var(--s3) 0 0 2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.more__head.is-in .clientes__scribble{clip-path:inset(0 0 0 0)}
.work__count{color:rgba(20,20,20,.45);margin-top:var(--s5)}

.bento{display:grid;grid-template-columns:1.28fr .82fr 1.06fr;gap:var(--s5);
  align-items:start;margin-top:var(--s11);padding-bottom:var(--s13)}
.bcol{display:flex;flex-direction:column;gap:var(--s5)}
.bcol--mid{margin-top:var(--s10)}
.bcol--last{margin-top:var(--s13)}
.tile{margin:0;position:relative;overflow:hidden;background:var(--cream);aspect-ratio:4/5}
.tile::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.06);
  transition:transform 1.3s var(--ease),filter .7s var(--ease);filter:saturate(.92)}
.tile.is-in img{transform:scale(1)}
.tile:hover img{transform:scale(1.05);filter:saturate(1.05)}
.tile::before{content:"";position:absolute;inset:0;z-index:2;background:var(--cream);
  transform-origin:bottom;transform:scaleY(1);transition:transform 1s var(--ease)}
.tile.is-in::before{transform:scaleY(0)}
/* el dato vive fuera de la foto y siempre se ve: mismo gesto que el riel */
.tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:3px;color:var(--cream);
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  transform:translateY(10px);opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.tile.is-in figcaption{opacity:1;transform:none;transition-delay:.5s}
.tile figcaption b{font-weight:600;font-size:var(--t-lg)}
.tile figcaption .mono{color:rgba(241,239,232,.62);font-size:var(--t-xs)}
.tile:hover figcaption .mono{color:var(--cream)}
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bcol--mid{margin-top:var(--s10)}
  .bcol--last{display:none}
}

/* riel horizontal fijado */
.rail{background:var(--ink);position:relative;height:380svh}
.rail__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.rail__head{width:100%;padding:0 var(--pad) clamp(20px,3vh,40px)}
.rail__head .eyebrow{display:flex;align-items:center;color:rgba(241,239,232,.5);
  border-color:rgba(241,239,232,.18);margin-bottom:0}
.rail__hint,.testi__hint{display:block;text-align:right;font-style:normal;
  color:rgba(241,239,232,.42);margin-top:var(--s2);-webkit-text-stroke:0}
.testi__scribble{display:block;width:min(26vw,300px);margin-top:var(--s3);
  filter:brightness(1.05);clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.testi__head.is-in .testi__scribble{clip-path:inset(0 0 0 0)}
.rail__track{display:flex;gap:var(--s6);padding-inline:var(--pad);
  will-change:transform}
.rcard{margin:0;flex:0 0 auto;width:clamp(260px,30vw,500px);position:relative;cursor:none}
.rcard img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 28%;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s var(--ease)}
.rcard:hover img{filter:grayscale(0) contrast(1)}
.rcard figcaption{margin-top:var(--s3);color:rgba(241,239,232,.5);font-size:var(--t-xs)}
.rcard:hover figcaption{color:var(--lime)}

/* ============ SERVICIOS ============ */
.services{background:var(--ink);color:var(--cream);padding:var(--s16) 0 var(--s13)}
.services .eyebrow{color:rgba(241,239,232,.5);border-color:rgba(241,239,232,.18)}
/* eyebrows sobre suelo oscuro en las paginas interiores */
.pkg .eyebrow,.steps .eyebrow,.inv .eyebrow{
  color:rgba(241,239,232,.5);border-color:rgba(241,239,232,.18)}
.pkg .eyebrow span,.steps .eyebrow span,.inv .eyebrow span{
  -webkit-text-stroke:.4px rgba(241,239,232,.35)}
/* titulares de seccion sobre suelo oscuro */
.pkg .sec-title,.steps .sec-title{color:var(--cream)}
.services .sec-title{color:var(--cream);display:inline-block;
  transition:color .5s var(--ease)}
/* HACER RUIDO. sobre bloque lima, letras oscuras */
.services .sec-title em{display:inline-block;font-style:normal;
  padding:.03em .1em .07em;margin-left:-.02em;line-height:.9;
  color:#1B1B1B;background:var(--lime)}
/* al pasar el mouse: las palabras crema pasan a lima y el titulo se mueve apenas */
.services .sec-title:hover{color:var(--lime)}
.services .sec-title .ln{transition:transform .7s var(--ease)}
.services .sec-title:hover .ln:nth-child(1){transform:translateX(5px)}
.services .sec-title:hover .ln:nth-child(2){transform:translateX(11px)}
.srv{position:relative;margin-top:var(--s11)}
.srv__row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;
  gap:var(--s8);column-gap:var(--s9);padding:var(--s7) 0;
  position:relative;z-index:2;
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.srv__row.is-in{opacity:1;transform:none}
/* la linea de arriba se dibuja de izquierda a derecha cuando la fila entra */
.srv__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(241,239,232,.16);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .1s}
.srv__row.is-in::before{transform:scaleX(1)}
.srv__row:last-of-type{border-bottom:1px solid rgba(241,239,232,.16)}
/* barrido lima al pasar el mouse */
.srv__row::after{content:"";position:absolute;z-index:-1;
  inset:0 calc(-1 * clamp(12px,1.8vw,30px));background:var(--lime);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease)}
.srv__row:hover::after{transform:scaleY(1);transform-origin:top}
.srv__row>*{position:relative;z-index:1;
  transition:transform .55s var(--ease),color .35s var(--ease)}
.srv__n{color:rgba(241,239,232,.4)}
.srv__t{font-family:veneer,Impact,sans-serif;font-size:var(--t-7xl);line-height:.9}
.srv__d{color:rgba(241,239,232,.5);justify-self:end;text-align:right;max-width:46ch;white-space:nowrap}
.srv__a{font-size:var(--t-lead);color:rgba(241,239,232,.35)}
.srv__row:hover .srv__t{transform:translateX(clamp(8px,1.4vw,26px));color:var(--ink)}
.srv__row:hover .srv__n{color:rgba(20,20,20,.55)}
.srv__row:hover .srv__d{color:rgba(20,20,20,.62)}
.srv__row:hover .srv__a{transform:translateX(12px);color:var(--ink)}

@media (max-width:860px){
  .srv__row{grid-template-columns:auto 1fr auto}
  .srv__d{display:none}
  .srv__row{grid-template-columns:auto 1fr auto}
}

/* ============ 360 ============ */
.pano{position:relative;background:#000}
.pano__stage{position:relative;height:100svh;overflow:hidden}
#pano-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#pano-canvas.is-grabbing{cursor:grabbing}
.pano__fallback{position:absolute;inset:0}
.pano__fallback img{width:100%;height:100%;object-fit:cover}
.pano.is-3d .pano__fallback{display:none}
.pano__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 22%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.06) 72%,transparent 84%),
    linear-gradient(100deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 26%,rgba(0,0,0,.2) 50%,transparent 70%)}
.pano__hud{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 var(--pad) clamp(96px,13vh,168px);pointer-events:none}
.pano__hud::before{content:"";position:absolute;left:0;bottom:0;
  width:min(920px,96%);height:calc(100% + 40px);z-index:-1;
  background:linear-gradient(78deg,rgba(10,10,10,.93) 0%,rgba(10,10,10,.88) 46%,rgba(10,10,10,.55) 76%,transparent 100%)}
.pano__hud>*:not(.eyebrow){max-width:min(760px,92vw)}
.pano__hud .eyebrow{color:rgba(241,239,232,.85);border-color:rgba(241,239,232,.3);
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.pano__title{font-family:veneer,Impact,sans-serif;font-size:var(--t-sec);line-height:.88;
  color:var(--cream);text-shadow:0 6px 44px rgba(0,0,0,.85)}
.pano__sub{margin-top:var(--s4);max-width:38ch;color:rgba(241,239,232,.92);
  text-shadow:0 2px 16px rgba(0,0,0,.9)}
.btn{display:inline-block;margin-top:var(--s6);padding:var(--s3) var(--s6);border-radius:100px;
  background:var(--cream);color:var(--ink);font-family:"Geist Mono",monospace;font-weight:700;
  font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;pointer-events:auto;
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.btn:hover{background:var(--lime);transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:var(--lime);color:var(--ink)}
.pano__drag{position:absolute;right:var(--pad);top:50%;z-index:3;translate:0 -50%;
  color:var(--cream);display:flex;align-items:center;gap:var(--s2);pointer-events:none;
  background:rgba(20,20,20,.62);backdrop-filter:blur(6px);padding:var(--s2) var(--s4);border-radius:100px}
.pano__drag i{width:34px;height:1px;background:rgba(241,239,232,.8);display:block;
  animation:drag 2.4s var(--ease) infinite}
@keyframes drag{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@media (max-width:760px){.pano__drag{display:none}}

/* ============ PROCESO ============ */
.proc{background:#bfda2f;color:var(--ink);height:400svh;position:relative}
.proc .eyebrow{color:rgba(27,27,27,.62);border-color:rgba(27,27,27,.28)}
.proc .eyebrow span,.proc .eyebrow i{color:#1B1B1B}
/* borde rasgado real: se monta encima del final del tour 360 */
.proc::before{content:"";position:absolute;left:0;right:0;z-index:6;pointer-events:none;
  height:clamp(38px,4.6vw,84px);top:calc(2px - clamp(38px,4.6vw,84px));
  background:url("assets/brand/green-div.png") no-repeat center bottom/100% 100%}
.proc::after{content:"";position:absolute;left:0;right:0;z-index:6;pointer-events:none;
  height:clamp(38px,4.6vw,84px);bottom:calc(2px - clamp(38px,4.6vw,84px));
  background:url("assets/brand/green-div.png") no-repeat center bottom/100% 100%;
  transform:scaleY(-1)}
.proc__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.proc__inner{width:100%}
.proc__stage{position:relative;height:clamp(360px,50vh,520px);margin-top:clamp(10px,2vh,26px)}
.proc__step{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none}
.proc__step.is-on{opacity:1}
/* un solo tamaño para las tres líneas: el verbo pesa por color, no por escala */
.proc__block{font-family:veneer,Impact,sans-serif;
  font-size:var(--t-sec);line-height:.9;color:#f1efe8;margin:0;text-align:center}
.proc__block .ln:nth-child(1){font-size:1.24em;line-height:.86}
.proc__block b{font-weight:400;color:#1B1B1B}
.proc__block .ln:nth-child(3) i{color:#f1efe8}
.proc__step .ln>i{transition:transform .9s var(--ease)}
.proc__step .ln:nth-child(2)>i{transition-delay:.07s}
.proc__step .ln:nth-child(3)>i{transition-delay:.14s}
.proc__step .ln>i{transform:translateY(108%)}
.proc__step.is-on .ln>i{transform:translateY(0)}
.proc__step.is-out .ln>i{transform:translateY(-108%)}
.proc__count{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;
  color:rgba(20,20,20,.34);font-size:var(--t-sm)}
.proc__count b{font-weight:630;color:#1B1B1B;font-size:var(--t-sm)}
.proc__foot{display:flex;align-items:center;gap:var(--s7);
  margin-top:clamp(18px,3vh,40px)}
.proc__bar{flex:1;height:4px;background:rgba(27,27,27,.22)}
.proc__bar i{display:block;height:100%;width:0;background:#1B1B1B}
.proc__next{color:rgba(27,27,27,.62);white-space:nowrap}
.proc__arrow{display:grid;place-items:center;width:clamp(44px,4vw,62px);aspect-ratio:1;
  border:1.5px solid rgba(20,20,20,.32);border-radius:50%;font-size:var(--t-body);color:var(--ink);
  flex:0 0 auto}
@media (max-width:900px){
  .proc__stage{height:clamp(320px,52vh,460px)}
  .proc__count{position:static;margin-bottom:var(--s3)}
  .proc__next{display:none}
}

/* ============ TESTIMONIOS ============ */
.testi{background:var(--ink);color:var(--cream);height:220svh;position:relative}
.testi__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}
.testi__head{width:100%;padding-bottom:clamp(26px,4vh,52px)}
.testi__head .eyebrow{display:flex;align-items:center;color:rgba(241,239,232,.5);
  border-color:rgba(241,239,232,.18);margin-bottom:0}

.testi__track{display:flex;gap:var(--s7);padding-inline:var(--pad);will-change:transform}
.tcard{margin:0;flex:0 0 auto;width:clamp(300px,38vw,580px);min-height:clamp(240px,36vh,340px);
  background:var(--ink-2);border:1px solid rgba(241,239,232,.14);
  padding:var(--s9);display:flex;flex-direction:column;justify-content:space-between}
.tcard p{font-family:veneer,Impact,sans-serif;font-size:var(--t-6xl);line-height:.94;
  color:var(--cream);transition:color .4s var(--ease)}
.tcard:not(.is-cta){transition:border-color .4s var(--ease)}
.tcard:not(.is-cta):hover p{color:var(--lime)}
.tcard:not(.is-cta):hover{border-color:rgba(188,216,36,.4)}
.tcard footer{color:rgba(241,239,232,.45);margin-top:var(--s5)}
.tcard--soft p{color:rgba(241,239,232,.62)}
.tcard.is-cta{background:var(--cream);border-color:var(--cream)}
.tcard.is-cta p{color:var(--ink)}
.tcard.is-cta .btn{align-self:flex-start;margin-top:0}

/* ============ CTA / FOOTER ============ */
.cta{background:var(--cream);color:var(--ink);padding:var(--s15) 0 0}
.cta__title{font-family:veneer,Impact,sans-serif;font-size:var(--t-sec);line-height:.88}
@media (max-width:760px){.cta__title{line-height:1.02}.cta__title .ln{padding-bottom:2px}}
.cta__title .outline{padding-top:.02em}
.cta__title .outline>i{line-height:1.42}
.cta__title .outline>i>b{display:inline-block;font-weight:400;line-height:.92;
  color:#f1efe8;padding:.17em .24em .21em;margin-left:-.08em;
  background:url("assets/brand/imposible-bg.png") no-repeat center center/100% 100%}
.cta__title .outline>i>b em{display:inline-block;font-style:normal;
  padding:.05em .05em .07em;color:#1B1B1B;background:rgba(188,216,36,.94)}
/* seccion de contacto: los tres numeros de abajo vienen de como Klark dejo
   Servicios con el editor (2026-09-05). Van iguales en todas las paginas. */
.pill{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s12);
  padding:var(--s6) var(--s8);
  background:var(--ink);border:1.5px solid var(--ink);color:var(--cream);
  flex-wrap:wrap;transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.pill:hover{background:var(--cream);border-color:rgba(20,20,20,.35);color:var(--ink)}
.pill .mono{color:rgba(241,239,232,.6)}
.pill:hover .mono{color:rgba(20,20,20,.5)}
.pill b{font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-6xl);line-height:1;flex:1}
.pill i{font-style:normal;font-size:var(--t-3xl);color:var(--lime)}
.foot-wrap{background:#070707 url("assets/brand/header-bg.jpg") center/cover no-repeat;
  position:relative;margin-top:var(--s15)}
.foot-wrap::before{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  height:clamp(38px,4.6vw,84px);top:calc(2px - clamp(38px,4.6vw,84px));
  background:url("assets/brand/black-div.png") no-repeat center bottom/100% 100%}
.foot{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;
  padding-block:var(--s8);color:rgba(241,239,232,.55)}
.foot__mark{background:var(--lime);color:#1B1B1B;padding:4px var(--s1) 5px;margin:-4px 0;
  height:25px;display:inline-flex;align-items:center}
.foot a{color:var(--lime);transition:color .4s var(--ease),transform .4s var(--ease)}
.foot a:hover{color:var(--cream);transform:translateY(-2px)}
.foot__top{color:var(--lime)}
@media (max-width:760px){.foot__mark{height:auto;min-height:25px}}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .ln>i{transform:none}
  .reveal{opacity:1;transform:none}
  .tile::before{transform:scaleY(0)}
  .tile img{transform:none}
  .grain{display:none}
  .proc{height:auto}
  .proc__sticky{position:static;height:auto;padding-block:var(--s10)}
  .proc__stage{height:auto}
  .proc__step{position:static;opacity:1;margin-bottom:var(--s10)}
  .proc__step .proc__h{transform:none}
  .proc__step .proc__num,.proc__step .proc__p{transform:none;opacity:1}
  .testi{height:auto}
  .testi__sticky{position:static;height:auto;padding-block:var(--s10)}
  .testi__track{overflow-x:auto;scroll-snap-type:x mandatory}
  .rail__sticky{position:static;height:auto;padding-block:var(--s10)}
  .rail__track{overflow-x:auto}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ---------- borde de papel rasgado entre suelos ---------- */
/* el rasgado va montado ENCIMA del final de la seccion oscura de arriba */
.tear{height:clamp(38px,4.6vw,84px);position:relative;z-index:5;
  margin-top:calc(-1 * var(--s12));margin-bottom:-2px;
  background:url("assets/brand/white-div.png") no-repeat center bottom/100% 100%}
/* el mismo rasgado, pero de suelo claro a suelo oscuro */
.tear--dark{background-image:url("assets/brand/black-div.png")}

/* ---------- lightbox de fotos ---------- */
.lb{position:fixed;inset:0;z-index:9999;display:none;background:rgba(10,10,10,.96);
  align-items:center;justify-content:center;padding:var(--s10);
  opacity:0;transition:opacity .4s var(--ease)}
.lb.is-open{display:flex}
.lb.is-vis{opacity:1}
.lb__img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;
  transform:scale(.97);transition:transform .5s var(--ease)}
.lb.is-vis .lb__img{transform:scale(1)}
.lb__cap{position:absolute;left:0;right:0;bottom:clamp(18px,3vh,38px);text-align:center;
  color:rgba(241,239,232,.62);display:flex;flex-direction:column;gap:5px;pointer-events:none}
.lb__cap b{color:var(--cream);font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-3xl);letter-spacing:.01em}
.lb__cap span{color:var(--lime)}
.lb__btn{position:absolute;top:clamp(76px,10vh,120px);bottom:clamp(76px,10vh,120px);z-index:1;
  width:clamp(64px,10vw,140px);border:0;cursor:pointer;
  background:none;color:var(--cream);font-size:var(--t-4xl);opacity:.5;
  transition:opacity .3s var(--ease)}
.lb__btn:hover{opacity:1}
.lb__prev{left:0}.lb__next{right:0}
.lb__close{position:absolute;z-index:3;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);
  width:52px;height:52px;border:1.5px solid rgba(241,239,232,.32);border-radius:50%;
  background:none;color:var(--cream);font-size:var(--t-lead);cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease)}
.lb__close:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.lb__n{position:absolute;z-index:3;top:clamp(20px,2.6vw,36px);left:var(--pad);color:rgba(241,239,232,.5)}
.lb__n b{color:var(--lime);font-weight:630}
@media (max-width:760px){.lb__btn{width:56px;font-size:var(--t-xl)}}


/* ============================================================
   PAGINA SERVICIOS
   ============================================================ */
/* --- hero corto de pagina interior --- */
.phero{position:relative;min-height:clamp(560px,78svh,860px);display:flex;
  flex-direction:column;justify-content:flex-end;overflow:hidden;background:#000}
.phero__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
/* el hero de pagina interna deja 100px abajo en todas las paginas, para que
   Servicios, Portafolio, Sobre Nosotros y Contacto queden identicos
   (decidido 2026-09-05, tomado de sobre-nosotros) */
.phero__inner{position:relative;z-index:2;padding:0 var(--pad) 100px;
  max-width:var(--maxw);margin-inline:auto;width:100%}
.phero__title{font-family:veneer,Impact,sans-serif;line-height:.84;color:var(--cream);
  font-size:var(--t-sec);letter-spacing:-.006em;
  text-shadow:0 6px 40px rgba(0,0,0,.5)}
.phero__title em{font-style:normal;color:#1B1B1B;background:var(--lime);
  display:inline-block;padding:.02em .09em .06em;line-height:.88;text-shadow:none}
.phero__sub{margin-top:clamp(18px,2.4vh,32px);max-width:46ch;
  font-size:var(--t-lead);line-height:1.5;color:rgba(241,239,232,.86);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
  /* reserva 2 lineas siempre: asi el hero arranca a la misma altura en todas
     las paginas, aunque el texto sea mas corto (decidido 2026-09-05) */
  min-height:3em}
/* sin capa gris encima de la foto: la foto se ve clara, como en el inicio.
   el texto se lee por su propia sombra, igual que en .hero (decidido 2026-09-05) */
.phero__crumb{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;
  width:100%;padding:0 var(--pad) 18px;color:rgba(241,239,232,.8);
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.phero__crumb a:hover{color:var(--lime)}

/* --- 01 indice de los cinco (servicios) --- */
/* Suelo claro como la primera seccion de las otras paginas interiores.
   El rasgado va aqui como ::before para no anadir un div al body.
   Es la seccion que tiene que enganchar: titular con garabato al lado
   (igual que en portafolio), los cinco en horizontal, y el puente DESLIZA
   al final. En movil el carril se desliza de lado.
   Todos los espacios salen del sistema de clamp del modulo. */
.sidx{background:var(--cream);color:var(--ink);position:relative;z-index:5;
  padding:var(--s12) 0 var(--s6)}
.sidx::before{content:"";position:absolute;left:0;right:0;pointer-events:none;
  height:clamp(38px,4.6vw,84px);top:calc(-1 * clamp(38px,4.6vw,84px));
  background:url("assets/brand/white-div.png") no-repeat center bottom/100% 100%}

/* --- cabecera --- */
.sidx__head .eyebrow{margin-bottom:var(--s8)}
/* el garabato va AL LADO del titular, igual que en portafolio */
.sidx__head .sec-title{position:relative}
.sidx__foot{margin-top:var(--s6)}
.sidx__scribble{position:absolute;top:50%;right:0;
  transform:translateY(-58%);margin:0;pointer-events:none;
  width:min(34vw,420px);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.sidx__head.is-in .sidx__scribble{clip-path:inset(0 0 0 0)}

/* --- preguntas (05): mismo garabato, mismo tamaño que en 01 --- */
.faq__head .sec-title{position:relative}
.faq__scribble{position:absolute;top:50%;right:0;
  transform:translateY(-58%);margin:0;pointer-events:none;
  width:min(43vw,535px);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.faq__head.is-in .faq__scribble{clip-path:inset(0 0 0 0)}
.sidx__lead{margin:0;max-width:42ch;
  font-size:var(--t-lead);line-height:1.5;color:rgba(20,20,20,.6)}
/* el aviso de deslizar solo aparece cuando el carril se desliza */
.sidx__hint{display:none;font-style:normal;font-size:var(--t-2xs);letter-spacing:.2em;
  color:rgba(20,20,20,.42);margin-top:var(--s5)}
@media (max-width:1000px){.sidx__hint{display:block}}

/* --- carril de los cinco --- */
.sidx__grid{max-width:var(--maxw);margin:var(--s10) auto 0;
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:var(--s6)}

.sidx__a{display:flex;flex-direction:column;
  padding-top:var(--s5);
  border-top:1px solid rgba(20,20,20,.16);
  color:var(--ink);text-decoration:none;
  transition:border-color .4s var(--ease),opacity .8s var(--ease),transform .8s var(--ease)}
.sidx__a:hover{border-color:var(--lime-ink)}
.sidx__a:focus-visible{outline:2px solid var(--lime-ink);outline-offset:5px}

.sidx__fig{order:-1;display:block;overflow:hidden;aspect-ratio:4/5;
  margin-bottom:var(--s5);background:rgba(20,20,20,.06)}
.sidx__fig img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);transform:scale(1.02);
  transition:filter .6s var(--ease),transform .8s var(--ease)}
.sidx__a:hover .sidx__fig img{filter:grayscale(0) contrast(1);transform:scale(1.07)}

.sidx__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s3)}
.sidx__n{font-size:var(--t-xs);letter-spacing:.13em;line-height:1;color:var(--lime-ink);
  opacity:.75;transition:opacity .35s var(--ease)}
.sidx__a:hover .sidx__n{opacity:1}
.sidx__ar{font-style:normal;font-size:var(--t-md);line-height:1;
  color:rgba(20,20,20,.3);
  transition:transform .45s var(--ease),color .35s var(--ease)}
.sidx__a:hover .sidx__ar,.sidx__a:focus-visible .sidx__ar{
  color:var(--lime-ink);transform:translate(4px,-4px)}

.sidx__t{font-family:veneer,Impact,sans-serif;font-weight:400;line-height:.94;
  font-size:var(--t-3xl);margin-bottom:var(--s3);
  transition:color .35s var(--ease)}
.sidx__a:hover .sidx__t{color:var(--lime-ink)}
.sidx__d{font-size:var(--t-md);line-height:1.5;
  color:rgba(20,20,20,.58);transition:color .35s var(--ease)}
.sidx__a:hover .sidx__d{color:rgba(20,20,20,.8)}

/* puente DESLIZA hacia el primer servicio */
.sidx__cue{margin-top:var(--s10)}

/* movil y tableta: el mismo carril, deslizando de lado */
@media (max-width:1000px){
  .sidx__grid{display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    gap:var(--s5);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
  .sidx__grid::-webkit-scrollbar{display:none}
  .sidx__a{flex:0 0 clamp(198px,57vw,280px);scroll-snap-align:start}
  .sidx__t{font-size:var(--t-2xl)}
  .sidx__d{font-size:var(--t-md)}
}
@media (max-width:860px){
  .sidx__head .sec-title{position:static}
  .sidx__scribble{position:static;display:block;transform:none;
    margin-top:.6em;width:min(60vw,320px)}
  .faq__head .sec-title{position:static}
  .faq__scribble{position:static;display:block;transform:none;
    margin-top:.6em;width:min(60vw,320px)}
}
@media (prefers-reduced-motion:reduce){
  .sidx__a,.sidx__t,.sidx__d,.sidx__n,.sidx__ar,.sidx__fig img{transition:none}
  .sidx__a:hover .sidx__fig img{transform:scale(1.02)}
  .sidx__a:hover .sidx__ar{transform:none}
  .sidx__grid{scroll-snap-type:none}
}

/* --- bloques de servicio --- */
.svc{background:var(--cream);color:var(--ink);padding:var(--s13) 0}
.svc + .svc{padding-top:0}
.svc__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:var(--s11);align-items:stretch}
.svc__in>div{display:flex;flex-direction:column}
.svc:nth-of-type(even) .svc__fig{order:-1}
.svc__fig{margin:0;position:relative;overflow:hidden;background:#ddd9cd;
  height:100%;min-height:clamp(340px,34vw,560px)}
.svc__fig img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.3s var(--ease),filter .8s var(--ease)}
.svc:hover .svc__fig img{transform:scale(1)}
.svc__fig figcaption{position:absolute;left:0;bottom:0;z-index:2;
  background:var(--ink);color:var(--cream);font-family:"Geist Mono",monospace;font-weight:700;
  font-size:var(--t-xs);letter-spacing:.14em;padding:var(--s1) var(--s3) var(--s1)}
.svc__n{font-family:"Geist Mono",monospace;font-weight:700;font-size:var(--t-mono);
  letter-spacing:.16em;color:rgba(20,20,20,.6)}
.svc__t{font-family:veneer,Impact,sans-serif;font-size:var(--t-sec);
  line-height:.86;margin-top:var(--s1)}
.svc__t em{font-style:normal;color:#1B1B1B;background:var(--lime);display:inline-block;
  padding:.02em .08em .06em;line-height:.9}
.svc__lead{margin-top:var(--s6);font-size:var(--t-lead);
  line-height:1.42;max-width:40ch;color:rgba(20,20,20,.88)}
.svc__p{margin-top:var(--s5);max-width:52ch;color:rgba(20,20,20,.72)}
.svc__list{margin:auto 0 0;padding-top:var(--s6);padding:var(--s6) 0 0;
  list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:0 var(--s7)}
.svc__list li{padding:var(--s3) 0 var(--s3) var(--s5);position:relative;font-size:var(--t-base);
  border-bottom:1px solid rgba(20,20,20,.12);color:rgba(20,20,20,.82)}
.svc__list li::before{content:"→";position:absolute;left:0;top:9px;
  color:rgba(20,20,20,.45);font-weight:700}
.svc__go{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s7);
  font-family:"Geist Mono",monospace;font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;
  border-bottom:2px solid var(--ink);padding-bottom:5px;
  transition:gap .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.svc__go:hover{gap:var(--s5);color:var(--lime-ink);border-color:var(--lime-ink)}
@media (max-width:900px){
  .svc__in{grid-template-columns:1fr}
  .svc:nth-of-type(even) .svc__fig{order:0}
  .svc__list{grid-template-columns:1fr}
  .svc__fig{height:auto;aspect-ratio:3/2;min-height:0}
}

/* --- paquetes --- */
.pkg{background:var(--ink);color:var(--cream);padding:var(--s14) 0 var(--s13)}
.pkg__grid{max-width:var(--maxw);margin:var(--s9) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pcard{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s7);
  border:1px solid rgba(241,239,232,.2);position:relative;overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.pcard:hover{border-color:var(--lime);transform:translateY(-4px)}
.pcard__k{font-family:"Geist Mono",monospace;font-size:var(--t-2xs);letter-spacing:.15em;
  color:rgba(241,239,232,.5)}
.pcard__t{font-family:veneer,Impact,sans-serif;font-size:var(--t-4xl);line-height:.92}
.pcard__pr{font-family:veneer,Impact,sans-serif;font-size:var(--t-5xl);
  line-height:.9;color:var(--lime)}
.pcard ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.pcard li{font-size:var(--t-md);color:rgba(241,239,232,.7);padding-left:var(--s4);position:relative}
.pcard li::before{content:"·";position:absolute;left:4px;color:rgba(241,239,232,.42);
  font-weight:700}
.pkg__note{max-width:var(--maxw);margin:var(--s8) auto 0;padding-inline:var(--pad);
  color:rgba(241,239,232,.5);font-size:var(--t-md);max-width:min(var(--maxw),70ch)}
.pkg__grid--3{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
@media (max-width:980px){.pkg__grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.pkg__grid{grid-template-columns:1fr}}

/* --- servicios adicionales --- */
.more{background:var(--cream);color:var(--ink);padding:var(--s14) 0}
.more__grid{max-width:var(--maxw);margin:var(--s8) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s10)}
.more__i{padding:var(--s5) 0;border-top:1px solid rgba(20,20,20,.14);
  display:flex;align-items:baseline;gap:var(--s5);transition:padding-left .4s var(--ease)}
.more__i:hover{padding-left:var(--s3)}
.more__i b{font-weight:600;font-size:var(--t-lg)}
.more__i span{font-family:"Geist Mono",monospace;font-size:var(--t-xs);letter-spacing:.12em;
  color:rgba(20,20,20,.62);margin-left:auto;white-space:nowrap}
@media (max-width:900px){.more__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.more__grid{grid-template-columns:1fr}}

/* --- pasos --- */
.steps{background:var(--ink);color:var(--cream);padding:var(--s14) 0}
.steps__grid{max-width:var(--maxw);margin:var(--s8) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s7)}
.step{border-top:2px solid var(--lime);padding-top:var(--s5);
  transition:transform .5s var(--ease),border-color .4s var(--ease)}
.step:hover{transform:translateY(-4px)}
.step b{display:block;font-family:"Geist Mono",monospace;font-size:var(--t-xs);letter-spacing:.15em;
  color:var(--lime);transition:transform .4s var(--ease)}
.step:hover b{transform:translateX(4px)}
.step h3{margin:var(--s2) 0 0;font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-3xl);line-height:.94}
.step p{margin-top:var(--s1);color:rgba(241,239,232,.66);font-size:var(--t-md);line-height:1.5}
@media (max-width:900px){.steps__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps__grid{grid-template-columns:1fr}}

/* --- preguntas --- */
.faq{background:var(--cream);color:var(--ink);padding:var(--s14) 0 var(--s8)}
.faq__list{max-width:min(var(--maxw),1040px);margin:var(--s8) auto 0;
  padding-inline:var(--pad)}
.qa{border-top:1px solid rgba(20,20,20,.16)}
.qa:last-child{border-bottom:1px solid rgba(20,20,20,.16)}
.qa>summary{cursor:pointer;list-style:none;padding:var(--s6) 40px var(--s6) 0;
  position:relative;font-family:veneer,Impact,sans-serif;
  font-size:var(--t-3xl);line-height:1.02;
  transition:color .35s var(--ease)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{color:var(--lime-ink)}
.qa>summary::after{content:"+";position:absolute;right:2px;top:50%;translate:0 -50%;
  font-family:"Geist Mono",monospace;font-size:var(--t-xl);color:var(--lime-ink);
  transition:transform .4s var(--ease)}
.qa[open]>summary::after{content:"–"}
.qa__b{padding:0 0 var(--s6);max-width:74ch;color:rgba(20,20,20,.74);
  line-height:1.6}


/* --- areas de toque minimas (WCAG 2.2 objetivo 24x24) --- */
.phero__crumb a,.foot a,.foot__top{display:inline-block;padding-block:5px}
.nav__brand{padding-block:2px}

/* --- resultados del buscador: el resaltado del teclado se ve --- */
.srch__hit:focus-visible{outline:2px solid var(--lime);outline-offset:2px}


/* ==========================================================================
   PAGINA PORTAFOLIO
   ========================================================================== */

/* --- galeria filtrable --- */
.gal{background:var(--cream);color:var(--ink);padding:var(--s14) 0 var(--s13)}
.gal__lead{margin-top:var(--s6);max-width:52ch;font-size:var(--t-lg);
  line-height:1.6;color:rgba(20,20,20,.74)}
.pfil{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s7)}
.pfil__b{font-family:"Geist Mono",monospace;font-size:var(--t-xs);letter-spacing:.13em;
  padding:var(--s3) var(--s5);min-height:38px;border-radius:100px;border:1px solid rgba(20,20,20,.24);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pfil__b:hover{border-color:var(--ink)}
.pfil__b.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pfil__b:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.pfil__count{margin-top:var(--s3);font-size:var(--t-2xs);letter-spacing:.15em;color:rgba(20,20,20,.55)}
.pgal{margin-top:var(--s8);display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pgal .tile.is-hid{display:none}
.pgal__none{max-width:var(--maxw);margin:var(--s8) auto 0;padding-inline:var(--pad);
  font-size:var(--t-xs);letter-spacing:.14em;color:rgba(20,20,20,.55)}
@media (max-width:900px){.pgal{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pgal{grid-template-columns:1fr}}

/* --- bloque 360 --- */
.p360{background:var(--ink);color:var(--cream);padding:var(--s14) 0}
.p360 .eyebrow{color:rgba(241,239,232,.5);border-color:rgba(241,239,232,.18)}
.p360 .eyebrow span,.p360 .eyebrow i{color:var(--lime)}
.p360 .sec-title{color:var(--cream)}
.p360__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--s11);align-items:center}
.p360__p{margin-top:var(--s6);max-width:44ch;font-size:var(--t-lg);
  line-height:1.6;color:rgba(241,239,232,.7)}
.p360__fig{margin:0;position:relative;overflow:hidden;background:#1b1b1b}
.p360__fig img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
  filter:grayscale(.15);transition:transform .8s var(--ease),filter .6s var(--ease)}
.p360__fig a:hover img{transform:scale(1.03);filter:grayscale(0)}
.p360__fig figcaption{margin-top:var(--s3);font-size:var(--t-2xs);letter-spacing:.14em;
  color:rgba(241,239,232,.5)}
@media (max-width:900px){.p360__in{grid-template-columns:1fr}}


/* ==========================================================================
   PAGINA SOBRE NOSOTROS
   ========================================================================== */
.abt{background:var(--cream);color:var(--ink);padding:var(--s14) 0}
.abt__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:var(--s11);align-items:center}
.abt__lead{margin-top:var(--s6);max-width:46ch;
  font-size:var(--t-lead);line-height:1.45;color:var(--ink)}
.abt__p{margin-top:var(--s5);max-width:60ch;
  font-size:var(--t-lg);line-height:1.62;color:rgba(20,20,20,.74)}
.abt__fig{margin:0;position:relative;overflow:hidden;background:#ddd9cd}
.abt__fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:center 22%;transition:transform .9s var(--ease)}
.abt__fig:hover img{transform:scale(1.03)}
.abt__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s3) var(--s4);
  font-size:var(--t-2xs);letter-spacing:.14em;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(20,20,20,.72))}
.more .abt__lead{margin-bottom:var(--s2)}
@media (max-width:900px){.abt__in{grid-template-columns:1fr}}
/* la palabra marcada en un titulo de seccion lleva caja lima, como en el hero */
.abt .sec-title em{font-style:normal;background:var(--lime);color:#1B1B1B;
  display:inline-block;padding:.02em .09em .06em;line-height:.88}


/* ==========================================================================
   PAGINA CONTACTO
   ========================================================================== */
.ctc{background:var(--cream);color:var(--ink);padding:var(--s14) 0}
.ctc__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:var(--s12);align-items:start}
.ctc .sec-title em{font-style:normal;background:var(--lime);color:#1B1B1B;
  display:inline-block;padding:.02em .09em .06em;line-height:.88}
.ctc__lead{margin-top:var(--s6);max-width:52ch;
  font-size:var(--t-lg);line-height:1.6;color:rgba(20,20,20,.74)}

/* --- formulario --- */
.cf{margin-top:var(--s8);display:grid;gap:var(--s5)}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.cf__f{display:grid;gap:7px}
.cf__f label{font-family:"Geist Mono",monospace;font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(20,20,20,.62)}
.cf__f label i{font-style:normal;color:var(--lime-ink)}
.cf__f input,.cf__f select,.cf__f textarea{
  font-family:"Geist",system-ui,sans-serif;font-size:max(16px,var(--t-base));color:var(--ink);
  background:transparent;border:1px solid rgba(20,20,20,.24);border-radius:0;
  padding:var(--s3) var(--s3);min-height:46px;width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.cf__f textarea{resize:vertical;line-height:1.55;min-height:120px}
.cf__f input:hover,.cf__f select:hover,.cf__f textarea:hover{border-color:rgba(20,20,20,.5)}
.cf__f input:focus,.cf__f select:focus,.cf__f textarea:focus{
  outline:2px solid var(--lime-ink);outline-offset:1px;border-color:var(--ink)}
.cf__f input::placeholder,.cf__f textarea::placeholder{color:rgba(20,20,20,.38)}
.cf__f [aria-invalid="true"]{border-color:#b3261e;background:rgba(179,38,30,.05)}
.cf__err{margin:0;font-family:"Geist Mono",monospace;font-size:var(--t-xs);letter-spacing:.06em;
  color:#8c1d18}
.cf__go{margin-top:4px;justify-self:start;cursor:pointer;border:0}
/* CAMPO TRAMPA. Una persona nunca lo ve, asi que lo deja vacio. Un robot
   llena todo lo que encuentra en el formulario, y al llenarlo se delata.
   Se saca de la pantalla en vez de esconderlo con display:none, porque
   algunos robots ya saben saltarse lo que esta en display:none. */
.cf__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf__note{font-size:var(--t-2xs);letter-spacing:.13em;color:rgba(20,20,20,.5)}
/* el aviso de "ya llego", cuando el mensaje se guardo bien */
.cf__ok{font-size:var(--t-xs);letter-spacing:.13em;color:var(--ink);
  background:var(--lime);padding:var(--s4) var(--s5);margin:0}

/* --- columna de datos directos --- */
.ctc__side .eyebrow{margin-top:0}
.ctc__st{margin:var(--s5) 0 0;font-family:veneer,Impact,sans-serif;
  font-weight:400;font-size:var(--t-4xl);line-height:.94}
.ctc__list{margin:var(--s6) 0 0;padding:0;list-style:none;display:grid}
.ctc__list li{display:grid;gap:4px;padding:var(--s4) 0;
  border-top:1px solid rgba(20,20,20,.14)}
.ctc__list li:last-child{border-bottom:1px solid rgba(20,20,20,.14)}
/* entrada al hacer scroll + movimiento al pasar el mouse, en una sola transicion
   para que el retraso escalonado no se le pegue tambien al hover */
.ctc__list li.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),padding-left .4s var(--ease)}
.ctc__list li.reveal.is-in{opacity:1;transform:none}
.ctc__list li:hover{padding-left:var(--s2)}
.ctc__list li:nth-child(2).reveal{transition-delay:.06s,.06s,0s}
.ctc__list li:nth-child(3).reveal{transition-delay:.12s,.12s,0s}
.ctc__list li:nth-child(4).reveal{transition-delay:.18s,.18s,0s}
.ctc__list li:nth-child(5).reveal{transition-delay:.24s,.24s,0s}
.ctc__list li:nth-child(6).reveal{transition-delay:.3s,.3s,0s}
.ctc__list span{font-size:var(--t-2xs);letter-spacing:.14em;color:rgba(20,20,20,.55);
  transition:color .3s var(--ease)}
.ctc__list li:hover span{color:rgba(20,20,20,.78)}
.ctc__list a,.ctc__list b{font-weight:600;font-size:var(--t-lg);
  color:var(--ink);transition:color .3s var(--ease),transform .3s var(--ease);display:inline-block}
.ctc__list a:hover{color:var(--lime-ink);transform:translateX(6px)}
.ctc__fig{margin:var(--s7) 0 0;overflow:hidden;background:#ddd9cd}
.ctc__fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:center 20%;transition:transform .9s var(--ease)}
.ctc__fig:hover img{transform:scale(1.03)}

.steps__grid--3{grid-template-columns:repeat(3,1fr)}
.cta--slim{padding-top:0}
.cta--slim .foot-wrap{margin-top:var(--s12)}
@media (max-width:1000px){.ctc__in{grid-template-columns:1fr}}
@media (max-width:620px){.cf__row{grid-template-columns:1fr}}
@media (max-width:980px){.steps__grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps__grid--3{grid-template-columns:1fr}}

/* ============================================================
   02 INVERSIÓN — la cotización se escribe sola (scrollcraft)
   La seccion es alta y la escena queda pegada (sticky). El scroll
   va llenando la hoja renglon por renglon y al final cae el sello.
   Regla del cliente: aqui NO va ninguna cifra.
   ============================================================ */
.inv{position:relative;background:var(--ink);color:var(--cream)}
.inv__pin{position:relative;height:340vh}
.inv__stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;gap:var(--s6);overflow:hidden;
  padding:clamp(60px,7.5vh,96px) var(--pad) clamp(28px,4vh,52px)}
.inv__head{max-width:var(--maxw);margin-inline:auto;width:100%}
/* dentro de la escena el eyebrow lleva menos aire: todo tiene que caber en 100vh */
.inv .eyebrow{margin-bottom:var(--s6);padding-bottom:var(--s2)}
.inv__title{font-family:veneer,Impact,sans-serif;line-height:.9;color:var(--cream);
  font-size:var(--t-5xl);margin-top:8px}

.inv__grid{max-width:var(--maxw);margin-inline:auto;width:100%;flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-template-areas:"idx sheet" "out sheet";
  align-content:center;
  gap:var(--s6) var(--s10)}
.inv__idx{grid-area:idx;align-self:end}
.inv__sheet{grid-area:sheet;align-self:center}
.inv__out{grid-area:out;align-self:start}

/* ---------- indice de los 3 pasos ---------- */
.inv__idx{position:relative;list-style:none;margin:0;padding:0 0 0 var(--s7);
  display:grid;gap:clamp(12px,1.8vh,28px)}
.inv__rail{position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:rgba(241,239,232,.14);border-radius:2px;overflow:hidden}
.inv__rail i{display:block;--f:0%;width:100%;height:var(--f);background:var(--lime);
  transition:height .25s linear}
.inv__st{opacity:.3;transform:translateY(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.inv__st.is-on{opacity:1;transform:none}
.inv__st.is-done{opacity:.42}
.inv__st b{display:block;color:rgba(241,239,232,.5);font-size:var(--t-xs);letter-spacing:.16em}
.inv__st.is-on b{color:var(--lime)}
.inv__st h3{font-family:veneer,Impact,sans-serif;line-height:.92;margin-top:var(--s1);
  font-size:var(--t-4xl)}
.inv__st p{margin-top:var(--s3);font-size:var(--t-base);line-height:1.5;
  color:rgba(241,239,232,.62);max-width:46ch;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--ease),opacity .45s var(--ease)}
.inv__st.is-on p{max-height:9em;opacity:1}

/* ---------- la hoja de cotizacion ---------- */
.inv__sheet{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s5)}
.inv__paper{position:relative;width:100%;background:var(--cream);color:var(--ink);
  border-radius:3px;padding:var(--s6) var(--s8) var(--s7);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 2px 0 rgba(241,239,232,.08);
  will-change:transform}
.inv__paper::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--lime);border-radius:3px 3px 0 0}
.inv__ph{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);
  padding-bottom:var(--s5);border-bottom:1px solid rgba(20,20,20,.14)}
.inv__ph span:first-child{color:var(--ink);font-weight:700}
.inv__ph span+span{color:rgba(20,20,20,.45);font-size:var(--t-xs);letter-spacing:.13em}

.inv__rows{display:grid;gap:clamp(3px,.5vh,9px);padding-top:clamp(8px,1.1vh,14px)}
.inv__r{position:relative;display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s5);padding:clamp(5px,.7vh,10px) 0}
.inv__r b,.inv__r i{opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.inv__r.is-w b,.inv__r.is-w i{opacity:1;transform:none}
.inv__r i{transition-delay:.07s}
/* el subrayado se dibuja de izquierda a derecha, como si lo escribieran */
.inv__r::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(20,20,20,.09)}
.inv__r::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(20,20,20,.28);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease) .1s}
.inv__r.is-w::after{transform:scaleX(1)}
.inv__r b{font-family:"Geist Mono",monospace;font-weight:700;font-size:var(--t-xs);
  letter-spacing:.13em;text-transform:uppercase;color:rgba(20,20,20,.62)}
.inv__r i{font-style:normal;font-size:var(--t-base);font-weight:600;
  color:var(--ink);text-align:right}
.inv__hr{display:block;height:1px;background:rgba(20,20,20,.14);margin:clamp(5px,.8vh,12px) 0;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.inv__hr.is-w{transform:scaleX(1)}

.inv__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);
  margin-top:clamp(10px,1.6vh,22px);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.inv__total.is-w{opacity:1;transform:none}
.inv__total span{color:rgba(20,20,20,.55);font-size:var(--t-xs);letter-spacing:.16em}
.inv__total b{font-family:veneer,Impact,sans-serif;line-height:.9;
  font-size:var(--t-5xl);color:var(--ink)}

/* el sello cae girado, como uno de tinta de verdad */
.inv__stamp{position:absolute;left:17%;bottom:clamp(4px,.7vw,12px);
  display:grid;justify-items:center;gap:2px;padding:var(--s3) var(--s4) var(--s2);
  border:2.5px solid var(--lime);border-radius:4px;background:var(--ink);
  opacity:0;transform:rotate(-11deg) scale(2.1);
  transition:opacity .3s linear,transform .5s cubic-bezier(.2,1.5,.4,1)}
.inv__stamp.is-w{opacity:1;transform:rotate(-11deg) scale(1)}
.inv__stamp span{font-family:veneer,Impact,sans-serif;line-height:.9;color:var(--lime);
  font-size:var(--t-3xl);letter-spacing:.02em}
.inv__stamp em{font-style:normal;font-size:var(--t-2xs);letter-spacing:.22em;
  color:rgba(188,216,36,.72)}
.inv__cap{color:rgba(241,239,232,.42);font-size:var(--t-xs);letter-spacing:.2em}

.inv__out{padding:0;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.inv__out.is-w{opacity:1;transform:none}
.inv__cta{display:grid;gap:var(--s5);justify-items:start}
.inv__cta .pkg__note{margin:0;padding:0;max-width:46ch;
  font-size:var(--t-md);line-height:1.5}
.inv__cta .btn{margin-top:0}

.inv__scribble{display:block;width:min(22vw,260px);margin:.6vw 0 0 2px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .4s}
.inv__head.is-in .inv__scribble{clip-path:inset(0 0 0 0)}

/* ---------- pantallas bajitas (laptop de 720px de alto) ---------- */
@media (min-width:761px) and (max-height:800px){
  .inv__stage{padding-top:clamp(42px,5.5vh,62px);padding-bottom:var(--s3)}
  .inv__title{font-size:var(--t-5xl)}
  .inv .eyebrow{margin-bottom:var(--s2);padding-bottom:8px}
  .inv__scribble{display:none}
  .inv__cap{display:none}
  .inv__rows{gap:2px;padding-top:8px}
  .inv__r{padding:4px 0}
  .inv__grid{gap:12px var(--s10)}
}

/* ---------- pantallas medianas ---------- */
@media (max-width:1080px){
  .inv__grid{grid-template-columns:1fr;grid-template-areas:"idx" "sheet" "out";
    gap:clamp(14px,2.4vh,26px);align-content:center}
  .inv__idx{align-self:auto}
  .inv__cta{grid-template-columns:1fr auto;align-items:center;
    gap:var(--s6);justify-items:start}
  .inv__cta .btn{justify-self:end}
  .inv__st p{display:none}
  .inv__idx{grid-auto-flow:column;grid-auto-columns:1fr;padding:clamp(14px,2vh,22px) 0 0;
    gap:var(--s5)}
  .inv__rail{left:0;right:0;top:0;bottom:auto;width:100%;height:2px}
  /* en tablet el sello se corre a la derecha para no tapar la palabra TOTAL */
  .inv__stamp{left:26%}
  .inv__rail i{width:var(--f);height:100%;transition:width .25s linear}
}

/* ---------- movil: sin fijar, todo a la vista ---------- */
@media (max-width:760px){
  .inv__pin{height:auto}
  .inv__stage{position:static;height:auto;display:block;
    padding:var(--s12) var(--pad) var(--s10)}
  .inv__grid{display:block}
  /* en movil todo va centrado: titulo, pasos, hoja y cierre */
  .inv__head,.inv__idx,.inv__out{text-align:center}
  .inv .eyebrow{justify-content:center}
  .inv__scribble{margin-inline:auto}
  .inv__idx{display:grid;grid-auto-flow:row;gap:var(--s8);padding:0;margin-top:var(--s8)}
  .inv__rail{display:none}
  .inv__st{opacity:1;transform:none}
  .inv__st p{display:block;max-height:none;opacity:1;margin-inline:auto}
  .inv__st b{color:var(--lime)}
  .inv__sheet{margin-top:var(--s10);align-items:stretch}
  .inv__total{opacity:1;transform:none}
  .inv__r b,.inv__r i{opacity:1;transform:none}
  .inv__r::after,.inv__hr{transform:scaleX(1)}
  .inv__stamp{opacity:1;transform:rotate(-11deg) scale(1);position:relative;
    left:auto;right:auto;bottom:auto;justify-self:center;margin-top:var(--s6)}
  .inv__paper{display:grid}
  .inv__cap{margin-top:var(--s5);text-align:center;width:100%}
  .inv__out{opacity:1;transform:none;margin-top:var(--s10)}
  /* en movil el cierre va en una sola columna y centrado */
  .inv__cta{grid-template-columns:1fr;justify-items:center;gap:var(--s6)}
  .inv__cta .pkg__note{margin-inline:auto;max-width:38ch;font-size:var(--t-base)}
  .inv__cta .btn{justify-self:center}
  /* el membrete de la hoja no cabe en una linea: se parte en dos */
  .inv__ph{display:grid;gap:4px}
  .inv__ph span+span{font-size:var(--t-2xs)}
}

/* ---------- si el usuario pidio menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .inv__pin{height:auto}
  .inv__stage{position:static;height:auto}
  .inv__st{opacity:1;transform:none}
  .inv__st p{max-height:none;opacity:1}
  .inv__total,.inv__out{opacity:1;transform:none}
  .inv__r b,.inv__r i{opacity:1;transform:none}
  .inv__r::after,.inv__hr{transform:scaleX(1)}
  .inv__stamp{opacity:1;transform:rotate(-11deg) scale(1)}
  .inv__paper{transform:none!important}
}

/* ============================================================
   03 DE LA FOTO AL PROYECTO (portafolio) — scrollcraft
   Diapositivas de color. La pantalla se detiene y cada servicio
   entra como un panel que barre de derecha a izquierda. Sin fotos.
   La escala va de verde a gris a negro; el borde izquierdo guarda
   una franja del color de cada panel ya visto.
   ============================================================ */
.fpp{background:var(--cream);color:var(--ink);position:relative}
.fpp .more__head{padding-top:var(--s14);padding-bottom:var(--s8)}

/* ---------- el pin ---------- */
.fpp__pin{position:relative;height:540vh}
.fpp__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--cream)}
.fpp__deck{list-style:none;margin:0;padding:0;position:absolute;inset:0}

/* cada panel entra desde abajo. --o va de 1 (fuera) a 0 (puesto).
   el hueco de arriba deja ver la franja del panel anterior. */
.fpp__panel{--o:1;--stripe:clamp(9px,1.9vw,30px);
  position:absolute;left:0;right:0;bottom:0;
  top:calc(var(--i) * var(--stripe));
  z-index:calc(var(--i) + 1);
  transform:translate3d(0,calc(var(--o) * 101%),0);
  will-change:transform}
.fpp__panel:first-child{--o:0}

/* franja rasgada arriba de cada panel (menos el primero), del mismo color
   que ese panel — usa el png del tear como MASCARA (no como imagen), asi
   el color de la franja lo pone el propio panel */
.fpp__panel:not(:first-child)::before{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * clamp(38px,4.6vw,84px));height:clamp(38px,4.6vw,84px);
  background-color:inherit;pointer-events:none;z-index:1;
  -webkit-mask:url("assets/brand/white-div.png") no-repeat center bottom/100% 100%;
  mask:url("assets/brand/white-div.png") no-repeat center bottom/100% 100%}

/* la escala de marca: verde, oliva, gris, negro */
.fpp__panel--a{background:#bcd824;color:var(--ink)}
.fpp__panel--b{background:#93a81c;color:var(--ink)}
.fpp__panel--c{background:#5c6b00;color:var(--cream)}
.fpp__panel--d{background:#3d4238;color:var(--cream)}
.fpp__panel--e{background:#242424;color:var(--cream)}
.fpp__panel--f{background:#0d0d0d;color:var(--cream)}
/* el numero gigante: tinta sobre los claros, lima sobre los oscuros */
.fpp__panel--a .fpp__num,.fpp__panel--b .fpp__num{color:var(--ink)}
.fpp__panel--c .fpp__num{color:rgba(241,239,232,.9)}
.fpp__panel--d .fpp__num,.fpp__panel--e .fpp__num,.fpp__panel--f .fpp__num{color:var(--lime)}

/* ---------- contenido del panel ---------- */
.fpp__wrap{height:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(76px,10vh,110px) var(--pad) clamp(40px,7vh,86px);
  display:grid;grid-template-columns:auto minmax(0,38ch) minmax(0,1fr);
  gap:var(--s10);align-items:end}
.fpp__num{grid-column:1;font-family:veneer,Impact,sans-serif;font-weight:400;
  line-height:.72;font-size:min(112vh,38vw);
  letter-spacing:-.02em;align-self:stretch;
  display:flex;align-items:center}
.fpp__copy{grid-column:2;padding-bottom:clamp(4px,2vh,26px)}

/* el texto entra por partes cuando el panel ya esta puesto */
.fpp__rule,.fpp__k,.fpp__t,.fpp__p,.fpp__go{
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.fpp__panel.is-on .fpp__rule{opacity:1;transform:none;transition-delay:.05s}
.fpp__panel.is-on .fpp__k{opacity:1;transform:none;transition-delay:.12s}
.fpp__panel.is-on .fpp__t{opacity:1;transform:none;transition-delay:.2s}
.fpp__panel.is-on .fpp__p{opacity:1;transform:none;transition-delay:.28s}
.fpp__panel.is-on .fpp__go{opacity:1;transform:none;transition-delay:.36s}

.fpp__rule{display:block;height:1px;background:currentColor;opacity:.001;
  margin-bottom:clamp(14px,2vh,24px)}
.fpp__panel.is-on .fpp__rule{opacity:.35}
.fpp__k{margin:0 0 clamp(8px,1.2vh,16px);font-size:var(--t-2xs);letter-spacing:.2em;
  opacity:.001}
.fpp__panel.is-on .fpp__k{opacity:.62}
.fpp__t{margin:0;font-family:veneer,Impact,sans-serif;font-weight:400;
  line-height:.88;font-size:var(--t-6xl)}
.fpp__p{margin:clamp(12px,1.8vh,22px) 0 0;font-size:var(--t-lg);
  line-height:1.5;opacity:.001}
.fpp__panel.is-on .fpp__p{opacity:.78}
.fpp__go{display:inline-flex;align-items:center;gap:var(--s2);
  margin-top:clamp(16px,2.4vh,30px);padding-bottom:6px;
  font-size:var(--t-2xs);letter-spacing:.2em;color:currentColor;text-decoration:none;
  border-bottom:1px solid currentColor}
.fpp__go i{font-style:normal;transition:transform .4s var(--ease)}
.fpp__go:hover i{transform:translate(3px,-3px)}

/* ---------- movil y tablet angosto ---------- */
@media (max-width:900px){
  .fpp__pin{height:470vh}
  .fpp__panel{--stripe:clamp(7px,2.4vw,16px)}
  .fpp__wrap{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;
    gap:clamp(10px,2vh,20px);align-items:center;
    padding:clamp(80px,12vh,110px) var(--pad) clamp(30px,6vh,60px)}
  .fpp__num{grid-column:1;font-size:min(56vh,84vw);justify-content:flex-start;
    align-self:center}
  .fpp__copy{grid-column:1;padding-bottom:0}
  .fpp__t{font-size:var(--t-4xl)}
}

/* ---------- sin animacion: seis bloques normales ---------- */
@media (prefers-reduced-motion:reduce){
  .fpp__pin{height:auto}
  .fpp__stage{position:static;height:auto;overflow:visible}
  .fpp__deck{position:static;inset:auto}
  .fpp__panel{position:relative;left:0;top:0;transform:none;
    min-height:66svh;display:block}
  .fpp__rule,.fpp__k,.fpp__t,.fpp__p,.fpp__go{opacity:1;transform:none;transition:none}
  .fpp__rule{opacity:.35}.fpp__k{opacity:.62}.fpp__p{opacity:.78}
}


/* ==========================================================================
   PAGINA RESERVAR — el calendario y el formulario de cita
   Todo sale de la Escala CV (ver ESCALA-CV.md). Los campos del formulario
   reusan las clases .cf / .cf__row / .cf__f de la pagina de contacto para
   que se vean exactamente igual.
   ========================================================================== */
.bk{background:var(--cream);color:var(--ink);padding:var(--s14) 0;position:relative}
/* display:grid le gana al atributo hidden; hay que apagarlo a mano */
.bk__in[hidden]{display:none}
.bk__in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);
  gap:var(--s11);align-items:start}
/* sin esto, el calendario no deja encoger la columna en pantallas chicas */
.bk__main,.bk__side{min-width:0}
.bk .sec-title{position:relative}
.bk .sec-title em{font-style:normal;background:var(--lime);color:#1B1B1B;
  display:inline-block;padding:.02em .09em .06em;line-height:.88}
.bk__scribble{position:absolute;top:50%;right:0;transform:translateY(-56%);
  width:min(26vw,330px);pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .35s}
.bk__head.is-in .bk__scribble{clip-path:inset(0 0 0 0)}
.bk__lead{margin-top:var(--s6);max-width:54ch;
  font-size:var(--t-lg);line-height:1.6;color:rgba(20,20,20,.74)}

/* --- los tres pasos --- */
.bk__steps{margin-top:var(--s10);display:grid;gap:var(--s12)}
.bk__sn{display:flex;align-items:center;gap:var(--s4);margin:0;
  color:rgba(20,20,20,.55)}
.bk__sn b{font-weight:630;color:var(--lime-ink);letter-spacing:.16em}
.bk__sh{margin:var(--s3) 0 0;font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-4xl);line-height:.94;letter-spacing:.005em}
.bk__note{margin:var(--s3) 0 0;font-size:var(--t-md);color:rgba(20,20,20,.58)}

/* --- paso 01: tarjetas de servicio --- */
.bk__srv{margin-top:var(--s7);display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s5)}
.bk__s{appearance:none;-webkit-appearance:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4) var(--s4) var(--s6);border:0;border-top:1px solid rgba(20,20,20,.2);
  background:transparent;color:var(--ink);border-radius:0;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease)}
.bk__s i{font-style:normal;font-family:"Geist Mono",monospace;font-weight:630;
  font-size:var(--t-2xs);letter-spacing:.16em;color:var(--lime-ink);
  transition:color .35s var(--ease)}
.bk__s b{font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-2xl);line-height:.96;letter-spacing:.01em}
.bk__s span{font-size:var(--t-sm);line-height:1.5;color:rgba(20,20,20,.62);
  transition:color .35s var(--ease)}
.bk__s:hover{background:rgba(20,20,20,.05);transform:translateY(-3px);
  border-color:rgba(20,20,20,.45)}
.bk__s[aria-checked="true"]{background:var(--ink);color:var(--cream);
  border-color:var(--ink);transform:translateY(-3px)}
.bk__s[aria-checked="true"] i{color:var(--lime)}
.bk__s[aria-checked="true"] span{color:rgba(241,239,232,.72)}
.bk__s:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}

/* --- paso 02: calendario + horas --- */
.bk__when{margin-top:var(--s7);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.52fr);gap:var(--s8);align-items:start}
.bk__cal{border:1px solid rgba(20,20,20,.2);padding:var(--s5)}
.bk__calhd{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid rgba(20,20,20,.14)}
.bk__calhd b{font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-3xl);line-height:1;letter-spacing:.01em;text-align:center;flex:1 1 auto}
.bk__nav{appearance:none;-webkit-appearance:none;cursor:pointer;flex:0 0 auto;
  width:38px;height:38px;border:1px solid rgba(20,20,20,.24);background:transparent;
  color:var(--ink);font-size:var(--t-lg);line-height:1;border-radius:100px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bk__nav:hover:not(:disabled){background:var(--ink);color:var(--cream);border-color:var(--ink)}
.bk__nav:disabled{opacity:.28;cursor:not-allowed}
.bk__nav:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.bk__wd{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);
  margin-top:var(--s4);text-align:center;color:rgba(20,20,20,.5);font-size:var(--t-2xs)}
.bk__wd i{font-style:normal}
.bk__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);
  margin-top:var(--s2)}
.bk__d{appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;
  aspect-ratio:1/1;min-height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;color:var(--ink);border-radius:0;
  font-family:"Geist Mono",monospace;font-weight:600;font-size:var(--t-sm);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease)}
.bk__d:hover:not(:disabled){background:var(--lime);border-color:var(--ink)}
.bk__d:disabled{cursor:not-allowed;color:rgba(20,20,20,.24)}
.bk__d:disabled::after{content:"";position:absolute;left:26%;right:26%;top:50%;height:1px;
  background:rgba(20,20,20,.2)}
.bk__d--hoy{border-color:rgba(20,20,20,.3)}
.bk__d--vacio{visibility:hidden}
.bk__d[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.bk__d:focus-visible{outline:2px solid var(--lime-ink);outline-offset:1px}
.bk__key{margin:var(--s4) 0 0;font-size:var(--t-2xs);letter-spacing:.12em;
  color:rgba(20,20,20,.5)}

.bk__hl{margin:0 0 var(--s4);color:rgba(20,20,20,.55);font-size:var(--t-2xs)}
.bk__slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.bk__h{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:var(--s3) var(--s2);border:1px solid rgba(20,20,20,.24);background:transparent;
  color:var(--ink);border-radius:100px;
  font-family:"Geist Mono",monospace;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.06em;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease)}
.bk__h:hover:not(:disabled){background:var(--lime);border-color:var(--ink);
  transform:translateY(-2px)}
.bk__h:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.bk__h[aria-pressed="true"],.bk__h[aria-checked="true"]{background:var(--ink);
  color:var(--cream);border-color:var(--ink)}
/* el si/no del referido son dos pildoras cortas, no dos barras anchas */
.bk__si{grid-template-columns:repeat(2,minmax(0,120px));justify-content:start}
.bk__h:focus-visible{outline:2px solid var(--lime-ink);outline-offset:2px}
.bk__vacio{margin:0;font-size:var(--t-sm);color:rgba(20,20,20,.55);
  border:1px dashed rgba(20,20,20,.24);padding:var(--s4)}

/* --- paso 03: los datos --- */
.bk__fields{margin-top:var(--s7)}
.bk__ref{margin-top:var(--s5)}
.bk__ref[hidden]{display:none}

/* --- resumen pegado al lado --- */
.bk__side{position:sticky;top:calc(var(--s10) + 40px)}
.bk__card{border:1px solid rgba(20,20,20,.2);background:rgba(255,255,255,.42);
  padding:var(--s7) var(--s6) var(--s6)}
.bk__card .eyebrow{margin-top:0;margin-bottom:var(--s5)}
.bk__sum{margin:0;padding:0;list-style:none;display:grid}
.bk__sum li{display:grid;gap:4px;padding:var(--s4) 0;
  border-top:1px solid rgba(20,20,20,.14)}
/* el eyebrow ya dibuja una raya: la primera fila no lleva otra */
.bk__sum li:first-child{border-top:0;padding-top:0}
.bk__sum li:last-child{border-bottom:1px solid rgba(20,20,20,.14)}
.bk__sum span{font-size:var(--t-2xs);letter-spacing:.14em;color:rgba(20,20,20,.55)}
.bk__sum b{font-weight:600;font-size:var(--t-lg);color:var(--ink);
  transition:color .3s var(--ease)}
.bk__sum b[data-vacio="true"]{color:rgba(20,20,20,.32);font-weight:500}
.bk__go{margin-top:var(--s6);width:100%;text-align:center;cursor:pointer;border:0}
.bk__card .cf__note{margin-top:var(--s3);display:block}
.bk__card .cf__err{margin-top:var(--s3)}

/* --- pantalla de confirmacion --- */
.bk__ok{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.bk__ok[hidden]{display:none}
.bk__okin{border:1px solid rgba(20,20,20,.2);padding:var(--s10) var(--s8);
  max-width:74ch}
.bk__okt{margin:var(--s4) 0 0;font-family:veneer,Impact,sans-serif;font-weight:400;
  font-size:var(--t-5xl);line-height:.92}
.bk__okp{margin-top:var(--s5);font-size:var(--t-lg);line-height:1.6;
  color:rgba(20,20,20,.74);max-width:56ch}
.bk__folio{margin-top:var(--s6);display:inline-block;padding:var(--s2) var(--s5);
  background:var(--lime);color:var(--ink);
  font-family:"Geist Mono",monospace;font-weight:630;font-size:var(--t-mono);
  letter-spacing:.16em}
.bk__okdet{margin:var(--s7) 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.bk__okdet li{display:grid;gap:4px;padding-top:var(--s3);
  border-top:1px solid rgba(20,20,20,.16)}
.bk__okdet span{font-size:var(--t-2xs);letter-spacing:.14em;color:rgba(20,20,20,.55)}
.bk__okdet b{font-weight:600;font-size:var(--t-base)}
.bk__acts{margin-top:var(--s8);display:flex;flex-wrap:wrap;gap:var(--s4);
  align-items:center}
.bk__acts .btn{margin-top:0}
/* .btn normal es crema sobre crema: aqui va en linea, no relleno */
.bk__acts .btn:not(.btn--ink){background:transparent;
  border:1px solid rgba(20,20,20,.32);color:var(--ink)}
.bk__acts .btn:not(.btn--ink):hover{background:var(--lime);border-color:var(--ink)}

/* --- movil --- */
@media (max-width:1200px){.bk__srv{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){
  .bk__in{grid-template-columns:1fr}
  .bk__side{position:static}
  .bk__scribble{position:static;display:block;transform:none;
    margin-top:var(--s7);width:min(52vw,300px)}
  .bk__okdet{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .bk__when{grid-template-columns:1fr;gap:var(--s7)}
  .bk__slots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .bk__srv{grid-template-columns:repeat(2,1fr)}
  .bk__slots{grid-template-columns:repeat(2,1fr)}
  .bk__okdet{grid-template-columns:1fr}
  .bk__okin{padding:var(--s8) var(--s6)}
  .bk__cal{padding:var(--s4)}
}
@media (max-width:430px){
  /* en pantallas muy chicas el calendario manda: casillas mas apretadas para
     que los siete dias quepan sin empujar la pagina de lado */
  .bk__days,.bk__wd{gap:2px}
  .bk__d{min-height:0;font-size:var(--t-xs)}
}
@media (max-width:400px){.bk__srv{grid-template-columns:1fr}}