@font-face{font-family:'Cabinet Grotesk';src:url(../fonts/cabinet-grotesk-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(../fonts/cabinet-grotesk-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(../fonts/general-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(../fonts/general-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gochi Hand';src:url(../fonts/gochi-hand-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Arial resized to the real faces' width, so the first frame (before the fonts arrive) breaks lines where the real fonts will and nothing below moves.
   Ratios measured in Chrome over the hero strings: Cabinet 800 = 0.904 x Arial Bold, Cabinet 700 = 0.902 x Arial Bold, General Sans 500 = 1.025 x Arial, 600 = 0.993 x Arial Bold.
   Overrides are the real faces' ascent/descent divided by size-adjust (the browser multiplies them back). */
@font-face{font-family:'Cabinet Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:90.4%;ascent-override:96.2%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Cabinet Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:90.2%;ascent-override:96.5%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'General Sans Fallback';src:local('Arial'),local('ArialMT');font-weight:500;size-adjust:102.5%;ascent-override:98.5%;descent-override:23.4%;line-gap-override:0%}
@font-face{font-family:'General Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:99.3%;ascent-override:101.7%;descent-override:24.2%;line-gap-override:0%}
:root{
  --sky:clamp(120px,23svh,240px);--sol:#FFE9A6;--paper:#F3F4EF;
  --paper-2:#E9EBE4;
  --ink:#141414;
  --ink-2:#4A4C47;
  --ink-3:#878982;
  --botella:#1F7A5A;
  --botella-hondo:#17614A;
  --tomate:#EE4834;
  --mostaza:#F5BB38;
  --verde-c:#237E67;

  --f-display:'Cabinet Grotesk','Cabinet Fallback','Helvetica Neue',Arial,sans-serif;
  --f-text:'General Sans','General Sans Fallback','Helvetica Neue',Arial,sans-serif;
  --f-hand:'Gochi Hand','Comic Sans MS',cursive;

  --gut:clamp(20px,4vw,56px);
  --max:1360px;
  --sec:clamp(72px,9vw,140px);
  /* hero companion body height: 88px at 390 (96 left no room for 30px gaps with the receipt and keys inside the screen), 168px at 1440 */
  --bh:clamp(80px,calc(7.619vw + 58.29px),168px);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-curtain:cubic-bezier(.86,0,.07,1);
  --d-ui:180ms;
  --d-hover:240ms;
  --d-reveal:800ms;
  --d-hero:1000ms;
}

*,*::before,*::after{box-sizing:border-box}
*:focus,*:focus-visible{outline:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper)}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
::selection{background:var(--mostaza);color:var(--ink)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:500 17px/26px var(--f-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
}
/* body's clip is handed to the viewport, and phones still widen the layout to fit what sticks out: while the crew walked in from the right,
   the page measured 726px at 390 and the phone zoomed out (innerHeight 1572, so the scene-1 pin came out 1729px long). main clips for real */
main{overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- focus: a friendly "›" and darker text, never a ring ---------- */
a,button{position:relative}
a:not(.btn):focus-visible{color:var(--ink)}
a:not(.btn):focus-visible::before{
  content:"›";position:absolute;left:-.7em;top:50%;transform:translateY(-54%);
  font:800 1.15em/1 var(--f-display);color:var(--ink);pointer-events:none;
}
/* on the bottle button the "›" sits inside its own padding, in paper, so nothing shifts */
.btn:focus-visible::before{
  content:"›";position:absolute;left:11px;top:50%;transform:translateY(-54%);
  font:800 20px/1 var(--f-display);color:var(--paper);pointer-events:none;
}
.btn-sm:focus-visible::before{left:5px;font-size:17px}
.btn:focus-visible{background:var(--botella-hondo)}

/* ---------- buttons and links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 28px;border-radius:10px;border:2px solid var(--ink);
  background:var(--botella);color:var(--paper);
  font:600 17px/1 var(--f-text);text-decoration:none;white-space:nowrap;
  transition:background-color var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);
}
.btn-sm{height:42px;padding:0 16px;font-size:15px}
.link{font:500 17px/1 var(--f-text);color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--botella-hondo);transform:translateY(-1px)}
  .link:hover{text-decoration-thickness:2px}
  .nav-links a:hover{color:var(--ink)}
  .foot a:hover{text-decoration:underline}
}
.btn:active{transform:translateY(1px);background:var(--botella-hondo);transition-duration:80ms}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:block;line-height:0;text-decoration:none}
.brand img{display:block;height:40px;width:auto}
.foot-brand{display:inline-flex;align-items:center;gap:8px}
.foot-brand img{display:block;height:22px;width:auto}
.ig{display:inline-flex;align-items:center;gap:8px}
.ig-i{flex:none}
.nav-right{display:flex;align-items:center;gap:36px}
.nav-links{display:flex;gap:30px}
.nav-links a{font:600 15px/1 var(--f-text);color:var(--ink-2);text-decoration:none;transition:color var(--d-hover) var(--ease-out)}

/* ---------- shared type ---------- */
.h2{font:800 clamp(32px,4.4vw,60px)/1 var(--f-display);letter-spacing:-.025em}
.label{font:600 15px/1 var(--f-text);color:var(--ink-2);margin-bottom:clamp(24px,3vw,40px)}
.hand{font:400 clamp(20px,1.8vw,26px)/1.1 var(--f-hand);color:var(--ink);white-space:nowrap}
.arrow{overflow:visible;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- companions ---------- */
.pj{position:relative;flex:none;height:calc(var(--bh) * 1.24);width:calc(var(--bh) * var(--ar))}
.pj[data-pj=pagos]{--ar:.9655}
.pj[data-pj=contratos]{--ar:.9892}
.pj[data-pj=edificio]{--ar:.6571}
.pj-fb{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.pj-rig{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js-rig .pj-rig{display:block}
.js-rig .pj-fb{display:none}
.pj-rig .ln{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.pj-rig .dot{fill:var(--ink)}
.crew{display:flex;align-items:flex-end;pointer-events:none}
.crew .pj[data-pj=pagos]{margin-left:calc(var(--bh) * .42)}
.crew .pj[data-pj=contratos]{margin-left:max(32px,calc(var(--bh) * .26))}
.crew .pj[data-pj=edificio]{margin-left:max(32px,calc(var(--bh) * .24));margin-right:calc(var(--bh) * .5)}
.floor{display:block;width:100%;height:6px;overflow:visible}
.floor line{stroke:var(--ink);stroke-width:2;stroke-linecap:round}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end;padding-top:clamp(12px,3vw,48px)}
.hero h1{
  grid-column:1/-1;font:800 clamp(44px,7.4vw,96px)/.94 var(--f-display);letter-spacing:-.025em;max-width:7.425em; /* 11ch of Cabinet 800 ('0' = .675em); ch follows whatever font is up, so it moved the lines while the font loaded */
}
.hero-copy{grid-column:1;align-self:start}
.lede{margin-top:clamp(20px,2.4vw,32px);max-width:26.27em} /* 44ch of General Sans 500 */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(24px,2.6vw,36px)}
.stage{grid-column:2;display:flex;flex-direction:column;align-items:flex-end}
.stage .note-hand{position:relative;display:flex;flex-direction:column;align-items:flex-end;margin-right:calc(var(--bh) * .1)}
.stage .note-hand .hand{display:block;transform:rotate(-3deg);transform-origin:right bottom}
.stage .note-hand .arrow{width:52px;height:46px;margin:2px calc(var(--bh) * .55) 0 0}
.hero-floor{grid-column:1/-1;margin-inline:calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut))}
/* lines of the split title: room above for accents (á in "está") */
.hero h1:has(.hl-mask){display:flex;flex-direction:column} /* flex: the masks' negative margins add up instead of collapsing */
.hl-mask{padding-block:.16em .24em;margin-block:-.16em -.24em} /* room for the tilde of "está" and the descenders while the lines rise */

/* ---------- scene 1: painted paragraph ---------- */
.s1{position:relative;--bh:clamp(84px,calc(4.19vw + 67.7px),128px)}
.js-motion .s1{overflow:clip}
.s1-inner{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;padding-block:clamp(56px,10vh,120px) clamp(28px,5vh,56px)}
.paint{position:relative;align-self:center;grid-column:1/-1;font:700 clamp(30px,4.6vw,64px)/1.08 var(--f-display);letter-spacing:-.02em;max-width:13.1em} /* 20ch of Cabinet 700 */
.paint p{font:inherit}
.paint-base{position:absolute;inset:0;color:var(--ink-3);user-select:none}
.paint-ink{position:relative;color:var(--ink)}
.paint .w{display:inline-block}
/* the comma sits outside the marked word (so the no-JS underline skips it) but never wraps away from it; the grey copy carries the same markup so both split into the same boxes */
.tgw{white-space:nowrap}
.notes{grid-column:1;display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:24px;align-self:start}
.note{
  display:inline-block;padding:6px 12px 7px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);
  font:400 clamp(20px,1.8vw,26px)/1.1 var(--f-hand);color:var(--ink);white-space:nowrap;
  transform:rotate(var(--r,0deg));
}
.js .s1 .notes{position:absolute;inset:0;margin:0;display:block;pointer-events:none}
.js .s1 .note{position:absolute;left:0;top:0}
/* each companion's color: marker under its word, dot on its note */
[data-tg=pagos],[data-for=pagos],[data-k=pagos]{--c:var(--tomate)}
[data-tg=contratos],[data-for=contratos],[data-k=contratos]{--c:var(--verde-c)}
[data-tg=edificio],[data-for=edificio],[data-k=edificio]{--c:var(--mostaza)}
.nd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:9px;vertical-align:.14em}
.marks{position:absolute;inset:0;pointer-events:none}
.mk i{position:absolute;left:0;top:0;width:0;height:.18em;background:var(--c);transform-origin:0 50%}
.ties{display:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* wide: notes in the empty right column, tied to their line; narrow: stacked under the paragraph. Both carry the word's color dot */
.s1-inner[data-mode=margin] .ties{display:block}
.js .s1-inner[data-mode=stack] .notes{position:relative;inset:auto;grid-column:1/-1;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px}
.js .s1-inner[data-mode=stack] .note{position:relative;left:auto;top:auto}
/* without JS the marker is a thick underline, painted under the letters */
html:not(.js) .tg{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:.18em;text-underline-offset:.02em;text-decoration-skip-ink:none}
html:not(.js) .marks{display:none}
.s1 .crew-wrap{grid-column:2;grid-row:2;justify-self:end;margin-top:24px;width:min(100%,calc(var(--bh) * 5.2))}
.s1 .crew{justify-content:flex-end}

.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:28px 40px;font:600 15px/1 var(--f-text);color:var(--ink-2)}
.foot nav{display:flex;align-items:center;gap:28px}
.foot a{text-decoration:none;color:var(--ink)}
@media (min-width:1000px){
  body{font-size:19px;line-height:30px}
  .hero{grid-template-columns:minmax(0,1fr) auto}
  .hero h1{grid-column:1}
  .hero-copy{grid-row:2}
  .stage{grid-row:1/3;align-self:end}
}
@media (max-width:999px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .stage{grid-column:1;align-items:stretch;margin-top:28px}
  .stage .note-hand{align-self:flex-end;margin-right:0}
  .stage .crew{justify-content:flex-start}
  .s1-inner{grid-template-columns:minmax(0,1fr)}
  .s1 .crew-wrap{grid-column:1;grid-row:auto;justify-self:stretch;width:auto}
  .s1 .crew{justify-content:flex-start}
}
@media (max-width:899px){
  .nav{height:64px}
  .nav-links{display:none}
}
@media (max-width:420px){
  .btn{height:54px;padding:0 24px}
  .btn-sm{height:40px;padding:0 14px}
  .hero{padding-top:8px}
  .lede{margin-top:16px}
  .actions{margin-top:20px;gap:14px 22px}
  .stage{margin-top:6px}
  .stage .note-hand .arrow{width:40px;height:34px}
  /* the receipt pokes out left of its owner and the keys right of theirs: both stay on screen */
  /* crew width is about 3.5 bodies + 60px of fixed gaps; the body shrinks with the screen so receipt and keys stay 16px inside */
  .hero{--bh:min(clamp(80px,calc(7.619vw + 58.29px),168px),calc(28vw - 28px))}
  .stage .crew .pj[data-pj=pagos]{margin-left:calc(var(--bh) * .5 - 4px)}
  .stage .crew .pj[data-pj=contratos],.stage .crew .pj[data-pj=edificio]{margin-left:30px}
  .stage .crew .pj[data-pj=edificio]{margin-right:0}
  .s1 .crew .pj[data-pj=pagos]{margin-left:calc(var(--bh) * .12)}
}

/* ---------- motion states ---------- */
/* only what really animates waits; the WhatsApp button and the mail link are there from the first frame.
   Scene 1's ink, notes and crew wait too: until the scrub takes them, the grey base is all that shows */
html.js-pending .hero .stage,html.js-pending .hero-floor,
html.js-pending .s1 .paint-ink,html.js-pending .s1 .notes,html.js-pending .s1 .crew-wrap{
  opacity:0;animation:failsafe 0s linear 3s forwards;
}
@keyframes failsafe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .btn,.nav-links a{transition:none}
}
/* ================= escena 2: la noche ================= */
.s2-head{padding-bottom:clamp(36px,5vw,72px)}
.s2-head h2{font:800 clamp(40px,5.4vw,84px)/.96 var(--f-display);letter-spacing:-.03em;max-width:12em;text-wrap:balance}

/* ---------- shared pieces ---------- */
.note{
  position:relative;display:inline-block;padding:6px 12px 7px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);
  font:400 clamp(20px,1.8vw,26px)/1.1 var(--f-hand);color:var(--ink);white-space:nowrap;
  transform:rotate(var(--r,0deg));
}
.nd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink));margin-right:9px;vertical-align:.14em}
/* tails: a 1.5px ink line, down to who said it or sideways to the clock */
.note.t-down::after{content:"";position:absolute;left:var(--tx,50%);top:100%;width:1.5px;height:var(--tl,30px);background:var(--ink)}
.note.t-left::after{content:"";position:absolute;right:100%;top:55%;width:var(--tl,26px);height:1.5px;background:var(--ink)}
.c-tomate{--c:var(--tomate)}
.c-verde{--c:var(--verde-c)}
.c-mostaza{--c:var(--mostaza)}
.c-gris{--c:var(--ink-3)}
.ba{font:500 clamp(19px,1.75vw,26px)/1.3 var(--f-text);color:var(--ink-2);letter-spacing:-.01em}
.bubble{
  position:relative;padding:12px 18px 10px;border:2px solid var(--botella);border-radius:14px;background:var(--paper);
  font:600 clamp(16px,1.35vw,20px)/1.25 var(--f-text);color:var(--ink);white-space:nowrap;
}
.bubble time{display:block;text-align:right;font:500 13px/1 var(--f-text);color:var(--ink-2);margin-top:6px}
.bubble::after{content:"";position:absolute;left:var(--tx,56%);bottom:-9px;width:15px;height:15px;background:var(--paper);border:solid var(--botella);border-width:0 2px 2px 0;transform:rotate(45deg)}
.moon{display:block;width:clamp(30px,4.6svh,44px);aspect-ratio:1;border-radius:50%;box-shadow:clamp(8px,1.1svh,11px) clamp(-5px,-.55svh,-4px) 0 0 var(--paper)}
.sun{display:block;width:clamp(48px,8svh,76px);aspect-ratio:1;border-radius:50%;background:var(--paper)}
/* flat stars: crosses and dots, no glow */
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:var(--paper)}
.stars i.x{width:14px;height:14px;border-radius:0;background:none}
.stars i.x::before,.stars i.x::after{content:"";position:absolute;left:6px;top:0;width:2px;height:14px;background:var(--paper)}
.stars i.x::after{transform:rotate(90deg)}

/* companions built from parts (same rig as the hero) */
.pj{position:relative;flex:none;height:calc(var(--bh) * 1.24);width:calc(var(--bh) * var(--ar))}
.pj[data-pj=pagos]{--ar:.9655}
.pj[data-pj=contratos]{--ar:.9892}
.pj[data-pj=edificio]{--ar:.6571}
/* the warehouse helper is a squat box, a little smaller than the rest */
.pj[data-pj=bodega]{--ar:1.2951;height:calc(var(--bh) * .8 * 1.24);width:calc(var(--bh) * .8 * 1.2951)}
/* the owner stands a little taller than the helpers */
.pj[data-pj=dueno]{--ar:.5556;height:calc(var(--bh) * 1.13 * 1.24);width:calc(var(--bh) * 1.13 * .5556)}
.pj-fb{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.pj-rig{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js-rig .pj-rig{display:block}
.js-rig .pj-fb{display:none}
.pj-rig .ln{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.pj-rig .dot{fill:var(--ink)}
.pj-rig .steam{fill:none;stroke:var(--ink-3);stroke-linecap:round}
.ink-l{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}

/* ticket: one paper that changes in each hand (order, checked, invoice, link, receipt); four dots fill as it goes */
.tk-svg{display:block;width:100%;height:auto;overflow:visible}
.tk-svg .pp{fill:#fff;stroke:var(--ink);stroke-width:2}
.tk-svg .tx{fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-linecap:round}
.tk-svg .tt{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.tk-svg .bb{fill:none;stroke:var(--botella);stroke-width:2;stroke-linejoin:round}
.tk-svg .bx{fill:var(--ink-3);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.tk-svg .hd{fill:var(--verde-c)}
.tk-svg .pl{fill:var(--tomate);stroke:var(--ink);stroke-width:1.5}
.tk-svg .cn{fill:var(--mostaza);stroke:var(--ink);stroke-width:1.8}
.tk-svg .ck{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tk-svg .dt{fill:#fff;stroke:var(--ink);stroke-width:1.3}
.tk-svg .fc,.tk-svg .gp{display:none}
.tk-svg[data-f="0"] .fc-0,.tk-svg[data-f="1"] .fc-1,.tk-svg[data-f="2"] .fc-2,.tk-svg[data-f="3"] .fc-3,.tk-svg[data-f="4"] .fc-4{display:inline}
.tk-svg:is([data-f="1"],[data-f="2"],[data-f="3"],[data-f="4"]) .dt-1{fill:var(--ink-3)}
.tk-svg:is([data-f="2"],[data-f="3"],[data-f="4"]) .dt-2{fill:var(--verde-c)}
.tk-svg:is([data-f="3"],[data-f="4"]) .dt-3{fill:var(--tomate)}
.tk-svg[data-f="4"] .dt-4{fill:var(--mostaza)}
/* the hand's dot drawn on top of the paper, so it reads as held */
.held .tk-svg .gp{display:inline;fill:var(--ink)}
.tk-held{display:none;position:absolute;left:0;top:0;width:calc(var(--bh) * .32);z-index:3;pointer-events:none}
.js-rig:not(.js-motion) .tk-held{display:block}

.tk-svg .ar{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-flip{transform-origin:50% 50%}
.pj[data-pj=bodega] .pj-fb{height:80.6%;bottom:19.4%}
.bubble.b-in.b-hand{bottom:calc(var(--bh) * 1.24 + 52px)}
/* ================= desktop reel ================= */
.reel{--bh:clamp(120px,22svh,200px);position:relative}
.r-stage{position:relative}
.r-sky{display:none}
.route,.ticket{display:none}
.r-track{position:relative}
/* without motion the three moments stack, each with its own sky */
.panel{position:relative;height:clamp(620px,96svh,900px);overflow:hidden}
.panel::after{content:"";position:absolute;left:0;right:0;bottom:10%;height:2px;background:var(--ink);transform:translateY(50%);z-index:0}
.p-sky{position:absolute;top:0;left:0;right:0;height:var(--sky);background:var(--ink);display:flex;align-items:center;padding-inline:var(--gut)}
.pc .p-sky{background:var(--mostaza);justify-content:flex-end}
.p-text{position:absolute;left:var(--gut);top:calc(var(--sky) + 5svh);z-index:1}
.p-text h3{font:800 clamp(40px,min(6.2vw,10.5svh),96px)/.95 var(--f-display);letter-spacing:-.03em}
.pa h3{max-width:8.6em}
.pb h3{max-width:9.5em}
.pc h3{max-width:7.4em}
.p-text .sub{font:600 clamp(20px,2.1vw,32px)/1.2 var(--f-text);color:var(--ink-2);letter-spacing:-.015em;margin-top:clamp(10px,1.6svh,18px)}
.pc .ba{margin-top:clamp(16px,2.6svh,26px)}
/* "at": a zero-width anchor on the floor; the child centers on it, so offsets can be read without transforms */
.at{position:absolute;left:var(--x);bottom:var(--b,10%);width:0;display:flex;justify-content:center;align-items:flex-end;z-index:1}
.at.top{bottom:auto;top:var(--t);align-items:flex-start}
.at > *{flex:none}
.clock{display:block;width:calc(var(--bh) * var(--cs,.72));height:auto}
.clock .face{fill:var(--paper);stroke:var(--ink);stroke-width:3.5}
.clock .tick,.clock .hand{stroke:var(--ink);stroke-linecap:round}
.clock .tick{stroke-width:3}
.clock .hand{stroke-width:4}
.clock .hub{fill:var(--ink)}
.shelf{display:block;width:calc(var(--bh) * .9);height:auto}
.shelf .post{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.shelf .box{fill:var(--paper-2);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.shelf .lbl{fill:#fff;stroke:var(--ink);stroke-width:1.8}
.bed{display:block;width:calc(var(--bh) * 2.19);height:auto;overflow:visible}
.bed .wh{fill:#fff;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.bed .cv{fill:var(--paper-2);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.bed .gl{fill:var(--paper);stroke:var(--ink);stroke-width:3.4}
.bed .fl{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round}
.coin{position:absolute;left:50%;top:calc(var(--bh) * .5);width:calc(var(--bh) * .44);height:auto;margin-left:calc(var(--bh) * -.22);z-index:2}
.coin .cf{fill:var(--mostaza);stroke:var(--ink);stroke-width:3}
.coin .ck{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.card{
  position:absolute;left:52%;top:calc(var(--sky) + 5svh);z-index:1;
  width:clamp(240px,22vw,330px);padding:14px 12px 14px;border:2px solid var(--ink);border-radius:26px;background:var(--paper);
}
.card .notch{display:block;width:34px;height:4px;border-radius:2px;background:var(--ink);margin:0 auto 14px}
.card .head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;background:var(--paper-2);font:600 clamp(20px,1.7vw,26px)/1.1 var(--f-text);letter-spacing:-.01em}
.card ul{padding:2px 14px 0}
.card li{padding:11px 0;border-bottom:1.5px solid var(--paper-2);font:500 clamp(15px,1.2vw,18px)/1.3 var(--f-text)}
.card li:last-child{border-bottom:0;padding-bottom:4px}
.dock{display:block;width:calc(var(--bh) * .2);flex:none}
.ctail{display:none;position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
.js-rig .ctail{display:block}
.ctail path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}

/* ---------- with motion: one pinned stage, a 3-panel track, one sky, one floor ---------- */
.js-motion .r-stage{height:100svh;overflow:hidden}
.js-motion .r-sky{display:block;position:absolute;left:0;right:0;top:0;height:var(--sky);background:var(--ink);overflow:hidden;z-index:4}
.r-sky .day{position:absolute;inset:0;background:var(--mostaza);transform:scaleX(0);transform-origin:0 50%}
.r-sky .moon,.p-sky .moon{position:absolute;left:var(--gut);top:34%}
.r-sky .sun{position:absolute;right:calc(var(--gut) + 24px);top:30%;opacity:0}
.pc .p-sky .sun{position:absolute;right:calc(var(--gut) + 24px);top:30%}
.js-motion .r-track{position:absolute;left:0;top:0;height:100%;width:300%;display:flex;will-change:transform}
.js-motion .panel{flex:0 0 calc(100% / 3);height:100%;overflow:visible}
.js-motion .p-sky{display:none}
.js-motion .route{display:block;position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.route path{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.js-motion .ticket{display:block;position:absolute;left:0;top:0;width:calc(var(--bh) * .32);z-index:3;will-change:transform;pointer-events:none}
/* a bubble that comes out of the ticket in the tomato's raised hand (numbers follow the rig: hand at +.58bh, .84bh off the floor) */
.bubble.b-hand{position:absolute;left:calc(var(--bh) * .693 - 37px);bottom:calc(var(--bh) * 1.195 + 16px);--tx:30px;z-index:2}
.js-motion .dock .tk-svg{visibility:hidden}

/* ================= phone: vertical timeline, no pin ================= */
.tl{display:none}
@media (max-width:768px){
  .reel{display:none}
  .tl{display:block;--bh:74px}
  .tl-sky{position:relative;height:clamp(120px,16svh,140px);background:var(--ink);overflow:hidden}
  .tl-sky .moon{position:absolute;left:var(--gut);top:30%;width:36px}
  .tl h3{font:800 clamp(44px,12.6vw,64px)/.95 var(--f-display);letter-spacing:-.03em;margin-top:28px;max-width:7.2em}
  .tl .sub{font:600 19px/1.3 var(--f-text);color:var(--ink-2);margin-top:12px}
  .stops{position:relative;margin-top:34px}
  .stops::before{content:"";position:absolute;left:6px;top:40px;bottom:calc(var(--bh) * .7);width:2px;background:var(--ink)}
  .stop{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:14px 0}
  .st-dot{width:14px;height:14px;border-radius:50%;background:var(--ink);position:relative}
  .st-time{display:block;font:800 clamp(28px,8.6vw,38px)/1 var(--f-display);letter-spacing:-.02em}
  .st-txt .note{margin-top:10px;font-size:20px}
  .st-pj{display:flex;align-items:flex-end;gap:6px;margin-right:12px}
  .stop.dawn{padding-bottom:0;align-items:end}
  .stop.dawn .st-dot,.stop.dawn .st-txt{align-self:center}
  .tl-band{position:relative;height:124px;background:var(--mostaza);border-top:2px solid var(--ink);margin-inline:calc(var(--gut) * -1);overflow:hidden}
  .tl-band .sun{position:absolute;left:var(--gut);top:12px;width:40px}
  .tl .ba{margin-top:28px;font-size:19px}
  .tl .btn{display:flex;width:100%;margin-top:28px}
}
@media (min-width:769px){.tl{display:none}}

/* ---------- motion states ---------- */
html.js-pending .reel .r-track,html.js-pending .tl .stops{opacity:0;animation:failsafe 0s linear 3s forwards}
@keyframes failsafe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ================= sun (scene 2 skies and the phone band) ================= */
.sol{display:block;overflow:visible;aspect-ratio:280/176;width:auto}
.sol *{vector-effect:non-scaling-stroke}
.sol-disc{fill:var(--sol);stroke:var(--ink);stroke-width:5}
.sol-rays path,.sol-hz{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
/* sits on the sky's floor, centred over the 7:00 phone card (card: left 52%, width clamp(240px,22vw,330px)) */
.r-sky .sol,.pc .p-sky .sol{position:absolute;bottom:10px;left:calc(52% + clamp(240px,22vw,330px) / 2);height:min(calc(var(--sky) - 30px),186px);transform:translateX(-50%)}
.tl-band .sol{position:absolute;left:calc(var(--gut) + 18px);bottom:12px;height:102px}
.tl-band .sol-disc,.tl-band .sol-rays path,.tl-band .sol-hz{stroke-width:4}
/* phone timeline: the ticket and the bubble ride in the helper's hand */
.tl .st-pj{position:relative}
.tl .tk-held{display:block}
.tk-held .tl-bub{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:max-content;max-width:12em;white-space:normal;font-size:15px}
.tl-bub{max-width:12em}

/* ================= scenes 3-8: shared ================= */
.pj[data-pj=persona]{--ar:.9167}
.pj[data-pj=edificio-llave],.pj[data-pj=edificio-vara]{--ar:.6571}
.pj[data-pj=contratos-hoja]{--ar:.9892}
.sc{position:relative;padding-block:var(--sec)}
.sc-head{max-width:58rem;margin-bottom:clamp(36px,5vw,72px)}
.sc-h{font:800 clamp(40px,5vw,76px)/.96 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance;max-width:14em}
.sc-sub{font:500 clamp(19px,1.6vw,24px)/1.35 var(--f-text);color:var(--ink-2);margin-top:18px;max-width:34em;text-wrap:pretty}
.sc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(36px,5vw,64px)}
.js .sc .note{position:relative;left:auto;top:auto}
.sc .crew .pj{margin:0}
.sc .bubble{white-space:normal;max-width:24em}
.sc .num{font-variant-numeric:tabular-nums}
.mini-btn{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:600 14px/1 var(--f-text);color:var(--ink);white-space:nowrap}
/* hand-drawn rings and checks: drawn by default; the motion build hides them and draws them in */
.ring{position:absolute;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--tomate);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

/* ================= 3: los papeles ================= */
.s3{background:var(--mostaza)}
.s3-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:end}
.s3-pile{display:flex;align-items:flex-end;gap:clamp(12px,2vw,28px)}
.sheets{position:relative;flex:none;width:clamp(120px,13vw,180px);aspect-ratio:.77}
.sheet{position:absolute;inset:0;display:flex;flex-direction:column;gap:9%;padding:20% 14% 0;background:#fff;border:2px solid var(--ink);border-radius:6px;transform:translateX(var(--x)) rotate(var(--r))}
.sheet i{display:block;height:5px;border-radius:3px;background:var(--paper-2)}
.sheet i:nth-child(2n){width:72%}
.sheet i:nth-child(3n){width:54%}
.sheet b{align-self:flex-start;padding:3px 6px;border:1.5px solid var(--tomate);border-radius:4px;font:700 13px/1 var(--f-display);color:var(--tomate);letter-spacing:.02em}
.s3-out{display:flex;flex-wrap:wrap;align-items:center;gap:18px 20px;padding:clamp(18px,2.4vw,32px);background:var(--paper);border:2px solid var(--ink);border-radius:16px}
.s3-table{width:100%;border-collapse:collapse;font:600 clamp(16px,1.35vw,20px)/1.2 var(--f-text);color:var(--ink)}
.s3-table th{padding:0 12px 12px 0;text-align:left;font:600 14px/1 var(--f-text);color:var(--ink-2);border-bottom:2px solid var(--ink)}
.s3-table td{padding:14px 12px 14px 0;border-bottom:1.5px solid var(--paper-2);white-space:nowrap}
.s3-table tr:last-child td{border-bottom:0}
.s3-table th:last-child,.s3-table td:last-child{padding-right:0}
.ty{position:relative;display:inline-block}
.ty .cov{position:absolute;inset:-2px -3px;background:var(--paper);transform-origin:100% 50%}
.ring-w .ring{inset:-11px -16px;width:calc(100% + 32px);height:calc(100% + 22px)}
.s3-draft{flex:1 1 16em;display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--f-text);color:var(--ink)}
.s3-draft svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--botella);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s3 .s3-note{order:2}
.s3 .sc-sub,.s3 .ba{color:var(--ink)}

/* ================= 4: el dueño pregunta ================= */
.s4-grid{--gap:clamp(24px,3vw,48px);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--gap);align-items:start}
.s4-owner{grid-column:1;grid-row:1}.s4-chat{grid-column:2;grid-row:1}
/* the answer bubble and the board share one cell: the bubble unfolds into the board */
/* the bubble is as tall as the cast row, so the relay line runs into it; the board also spans the note row */
.s4-ans{grid-column:3;grid-row:1;align-self:stretch;z-index:2}
.s4-board{grid-column:3;grid-row:1/3;align-self:start;z-index:2}
.s4 .sc-foot{grid-column:1/3;grid-row:2;margin-top:0}
.s4-owner{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.s4-time{display:inline-flex;align-items:center;gap:8px;font:700 19px/1 var(--f-display);color:var(--ink)}
.s4-time svg{width:20px;height:20px;fill:var(--mostaza);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.s4-chat{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0;padding-bottom:18px}
.s4-q{--tx:12%}
/* the cast walks out from behind the relay's left edge (never over the owner); the line stops at the bubble border */
.s4-relay{position:relative;z-index:3;clip-path:inset(-600px -1000px -60px 0);width:100%;--bh:clamp(56px,6.2vw,90px);display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px 3px}
.s4-line{position:absolute;left:0;bottom:0;width:calc(100% + var(--gap) + 1px);height:8px;overflow:visible;z-index:0}
.s4-line path{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.carrier{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.strip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 5px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;font:600 14px/1 var(--f-text);color:var(--ink);white-space:nowrap}
.strip .nd{margin-right:0}
.s4-ans{position:relative;width:100%;display:none;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:end;align-content:end;padding:18px 20px;background:#fff;border:2px solid var(--ink);border-radius:16px}
.js-motion .s4-ans{display:grid}
/* "typing" while the helpers walk the data over: three ink dots in a small bubble */
.s4-wait{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:7px;padding:12px 16px;border:2px solid var(--botella);border-radius:14px;background:var(--paper)}
.s4-wait i{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:s4w 1.1s ease-in-out infinite}
.s4-wait i:nth-child(2){animation-delay:.16s}.s4-wait i:nth-child(3){animation-delay:.32s}
@keyframes s4w{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.s4-wait i{animation:none;opacity:.8}}
.s4-nums{display:flex;flex-direction:column;gap:8px}
.s4-nums div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.s4-nums dt{font:500 15px/1.2 var(--f-text);color:var(--ink-2)}
.s4-nums dd{font:700 clamp(18px,1.5vw,22px)/1.1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:8px;height:64px;border-bottom:2px solid var(--ink)}
.bars span{position:relative;display:block;width:26px;height:calc(var(--h) * 100%);background:var(--paper-2);border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;transform-origin:50% 100%}
.bars span.on{background:var(--botella)}
.s4-ans .up{font:700 17px/1 var(--f-display);color:var(--botella)}
.s4-ans .owe,.s4-ans .mini-btn{grid-column:1/-1}
.s4-ans .owe{font:600 16px/1.3 var(--f-text);color:var(--ink)}
.s4-ans .mini-btn{justify-self:start}
.s4-board{position:relative;padding:24px 22px 16px;background:#fff;border:2px solid var(--ink);border-radius:16px}
.bd-edge{position:absolute;left:-2px;right:-2px;bottom:-2px;height:20px;border:2px solid var(--ink);border-top:0;border-radius:0 0 16px 16px;pointer-events:none}
.sc .s4-board .s4-note{position:absolute;top:-20px;right:18px}
.bd-k{font:600 14px/1 var(--f-text);color:var(--ink-2)}
.bd-big{font:800 clamp(30px,2.6vw,40px)/1 var(--f-display);letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.bd-up{font:600 15px/1 var(--f-text);color:var(--botella);margin-top:8px}
.bars-lg{height:104px;gap:18px;margin:16px 0 34px;padding-left:4px}
.bars-lg span{width:48px}
.bars-lg b{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font:600 13px/1 var(--f-text);color:var(--ink-2)}
.bd-owe{margin-top:6px}
.bd-owe li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-top:1.5px solid var(--paper-2);font:500 16px/1.2 var(--f-text);color:var(--ink)}
.bd-owe li:first-child{border-top:0}
.s4-pin{position:relative}

/* ================= 5: personas ================= */
.s5-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:end}
.s5-phone{position:relative;padding:54px 16px 30px;background:var(--paper-2);border:3px solid var(--ink);border-radius:40px}
.s5-phone::before{content:"";position:absolute;top:20px;left:50%;width:72px;height:8px;border-radius:4px;background:var(--ink);transform:translateX(-50%)}
.alerts{display:flex;flex-direction:column;gap:12px}
.alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:13px 14px;background:#fff;border:2px solid var(--ink);border-radius:14px;font:500 16px/1.3 var(--f-text);color:var(--ink)}
.alert time{font:700 15px/1.3 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.s5-cast{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.s5-cast .crew{gap:clamp(20px,3vw,56px);padding-left:clamp(8px,2vw,32px)}

/* ================= 6: no sabes qué quieres ================= */
.s6-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:center}
.s6-copy .sc-h{max-width:9em}
.s6-art{display:flex;flex-direction:column;gap:16px;min-width:0}
.days{display:flex;flex-wrap:wrap;gap:10px}
.days li{position:relative;padding:6px 11px 7px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);font:400 22px/1 var(--f-hand);color:var(--ink)}
.days .ring{inset:-12px -15px;width:calc(100% + 30px);height:calc(100% + 24px)}
.s6-stage{display:grid}
.s6-stage>*{grid-area:1/1}
.s6-line{display:block;width:100%;height:auto;overflow:visible}
.s6-line .knot{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.s6-stops circle{fill:var(--c);stroke:var(--ink);stroke-width:3}
.s6-notes{display:flex;flex-wrap:wrap;gap:12px 18px;pointer-events:none}
/* the mess only exists while it can be untangled; without motion the page shows the plan */
.s6-mess{display:none}
.js-motion .s6-mess{display:flex}
@media (min-width:601px){
  .s6-stage{position:relative}
  .s6 .s6-stage .s6-notes .note{position:absolute}
  .s6 .s6-mess .n1{left:44%;top:2%}
  .s6 .s6-mess .n2{left:54%;top:30%}
  .s6 .s6-mess .n3{left:46%;top:58%}
  .s6 .s6-plan .note{translate:-50% 0}
  .s6 .s6-plan .n1{left:25%;top:44%}
  .s6 .s6-plan .n2{left:50%;top:16%}
  .s6 .s6-plan .n3{left:75%;top:44%}
}
@media (max-width:600px){
  .s6-stage .s6-notes{grid-area:2/1;margin-top:10px}
}
.s6-art .crew{gap:clamp(24px,4vw,72px);padding-left:clamp(8px,4vw,72px)}

/* ================= 7: qué hacemos ================= */
.s7{padding-block:calc(var(--sec) * .75)}
.sc-kick{font:400 clamp(20px,1.7vw,24px)/1 var(--f-hand);color:var(--botella);margin-bottom:14px}
/* three little stages, one per step: the drawing explains, the text names it */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
.paso{display:flex;flex-direction:column;min-width:0}
.paso-stage{position:relative;container-type:inline-size;aspect-ratio:360/240;margin:0}
/* the floor runs on under the gaps, so the three stages read as one long room */
.paso-stage::after{content:"";position:absolute;left:calc(clamp(28px,3.4vw,56px) / -2);right:calc(clamp(28px,3.4vw,56px) / -2);bottom:10.83%;height:2.5px;background:var(--ink);border-radius:2px}
.paso:first-child .paso-stage::after{left:0}
.paso:last-child .paso-stage::after{right:0}
.paso-stage .pj{position:absolute;left:var(--x);bottom:10.83%;z-index:1}
.st-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-draw{stroke-dasharray:1;stroke-dashoffset:0}
.st-order rect,.st-clock circle,.st-plan rect,.st-screen,.st-ok circle,.st-lap{fill:#fff}
.st-order path,.st-doc .st-ln{stroke-width:2.4}
.st-ring{stroke:var(--tomate);stroke-width:3.2}
.st-plan-top{fill:var(--botella)}
.st-chk,.st-ok .st-draw,.st-lchk{stroke:var(--botella)}
.st-bar{stroke:rgba(135,137,130,.4);stroke-width:6}
.st-stand{stroke-width:4}
.st-doc path:first-child{fill:var(--mostaza)}
.st-face circle:first-child{fill:var(--botella)}
.st-eye{fill:var(--paper);stroke:none}
.st-smile{stroke:var(--paper);stroke-width:2.4}
.st-board{fill:var(--botella-hondo)}
.st-btxt{stroke:var(--paper)}
.st-barr{stroke:var(--mostaza);stroke-width:3.5}
.st-table,.st-lapb{stroke-width:5}
.paso-txt{display:flex;flex-direction:column;flex:1;margin-top:clamp(18px,2vw,28px)}
.paso-n{font:800 clamp(44px,4vw,64px)/.9 var(--f-display);letter-spacing:-.03em;color:var(--botella)}
.paso h3{font:800 clamp(26px,2.2vw,34px)/1 var(--f-display);letter-spacing:-.02em;color:var(--ink);margin-top:18px}
.paso p{font:500 clamp(17px,1.35vw,20px)/1.4 var(--f-text);color:var(--ink-2);margin-top:12px;max-width:30em;text-wrap:pretty}
/* side notes sit under the main line, quieter than it */
.paso .paso-pie{font-size:15px;color:var(--ink-2);margin-top:16px}
/* the two formats are a plain list, not buttons: nothing here is tappable */
.chips{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.chip{display:flex;align-items:center;font:600 16px/1.3 var(--f-text);color:var(--ink)}
.chip .nd{margin-right:8px}
.chip-rec{font:600 13px/1.2 var(--f-text);color:var(--ink-2);margin-left:10px;padding-left:10px;border-left:1.5px solid var(--paper-2)}
.s7-line{font:800 clamp(26px,3vw,44px)/1.05 var(--f-display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance;max-width:16em;margin-top:clamp(48px,6vw,80px)}
/* each sentence balances on its own, so a phone never strands "La" at a line end */
.s7-line span{display:block}
/* clients outside Panamá: a quiet line under the big one, never "online" or "remoto" */
.s7-donde{font:500 clamp(16px,1.2vw,18px)/1.4 var(--f-text);color:var(--ink-2);margin-top:14px}
.s7 .pj[data-pj^=persona]{--ar:.9167}
/* without JS each step shows the rig's final pose, baked into the HTML, so the figures match the animated scene */
.pj-snap{left:0;width:100%;transform:none;overflow:visible}
.pj-snap .ln{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.pj-snap .dot{fill:var(--ink)}

/* ================= 8: contacto ================= */
.s8{background:var(--botella);color:var(--paper);padding-bottom:0}
.s8-in{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.s8 .sc-h{color:var(--paper)}
.s8-b{--tx:14%}
.s8 .link{color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn-light:focus-visible{background:#fff}
.btn-light:focus-visible::before{color:var(--ink)}
.btn-light:active{background:var(--paper-2)}
@media (hover:hover) and (pointer:fine){.btn-light:hover{background:#fff}}
.s8-cast{width:100%;margin-top:clamp(12px,3vw,40px)}
.s8 .crew{justify-content:center;gap:clamp(14px,3vw,52px)}
.s8-row{display:contents}
@media (max-width:1024px){.s8 .crew{--bh:clamp(56px,12.4vw,120px);padding-left:calc(var(--bh) * .3)}}
.s8 .floor line{stroke:var(--paper)}
.s8 .pj[data-pj=contratos] .pj-rig,.s8 .pj[data-pj=contratos] .pj-fb{filter:drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper))}

/* ================= scenes: narrower screens ================= */
@media (max-width:999px){
  .s3-grid,.s6-grid{grid-template-columns:minmax(0,1fr)}
  .s4-grid{grid-template-columns:minmax(0,1fr)}
  .s4-owner,.s4-chat,.s4-ans,.s4-board{grid-column:1;grid-row:auto}
  .s4-ans,.s4-board{grid-row:3}
  .s4-grid{grid-template-rows:none}
  .s4-ans{align-self:start}
  .s4-chat{padding-bottom:0}
  .s4 .sc-foot{grid-column:1;grid-row:4}
  .s4-line{width:100%}
  .s4-owner{flex-direction:row;align-items:flex-end;gap:20px}
  .s5-grid{grid-template-columns:minmax(0,1fr)}
  .s5-phone{max-width:420px}
}
@media (max-width:860px){
  .pasos{grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,10vw,72px)}
  .paso-stage{max-width:520px}
  .paso .paso-stage::after{left:0;right:0}
  /* stages 2 and 3 draw nothing in their top quarter; pull them up so the column has no blank band */
  .st-2{margin-top:-10%}
  .st-3{margin-top:-20%}
}
@media (max-width:600px){
  .s5-phone{padding:0;background:none;border:0;border-radius:0}
  .s5-phone::before{display:none}
  .s3-table td{padding-block:12px}
  .s3-table{font-size:15px}
  .s3-table td,.s3-table th{padding-right:8px}
  .s8 .actions,.s7 .actions{width:100%;flex-direction:column;align-items:stretch}
  .s8 .btn,.s7 .btn{display:flex;width:100%;justify-content:center}
  /* phone: the six stand in two rows of three, each on its own floor; the top row (receipt held out, box, sheet) is the widest, ~4.2 bodies */
  .s8-cast{container-type:inline-size}
  .s8 .crew{--bh:clamp(56px,calc((100cqw - 30px) / 3.9),100px);padding-left:0;flex-direction:column;align-items:stretch;gap:26px}
  .s8-row{display:flex;justify-content:center;align-items:flex-end;gap:14px;border-bottom:2px solid var(--paper)}
  .s8-row+.s8-row{gap:26px}
  .s8 .floor{display:none}
  .s8 .pj[data-pj=pagos]{margin-left:calc(var(--bh) * .3)}
}
/* phone: the ticket sits near the right edge, so the bubble hangs from its right side instead of centering on it */
@media (max-width:768px){.tl .tk-held .tl-bub{left:auto;right:-4px;transform:none;max-width:none;white-space:nowrap;font-size:14px;bottom:calc(100% + 8px);--tx:calc(100% - 34px)}}
/* phone: the 1:06 stop makes room above the tomato for its bubble, so it never sits on the green's feet */
@media (max-width:768px){
  .tl .stop:has(.tl-bub){padding-top:62px}
  .tl .stop:has(.tl-bub) .st-pj{margin-right:34px}
  .tl .tk-held .tl-bub{right:auto}
  .tl .st-pj>.tl-bub{position:absolute;right:-4px;bottom:calc(100% + 4px);white-space:nowrap;font-size:14px;max-width:none;--tx:calc(100% - 52px)}
}
/* every link and button reaches at least 44x44 to the thumb; an invisible layer grows only the short sides, so nothing looks different */
a::after,button::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}

/* ================= sin cifras: barras grises en lugar de nombres y montos ================= */
.sk{display:inline-block;vertical-align:middle;width:var(--w,6em);max-width:100%;height:.6em;border-radius:999px;background:rgba(135,137,130,.34)}
.bd-owe .sk{height:.66em}

/* ================= redes: LinkedIn, Instagram, TikTok ================= */
.soc{display:inline-flex;align-items:center;gap:22px}
.soc a{display:inline-flex;padding:10px;margin:-10px;color:inherit;line-height:0;transition:color var(--d-hover) var(--ease-out)}
.soc svg{display:block;width:20px;height:20px}
.soc a:focus-visible::before{left:-3px}
.nav .soc a{color:var(--ink-2)}
.foot .soc a{color:var(--ink)}
.s8 .soc a{color:var(--paper)}
.s8 .soc a:focus-visible{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .nav .soc a:hover{color:var(--ink)}
  .foot .soc a:hover{color:var(--botella)}
  .s8 .soc a:hover{color:#fff}
}
@media (max-width:899px){.nav .soc{display:none}}
@media (max-width:600px){.s8 .actions .soc{align-self:flex-start;margin-top:4px}}
@media (prefers-reduced-motion:reduce){.soc a{transition:none}}