/* Lucode theme styles. Tokens, header, footer, the plate system, the home sections and the content pages. */
@font-face{font-family:'Big Shoulders Display';font-weight:900;font-display:swap;src:url(../fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}
:root{
  --orange:oklch(66% 0.19 40);
  --orange-deep:oklch(42% 0.13 40);
  --ink:oklch(15% 0.012 50);
  --cream:oklch(96% 0.012 85);
  --display:'Big Shoulders Display',sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(80px,10vw,136px);
  --rule:3px;
  --px:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--cream);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased}  /* horizontal overflow is clipped on html; overflow-x:hidden here would make body a scroll container and break the sticky header */
::selection{background:var(--ink);color:var(--orange)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.wrap{width:min(1280px,calc(100% - 48px));margin:0 auto}
.kick{font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.btn:focus-visible{outline-color:var(--orange)} .on-ink .btn:focus-visible{outline-color:var(--cream)}   /* a plate sits on a band of its own text colour, so its ring takes the other ink */
.skip{position:absolute;left:24px;top:-120px;z-index:60;max-width:calc(100% - 48px);white-space:normal;text-align:center}.skip:focus{top:12px}   /* keyboard only: the first Tab lands on it */
.arrow{width:1em;height:1em}
@keyframes blink{50%{opacity:0}}

/* ---------- the sign plate: ink border, hard offset shadow. Press it and it goes down. ---------- */
.plate{border:var(--rule) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--shadow,var(--orange));transition:transform .2s var(--out),box-shadow .2s var(--out)}
a.plate:hover,button.plate:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--px) + 2px) calc(var(--px) + 2px) 0 var(--shadow,var(--orange))}
a.plate:active,button.plate:active{transform:translate(4px,4px);box-shadow:calc(var(--px) - 4px) calc(var(--px) - 4px) 0 var(--shadow,var(--orange))}
.on-orange{--shadow:var(--ink)}
.on-ink{--shadow:var(--cream)}

/* ---------- header on cream ---------- */
header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:var(--rule) solid var(--ink);transition:top .35s var(--out)}
/* compact past the hero: the header slides up 16 px (no layout shift: its box stays 72 px) and the logo shrinks */
header.compact{top:-16px}
header.compact>.wrap{padding-top:16px}
header .wordmark{transition:width .35s var(--out)}
header.compact .wordmark{width:108px}
/* the language link names the target language in its own words, set apart from the section links by a rule of the system weight */
.lang{display:inline-flex;align-items:center;min-height:44px;margin-left:-8px;padding-left:24px;border-left:var(--rule) solid var(--ink);font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.lang span{display:inline-block;text-shadow:0 0 0 transparent;transition:transform .35s var(--out),text-shadow .35s var(--out)}   /* only the word lifts; the rule stays put */
.lang:hover span{transform:translate(-1px,-1px);text-shadow:2px 2px 0 var(--orange)}
header>.wrap{display:flex;align-items:center;gap:32px;height:72px}
header .logo{display:inline-flex;align-items:center;min-height:44px}   /* the wordmark is 22 px tall: the link takes a 44 px row */
.wordmark{width:132px;height:auto;color:var(--ink)} .wordmark .bar{fill:var(--orange)}
.wordmark .bar.live{animation:blink 1s steps(1,end) infinite}   /* the logo bar blinks only when the hero bar is off screen */
header .main{margin-left:auto}
header .main ul{display:flex;gap:32px;list-style:none}
/* hover: the link prints in the second ink (the headline gesture at nav scale) and lifts a pixel */
header .main a{display:inline-flex;align-items:center;min-height:44px;text-shadow:0 0 0 transparent;transition:transform .35s var(--out),text-shadow .35s var(--out)}
header .main a:hover{transform:translate(-1px,-1px);text-shadow:2px 2px 0 var(--orange)}
.logo:hover .wordmark .bar{animation:blink 1s steps(1,end) infinite}    /* the bar wakes up under the pointer */
/* mobile: the toggle is three rules of the system weight; open, two of them cross. Hard cut, no transition. */
.menu-toggle{display:none;position:relative;flex:0 0 44px;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.menu-toggle span{position:absolute;left:10px;width:24px;height:var(--rule);background:currentColor}
.menu-toggle span:nth-child(1){top:13px} .menu-toggle span:nth-child(2){top:21px} .menu-toggle span:nth-child(3){top:29px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* the sign: an ink panel hanging from the header with the plate shadow, three sign lines in orange */
.menu{position:absolute;left:0;right:0;top:100%;background:var(--ink);color:var(--cream);box-shadow:0 var(--px) 0 var(--orange);padding:8px 0 24px}
.menu[hidden]{display:none}
.menu ul{list-style:none}
.menu li+li{border-top:var(--rule) solid var(--cream)}
.menu a{display:block;padding:16px 0;font:900 clamp(44px,12vw,64px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--orange)}
.menu a:hover,.menu a:active{color:var(--cream)}
.menu .l a{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 0;font:700 16px/1 var(--body);letter-spacing:.02em;text-transform:none;color:var(--cream)}
.menu .l .kick{color:var(--orange)}
/* the header plate is smaller and centred together with its shadow, so the shadow never touches the rule below */
header .btn.plate{--px:4px;min-height:44px;padding:0 20px}   /* the 44 px floor every button keeps; 14 px of air above and below in the 72 px bar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;background:var(--ink);color:var(--cream);font:700 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border:var(--rule) solid var(--ink);transition:background .2s var(--out),color .2s var(--out)}
.btn:hover{background:var(--cream);color:var(--ink)}
.btn.o{background:var(--orange);color:var(--ink)} .btn.o:hover{background:var(--ink);color:var(--orange)}
.btn.c{background:var(--cream);color:var(--ink)} .btn.c:hover{background:var(--ink);color:var(--cream)}
.btn.plate:hover{background:var(--ink);color:var(--cream)}
.btn.o.plate:hover{background:var(--orange);color:var(--ink)}

/* ---------- hero: the sign, printed in two inks on paper ---------- */
#hero{position:relative;background:var(--cream);color:var(--ink);padding:clamp(24px,4vh,56px) 0 clamp(40px,6vh,96px);min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
#hero>.wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between}   /* the sign at the top, the sub and the buttons on the bottom edge; the air between them grows with the screen */
/* the photocopy: the reference (kaisermann.me is a CRT: static, sweep, vignette) read as a photocopier.
   Toner speckle that changes 12 times a second, the scanner lamp passing every 7 s, and the lid that does not quite close.
   Both layers move by transform only, so the hero never repaints. Same on touch. */
#hero{box-shadow:inset 0 0 140px oklch(15% 0.012 50 / .12)}
#hero::before{content:"";position:absolute;inset:-140px;z-index:0;pointer-events:none;opacity:.62;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 11 -7.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23111' filter='url(%23t)'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent 0 3px,oklch(15% 0.012 50 / .035) 3px 4px);
  background-size:300px 300px,auto;animation:toner 1s steps(1,end) infinite}
@keyframes toner{0%{transform:translate(0,0)}8.3%{transform:translate(-90px,50px)}16.7%{transform:translate(70px,-110px)}25%{transform:translate(-30px,-60px)}33.3%{transform:translate(110px,80px)}41.7%{transform:translate(-120px,-20px)}50%{transform:translate(40px,120px)}58.3%{transform:translate(-70px,-130px)}66.7%{transform:translate(130px,-40px)}75%{transform:translate(-10px,90px)}83.3%{transform:translate(90px,-90px)}91.7%{transform:translate(-130px,30px)}}
#hero::after{content:"";position:absolute;left:0;right:0;top:0;height:26vh;z-index:0;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,transparent 0%,oklch(15% 0.012 50 / .07) 38%,oklch(100% 0 0 / .95) 50%,oklch(15% 0.012 50 / .07) 62%,transparent 100%);
  animation:lamp 7s linear infinite}
@keyframes lamp{0%{transform:translateY(-30vh)}55%{transform:translateY(130vh)}100%{transform:translateY(130vh)}}
#hero h1{--cw:.4em;--ch:.1em;font:900 clamp(56px,min(15.6vw,(100svh - 330px) / 3.36),238px)/.84 var(--display);  /* 4 lines x .84 = 3.36em; 330 px = header + paddings + foot */text-transform:uppercase;letter-spacing:-.01em;display:flex;flex-direction:column;
  text-shadow:.035em .035em 0 var(--orange);           /* the second ink, just out of register */
  animation:register 1s .6s var(--out) both}          /* it starts further off and settles, like the press finding register */
@keyframes register{from{text-shadow:.13em .1em 0 var(--orange)}to{text-shadow:.035em .035em 0 var(--orange)}}
/* the sign is five pieces in three rows: [Una web] [que trabaja] [para tu negocio]. Which pieces share a line depends on the screen:
   five lines on phones (each piece a line), four by default ("que trabaja" joined), three on wide and short screens ("para tu negocio" joined too).
   A right-hand line wipes in from the right and drifts right on scroll; --from and --dx carry that per piece. */
#hero h1 .l{display:block;--from:inset(0 100% 0 0);--dx:-5vw;clip-path:var(--from);animation:wipe .9s var(--out) both;animation-delay:calc(var(--i)*.12s)}
@keyframes wipe{from{clip-path:var(--from)}to{clip-path:inset(-.2em -.1em)}}
#hero h1 .nw{white-space:nowrap}
#hero h1 .row{display:contents}
/* four lines: "que trabaja" is one line on the right, "para tu" left, "negocio" right */
#hero h1 .row:nth-child(2){display:block;text-align:right;white-space:nowrap}
#hero h1 .row:nth-child(2) .l{display:inline-block}
#hero h1 .row:nth-child(2) .l,#hero h1 .row:nth-child(3) .l:nth-child(2){text-align:right;--from:inset(0 0 0 100%);--dx:5vw}
/* wide and short (a 13" laptop): the viewport height caps the four-line sign at ~150 px and the zigzag reads as thin and far apart.
   Three lines instead: "para tu negocio" joins, the size is bound by the width of the longest line and by the height of three lines.
   When: the four-line size (bound by height) would fill less than ~75 % of the container with its longest line, i.e. h < 330 + .47 x container. Three tiers approximate that curve. */
@media (min-width:900px) and (max-height:730px),(min-width:1000px) and (max-height:777px),(min-width:1100px) and (max-height:824px),(min-width:1180px) and (max-height:860px),(min-width:1260px) and (max-height:890px),(min-width:1330px) and (max-height:930px){
  #hero h1{font-size:clamp(56px,min(12.7vw,187px,(100svh - 330px) / 2.52),238px)}   /* 3 lines x .84 = 2.52em; 12.7vw = container / 6.84em ("PARA TU NEGOCIO" plus the bar); 187 px = the 1280 px container / 6.84 */
  html:lang(en) #hero h1{font-size:clamp(56px,min(11.2vw,165px,(100svh - 330px) / 2.52),238px)}   /* 11.2vw = container / 7.73em ("FOR YOUR BUSINESS" plus the bar); 165 px = 1280 / 7.73 */
  #hero h1 .row{display:block;white-space:nowrap}   /* never a fourth line here: the size is bound by the longest row */
  #hero h1 .l{display:inline-block}
  #hero h1 .row:nth-child(3) .l:nth-child(2){text-align:left;--from:inset(0 100% 0 0);--dx:-5vw}   /* "negocio" now sits on the left-hand line */
}
#hero h1 .bar{display:inline-block;width:var(--cw);height:var(--ch);margin-left:.06em;background:var(--orange);vertical-align:0;text-shadow:none;animation:blink 1s steps(1,end) infinite}
/* the sheets of the sign drift apart as you scroll */
@supports (animation-timeline:scroll()){
  #hero h1 .l{animation:wipe .9s var(--out) both,drift linear both;animation-delay:calc(var(--i)*.12s),0s;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
  @keyframes drift{to{transform:translateX(var(--dx))}}
}
.hero-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px 48px;align-items:end;margin-top:clamp(28px,5vh,80px);animation:up .8s .5s var(--out) both}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-foot .arrow{width:40px;height:auto;align-self:start;margin-top:.15em}   /* a pointer, not a third button */
.sub{max-width:30em;font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.4}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.link{display:inline-flex;align-items:center;min-height:44px;font:700 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--ink);padding-bottom:0;text-shadow:0 0 0 transparent;transition:border-color .25s var(--out),text-shadow .35s var(--out),transform .35s var(--out)}
.link:hover{border-color:var(--orange);transform:translate(-1px,-1px);text-shadow:2px 2px 0 var(--orange)}

/* ---------- bands ---------- */
section{padding:var(--pad) 0}
.inkband{background:var(--ink);color:var(--cream)}
.orangeband{background:var(--orange);color:var(--ink)}
h2{font:900 clamp(56px,9vw,132px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:clamp(40px,5vw,72px)}

/* situations on orange: a conversation. What the client says, in a cream bubble; what I do, in an ink bubble, offset like a reply. */
.sit .chat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:start}
.bub{padding:20px 24px;border:var(--rule) solid var(--ink)}
.bub.them{grid-column:1;justify-self:start;background:var(--cream);color:var(--ink);box-shadow:var(--px) var(--px) 0 var(--orange);font:700 clamp(22px,2.2vw,30px)/1.25 var(--body);letter-spacing:-.005em;max-width:24em}
.bub.me{grid-column:2;justify-self:end;background:var(--ink);color:var(--cream);border-color:var(--cream);box-shadow:var(--px) var(--px) 0 var(--orange);font-size:19px;line-height:1.5;max-width:26em;margin-top:36px}
/* the chat plays when the row enters the screen: the client's bubble pops empty and its message is typed letter by letter with a static bar as caret (the visitor's own words),
   then the reply bubble arrives with three squares typing, then the text, hard cut. Classes set by JS: in, typing, said. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sit .bub{opacity:0}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sit.in .them{animation:pop .5s var(--out) both}
.them .caret{display:inline-block;width:.4em;height:.1em;margin-left:.08em;background:var(--ink);vertical-align:0}
.them .q2{display:none}
.them.sent .q2{display:inline}
.them.sent .caret{display:none}
.sit.typing .me{animation:pop .4s var(--out) both}
.bub.me .dots{display:inline-flex;gap:7px;align-items:center;height:1.5em}
.bub.me .dots i{width:10px;height:10px;background:var(--cream);opacity:.35;animation:dot .9s steps(1,end) infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes dot{0%,33%{opacity:1}34%,100%{opacity:.35}}
.bub.me .txt{display:none}
.sit.said .me .dots{display:none}   /* 1.6 s after the row enters, the squares give way to the text (class set by JS: a hard cut, no layout animation) */
.sit.said .me .txt{display:block}
.sit-ask{margin-top:clamp(64px,8vw,104px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
.sit-ask p{font:900 clamp(44px,6.2vw,92px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:12.5em;text-wrap:balance}  /* same scale as the three service titles, so the ask is not the smallest thing in the strongest band; balanced: no lone word on the last line */
.sit-ask .btn{padding:0 36px}   /* same size as every other primary button; only a wider inset */


/* services: three sign lines, alternating like the hero */
/* the description sits right next to its title (not in a far column) and centred on it; titles alternate sides */
.svc .s{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:clamp(24px,3vw,40px) 0}
.svc .s>*{min-width:0}
.svc .s+.s{border-top:var(--rule) solid rgba(245,242,236,.25);margin-top:24px}
.svc .s h3{margin-top:24px}
.late{opacity:0}.late.in{opacity:1;animation:reveal .9s var(--out) backwards}   /* the service name lands with its row (site.js adds .in when the chat starts), so a fast scroller never sees an unlabeled demo */
.svc h3{font:900 clamp(44px,6.2vw,92px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--orange);max-width:7.6em}
.svc .s:nth-child(3) h3{max-width:5.6em}   /* box hugs "TU NEGOCIO EN", so the description sits 40 px away like the other rows */
/* ---------- the paper machines (Qué hago): one stage per service, pieces in cream and orange on the ink band, shot in stop motion.
   Vocabulary: a piece lands (drops in a little bigger and tilted, settles with its hard shadow, 4 frames), an arrow is drawn (6 frames), a ticket feeds out of a slot (14 frames) and tears,
   a stamp hits (2 frames), a phone shakes (8 frames). Each piece carries its delay in --d, its resting tilt in --r and its shadow colour in --sh. ---------- */
.auto{order:3;grid-column:1/-1;margin-top:clamp(24px,3vw,40px)}
.stage{position:relative;height:400px}
.devs.stage{height:auto;min-height:0;margin-bottom:80px}   /* the window sets the height (16:10 of its width); the phone hangs 80 px below it */
.pc{position:absolute;opacity:0;--sh:var(--orange)}
.auto.go .pc{animation:land .36s steps(4,end) both;animation-delay:var(--d,0s)}
@keyframes land{from{opacity:0;transform:translate(8px,-30px) rotate(calc(var(--r,0deg) - 6deg)) scale(1.08);box-shadow:0 0 0 var(--sh)}to{opacity:1;transform:rotate(var(--r,0deg));box-shadow:var(--px) var(--px) 0 var(--sh)}}
.auto .t{display:inline-block;clip-path:inset(0 100% 0 0)}
.auto.go .t{animation:typein .35s var(--out) both;animation-delay:var(--d,0s)}
@keyframes typein{to{clip-path:inset(0 -.1em 0 0)}}
/* drawn arrows */
.arr{position:absolute;width:9%;height:auto;overflow:visible}
.arr path{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:140;stroke-dashoffset:140}
.auto.go .arr path{animation:draw .45s steps(6,end) both;animation-delay:var(--d,0s)}
.auto.go .arr .head{animation-delay:calc(var(--d,0s) + .3s)}
@keyframes draw{to{stroke-dashoffset:0}}
/* shared pieces */
.auto small{display:block;font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.auto .sticker{background:var(--orange);color:var(--ink);border:var(--rule) solid var(--ink);padding:16px 20px;font:700 16px/1.3 var(--body)}
.auto .sticker small{margin-bottom:8px;opacity:.7}
.auto .bub,.auto .search{background:var(--cream);color:var(--ink);border:var(--rule) solid var(--cream);padding:16px 20px;font:700 17px/1.3 var(--body)}
.auto .bub small{margin-top:10px;opacity:.6}
.auto .search small{margin-bottom:6px;opacity:.6}
.auto .search{font-weight:600}
/* 1. sitios web: a real site Luciano built (Paisajismo Cuántico), captured, in a macOS window and an iPhone drawn as the real devices (no plate, no system shadow: these are objects from the client's world, not from ours).
   Both scroll by themselves, the phone a beat later, so the responsive layout shows. Soft easing throughout. */
.devs .dev{position:absolute}   /* the frames are there from the start, at rest; only their story waits for the reply */
.devs .win.dev{position:relative;left:0;top:0;width:90%;aspect-ratio:16/10;height:auto;background:#fff;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.7),0 12px 24px -12px rgba(0,0,0,.5)}
.devs .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:linear-gradient(#e8e6e3,#dddbd7);border-bottom:1px solid #c9c6c1}
.devs .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.devs .bar i:nth-child(2){background:#febc2e}
.devs .bar i:nth-child(3){background:#28c840}
.devs .bar span{margin-left:14px;flex:1;text-align:center;background:#f5f4f2;border-radius:6px;padding:5px 10px;font:500 11px/1 'Hanken Grotesk',system-ui,sans-serif;color:#5d5b57;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.devs .view{position:relative;flex:1;overflow:hidden;background:#1f2e1c}
.devs .shot{display:block;width:100%;height:auto;will-change:transform}
.m-site .shot.tab{display:none}   /* the tablet capture only renders on the iPad tier */
/* the whole page, on a loop: a pause at the top, a slow read down to the footer, a pause, a quick rewind. Runs only while on screen (class go is toggled by the observer). */
.auto.go .win .shot{animation:site-scroll 16s .8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes site-scroll{0%,6%{transform:translateY(0)}78%,88%{transform:translateY(calc(-100% + var(--vh,358px)))}100%{transform:translateY(0)}}   /* --vh = the view's height, measured by JS: the footer stops at the bottom edge */
/* the iPhone: titanium frame, black bezel, rounded screen, dynamic island, side buttons */
.devs .phone{left:auto;right:0;top:auto;bottom:-80px;width:22%;max-width:250px;z-index:2;aspect-ratio:200/406;height:auto;background:linear-gradient(135deg,#d9d6d1,#9a9691 40%,#c8c5c0 60%,#8f8b86);border-radius:34px;padding:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 12px 24px -12px rgba(0,0,0,.5)}
.devs .phone::before{content:"";position:absolute;inset:4px;background:#0b0b0b;border-radius:30px}
.devs .screen{position:absolute;inset:12px;background:#1f2e1c;border-radius:23px;overflow:hidden}
.devs .island{position:absolute;left:50%;top:9px;width:34%;height:16px;transform:translateX(-50%);background:#000;border-radius:999px;z-index:2}
.m-site .btn-l,.devs .btn-r{position:absolute;width:3px;background:#8f8b86;border-radius:2px}
.devs .btn-l{left:-3px}.devs .mute{top:64px;height:18px}.devs .vol1{top:98px;height:34px}.devs .vol2{top:140px;height:34px}
.devs .btn-r{right:-3px;top:112px;height:52px}
.auto.go .screen .shot{animation:phone-scroll 16s 1.3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes phone-scroll{0%,6%{transform:translateY(0)}78%,88%{transform:translateY(calc(-100% + var(--vh,382px)))}100%{transform:translateY(0)}}   /* --vh = the screen's height, measured by JS */
/* 2. automatizaciones: a tool Luciano built (anonymised), in the client's own look: grey, white, green, a serif for titles, mono for data. Two pages in the window (Nuevo envío, Dashboard) with a hard cut between them like a real app; Gmail on the phone. */
.devs .view.mailer{background:#f1f5f9;color:#0f172a;font:400 12px/1.4 'PT Sans','Hanken Grotesk',system-ui,sans-serif;display:flex;flex-direction:column}
.mailer .mono,.mld .mono{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:11px;color:#475569}
.mailer .lbl,.mld .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:8px}
/* the panel's phone layout, for the phone-only tier: top bar, title, the two cards stacked, and the completion notice dropping in */
.devs .screen.mld{display:none;background:#f1f5f9;color:#0f172a;font:400 12px/1.4 'PT Sans','Hanken Grotesk',system-ui,sans-serif}
.mld-top{display:flex;align-items:center;justify-content:space-between;padding:40px 14px 10px;background:#fff;border-bottom:1px solid #e2e8f0}
.mld-top b{display:flex;align-items:center;gap:7px;font:700 16px/1 Georgia,'Times New Roman',serif}
.mld-top b i{width:7px;height:7px;border-radius:50%;background:#15803d}
.mld-top .burger{width:16px;height:2px;background:#334155;box-shadow:0 -5px 0 #334155,0 5px 0 #334155}
.mld-body{padding:12px 12px 0}
.mld-body .h4{font:700 20px/1.15 Georgia,'Times New Roman',serif;margin:0}
.mld-body .h4+p{margin:3px 0 10px}
.mld .ml-card{padding:12px;margin-bottom:10px}
.mld .lot{font-size:14px}
.mld-notif{position:absolute;left:8px;right:8px;top:46px;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.96);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(calc(-100% - 70px));transition:transform .45s cubic-bezier(.2,.9,.3,1.1);font-family:'Hanken Grotesk',system-ui,sans-serif}
.mld-notif i{width:26px;height:26px;border-radius:7px;background:#15803d}
.mld-notif b{display:block;font-size:11px;color:#111}.mld-notif span{display:block;font-size:11px;line-height:1.3;color:#3d3d3d}
.mld.done .mld-notif{transform:none}
.mailer .lbl em{font-style:normal;background:#dcfce7;color:#15803d;padding:2px 6px;border-radius:4px;font-family:'SF Mono',Menlo,monospace;letter-spacing:0;text-transform:none}
.ml-top{display:flex;align-items:center;gap:18px;padding:10px 20px;background:#fff;border-bottom:1px solid #e2e8f0}
.ml-top b{display:flex;align-items:center;gap:7px;font:700 16px/1 Georgia,'Times New Roman',serif}
.ml-top b i,.cron i,.state i{width:7px;height:7px;border-radius:50%;background:#15803d}
.cron{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;background:#dcfce7;color:#15803d;border-radius:4px;font-family:'SF Mono',Menlo,monospace;font-size:10.5px}
.ml-top .ml-nav{display:flex;gap:16px;margin-left:auto;font-size:12.5px;color:#334155}
.ml-top .ml-nav span{padding:5px 8px;border-radius:5px}
.mailer.p2 .on-dash,.mailer:not(.p2) .on-upload{background:#f1f5f9;font-weight:700;color:#0f172a}
.ml-page{position:absolute;inset:44px 0 0;padding:18px 150px 18px 20px;display:none}   /* the right padding keeps the content clear of the phone */
.mailer:not(.p2) .ml-page.upload,.mailer.p2 .ml-page.dash{display:block}
.ml-page .h4{font:700 22px/1.15 Georgia,'Times New Roman',serif;margin:0}
.ml-page .h4+p{margin:4px 0 14px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}
.ml-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px}
.drop{position:relative;min-height:70px;border:1.5px dashed #cbd5e1;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;color:#334155;margin-bottom:14px}
.drop .file{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#f0fdf4;border-radius:8px;font-family:'SF Mono',Menlo,monospace;font-size:12px;opacity:0;transform:translateY(-14px)}
.drop .file i{width:14px;height:17px;background:#15803d;border-radius:2px}
.drop .file em{font-style:normal;color:#15803d;margin-left:6px}
.mailer.f1 .drop .hint{opacity:.25}
.mailer.f1 .drop .file{opacity:1;transform:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.ml-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:14px}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radio{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:12px;font-weight:700;color:#334155}
.radio i{width:11px;height:11px;border-radius:50%;border:1.5px solid #94a3b8}
.mailer.f2 .radio.pick{border-color:#15803d;background:#f0fdf4;color:#15803d}
.mailer.f2 .radio.pick i{border-color:#15803d;background:radial-gradient(#15803d 0 3px,#fff 3.5px)}
.input{padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;font-family:'SF Mono',Menlo,monospace;font-size:12px;background:#fff}
.note{margin-top:6px}
.btn-go{display:inline-block;padding:9px 16px;background:#15803d;color:#fff;border-radius:6px;font-size:12.5px;font-weight:700;transition:transform .1s,filter .1s}
.mailer.f3 .btn-go{transform:scale(.97);filter:brightness(.9)}
/* dashboard */
.ml-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.lot{display:block;font:700 15px/1.2 Georgia,serif;margin-bottom:10px}
.pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-family:'SF Mono',Menlo,monospace;font-size:11.5px;margin-bottom:6px}
.pill i{width:12px;height:12px;background:#15803d;border-radius:2px}
.pill .env{background:none;border:1.5px solid #334155;border-radius:2px;width:11px;height:9px}
.prog{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#64748b}
.prog .count{font-family:'SF Mono',Menlo,monospace;color:#0f172a}
.track{height:3px;background:#e2e8f0;margin-top:6px;border-radius:2px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:#15803d;transition:width .25s linear}
.stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden}
.stats div{padding:9px 12px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}
.stats div:nth-child(2n){border-right:0}.stats div:nth-child(n+3){border-bottom:0}
.stats b{display:block;font:400 18px/1.1 'SF Mono',Menlo,monospace;color:#15803d}
.stats div:nth-child(3) b,.stats div:nth-child(4) b{color:#0f172a}
.stats span{font-size:10.5px;color:#64748b}
.state{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;border:1px solid #e2e8f0;border-radius:6px;font-weight:700;font-size:12px}
.hist{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e2e8f0;border-radius:10px;font-size:11.5px}
.hist th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;text-align:left;padding:8px 10px;border-bottom:1px solid #e2e8f0}
.hist td{padding:8px 10px;border-bottom:1px solid #f1f5f9;white-space:nowrap}
.hist tr.new td{background:#f0fdf4}
.hist .chip{display:inline-block;padding:2px 7px;border-radius:4px;font-family:'SF Mono',Menlo,monospace;font-size:10px}
.hist .chip.ok,.mailer.done .hist .chip.run{background:#dcfce7;color:#15803d}
.hist .chip.run{background:#fef9c3;color:#854d0e}
.hist .chip::before{content:"• "}
/* Gmail on the phone */
.devs .screen.gm{background:#fff}
.gm{font:400 12px/1.3 'Google Sans','Hanken Grotesk',system-ui,sans-serif;color:#202124}
.gm-inbox,.gm-open{position:absolute;inset:0;padding-top:40px}
.gm-open{display:none;padding:40px 14px 14px;overflow:hidden}
.gm.open .gm-inbox{display:none}.gm.open .gm-open{display:block}
.gm-search{display:flex;align-items:center;gap:10px;margin:0 10px 10px;padding:9px 12px;background:#eef2f7;border-radius:999px;color:#5f6368;font-size:12px}
.gm-search .menu{width:14px;height:2px;background:#5f6368;box-shadow:0 -4px 0 #5f6368,0 4px 0 #5f6368}
.gm-search .ava{width:20px;height:20px;border-radius:50%;background:#e66a34;margin-left:auto}
.gm-lbl{display:block;padding:0 14px 6px;font-size:10.5px;font-weight:700;color:#5f6368}
.gm-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;padding:8px 12px;align-items:start}
.gm-row>div{min-width:0}   /* so the subject truncates instead of pushing the time off the edge */
.gm-row i{width:30px;height:30px;border-radius:50%;background:var(--c,#999);color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.gm-row b{display:block;font-size:12.5px;font-weight:400;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-row span{display:block;font-size:11px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-row em{font-style:normal;font-size:10px;color:#5f6368}
.gm-row.new{display:none}
.gm.has .gm-row.new{display:grid;animation:gm-in .4s cubic-bezier(.2,.8,.2,1) both}
.gm-row.new b,.gm-row.new .subj,.gm-row.new em{font-weight:700;color:#202124}
@keyframes gm-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.gm-head{display:flex;justify-content:space-between;margin-bottom:12px}
.gm-head .back{width:9px;height:9px;border-left:2px solid #5f6368;border-bottom:2px solid #5f6368;transform:rotate(45deg);margin:4px}
.gm-head .dots{width:3px;height:3px;background:#5f6368;border-radius:50%;box-shadow:0 -5px 0 #5f6368,0 5px 0 #5f6368;margin:6px}
.gm-open .h5{font:400 15px/1.3 'Google Sans','Hanken Grotesk',sans-serif;margin:0 0 10px}
.gm-from{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;margin-bottom:12px}
.gm-from i{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
.gm-from b{display:block;font-size:12px}.gm-from span{display:block;font-size:10.5px;color:#5f6368}
.tpl{border:1px solid #e5e7eb;padding:12px;font:400 10.5px/1.45 Arial,Helvetica,sans-serif;color:#222}
.tpl-logo{display:flex;flex-direction:column;align-items:center;padding:6px 0 10px;margin-bottom:10px;border-bottom:2px solid #0e7c7b}
.tpl-logo i{width:22px;height:22px;background:#0e7c7b;clip-path:polygon(50% 0,100% 100%,0 100%);margin-bottom:4px}
.tpl-logo b{font:900 15px/1 Georgia,serif;letter-spacing:.06em}
.tpl-logo span{font:400 9px/1 Georgia,serif;margin-top:3px}
.tpl p{margin:0 0 8px}.tpl ol{margin:0 0 8px;padding-left:0;list-style:none}.tpl li{margin-bottom:3px}
.tpl .sig{margin-top:10px;font-size:10px;color:#444}
/* 3. tu negocio en google: Google as it looks. The window types the search on the home page, cuts to the results with the local pack (map, three businesses, the client's first); the phone shows the listing in Google Maps, and the call button is pressed. */
.devs .view.goog{background:#fff;color:#202124;font:400 12px/1.4 Arial,Helvetica,sans-serif}
.g-logo{display:flex;font:400 44px/1 'Product Sans','Google Sans',Arial,sans-serif;letter-spacing:-.02em}
.g-logo b{font-weight:400}.g-logo b:nth-child(1){color:#4285f4}.g-logo b:nth-child(2){color:#ea4335}.g-logo b:nth-child(3){color:#fbbc05}.g-logo b:nth-child(4){color:#4285f4}.g-logo b:nth-child(5){color:#34a853}.g-logo b:nth-child(6){color:#ea4335}
.g-logo.small{font-size:22px}
.g-home{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-bottom:60px}
.g-box{display:flex;align-items:center;gap:10px;width:min(70%,520px);padding:11px 16px;border:1px solid #dfe1e5;border-radius:999px;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:14px;color:#202124;background:#fff}
.g-box .lens{width:14px;height:14px;border:2px solid #9aa0a6;border-radius:50%;position:relative}
.g-box .lens::after{content:"";position:absolute;right:-5px;bottom:-5px;width:6px;height:2px;background:#9aa0a6;transform:rotate(45deg)}
.g-box .lens.rt{margin-left:auto;border-color:#4285f4}.g-box .lens.rt::after{background:#4285f4}   /* .rt, not .r: .r is the reveal class */
.g-box .caret{width:1px;height:16px;background:#202124;animation:blink 1s steps(1,end) infinite}
.g-results{position:absolute;inset:0;display:none;overflow:hidden}
.goog.p2 .g-home{display:none}.goog.p2 .g-results{display:block}
.g-top{display:flex;align-items:center;gap:26px;padding:14px 22px 10px}
.g-top .g-box{width:min(60%,480px);box-shadow:none;padding:9px 16px}
.g-tabs{display:flex;gap:18px;padding:0 22px 0 150px;border-bottom:1px solid #ebebeb;font-size:12.5px;color:#5f6368}
.g-tabs span{padding:6px 2px 9px}.g-tabs .on{color:#1a0dab;border-bottom:3px solid #1a0dab}
.g-pack{position:relative;margin:16px 0 0 150px;width:560px;border:1px solid #dadce0;border-radius:12px;padding:14px 16px 10px}
.g-pack .h6{font:400 18px/1.2 Arial,sans-serif;margin:0 0 10px}
/* the map: real OpenStreetMap tiles of Belgrano, softened toward Google's palette, three pins on top */
.g-map{height:132px;border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden;background:#f1efe9}
.g-map .tiles{position:absolute;left:-10%;width:120%;top:-62%}   /* two tile rows, wider than the box and shifted up: the clinic's point (81 % down the first row) sits around half of the box and the tiles reach its bottom edge */
.g-map .tiles,.mp-map .tiles{display:grid;grid-template-columns:repeat(4,1fr);position:absolute}
.g-map .tiles img,.mp-map .tiles img{filter:saturate(.45) brightness(1.06) contrast(.92)}
.g-map .tiles img,.mp-map .tiles img{width:100%;height:auto;display:block}
.g-map .attr,.mp-map .attr{position:absolute;right:4px;bottom:3px;z-index:1;font:400 9px/1.2 Arial,sans-serif;text-transform:none;letter-spacing:0;color:#3c4043;background:rgba(255,255,255,.8);padding:2px 4px;border-radius:2px}   /* the tiles are OpenStreetMap: its licence asks for a legible credit on every map */
.mp-map .attr{right:auto;left:10px;bottom:auto;top:54px}
.g-map .pin,.mp-map .pin{position:absolute;width:16px;height:16px;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:inset 0 0 0 3px #fff,0 0 0 1.5px #c5221f}
.g-map .pin{left:65.6%;top:40.7%;width:19px;height:19px;margin:-19px 0 0 -2px}.g-map .pin.two{left:30%;top:26%}.g-map .pin.three{left:88%;top:18%}   /* the clinic pin sits on Av. Cabildo 1850 (geocoded); the tip of the marker is the point */
.g-chips{display:flex;gap:8px;margin-bottom:6px}
.g-chips span{padding:6px 11px;border:1px solid #dadce0;border-radius:999px;font-size:11.5px;color:#3c4043;background:#fff}
.g-place{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:12px 6px;border-top:1px solid #ebebeb;border-radius:8px}
.g-place b{display:block;font-size:15px;font-weight:400;color:#202124;margin-bottom:2px}
.g-place span,.mp-card .meta{display:block;font-size:11.5px;color:#4d5156;line-height:1.5}
.g-place .quote{display:flex;align-items:flex-start;gap:6px;margin-top:3px;color:#202124}
.g-place .ava{width:15px;height:15px;flex:none;margin-top:1px}
.g-place .open,.mp-card .open{color:#188038;font-style:normal}
.stars{display:inline-block;width:52px;height:10px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fbbc04' d='M5 0l1.5 3.4 3.5.3-2.7 2.3.8 3.5L5 7.7 1.9 9.5l.8-3.5L0 3.7l3.5-.3z'/%3E%3C/svg%3E") 0 0/10px 10px repeat-x}
.g-btns{display:flex;gap:18px;flex:none;padding-right:6px}
.g-btns span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#1a0dab}
.g-btns i,.kp-actions i,.mp-actions i{display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #dadce0;background:#fff}
.g-btns i{width:38px;height:38px}.g-btns svg,.kp-actions svg,.mp-actions svg{width:18px;height:18px}
.g-thumb{display:none}
.g-place.mine{transition:background .3s}
.goog.hi .g-place.mine{background:#e8f0fe}
.g-pack .more{display:block;padding:12px 6px 4px;border-top:1px solid #ebebeb;color:#1a0dab;font-size:12.5px}
.g-organic{margin:18px 0 0 150px;width:560px}
.g-organic div{margin-bottom:16px}
.g-organic small{display:block;font-size:11px;color:#202124;margin-bottom:2px}.g-organic b{display:block;font:400 17px/1.3 Arial,sans-serif;color:#1a0dab}.g-organic span{display:block;font-size:12.5px;color:#4d5156;line-height:1.5}
/* when the panel does not fit beside the results (up to 1180 px), it opens over them as the business profile, after the listing is tapped */
@media (max-width:1180px){
  .m-google .g-kp{left:auto;right:150px;top:64px;bottom:0;width:min(60%,330px);border-radius:12px 12px 0 0;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1);background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.28);z-index:3;pointer-events:none}
  .m-google .goog.p3 .g-kp{opacity:1;transform:none}
  .m-google .goog.p3 .g-pack,.m-google .goog.p3 .g-organic{filter:brightness(.94)}
}
/* the knowledge panel on the right, as Google shows the top business */
.g-kp{position:absolute;left:736px;top:118px;width:270px;border:1px solid #dadce0;border-radius:12px;padding:0 0 10px;overflow:hidden;font-size:12px}
.kp-photos{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:100%;gap:3px;height:120px;margin-bottom:12px;overflow:hidden}
.kp-photos img{width:100%;height:100%;object-fit:cover;display:block}
.g-kp .h6{font:400 18px/1.2 Arial,sans-serif;margin:0 12px 4px}
.g-kp .rate,.g-kp .cat{display:block;margin:0 12px;font-size:12px;color:#4d5156;line-height:1.5}
.kp-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:12px 12px;padding-bottom:12px;border-bottom:1px solid #ebebeb}
.kp-actions span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#1a0dab}
.kp-actions i{width:32px;height:32px}.kp-actions svg{width:16px;height:16px}
.kp-row{display:grid;grid-template-columns:62px 1fr;gap:6px;margin:0 12px;padding:5px 0;font-size:12px;line-height:1.45}
.kp-row b{font-weight:700;color:#202124}.kp-row span{color:#4d5156}.kp-row .open{color:#188038}
/* Google Maps on the phone */
.devs .screen.maps{background:#e8eef3}
.mp-map{position:absolute;inset:0;overflow:hidden}
.mp-map .tiles{position:absolute;left:50%;top:40%;width:400%;transform:translate(-54.1%,-60.5%);grid-template-columns:repeat(3,1fr)}   /* the grid is placed so the clinic's point lands at 50 % / 40 % of the screen */   /* 3x3 tiles scaled past the screen on every side, centred, so the map always fills it */
.mp-map .pin{left:54.1%;top:60.5%;width:18px;height:18px;margin:-18px 0 0 -2px}.mp-map .pin.two{left:42%;top:50%;width:12px;height:12px;background:#9aa0a6;box-shadow:inset 0 0 0 2px #fff}
.mp-search{position:absolute;left:10px;right:10px;top:46px;display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.25);font:400 11.5px/1 'Google Sans','Hanken Grotesk',sans-serif;color:#202124}
.mp-search i{width:12px;height:12px;border:2px solid #5f6368;border-radius:50%;flex:none}
.mp-search .mq:empty::before{content:attr(data-ph);color:#70757a}
.mp-search .mcaret{width:1.5px;height:13px;margin-left:-5px;background:#1a73e8}   /* a still bar, as in Situaciones: the window's caret is the one that blinks */
.maps.p2 .mp-search .mcaret{display:none}
/* the clinic's pin drops in with the results; the grey one is always there */
.mp-map .pin:not(.two){transform:rotate(-45deg) scale(0);transform-origin:100% 100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.maps.p2 .mp-map .pin:not(.two){transform:rotate(-45deg) scale(1)}
/* the result cards Maps slides along the bottom before one is opened */
.mp-strip{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;padding:0 10px;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1);font:400 10px/1.35 'Google Sans','Hanken Grotesk',system-ui,sans-serif;color:#3c4043}
.maps.p2 .mp-strip{transform:none}
.mp-strip .mc{flex:none;width:82%;padding:10px 12px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.mp-strip .mc b{display:block;font-size:12.5px;font-weight:500;color:#202124;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-strip .mc span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-strip .mc em{font-style:normal;color:#188038}
.mp-card{position:absolute;left:0;right:0;bottom:0;max-height:78%;background:#fff;border-radius:18px 18px 0 0;padding:8px 14px 14px;font:400 11px/1.35 'Google Sans','Hanken Grotesk',system-ui,sans-serif;color:#202124;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.maps.has .mp-card{transform:none}
.mp-card .grip{display:block;width:28px;height:4px;border-radius:2px;background:#dadce0;margin:0 auto 10px}
.mp-photos{display:grid;grid-template-columns:1.6fr 1fr;gap:4px;height:84px;border-radius:8px;overflow:hidden;margin-bottom:10px}
.mp-photos img{width:100%;height:100%;object-fit:cover;display:block}
.mp-card .h6{font:400 17px/1.2 'Google Sans','Hanken Grotesk',sans-serif;margin:0 0 3px}
.mp-card .rate{display:block;font-size:11px;color:#4d5156;margin-bottom:2px}
.mp-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}
.mp-actions span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9.5px;color:#1a73e8}
.mp-actions i{width:30px;height:30px}.mp-actions svg{width:15px;height:15px}
.mp-actions .call i{background:#1a73e8;border-color:#1a73e8;transition:transform .12s}.mp-actions .call svg path{fill:#fff}
.maps.press .mp-actions .call i{transform:scale(.85)}
.mp-row{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #f1f3f4;font-size:11px;color:#3c4043}
.mp-row .ic{width:12px;height:12px;border:2px solid #5f6368;border-radius:50%;flex:none}
.mp-row .ic.loc{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.mp-row .ic.tel{border-radius:3px}
/* the iOS call sheet */
.mp-call{position:absolute;inset:0;background:#1c1c1e;color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:70px;zoom:calc(var(--pw,250) / 250);font:400 12px/1.3 -apple-system,'Hanken Grotesk',sans-serif;opacity:0;pointer-events:none;transition:opacity .3s}
.maps.call .mp-call{opacity:1}
.mp-call .who{font-size:22px;font-weight:300}
.mp-call .st{font-size:12px;opacity:.7;margin-top:6px}
.mp-call .keys{display:grid;grid-template-columns:repeat(3,56px);gap:18px 14px;margin-top:40px}
.mp-call .keys span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9.5px;color:#fff;opacity:.9}
.mp-call .keys i{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14)}
.mp-call .keys svg{width:26px;height:26px}
.mp-call .hang{position:absolute;bottom:34px;left:50%;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:#ff3b30;display:flex;align-items:center;justify-content:center}
.mp-call .hang svg{width:34px;height:34px}
/* about on orange: who you deal with, and three things you can count on */
.about h2{margin-bottom:0}
.about .rule{height:var(--rule);background:var(--ink);margin:16px 0 clamp(32px,4vw,48px)}
.about .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,6vw,80px);align-items:start}
.about .place{margin-top:22px;display:flex;align-items:center;gap:10px}
.pin{width:1.1em;height:1.1em;flex:none}   /* the marker goes where the place is said: Sobre mí and the footer, nowhere else */
.about .bio p{font-size:20px;max-width:30em}
.about .bio p+p{margin-top:16px}
.vows{list-style:none;margin-top:clamp(28px,3vw,40px)}
.vow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px 32px;padding:22px 0;border-top:var(--rule) solid var(--ink)}
.vow:last-child{border-bottom:var(--rule) solid var(--ink)}
.vow h3{font:900 clamp(28px,2.8vw,38px)/.9 var(--display);text-transform:uppercase}
.vow p{font-size:16px;max-width:28em}
.about .links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
.about .links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:700 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-bottom:3px solid var(--ink)}
.about .links a:hover{border-color:var(--cream)}
/* default: the colour cutout inside a cream card. The card is the plate; the figure sits on its bottom edge, contained. */
.about .port.card{background:var(--cream);aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.about .port.card img{width:118%;max-width:none;height:auto;object-fit:contain;filter:none;mix-blend-mode:normal;margin-bottom:-2px}
/* contact on ink: HABLEMOS in two inks, settling as it enters */
.contact h2{color:var(--orange);font-size:clamp(56px,10.5vw,180px);margin-bottom:44px;text-shadow:.03em .03em 0 var(--orange-deep)}
.contact h2 .nw{white-space:nowrap}
/* the sign closes with the same bar as the hero headline: the third and last handoff of the single blinking bar */
.contact h2 .bar{display:inline-block;width:.4em;height:.1em;margin-left:.06em;background:var(--orange);vertical-align:0;text-shadow:none}
.contact h2 .bar.live{animation:blink 1s steps(1,end) infinite}
.contact h2.in{animation:reveal .9s var(--out) backwards,register-2 1s .3s var(--out) both}
@keyframes register-2{from{text-shadow:.11em .09em 0 var(--orange-deep)}to{text-shadow:.03em .03em 0 var(--orange-deep)}}
.contact{padding-top:clamp(64px,6vw,88px)}   /* tighter than the other bands so the whole form, button included, fits under the title on a 13" screen */
.contact .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact .sub{font-weight:400;font-size:20px;opacity:.9}
/* the two direct channels, as rows with a rule: equals of the form, and first on a phone */
.ways{list-style:none;margin-top:clamp(28px,3vw,40px)}
.way{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:8px 24px;align-items:baseline;padding:22px 0;border-top:var(--rule) solid var(--cream)}
.way:last-child{border-bottom:var(--rule) solid var(--cream)}
.way h3{font:900 clamp(28px,2.8vw,38px)/.9 var(--display);text-transform:uppercase;color:var(--orange)}
.way a{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:20px;font-weight:600;border-bottom:3px solid var(--orange);text-shadow:0 0 0 transparent;transition:transform .35s var(--out),text-shadow .35s var(--out),border-color .25s var(--out)}
.way a:hover{transform:translate(-1px,-1px);text-shadow:2px 2px 0 var(--orange);border-color:var(--cream)}
.way a .arrow{width:.9em;height:.9em}
.form{display:grid;grid-template-columns:1fr;gap:28px}   /* each label reads as tied to its field and apart from the previous one */
.field{display:flex;flex-direction:column;gap:10px}
.field.full,.actions{grid-column:1/-1}
.field label{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.field .help{font-size:15px;line-height:1.4;opacity:.7;margin:-2px 0 2px}   /* 8 px under the label, 12 px above the field */
.field label .opt{opacity:.65;letter-spacing:.06em}   /* one line of help under the main field: the visitor explains it in their own words */
.field input,.field textarea{font:inherit;padding:13px 16px;min-height:54px;border:var(--rule) solid var(--cream);background:transparent;color:var(--cream);border-radius:0;width:100%}
.field textarea{min-height:120px;resize:none}   /* the browser grip is not on the system */
.field ::placeholder{color:var(--cream);opacity:.45}
.field input:focus-visible,.field textarea:focus-visible{outline-color:var(--orange);border-color:var(--orange)}
.field.bad input,.field.bad textarea{border-color:var(--orange)}
.field .err{font-size:15px;line-height:1.4;font-weight:600;color:var(--orange)}.field .err:empty{display:none}   /* the words carry the meaning; the orange border only points at the field */
.form.busy .submit{opacity:.75;cursor:wait}
.actions .consent{margin-top:16px;font-size:14px;line-height:1.5;opacity:.8}.actions .consent a{color:inherit;border-bottom:2px solid var(--orange)}.actions .consent a:hover{color:var(--orange)}   /* the one line the policy promises: handing over a phone number is the high-stakes moment */
.actions{margin-top:4px}
.btn.submit{cursor:pointer;min-height:56px;padding:0 32px}
/* sent: the fields dim and the confirmation comes down on the form as a stamp, the closing sign at plate scale: rotated, cream plate, orange shadow, HABLEMOS inks. Once. */
.form{position:relative}
.form.sent .field,.form.sent .actions{opacity:.25;pointer-events:none;transition:opacity .4s var(--out)}
.stamp{display:none;outline:none}
.form.sent .stamp{display:block;position:absolute;left:50%;top:50%;width:min(100%,440px);transform:translate(-50%,-50%) rotate(-3deg);background:var(--cream);color:var(--ink);border:var(--rule) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--orange);padding:28px 32px 30px;animation:stamp .45s var(--out) both}
.stamp h3{font:900 clamp(56px,6vw,88px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--orange);text-shadow:.03em .03em 0 var(--orange-deep)}
.stamp p{margin-top:14px;font-size:18px;font-weight:600;max-width:22em}
.stamp .again{margin-top:20px;min-height:44px;padding:0;border:0;border-bottom:2px solid var(--ink);background:none;color:inherit;font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@keyframes stamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-3deg) scale(1.7)}to{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}

/* footer */
/* footer: small wordmark with a static bar (the header bar has the relay here), one row of links */
footer{padding:40px 0}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
footer .wordmark{width:120px} footer .wordmark .bar{fill:var(--orange)}
footer .meta{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;margin-left:auto}
footer .meta a{display:inline-block;min-height:44px;line-height:44px;border-bottom:2px solid var(--ink);text-shadow:0 0 0 transparent;transition:transform .35s var(--out),text-shadow .35s var(--out)}
footer .meta a:hover{transform:translate(-1px,-1px);text-shadow:2px 2px 0 var(--orange)}
footer .meta>span{line-height:44px}
footer .place{display:inline-flex;align-items:center;gap:8px}
footer .pin{width:14px;height:14px}
footer .langs{margin-left:20px}   /* the language switch does another job than the contact links: it sits apart from them */
footer .langs span{opacity:.6}
footer .langs a{position:relative}footer .langs a::before{content:"";position:absolute;inset:0 -14px}   /* "EN" is 19 px and "ES" 17: the hit box reaches 44 without widening the underline */
footer .up{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
footer .up .arrow{transform:rotate(180deg);width:20px}

/* headline wipe on scroll: only the big lines move */
.r{opacity:0}
.r.in{opacity:1;animation:reveal .9s var(--out) backwards}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-.2em -.1em)}}

@media (max-width:1000px){
  .hero-foot{grid-template-columns:auto minmax(0,1fr)}   /* arrow and sub on one row, the buttons below: the foot is taller, so the sign reserves 400 px */
  .ctas{grid-column:2}
  #hero h1{font-size:clamp(56px,min(15.6vw,(100svh - 400px) / 3.36),238px)}
}
@media (min-width:900px) and (max-width:1000px) and (max-height:730px){   /* three lines with the two-row foot: same reserve of 400 px */
  #hero h1{font-size:clamp(56px,min(12.7vw,187px,(100svh - 400px) / 2.52),238px)}
  html:lang(en) #hero h1{font-size:clamp(56px,min(11.2vw,165px,(100svh - 400px) / 2.52),238px)}
}
@media (max-width:900px){header .main,header .lang{display:none}.menu-toggle{display:block}header .btn.plate{margin-left:auto;padding:0 14px;font-size:12px}}
@media (min-width:901px){.menu{display:none}}
/* phones, and tall tablets in portrait: five lines, each piece its own line, zigzag 1 left 2 right 3 left 4 right 5 left.
   The width binds the size: longest piece "NEGOCIO" plus the bar = 3.55em (EN "BUSINESS" plus the bar = 3.94em). */
@media (max-width:480px) and (min-height:800px),(min-width:481px) and (max-width:820px) and (min-height:900px){   /* short phones (iPhone SE: 375x667) keep four lines: five would be smaller and push the buttons below the fold */
  #hero h1 .row:nth-child(2){display:contents}
  #hero h1 .row:nth-child(2) .l{display:block}
  #hero h1 .row:nth-child(2) .l:nth-child(2),#hero h1 .row:nth-child(3) .l:nth-child(2){text-align:left;--from:inset(0 100% 0 0);--dx:-5vw}
  #hero h1 .row:nth-child(3) .l:nth-child(1){text-align:right;--from:inset(0 0 0 100%);--dx:5vw}
}
@media (min-width:481px) and (max-width:820px) and (min-height:900px){
  #hero h1{font-size:clamp(56px,min((100vw - 48px) / 3.55,(100svh - 460px) / 4.2),238px);line-height:.9}   /* 5 lines at .9 = 4.5em, the formula keeps the old 4.2 divisor because the foot had 48 px to spare, so the sign keeps its size (at .84 the lines touched); 460 px = header, paddings and the two-row foot */
  html:lang(en) #hero h1{font-size:clamp(56px,min((100vw - 48px) / 3.94,(100svh - 490px) / 4.2),238px)}
}
@media (max-width:480px) and (min-height:800px){
  #hero h1{font-size:clamp(56px,min((100vw - 48px) / 3.55,(100svh - 520px) / 4.2),238px);line-height:.9}   /* 520 px = header, paddings and the stacked foot */
  html:lang(en) #hero h1{font-size:clamp(56px,min((100vw - 48px) / 3.94,(100svh - 550px) / 4.2),238px)}   /* the English sub runs a line longer */
}
@media (max-width:480px){
  header .wrap{gap:12px}
  .wordmark,header.compact .wordmark{width:96px}
}
@media (max-width:360px){
  .wordmark,header.compact .wordmark{width:80px}
  header .btn.plate{padding:0 12px}
}
/* ---------- the device demos stack below 1000 px (phones and tablets): the window at full width, the iPhone overlapping its bottom-right corner, the demo content trimmed to what tells the story ---------- */
@media (min-width:1001px) and (max-width:1180px){
  .devs .phone{width:20%}
  .m-google .g-pack,.m-google .g-organic{margin-left:100px}.m-google .g-tabs{padding-left:100px}
  .m-auto .ml-page{padding-right:120px}
}
/* ---------- the device the visitor is likely holding: a macOS window from 1001 px, an iPad in landscape from 601 to 1000, the iPhone alone up to 600. The iPhone keeps its real size on the iPad tier instead of shrinking with the window. ---------- */
@media (max-width:1000px){
  .m-site.stage{padding-top:0;height:auto}
  .devs.stage{display:block;padding-top:0;margin-bottom:48px}
  .devs .dev{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;min-width:0}
  /* the window becomes an iPad: dark aluminium frame, even bezel, rounded screen, no title bar */
  .devs .win{width:92%!important;min-width:0;max-width:100%;height:auto!important;aspect-ratio:4/3;display:flex;border-radius:22px;padding:14px;background:linear-gradient(135deg,#d4d2cd,#9d9a95 45%,#c4c1bc 60%,#8f8b86);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 12px 24px -12px rgba(0,0,0,.5)}
  .devs .win::before{content:"";position:absolute;inset:3px;background:#0b0b0b;border-radius:19px}
  .devs .win::after{content:"";position:absolute;left:50%;top:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1f2430;box-shadow:0 0 0 1px #2c3140;z-index:1}   /* the camera on the long edge */
  .devs .bar{display:none}
  .devs .view{position:relative;border-radius:10px;z-index:1}
  .m-site .shot.desk{display:none}.m-site .shot.tab{display:block}
  .devs .phone{display:block;width:200px!important;max-width:none;margin:-270px 0 0 auto;z-index:2}   /* the phone covers more of the iPad corner and hangs ~140 px below it instead of 260: no empty ink at its left, less under it */
  .devs .phone::before{inset:4px}
  .m-auto .ml-top .ml-nav,.m-auto .cron{display:none}
  .m-auto .ml-page{padding:14px 150px 14px 16px}.m-auto .ml-page .h4{font-size:18px}.m-auto .ml-page .h4+p{display:none}
  .m-auto .ml-card{padding:12px}
  .m-auto .hist,.m-auto .dash>.lbl{display:none}
  .m-google .g-tabs{padding-left:20px}.m-google .g-pack,.m-google .g-organic{margin-left:20px;width:auto;margin-right:170px}.m-google .g-chips{display:none}.m-google .g-map{height:110px}.m-google .g-map .tiles{top:-50%}
  .m-google .g-organic{display:none}.m-google .g-top{padding:12px 20px 8px}.m-google .g-logo.small{display:none}.m-google .g-top .g-box{width:100%}
}
/* the iPad screen scrolls the tablet capture; the sites's tablet layout is 1009 px wide, so the picture is simply full width */
@media (max-width:1000px){
  .auto.go .m-site .win .shot.desk{animation:none}
  .auto.go .m-site .win .shot.tab{animation:site-scroll 16s .8s cubic-bezier(.4,0,.2,1) infinite}
}
@media (max-width:600px){
  /* phones: the iPhone alone, large and centred; what it shows must carry the story on its own */
  .devs .win{display:none!important}
  .devs .phone{width:min(72%,260px)!important;margin:0 auto}
  .m-auto .screen.gm{display:none}.m-auto .screen.mld{display:block}
  .devs.stage{margin-bottom:0;padding-top:8px}
}@media (max-width:760px){
  .hero-foot{grid-template-columns:1fr}
  .ctas{grid-column:1}
  .hero-foot .arrow{width:32px}
  .sit .chat{grid-template-columns:1fr;gap:16px}
  .bub.them,.bub.me{grid-column:1;max-width:none}
  .bub.me{margin:0 0 0 32px}
  .bub.them{margin-right:32px}
  .svc h3{max-width:none}
  /* phones: the machines stack; pieces keep their drop and tilt but sit in flow */
  .stage{height:auto;display:grid;gap:18px;padding-top:36px}
  .pc{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:0!important}
  .arr{display:none}
  .about .grid,.contact .grid{grid-template-columns:1fr}
  .way{grid-template-columns:1fr}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  footer .meta{margin-left:0}
  footer .langs{margin-left:0}
  .about .port{max-width:360px}
  .vow{grid-template-columns:1fr}

}
@media (max-width:480px){.btn{width:100%} header .btn{width:auto;flex:none}}
@media (prefers-reduced-motion:reduce){
  #hero::before{animation:none}#hero::after{display:none}   /* stopped, the lamp would sit across the first line */
  header,header .wordmark{transition:none}
  #hero h1,#hero h1 .l,.hero-foot{animation:none;clip-path:none;transform:none}
  .r{opacity:1}.r.in,.contact h2.in{animation:none}
  .auto .pc{opacity:1;animation:none;transform:rotate(var(--r,0deg));box-shadow:var(--px) var(--px) 0 var(--sh)}
  .auto .t{clip-path:none;animation:none}.arr path{stroke-dashoffset:0;animation:none}
  .devs .shot,.auto.go .devs .shot,.auto.go .m-site .win .shot.tab{animation:none}.g-box .caret{animation:none}
  .late{opacity:1}.late.in{animation:none}
  .sit .bub,.sit.in .them,.sit.typing .me{opacity:1;animation:none}.bub.me .dots{display:none}.bub.me .txt{display:block}
  .form.sent .stamp{animation:none}
  .sit,.sit .arrow,.plate{transition:none}
  /* the bar keeps blinking: it is the logo, not motion for its own sake */
}

/* ---------- the sign is as wide as the wall (chosen by Luciano, 05/10/2026; letters kept whole, 14/10/2026). From 1001 px the three lines ignore the container and take the viewport:
   first line flush left, second flush right, third centred. The longest line is ~97 % of the viewport, so no letter is cut by the edges (a 2 % bleed read as a mistake, not as a poster). ---------- */
@media (min-width:1001px){
  #hero h1{--w:1vw;width:calc(100 * var(--w));margin-left:calc(50% - 50 * var(--w));padding:0 calc(1.5 * var(--w));font-size:clamp(56px,min(14.2 * var(--w),(100svh - 330px) / 2.52),400px)}   /* 1.5 % of air per side, so the flush lines do not touch the edge either */   /* 14.2vw = 0.97 x viewport / 6.84em ("PARA TU NEGOCIO" plus the bar): ~1.5 % of air per side; 3 lines x .84 = 2.52em */
  html:lang(en) #hero h1{font-size:clamp(56px,min(12.6 * var(--w),(100svh - 330px) / 2.52),400px)}   /* 12.6vw = 0.97 x viewport / 7.73em ("FOR YOUR BUSINESS" plus the bar) */
  @supports (width:1cqw){#hero{container-type:inline-size} #hero h1{--w:1cqw}}   /* container units leave the scrollbar out: with a classic scrollbar 100vw is wider than the page and the first letters were cut */
  #hero h1 .row{display:flex;gap:.21em;white-space:nowrap}
  #hero h1 .row:nth-child(1){justify-content:flex-start}
  #hero h1 .row:nth-child(2){justify-content:flex-end}
  #hero h1 .row:nth-child(3){justify-content:center}
  #hero h1 .row:nth-child(n) .l:nth-child(n){display:inline-block}
  #hero h1 .row:nth-child(3) .l:nth-child(2){text-align:left;--from:inset(0 100% 0 0);--dx:-5vw}
}
/* short screens (13" laptops): the sign takes the height it needs and the foot tightens, so it stays wall-wide there too. 230 px = header 72, paddings 16 and 32, foot 75, and 35 of air. */
@media (min-width:1001px) and (max-height:900px){
  #hero{padding:16px 0 32px}
  .hero-foot{margin-top:16px}
  #hero h1{font-size:clamp(56px,min(14.2 * var(--w),(100svh - 230px) / 2.52),400px)}
  html:lang(en) #hero h1{font-size:clamp(56px,min(12.6 * var(--w),(100svh - 230px) / 2.52),400px)}
}

/* ---------- content pages (privacy, posts, search, 404): a cream head with the title set like a sign line, then one reading column ---------- */
.page-head{padding:clamp(56px,8vw,112px) 0 clamp(24px,3vw,40px)}
.page-head .kick{color:var(--orange);margin-bottom:18px}
.page-head h1{font:900 clamp(48px,8vw,120px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:10em;text-wrap:balance;text-shadow:.035em .035em 0 var(--orange)}   /* the second ink of the hero sign, already in register */
.page-head h1 em{font-style:normal;color:var(--orange)}
.page-head .lede,.page-body .lede{margin-top:24px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:34em}
.page-head .meta{margin-top:18px;font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.page-body{padding:0 0 clamp(72px,10vw,136px)}
.entry{max-width:68ch;font-size:18px;line-height:1.6}
.entry>*+*{margin-top:1em}
.entry h2{font:900 clamp(32px,4vw,52px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin-top:1.8em}
.entry h3{font:700 22px/1.25 var(--body);margin-top:1.6em}
.entry ul,.entry ol{padding-left:1.2em}.entry li+li{margin-top:.4em}
.entry a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}.entry a:hover{color:var(--orange)}
.entry img{max-width:100%;height:auto;display:block}
.entry blockquote{margin:1.6em 0;padding:24px 28px;background:var(--ink);color:var(--cream);box-shadow:8px 8px 0 var(--orange)}
.entry pre{overflow:auto;padding:20px;border:var(--rule) solid var(--ink);font-size:15px}
.entry figure{margin:1.6em 0}.entry figcaption{font-size:14px;opacity:.7;margin-top:8px}
.page-body .actions{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:12px}
/* posts and search results: a ruled list, no cards */
.posts{max-width:68ch}
.posts .post{padding:32px 0;border-top:var(--rule) solid var(--ink)}
.posts .post:last-child{border-bottom:var(--rule) solid var(--ink)}
.posts .post h2{font:900 clamp(28px,3.4vw,44px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.posts .post h2 a{color:inherit;text-decoration:none}.posts .post h2 a:hover{color:var(--orange)}
.posts .post p{margin-top:12px;font-size:17px;line-height:1.55}
.posts .post .meta{margin-top:12px;font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.pager{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:40px;font:700 13px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase}
.pager a{color:inherit;text-decoration:none;padding:12px 0;border-bottom:3px solid var(--ink)}.pager a:hover{color:var(--orange)}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:16px 32px}.pager .page-numbers{padding:12px 0}
.search-form{display:flex;flex-wrap:wrap;gap:12px;max-width:34em;margin-top:28px}
.search-form input{flex:1;min-width:200px;min-height:52px;padding:0 16px;border:var(--rule) solid var(--ink);background:transparent;font:inherit;color:inherit}
/* the admin bar sits above the sticky header for logged-in people */
.admin-bar header{top:32px}.admin-bar header.compact{top:16px}@media (max-width:782px){.admin-bar header{top:46px}.admin-bar header.compact{top:30px}}   /* the compact header still slides up its 16 px under the bar */