/* renombre.app — the one stylesheet every page shares (round 9, 2026-10-21:
   the home was split into pages; this was index.html's inline <style>). */
/* Renombre 2026: paper, ink, one hot orange, one deep green. Bricolage
   Grotesque carries the voice; Instrument Sans does the reading. The one
   loud thing is the hero stage; everything else stays quiet. */
@font-face { font-family:"Bricolage Grotesque"; src:url(/fonts/bricolage-latin.woff2) format("woff2"); font-weight:200 800; font-stretch:75% 100%; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Instrument Sans"; src:url(/fonts/instrument-latin.woff2) format("woff2"); font-weight:400 700; font-stretch:75% 100%; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Metric-matched stand-ins (tuned on the client sites, 2026-10) so the font swap does not move the page. */
@font-face { font-family:"Bricolage Fallback"; src:local("Arial"); font-weight:100 600; size-adjust:88%; ascent-override:108.6%; descent-override:31.5%; line-gap-override:0%; }
@font-face { font-family:"Bricolage Fallback"; src:local("Arial Bold"), local("Arial-BoldMT"); font-weight:700 900; size-adjust:99%; ascent-override:94%; descent-override:27%; line-gap-override:0%; }
@font-face { font-family:"Instrument Fallback"; src:local("Arial"); font-weight:100 500; size-adjust:100.6%; ascent-override:96.2%; descent-override:24.8%; line-gap-override:0%; }
@font-face { font-family:"Instrument Fallback"; src:local("Arial Bold"), local("Arial-BoldMT"); font-weight:600 900; size-adjust:98.2%; ascent-override:98.7%; descent-override:25.4%; line-gap-override:0%; }

:root {
  --paper:#f0ede6; --ink:#15130f; --ink2:#4a463e; --ink3:#6b665c; --card:#fff;
  --accent:#e8572a;      /* surfaces, dots, the big headline word */
  --accent-deep:#cc461b; /* buttons: white text passes AA on it */
  --accent-text:#ad3f0e; /* small orange text on paper or white */
  --green:#1d5c43; --wa:#25d366; --wa-ink:#083d22;
  --line:rgba(21,19,15,.12);
  --display:"Bricolage Grotesque","Bricolage Fallback",system-ui,sans-serif;
  --body:"Instrument Sans","Instrument Fallback",system-ui,sans-serif;
  --pad:clamp(18px,4vw,40px); --maxw:1200px;
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.2,.8,.2,1);
}
@view-transition { navigation:auto; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.55 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--green); }
h1, h2, h3 { font-family:var(--display); margin:0; }
:focus-visible { outline:3px solid var(--accent-deep); outline-offset:3px; }
/* the hidden language always loses, whatever else styles the span */
body:not(.en) .lang-en, body.en .lang-es { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper); font-weight:700; padding:12px 18px; border-radius:999px; }
.skip:focus { left:8px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.kick { margin:0; font:600 15px/1.3 var(--body); color:var(--green); }
.h2 { margin-top:10px; font-weight:800; font-size:clamp(32px,4.4vw,56px); line-height:1; letter-spacing:-.03em; text-wrap:balance; }
.intro { margin:16px 0 0; font-size:17px; line-height:1.55; color:var(--ink2); max-width:36em; }
section { padding:clamp(64px,8vw,110px) 0; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font:700 16px/1.2 var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s var(--spring), box-shadow .15s, background-color .15s, color .15s; text-align:center; }
.btn:active { transform:scale(.97); }
.btn-accent { background:var(--accent-deep); color:#fff; }
.btn-ink { background:var(--ink); color:var(--paper); }
.btn-line { border-color:rgba(21,19,15,.4); color:var(--ink); }
.btn-wa { background:var(--wa); color:var(--wa-ink); font-weight:800; }
.btn-light { border-color:rgba(240,237,230,.65); color:var(--paper); }
@media (hover:hover) {
  .btn-accent:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(204,70,27,.38); color:#fff; }
  .btn-ink:hover, .btn-wa:hover { transform:translateY(-2px); }
  .btn-ink:hover { color:#fff; }
  .btn-wa:hover { color:var(--wa-ink); }
  .btn-line:hover { background:var(--ink); color:var(--paper); }
  .btn-light:hover { background:var(--paper); color:var(--green); }
}
.dot-live { width:8px; height:8px; border-radius:50%; background:var(--wa); flex:none; animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow:0 0 0 11px rgba(37,211,102,0); } }

/* header */
.top { position:sticky; top:0; z-index:50; background:rgba(240,237,230,.74); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid rgba(21,19,15,.08); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.logo { font:800 23px/1 var(--display); letter-spacing:-.025em; color:var(--ink); text-decoration:none; }
.logo i, .foot-logo i { font-style:normal; color:var(--accent); }
.nav { display:flex; gap:26px; }
.nav a { color:var(--ink); font-weight:600; font-size:14.5px; text-decoration:none; padding:12px 0; }
.nav a:hover { color:var(--accent-text); }
.top-act { display:flex; gap:10px; align-items:center; }
.langbtn { font:700 13px var(--body); border:1px solid rgba(21,19,15,.3); background:transparent; color:var(--ink); min-width:48px; height:44px; padding:0 12px; border-radius:999px; cursor:pointer; }
.langbtn:hover { background:rgba(21,19,15,.06); }
.top .btn { min-height:44px; padding:0 18px; font-size:14.5px; }

/* hero */
.hero { position:relative; overflow:clip; padding:clamp(56px,8vw,112px) 0 40px; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 500px at 85% 10%, rgba(232,87,42,.16), transparent 60%), radial-gradient(700px 500px at 8% 92%, rgba(29,92,67,.14), transparent 60%); }
.hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); align-items:center; }
.loc { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(21,19,15,.2); border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:600; background:rgba(255,255,255,.55); margin:0; }
.hero h1 { margin-top:22px; font-weight:800; font-size:clamp(46px,7.2vw,96px); line-height:.93; letter-spacing:-.035em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--accent); }
.lead { margin:24px 0 0; font-size:clamp(17px,1.5vw,20px); line-height:1.5; max-width:31em; color:var(--ink2); }
.cta-row { display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 0; padding:0; list-style:none; font-size:14px; font-weight:600; color:var(--ink2); }
.trust li::before { content:"✓ "; color:var(--green); font-weight:800; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.hero-copy > * { animation:rise .8s var(--out) both; }
.hero-copy > :nth-child(2) { animation-delay:.06s; } .hero-copy > :nth-child(3) { animation-delay:.14s; } .hero-copy > :nth-child(4) { animation-delay:.2s; } .hero-copy > :nth-child(5) { animation-delay:.26s; } .hero-copy > :nth-child(6) { animation-delay:.3s; }
/* Text first, email second, WhatsApp third (Luis 2026-10-19): one big button, the other two as a line under it. */
.alt-contact { margin:12px 0 0; font-size:14px; font-weight:600; line-height:1.5; color:var(--ink2); }
.alt-contact a { color:var(--green); text-underline-offset:3px; }
.hero .alt-contact { margin-top:14px; }
.hero .trust { margin-top:22px; }
.stage-in { animation:rise 1s .15s var(--out) both; }

/* the stage: Rubio's real site behind, the WhatsApp loop in front, his Google rating closest */
.stage { --rx:0; --ry:0; position:relative; min-height:580px; perspective:1600px; display:flex; align-items:center; justify-content:flex-end; padding-right:clamp(0px,2.5vw,32px); }
.lap { position:absolute; left:0; top:7%; width:min(400px,80%); aspect-ratio:16/11; border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(21,19,15,.1); box-shadow:0 40px 90px rgba(21,19,15,.28); transform:translateZ(-120px) rotateY(calc(var(--ry) * .5deg + 14deg)) rotateX(calc(var(--rx) * .5deg)); transform-origin:left center; animation:float 7s ease-in-out infinite; }
.bar { display:flex; gap:6px; align-items:center; padding:9px 12px; border-bottom:1px solid #eee; background:#f6f5f1; }
.bar i { width:9px; height:9px; border-radius:50%; background:#e8572a; } .bar i:nth-child(2) { background:#d9a441; } .bar i:nth-child(3) { background:#25d366; }
.bar > span { margin-left:8px; flex:1; min-width:0; background:#fff; border-radius:6px; font-size:10.5px; padding:4px 8px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lap-body { position:relative; height:calc(100% - 34px); background:#15170f; color:#fff; }
.lap-body img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; }
.lap-body::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(21,23,15,.95), rgba(21,23,15,.25)); }
.lap-txt { position:absolute; z-index:1; left:16px; right:16px; bottom:16px; }
.lap-txt small { display:block; font-size:9.5px; font-weight:700; color:#e7bd6a; }
.lap-txt b { display:block; font:800 22px/1 var(--display); margin-top:5px; }
.lap-btns { display:flex; gap:6px; margin-top:10px; font-size:9.5px; font-weight:800; }
.lap-btns > span { background:#d9a441; color:#15170f; padding:6px 10px; border-radius:999px; }
.lap-btns > span + span { background:none; color:#fff; border:1px solid #fff; padding:5px 10px; }

.phone { position:relative; width:272px; aspect-ratio:9/19; border-radius:42px; background:#111; padding:10px; box-shadow:0 50px 100px rgba(21,19,15,.45), inset 0 0 0 2px #2c2c2c; transform:rotateY(calc(var(--ry) * 1deg)) rotateX(calc(var(--rx) * 1deg)); }
.phone::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:24px; background:#111; border-radius:0 0 16px 16px; z-index:3; }
/* The phone is Mi Renombre (app.renombre.app) as it really looks, from workers/sites app-ui.js:
   plaster #f8f4ec, white sheets, verde #2e4b3f, naranja #c7440c. One 16 s loop: the receptionist's
   call reaches WhatsApp, its button opens the app on that person, the Spanish reply goes out in
   English, then the signed estimate arrives. Example data, and the status bar says so. */
.scr { position:relative; height:100%; border-radius:33px; overflow:hidden; background:#f8f4ec; color:#1c2420; font:500 10.5px/1.4 var(--body); }
.ap { position:absolute; inset:0; display:flex; flex-direction:column; }
.scr svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ap-sb { position:absolute; z-index:3; top:8px; left:22px; right:20px; display:flex; justify-content:space-between; font-size:9px; font-weight:700; pointer-events:none; }
.ap-sb em { font-style:normal; font-weight:700; font-size:8px; color:#434b46; background:#efeae0; border-radius:999px; padding:1px 7px; }
.ap-hd, .ap-dh { background:#fff; border-radius:0 0 18px 18px; box-shadow:0 3px 12px rgba(46,75,63,.09); }
.ap-hd { padding:32px 14px 12px; }
.ap-wm { font:800 14px/1 var(--display); letter-spacing:-.025em; }
.ap-wm i { font-style:normal; color:var(--accent); }
.ap-h1 { display:block; margin-top:7px; font:800 22px/1 var(--display); letter-spacing:-.02em; color:#2e4b3f; }
.ap-hd p { margin:4px 0 0; font-size:9.5px; color:#434b46; }
.ap-empty { margin:12px 11px 0; background:#efeae0; border-radius:14px; padding:18px 12px; text-align:center; }
.ap-empty b { display:block; font:800 15px/1.1 var(--display); color:#2e4b3f; }
.ap-empty span { display:block; margin-top:5px; font-size:9px; line-height:1.35; color:#434b46; }
.ap-tabs { margin-top:auto; display:flex; justify-content:space-around; background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -4px 16px rgba(46,75,63,.08); padding:8px 6px 18px; font-size:8px; font-weight:700; color:#434b46; }
.ap-tabs > span { display:flex; flex-direction:column; align-items:center; gap:3px; }
.ap-ic { width:32px; height:17px; border-radius:9px; display:grid; place-items:center; }
.ap-tabs > .on { color:#2e4b3f; font-weight:800; }
.ap-tabs > .on > .ap-ic { background:#2e4b3f; color:#fff; }
.ap-tabs > .cam > .ap-ic { width:24px; height:24px; border-radius:50%; margin-top:-8px; background:#c7440c; color:#fff; }
.ap-dh { display:flex; align-items:center; gap:7px; padding:30px 10px 10px; }
.ap-bk { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#2e4b3f; box-shadow:0 2px 8px rgba(46,75,63,.16); flex:none; }
.ap-dh > div { flex:1; min-width:0; }
.ap-dh b { display:block; font:800 13px/1.1 var(--display); color:#2e4b3f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-dh small { display:block; font-size:8.5px; color:#434b46; }
.ap-call { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 7px; border-radius:10px; background:#2e4b3f; color:#fff; font-size:7.5px; font-weight:700; }
.ap-thread { flex:1; display:flex; flex-direction:column; gap:7px; padding:10px 10px 0; }
.ap-card { background:#fff; border-radius:13px; box-shadow:0 2px 10px rgba(46,75,63,.08); padding:9px 10px; }
.ap-k { display:flex; align-items:center; gap:5px; font-size:8.5px; font-weight:600; color:#434b46; }
.ap-k em { margin-left:auto; font-style:normal; }
.ap-dot { width:16px; height:16px; border-radius:50%; background:#c7440c; color:#fff; display:grid; place-items:center; flex:none; }
.ap-dot svg { width:9px; height:9px; }
.ap-card p { margin:6px 0 0; font-size:10.5px; line-height:1.38; }
.ap-cc { display:block; margin-top:6px; padding-top:5px; border-top:1px dashed #e7decf; font-size:8.5px; font-style:italic; color:#434b46; }
.ap-out { align-self:flex-end; max-width:88%; background:#2e4b3f; color:#fff; border-radius:13px; padding:7px 9px; font-size:10.5px; line-height:1.35; }
.ap-out small { display:block; margin-top:5px; padding-top:4px; border-top:1px dashed rgba(255,255,255,.5); font-size:8.5px; }
.ap-compose { padding:8px 9px 16px; }
.ap-box { position:relative; display:flex; align-items:center; gap:6px; min-height:36px; background:#fff; border:1.5px solid #e7decf; border-radius:18px; padding:4px 4px 4px 10px; }
.ap-ph { flex:1; min-width:0; font-size:10px; color:#646c66; }
.ap-typed { position:absolute; left:10px; right:36px; top:50%; transform:translateY(-50%); font-size:10px; line-height:1.25; }
.ap-mic, .ap-send { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; }
.ap-mic { background:#e9f1ec; color:#2e4b3f; }
.ap-send { position:absolute; right:4px; top:50%; margin-top:-13px; background:#2e4b3f; color:#fff; }
/* WhatsApp is only the doorbell: the alert and its one button into the app */
.ap-ping { position:absolute; z-index:4; left:7px; right:7px; top:24px; background:#fff; border-radius:14px; padding:8px 9px 0; box-shadow:0 12px 28px rgba(21,19,15,.3); }
.ap-ping > b { display:flex; align-items:center; gap:6px; font-size:9px; }
.ap-ping > b small { margin-left:auto; font-size:8px; font-weight:500; color:#6b665c; }
.ap-wa { width:16px; height:16px; border-radius:5px; background:var(--wa); color:#fff; display:grid; place-items:center; }
.ap-wa svg { width:10px; height:10px; }
.ap-ping p { margin:5px 0 0; font-size:9.5px; line-height:1.35; }
.ap-btn { display:flex; justify-content:center; align-items:center; gap:5px; margin:7px -9px 0; padding:7px 0 8px; border-top:1px solid #ece8df; border-radius:0 0 14px 14px; font-size:9.5px; font-weight:700; color:#0b6e4f; }
.ap-btn svg { width:10px; height:10px; }
.ap2, .ap-out, .ap-typed, .ap-send, .ap-ping { opacity:0; }
.ap1 { animation:s1 16s infinite; }
.ap2 { animation:s2 16s infinite; }
.ap-ping.p1 { animation:p1 16s infinite; }
.ap-ph { animation:ph 16s infinite; }
.ap-typed { animation:ty 16s infinite; }
.ap-send { animation:sd 16s infinite; }
.ap-out { animation:ou 16s infinite; }
.ap-ping.p2 { animation:p2 16s infinite; }
@keyframes s1 { 0%,21% { opacity:1; } 25%,96% { opacity:0; } 100% { opacity:1; } }
@keyframes s2 { 0%,22% { opacity:0; } 26%,93% { opacity:1; } 97%,100% { opacity:0; } }
/* the loop waits until the page has loaded and only plays while the phone is on screen (script below) */
.scr:not(.go), .scr:not(.go) * { animation-play-state:paused !important; }
@keyframes p1 { 0%,4% { opacity:0; transform:translateY(-130%); } 8%,19% { opacity:1; transform:none; } 23%,100% { opacity:0; transform:translateY(-130%); } }
@keyframes ph { 0%,33% { opacity:1; } 35%,52% { opacity:0; } 54%,100% { opacity:1; } }
@keyframes ty { 0%,33% { opacity:0; } 36%,50% { opacity:1; } 52%,100% { opacity:0; } }
@keyframes sd { 0%,35% { opacity:0; transform:scale(.6); } 38%,47% { opacity:1; transform:none; } 49% { opacity:1; transform:scale(.86); } 51% { opacity:1; transform:none; } 53%,100% { opacity:0; } }
@keyframes ou { 0%,51% { opacity:0; transform:translateY(10px) scale(.96); } 55%,93% { opacity:1; transform:none; } 97%,100% { opacity:0; } }
@keyframes p2 { 0%,64% { opacity:0; transform:translateY(-130%); } 68%,88% { opacity:1; transform:none; } 92%,100% { opacity:0; transform:translateY(-130%); } }
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -14px; } }

.gcard { position:absolute; left:4%; bottom:9%; display:flex; gap:10px; align-items:center; background:#fff; border-radius:14px; padding:12px 14px; box-shadow:0 24px 60px rgba(21,19,15,.25); transform:translateZ(80px) translate(calc(var(--ry) * 1.5px), calc(var(--rx) * -1.5px)); animation:float 6s 1.5s ease-in-out infinite; }
.gcard .g { width:34px; height:34px; border-radius:9px; background:#fff; border:1px solid #e3e3e3; display:grid; place-items:center; }
.gcard b { display:block; font-size:12.5px; }
.gcard small { display:block; font-size:11.5px; color:#4a463e; }
.gcard .stars { color:#9a6a00; letter-spacing:1px; }

/* marquee */
.marquee { background:var(--ink); color:var(--paper); overflow:hidden; padding:15px 0; }
.marquee-track { display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee ul { display:flex; margin:0; padding:0; list-style:none; font:600 21px/1.2 var(--display); letter-spacing:-.01em; }
.marquee li { display:flex; align-items:center; white-space:nowrap; }
.marquee li::after { content:"✦"; color:var(--accent); font-size:14px; margin:0 26px; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* proof */
.proof { padding:clamp(40px,6vw,72px) 0 0; }
.counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.count { border-radius:20px; background:var(--card); border:1px solid var(--line); padding:22px 20px; }
.count b { display:flex; align-items:baseline; gap:6px; font:800 clamp(36px,4vw,54px)/1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.count b small { font-size:.42em; letter-spacing:-.01em; }
.count:nth-child(1) b { color:var(--accent-text); } .count:nth-child(3) b { color:var(--green); }
.count p { font-size:14px; font-weight:600; margin:10px 0 0; line-height:1.4; color:var(--ink2); }

/* how it works */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:40px 0 0; padding:0; list-style:none; }
.step { width:100%; height:100%; appearance:none; text-align:left; cursor:pointer; border-radius:22px; padding:24px; background:var(--card); color:var(--ink); border:1px solid var(--line); font:inherit; transition:transform .3s var(--spring), background-color .3s, color .3s; }
.step .n { display:block; font:800 56px/1 var(--display); letter-spacing:-.04em; color:#8f897d; }
.step b { display:block; font:700 22px/1.15 var(--display); margin-top:14px; }
.step span.d { display:block; margin-top:8px; font-size:15px; line-height:1.5; color:var(--ink2); }
.step[aria-pressed="true"] { background:var(--ink); color:var(--paper); transform:scale(1.02); }
.step[aria-pressed="true"] .n { color:#857f75; } .step[aria-pressed="true"] span.d { color:#cfc9bd; }
@media (hover:hover) { .step:hover { transform:translateY(-4px); } .step[aria-pressed="true"]:hover { transform:scale(1.02) translateY(-4px); } }
.panel { position:relative; overflow:hidden; margin-top:14px; border-radius:26px; background:var(--ink); color:var(--paper); padding:clamp(22px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center; min-height:300px; }
.panel::before { content:""; position:absolute; right:-120px; top:-160px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(232,87,42,.3), transparent 65%); }
.paso { position:relative; display:none; }
.como[data-step="0"] .paso[data-i="0"], .como[data-step="1"] .paso[data-i="1"], .como[data-step="2"] .paso[data-i="2"] { display:block; animation:rise .5s var(--out) both; }
.paso small { display:block; font-size:15px; font-weight:700; color:var(--accent); }
.paso b { display:block; font:800 clamp(26px,3vw,40px)/1.05 var(--display); letter-spacing:-.02em; margin-top:10px; }
.paso p { margin:14px 0 0; font-size:16px; line-height:1.55; color:#cfc9bd; max-width:28em; }
.outs { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; list-style:none; }
.out { border-radius:16px; padding:16px; border:1.5px dashed rgba(240,237,230,.28); color:#a49e92; transition:all .45s var(--out); transform:translateY(calc(8px + var(--k) * 4px)) scale(.97); }
.out:nth-child(1) { --k:0; } .out:nth-child(2) { --k:1; } .out:nth-child(3) { --k:2; } .out:nth-child(4) { --k:3; }
.out small { display:block; font-size:12px; font-weight:700; }
.out b { display:block; font:700 16px/1.2 var(--display); margin-top:6px; }
.out > span { display:block; font-size:12.5px; line-height:1.4; margin-top:4px; }
.como[data-step="1"] .out { border-style:solid; border-color:rgba(240,237,230,.2); background:rgba(240,237,230,.07); color:#cfc9bd; transform:translateY(4px) scale(.985); }
.como[data-step="2"] .out { border:1.5px solid transparent; background:var(--paper); color:var(--ink); transform:none; }
.como[data-step="2"] .out:first-child { background:var(--accent-deep); color:#fff; }
.como[data-step="2"] .out:nth-child(2) { transition-delay:.06s; } .como[data-step="2"] .out:nth-child(3) { transition-delay:.12s; } .como[data-step="2"] .out:nth-child(4) { transition-delay:.18s; }

/* live demo */
.demo { padding-top:0; }
.demo-card { border-radius:30px; background:var(--card); border:1px solid var(--line); padding:clamp(22px,3.5vw,44px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,48px); align-items:start; box-shadow:0 30px 80px rgba(21,19,15,.1); }
.demo-card .kick { color:var(--accent-text); }
.flabel, .demo-card legend { display:block; margin-top:24px; padding:0; font-size:14px; font-weight:700; color:var(--ink3); }
.demo-card fieldset { border:0; margin:0; padding:0; min-width:0; }
#dName { margin-top:8px; width:100%; font:600 18px var(--body); color:var(--ink); padding:13px 16px; border:1.5px solid rgba(21,19,15,.25); border-radius:14px; background:#f8f6f1; }
#dName:focus { outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 4px rgba(232,87,42,.18); }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip { position:relative; }
.chip input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.chip > span { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 15px; border-radius:999px; font-size:14px; font-weight:700; border:1.5px solid rgba(21,19,15,.28); color:var(--ink); transition:transform .2s var(--spring), background-color .2s, color .2s, border-color .2s; }
.chip input:checked + span { background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.04); }
.chip input:focus-visible + span { outline:3px solid var(--accent-deep); outline-offset:2px; }
.chip .sw { width:12px; height:12px; border-radius:50%; background:var(--c); }
.demo-go { margin-top:28px; max-width:100%; overflow-wrap:anywhere; }
.pv-wrap { perspective:1600px; }
/* The mini site mirrors the factory's estudio estilo (workers/sites ESTILOS.estudio): paper #f3f1ea,
   carbon #15170f, green #1f5a40 for kickers, and ONE client accent (content.diseno.acento) on the hero's
   last name word, the solid button, the zone stars and the CTA tile. The colour chips are those accents. */
.pv { --p-paper:#f3f1ea; --p-ink:#15170f; --p-acc:#d9a441; --p-acc2:#1f5a40; --p-ink-rgb:21,23,15; container-type:inline-size; border-radius:16px; overflow:hidden; background:var(--p-paper); border:1px solid rgba(21,19,15,.12); box-shadow:0 40px 90px rgba(21,19,15,.25); transform:rotateY(-8deg) rotateX(3deg); transition:transform .5s var(--out); }
.pv-wrap:hover .pv { transform:rotateY(-3deg) rotateX(1deg); }
.pv[data-color="azul"] { --p-acc:#6aa8e0; }
.pv[data-color="menta"] { --p-acc:#7fd4b4; }
.pv[data-color="rosa"] { --p-acc:#f1a5b6; }
.pv .bar > span { font-size:11.5px; padding:5px 10px; }
.ms { background:var(--p-paper); color:var(--p-ink); font-family:var(--body); }
.ms b, .ms i, .ms em { font-style:normal; }
.ms-hero { position:relative; overflow:hidden; color:#fff; background:var(--p-ink); }
.ms-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; }
.ms-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(var(--p-ink-rgb),.96) 0%, rgba(var(--p-ink-rgb),.55) 45%, rgba(var(--p-ink-rgb),.25) 100%); }
.ms-hero > :not(img) { position:relative; z-index:1; }
.ms-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; background:rgba(var(--p-ink-rgb),.5); border-bottom:1px solid rgba(255,255,255,.12); }
.ms-head > b:first-child { font:700 13px/1.2 var(--display); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-lang { flex:none; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.55); }
.ms-txt { padding:clamp(18px,7cqi,40px) clamp(14px,5cqi,26px) 14px; }
.ms-live { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); font-size:10.5px; font-weight:600; }
.ms-live::before { content:""; width:6px; height:6px; border-radius:50%; background:#52d273; box-shadow:0 0 0 3px rgba(82,210,115,.25); }
.ms-h1 { display:block; margin-top:12px; font:800 clamp(26px,9.2cqi,46px)/.97 var(--display); letter-spacing:-.03em; overflow-wrap:anywhere; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.ms-h1 > em { color:var(--p-acc); transition:color .35s; }
.ms-txt > p { margin:10px 0 0; max-width:44ch; font-size:12px; line-height:1.45; color:#f1f0ea; }
.ms-cta { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.ms-cta > b { font-size:11px; font-weight:700; padding:8px 13px; border-radius:999px; border:1.5px solid rgba(255,255,255,.8); }
.ms-cta > b:first-child { background:var(--p-acc); border-color:var(--p-acc); color:var(--p-ink); transition:background-color .35s, border-color .35s; }
.ms-marq { overflow:hidden; margin:0 clamp(14px,5cqi,26px); padding:10px 0 12px; border-top:1px solid rgba(255,255,255,.14); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ms-marq > div { display:flex; gap:22px; width:max-content; white-space:nowrap; font-size:11px; font-weight:600; animation:msmarq 24s linear infinite paused; }
.pv.on .ms-marq > div { animation-play-state:running; }
.ms-marq i::before { content:"✦"; color:var(--p-acc); margin-right:8px; transition:color .35s; }
@keyframes msmarq { to { transform:translateX(-50%); } }
.ms-svc { padding:clamp(16px,5cqi,26px) clamp(14px,5cqi,26px) clamp(16px,5cqi,24px); }
.ms-kick { display:block; font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--p-acc2); }
.ms-h2 { display:block; margin-top:5px; font:800 clamp(18px,5.4cqi,26px)/1.05 var(--display); letter-spacing:-.02em; }
.ms-bento { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-auto-rows:minmax(92px,auto); gap:8px; margin-top:12px; }
.mt { position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:11px; border-radius:14px; overflow:hidden; }
.mt > :not(img) { position:relative; }
.mt > b { font:800 clamp(13px,3.9cqi,17px)/1.08 var(--display); letter-spacing:-.01em; overflow-wrap:anywhere; text-wrap:balance; }
.mt > small { font-size:10.5px; opacity:.85; }
.mt-pic { grid-row:span 2; color:#fff; background:var(--p-ink); }
.mt-pic > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% 50%; }
.mt-pic::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(to top, rgba(var(--p-ink-rgb),.92) 0%, rgba(var(--p-ink-rgb),.55) 45%, rgba(var(--p-ink-rgb),.12) 100%); }
.mt-pic > :not(img) { z-index:1; }
.mt-over { background:var(--p-ink); color:var(--p-paper); }
.mt-cta { background:var(--p-acc); color:var(--p-ink); transition:background-color .35s; }
.mt > .mt-pill { align-self:flex-start; margin-top:6px; font:700 10px/1.2 var(--body); letter-spacing:0; padding:5px 9px; border-radius:999px; background:#fff; color:var(--p-ink); }
.mt-cta > .mt-pill { background:var(--p-ink); color:var(--p-paper); }
.pv-note { text-align:center; font-size:13.5px; margin:16px 0 0; color:var(--ink3); }
.pv-note a { color:var(--accent-text); }

/* real sites */
.sitios { background:var(--ink); color:var(--paper); overflow:hidden; }
.sitios .kick { color:var(--accent); }
.sitios-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; }
.sitios-head p { font-size:16px; line-height:1.55; max-width:24em; color:#cfc9bd; margin:0; }
.sites3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:56px; perspective:2000px; }
.site { display:block; color:inherit; text-decoration:none; border-radius:18px; overflow:hidden; background:#1d1f19; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.5); transition:transform .5s var(--out), box-shadow .5s; }
.site:nth-child(1) { transform:rotateY(10deg) rotateX(2deg); transform-origin:right center; }
.site:nth-child(3) { transform:rotateY(-10deg) rotateX(2deg); transform-origin:left center; }
@media (hover:hover) { .site:hover { transform:translateY(-8px); box-shadow:0 50px 100px rgba(0,0,0,.6); } a.site:hover { color:#fff; } }
a.site:focus-visible { transform:translateY(-8px); }
.shot { position:relative; aspect-ratio:4/3; overflow:hidden; }
.shot > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.site-meta { padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px; color:#cfc9bd; }
.site-meta b { color:var(--paper); }
.site-meta .go { font-weight:700; color:#ff8a5c; }
.badge { position:absolute; top:14px; left:14px; z-index:1; display:inline-flex; align-items:center; gap:6px; background:var(--wa); color:var(--wa-ink); font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; }
.badge.tpl { left:auto; right:14px; background:rgba(255,255,255,.88); color:#243240; }
.shot-rubio { background:#15170f; }
.shot-rubio > img { opacity:.8; }
.shot-rubio::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(21,23,15,.95), transparent 55%); }
.shot-rubio .cap { position:absolute; z-index:1; left:18px; right:18px; bottom:16px; color:#fff; }
.cap small { display:block; font-size:11px; font-weight:800; color:#e7bd6a; }
.cap b { display:block; font:800 22px/1 var(--display); margin-top:5px; }
.shot-clasico { background:#faf6ee; color:#243240; padding:18px; font-family:Georgia,"Times New Roman",serif; }
.shot-clasico .hd { display:flex; justify-content:space-between; align-items:center; border-bottom:4px double #243240; padding-bottom:8px; font-size:13px; font-weight:700; }
.shot-clasico .hd span, .shot-moderno .hd span { font-family:var(--body); font-size:9px; font-weight:800; padding:4px 7px; background:#8a5a2b; color:#fff; }
.shot-clasico .bd { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; align-items:center; }
.shot-clasico .bd small { display:block; font-family:var(--body); font-size:9px; font-weight:800; color:#8a5a2b; }
.shot-clasico .bd b { display:block; font-size:20px; line-height:1.05; margin-top:4px; }
.shot-clasico .bd i { display:block; font-family:var(--body); font-style:normal; font-size:9.5px; margin-top:6px; color:#4b5866; }
.shot-clasico figure { margin:0; background:#fff; border:1px solid #243240; padding:5px; box-shadow:8px 8px 0 rgba(138,90,43,.2); }
.shot-clasico figure img { width:100%; aspect-ratio:4/3.4; object-fit:cover; }
.shot-moderno { background:#17191e; color:#f0efe9; padding:18px; }
.shot-moderno .hd { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #2a2f39; padding-bottom:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.shot-moderno .hd span { background:#d9a441; color:#17191e; border-radius:5px; }
.shot-moderno small { display:block; margin-top:18px; font-size:9.5px; font-weight:800; color:#d9a441; }
.shot-moderno b { display:block; font:800 22px/1 var(--display); margin-top:5px; text-transform:uppercase; }
.shot-moderno hr { width:40px; height:3px; border:0; margin:10px 0 0; background:#d9a441; box-shadow:0 0 10px rgba(217,164,65,.6); }
.shot-moderno ul { display:flex; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.shot-moderno li { flex:1; background:#20232a; border:1px solid #2a2f39; border-top:2px solid #d9a441; border-radius:8px; padding:8px; font-size:10px; font-weight:700; }
.rubio-strip { margin-top:40px; border-radius:22px; border:1px solid rgba(255,255,255,.14); padding:clamp(20px,3vw,32px); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; background:rgba(255,255,255,.04); }
.rubio-strip img { width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); }
.rubio-strip p { margin:0; font:600 clamp(17px,2vw,21px)/1.4 var(--display); text-wrap:pretty; }
.rubio-strip p small { display:block; margin-top:8px; font:500 14px/1.4 var(--body); color:#b9b3a6; }
@supports (animation-timeline: view()) {
  @media (min-width:901px) and (prefers-reduced-motion:no-preference) {
    .sites3 .site:nth-child(1), .sites3 .site:nth-child(3) { animation:fan linear both; animation-timeline:view(); animation-range:entry 0% cover 38%; }
    @keyframes fan { from { transform:rotateY(0) translateY(50px); opacity:.4; } }
  }
}

/* platform */
.plat { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px); align-items:center; }
.ticks { display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none; font-size:15.5px; line-height:1.45; }
.ticks li { display:flex; gap:10px; }
.ticks li::before { content:"✓"; color:var(--accent-text); font-weight:800; }
.flow-card { position:relative; border-radius:26px; background:var(--card); border:1px solid var(--line); padding:clamp(20px,3vw,36px); box-shadow:0 30px 80px rgba(21,19,15,.1); overflow:hidden; }
.flow { position:relative; display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; min-height:300px; container-type:inline-size; }
.flow > * { position:relative; z-index:2; }
.f-you { background:#dcf8c6; border-radius:18px; padding:16px; border:1px solid rgba(21,19,15,.08); }
.f-you small, .f-mid small { display:block; font-size:12px; font-weight:800; }
.f-you small { color:#075e54; }
.f-you b { display:block; font:700 18px var(--display); margin-top:6px; }
.f-you > span { display:block; font-size:13px; line-height:1.4; margin-top:4px; color:#2f4a3c; }
.f-mid { margin:0 18px; background:var(--ink); color:var(--paper); border-radius:20px; padding:18px; text-align:center; box-shadow:0 20px 50px rgba(21,19,15,.3); }
.f-mid small { color:var(--accent); }
.f-mid b { display:block; font:800 21px var(--display); margin-top:6px; }
.f-mid b i { font-style:normal; color:var(--accent); }
.f-mid ul { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:10px 0 0; padding:0; list-style:none; }
.f-mid li { font-size:11px; font-weight:700; border:1px solid rgba(255,255,255,.28); padding:3px 8px; border-radius:999px; }
.f-outs { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.f-outs li { background:var(--paper); border-radius:14px; padding:11px 13px; border:1px solid rgba(21,19,15,.08); display:flex; gap:10px; align-items:center; font-size:13.5px; font-weight:700; }
.f-outs i { flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff; font:800 12px var(--display); font-style:normal; background:var(--accent-deep); }
.f-outs li:nth-child(2) i { background:#2f6fde; } .f-outs li:nth-child(3) i { background:var(--green); }
.f-you > span { font-style:italic; }
.f-mid li { font-size:11.5px; }
.flow > .f-line { position:absolute; z-index:1; left:0; right:0; top:50%; height:2px; background:repeating-linear-gradient(90deg, rgba(21,19,15,.2) 0 8px, transparent 8px 16px); }
.flow > .f-dot { position:absolute; z-index:3; top:50%; left:0; width:10px; height:10px; margin-top:-4px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(232,87,42,.8); animation:flowDot 3.2s linear infinite; }
.flow > .f-dot + .f-dot { background:var(--green); box-shadow:0 0 12px rgba(29,92,67,.8); animation-delay:1.6s; }
@keyframes flowDot { 0% { translate:0 0; opacity:0; } 8%,92% { opacity:1; } 100% { translate:100cqw 0; opacity:0; } }

/* plans */
.planes { padding-top:clamp(40px,6vw,80px); }
.plans-head { text-align:center; }
.plans-head .intro { margin-left:auto; margin-right:auto; }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:44px 0 0; align-items:stretch; }
.plan { position:relative; border-radius:24px; background:var(--card); border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; transition:transform .3s var(--out); }
.plan h3 { font-weight:700; font-size:21px; }
.price { margin-top:12px; display:flex; align-items:baseline; gap:4px; font:800 54px/1 var(--display); letter-spacing:-.04em; }
.price small { font:500 15px var(--body); letter-spacing:0; color:var(--ink3); }
.setup { font-size:13px; margin-top:8px; color:var(--ink3); }
.plan ul { display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; font-size:14.5px; line-height:1.45; flex:1; align-content:start; }
.plan li { display:flex; gap:9px; }
.plan li::before { content:"✓"; flex:none; color:var(--green); font-weight:800; }
.plan li.extra::before { content:"+"; }
.plan .vs { font-size:12.5px; margin-top:16px; color:var(--ink3); }
.plan .note { font-size:12.5px; margin-top:8px; font-weight:600; color:var(--accent-text); }
.plan .btn { margin-top:18px; width:100%; }
.plan .alt-contact { margin-top:10px; font-size:13px; text-align:center; color:var(--ink3); }
.plan.pop .alt-contact { color:#b9b3a6; } .plan.pop .alt-contact a { color:var(--paper); }
.demo-card .alt-contact { font-size:13.5px; color:var(--ink3); }
.soon { display:inline-block; margin-left:4px; font-style:normal; font-size:11.5px; font-weight:800; line-height:1.3; padding:2px 8px; border-radius:999px; background:#f6e4da; color:var(--accent-text); white-space:nowrap; }
.plan.pop { background:var(--ink); color:var(--paper); box-shadow:0 30px 70px rgba(21,19,15,.3); transform:scale(1.03); border-color:var(--ink); }
.plan.pop .price small, .plan.pop .setup, .plan.pop .vs { color:#b9b3a6; }
.plan.pop li::before { color:var(--accent); }
.pop-tag { position:absolute; top:-13px; left:28px; background:var(--accent-deep); color:#fff; font-size:12.5px; font-weight:800; padding:6px 13px; border-radius:999px; }
@media (hover:hover) { .plan:hover { transform:translateY(-6px); } .plan.pop:hover { transform:scale(1.03) translateY(-6px); } }
.setup-what { margin:30px auto 0; max-width:46em; text-align:center; font-size:15.5px; line-height:1.55; color:var(--ink2); }
.setup-what b { color:var(--ink); }
.plans-foot { margin:10px 0 0; text-align:center; font-size:15px; color:var(--ink3); }
.math { margin-top:28px; border-radius:20px; background:var(--card); border:1px solid var(--line); padding:22px 26px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; gap:14px 28px; align-items:center; }
.math small { display:block; font-size:14px; font-weight:700; color:var(--accent-text); }
.math b { display:block; font:800 24px/1.1 var(--display); margin-top:6px; }
.math s { color:var(--ink3); }
.math p { margin:0; font-size:14px; line-height:1.5; color:var(--ink2); }
.math .ours { text-align:right; font:800 36px/1 var(--display); color:var(--green); }
.math .ours > span { display:block; font:600 12.5px var(--body); color:var(--ink3); margin-top:4px; }

/* faq */
.preguntas { padding-top:0; }
.faq-wrap { max-width:860px; }
.faq { margin-top:26px; }
.faq details { border-top:1px solid rgba(21,19,15,.16); }
.faq details:last-child { border-bottom:1px solid rgba(21,19,15,.16); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font:700 18px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(21,19,15,.35); display:grid; place-items:center; font:500 20px/1 var(--body); transition:transform .25s var(--out); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { margin:0 0 20px; font-size:16px; line-height:1.6; color:var(--ink2); max-width:44em; }
.faq p a { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }

/* contact */
.contacto { padding-top:0; }
.cta-band { position:relative; overflow:hidden; border-radius:30px; background:var(--green); color:var(--paper); padding:clamp(40px,6vw,80px) clamp(22px,4vw,64px); text-align:center; }
.cta-band::before { content:""; position:absolute; left:-100px; bottom:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(232,87,42,.35), transparent 65%); }
.cta-band::after { content:""; position:absolute; right:-120px; top:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 65%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { font-weight:800; font-size:clamp(38px,6vw,80px); line-height:.95; letter-spacing:-.035em; text-wrap:balance; }
.cta-band > p { margin:20px auto 0; font-size:17px; line-height:1.5; max-width:30em; color:#e4efe9; }
.cta-band .cta-row { justify-content:center; margin-top:32px; }
.cta-mail { font-size:14px; color:#d4e5dc; }
.cta-mail a { color:#fff; }

/* footer */
footer { padding:40px 0 36px; border-top:1px solid var(--line); font-size:13px; line-height:1.6; }
.foot { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.foot-logo { font:800 22px var(--display); letter-spacing:-.02em; }
.foot p { margin:6px 0 0; color:var(--ink2); }
.foot nav { display:flex; gap:6px 18px; flex-wrap:wrap; align-content:start; font-weight:600; }
.foot nav a { color:var(--ink); padding:6px 0; }
.sms { margin-top:22px; font-size:12px; color:var(--ink3); }
.sms a, .copy a { color:var(--ink2); }
.copy { margin-top:14px; color:var(--ink3); }

/* phone bar */
.mbar { display:none; }

@media (max-width:1100px) { .lap { width:min(340px,86%); top:3%; } .stage { justify-content:center; padding-right:0; } .phone { margin-left:18%; } }
@media (max-width:900px) {
  .sites3 { grid-template-columns:1fr; } .sites3 > .site { transform:none; }
  .rubio-strip { grid-template-columns:auto minmax(0,1fr); } .rubio-strip .btn { grid-column:1 / -1; justify-self:start; }
}
@media (max-width:760px) {
  body { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .nav, .top .wa-top { display:none; }
  .hero { padding:36px 0 0; }
  .hero-grid, .panel, .demo-card, .plat, .plans { grid-template-columns:minmax(0,1fr); }
  .cta-row > .btn { width:100%; }
  .stage { min-height:0; margin-top:6px; padding-bottom:34px; }
  .lap, .gcard { display:none; }
  .phone { width:min(252px,76vw); margin-left:0; }
  .marquee ul { font-size:17px; } .marquee li::after { margin:0 18px; }
  .counts { grid-template-columns:1fr 1fr; gap:10px; }
  .count { padding:18px 16px; }
  .steps, .sites3 { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:4px 4px 16px; margin-left:-4px; margin-right:-4px; scrollbar-width:none; overscroll-behavior-x:contain; }
  .steps::-webkit-scrollbar, .sites3::-webkit-scrollbar { display:none; }
  .steps > li, .sites3 > .site { flex:0 0 86%; scroll-snap-align:center; }
  .step { padding:18px; } .step .n { font-size:40px; } .step[aria-pressed="true"] { transform:none; }
  .outs { grid-template-columns:1fr 1fr; } .out { padding:12px; } .out b { font-size:14.5px; }
  .pv, .pv-wrap:hover .pv { transform:none; }
  .flow { grid-template-columns:1fr; gap:12px; min-height:0; }
  .f-mid { margin:0; }
  .flow > .f-line, .flow > .f-dot { display:none; }
  .plan.pop { transform:none; } .plan.pop:hover { transform:translateY(-6px); }
  .math { grid-template-columns:1fr; } .math .ours { text-align:left; }
  .rubio-strip { grid-template-columns:1fr; } .rubio-strip img { width:64px; height:64px; }
  .mbar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(21,19,15,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid rgba(255,255,255,.12); transition:transform .3s var(--out); }
  .mbar .btn { min-height:50px; } .mbar .btn-accent { flex:1; } .mbar .btn-light, .mbar .btn-wa { flex:none; padding:0 16px; }
  .plan .alt-contact { font-size:13.5px; }
  .mbar.off { transform:translateY(110%); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  /* the still frame is the point of the loop: his Spanish reply, gone out in English */
  .ap1, .ap-ping, .ap-typed, .ap-send { display:none; }
  .ap2, .ap-out { opacity:1 !important; transform:none !important; }
}

/* ===== round 9 (2026-10-21): the menu, the pages, the home's short versions =====
   Luis: "too much scrolling … add menu on top right that will have a contact us
   section and more sections". The menu is the one new thing with a voice: the
   site's parts in the big display face on ink, like the marquee's trade list. */

/* page changes: the header stays put, the rest swaps quickly (a long one blocks taps) */
.top { view-transition-name:top; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.16s; }

/* header: quick links only where they fit; the menu everywhere */
.nav a[aria-current="page"] { color:var(--accent-text); }
@media (max-width:1180px) { .nav { display:none; } }
.menubtn { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 14px; border-radius:999px; border:1.5px solid rgba(21,19,15,.45); background:transparent; color:var(--ink); font:700 14.5px/1 var(--body); cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; }
.menubtn:hover { background:rgba(21,19,15,.06); }
.menubtn[aria-expanded="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.mb-ic { position:relative; width:16px; height:10px; flex:none; }
.mb-ic i { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .2s var(--out), top .2s var(--out); }
.mb-ic i:first-child { top:0; } .mb-ic i:last-child { top:8px; }
.menubtn[aria-expanded="true"] .mb-ic i:first-child { top:4px; transform:rotate(45deg); }
.menubtn[aria-expanded="true"] .mb-ic i:last-child { top:4px; transform:rotate(-45deg); }
.menubtn .mb-open, .menubtn[aria-expanded="true"] .mb-closed { display:none; }
.menubtn[aria-expanded="true"] .mb-open { display:inline; }

/* the menu: under the header on a phone, a sheet from the top right on a wider screen */
.menu { position:fixed; inset:64px 0 0; z-index:49; }
.menu[hidden] { display:none; }
.menu-open, .menu-open body { overflow:hidden; }
.menu-open .mbar { visibility:hidden; }
.menu-sheet { box-sizing:border-box; height:100%; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; background:var(--ink); color:var(--paper); padding:6px var(--pad) calc(22px + env(safe-area-inset-bottom)); animation:menuIn .2s var(--out) both; }
@keyframes menuIn { from { opacity:0; transform:translateY(-8px); } }
.menu-list { list-style:none; margin:0; padding:0; }
.menu-list a { display:block; padding:12px 0 13px; border-bottom:1px solid rgba(240,237,230,.13); color:var(--paper); text-decoration:none; }
.menu-list b { display:flex; align-items:center; gap:10px; font:800 25px/1.05 var(--display); letter-spacing:-.02em; }
.menu-list a > span { display:block; margin-top:5px; font-size:14px; line-height:1.35; color:#bdb7aa; }
.menu-list a[aria-current="page"] b { color:var(--accent); }
.menu-list a[aria-current="page"] b::before { content:"✦"; font-size:14px; }
@media (hover:hover) { .menu-list a:hover b { color:var(--accent); } }
.menu-list a:focus-visible { outline-color:var(--accent); outline-offset:-2px; border-radius:6px; }
.menu-contact { margin-top:auto; padding-top:22px; }
.menu-contact .btn { width:100%; }
.menu-contact .alt-contact { color:#cfc9bd; text-align:center; }
.menu-contact .alt-contact a { color:var(--paper); }
@media (min-width:761px) {
  .menu { inset:0; }
  .menu-sheet { position:absolute; top:72px; right:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); width:380px; height:auto; max-height:calc(100vh - 86px); border-radius:24px; box-shadow:0 40px 90px rgba(21,19,15,.35); padding:6px 24px 20px; }
  .menu-list a { padding:9px 0 10px; }
  .menu-list b { font-size:21px; }
  .menu-list a > span { margin-top:3px; font-size:13.5px; }
  .menu-contact { padding-top:16px; }
}

/* a page's own heading */
.pagehead { padding:clamp(44px,6vw,84px) 0 0; }
.pagehead h1 { margin-top:10px; font-weight:800; font-size:clamp(42px,6.4vw,84px); line-height:.95; letter-spacing:-.035em; text-wrap:balance; }
.pagehead + section { padding-top:clamp(28px,4vw,52px); }
.planes-page .plans { margin-top:12px; }
.sitios-page, .plataforma-page { padding-top:clamp(48px,7vw,96px); }
.page-more { margin:26px 0 0; font-size:16px; font-weight:700; }
.page-more a { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.page-more.on-ink a { color:var(--paper); }
p.wrap.page-more { margin-top:0; padding-top:clamp(32px,4vw,48px); padding-bottom:clamp(8px,2vw,16px); }

/* home, short versions of what moved */
.app-mini { padding:clamp(56px,7vw,96px) 0 0; }
.mini-head { max-width:46em; }
.mini-head .btn { margin-top:26px; }
.sitios-mini .rubio-strip { margin-top:32px; }
.planes-mini { padding-top:clamp(56px,7vw,96px); }
.pm { border-radius:28px; background:var(--card); border:1px solid var(--line); padding:clamp(22px,3.5vw,44px); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,4vw,56px); align-items:start; box-shadow:0 30px 80px rgba(21,19,15,.08); }
.pm-setup { margin:16px 0 0; font-size:15px; line-height:1.5; color:var(--ink2); }
.pm-list { list-style:none; margin:0; padding:0; }
.pm-list a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 18px; align-items:center; padding:18px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.pm-list li:last-child a { border-bottom:1px solid var(--line); }
.pm-list b { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font:700 21px/1.15 var(--display); }
.pm-list a > span { grid-column:1; font-size:14.5px; line-height:1.45; color:var(--ink2); }
.pm-list em { grid-column:2; grid-row:1 / span 2; font:800 44px/1 var(--display); font-style:normal; letter-spacing:-.04em; }
.pm-list em small { font:500 14px var(--body); letter-spacing:0; color:var(--ink3); }
.pm-list .pop em { color:var(--accent-text); }
.pm-tag { font:800 11.5px/1.3 var(--body); font-style:normal; letter-spacing:0; padding:3px 9px; border-radius:999px; background:var(--accent-deep); color:#fff; }
@media (hover:hover) { .pm-list a:hover b { color:var(--accent-text); } }
.pm-go { margin-top:22px; }
.preguntas-mini { padding-top:clamp(56px,7vw,96px); }

/* contact page */
.ways-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:14px; }
.ways-list > li { border-radius:24px; background:var(--card); border:1px solid var(--line); padding:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ways-list > li > b { font:800 24px/1.1 var(--display); letter-spacing:-.02em; }
.ways-list p { margin:0; font-size:15px; line-height:1.5; color:var(--ink2); }
.ways-list p a { color:var(--green); }
.ways-list .w-main { background:var(--green); color:var(--paper); border-color:var(--green); }
.ways-list .w-main p { color:#e4efe9; } .ways-list .w-main p a { color:#fff; }
.w-link { font:700 19px/1.25 var(--display); color:var(--ink); overflow-wrap:anywhere; }
.ways-where { margin:28px 0 0; font-size:16px; color:var(--ink2); }
.ways { padding-bottom:clamp(64px,8vw,110px); }

@media (max-width:760px) {
  .pm { grid-template-columns:minmax(0,1fr); }
  .pm-list em { font-size:34px; }
  .pm-go { width:100%; }
  .mini-head .btn { width:100%; }
  .ways-list { grid-template-columns:minmax(0,1fr); }
  .ways-list .btn { width:100%; }
}