/* Layout: graphite night with a soft silver light behind frosted-glass cards. A storefront
   window with a real example (Reverze) opens the page; everything after it is quiet
   editorial bands on a 1240px measure. Monochrome: silver is the only highlight. */
:root {
  color-scheme: dark;
  --night: #0c0b09;
  --night-2: rgba(255, 255, 255, .045);
  --night-3: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f4f1ec;
  --mute: #abaaa8;
  --dim: #8d8c8a;
  --brand: #e7e5e4;
  --brand-ink: #0b0b0c;
  --coral: #d6d2cc;
  --warm: #bdb8b1;
  --green: #7fdca0;
  --glass-blur: blur(18px) saturate(150%);
  --display: "Archivo", Arial, system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --led: "Doto", "JetBrains Mono", ui-monospace, monospace;
  --neon: "Tilt Neon", "Onest", system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r: 20px;
  --measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--night);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
/* a class that sets display (.btn, .t-total div…) must never beat the hidden attribute */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--brand); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--brand); color: var(--brand-ink);
  font-weight: 600; transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%; max-width: calc(var(--measure) + 96px); margin-inline: auto;
  padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.band + .band { border-top: 1px solid var(--line); }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 750; text-wrap: balance; font-optical-sizing: auto; }
h1 {
  font-size: clamp(44px, 7vw, 92px); line-height: .96; letter-spacing: -.028em;
  font-variation-settings: "wdth" 112; font-weight: 800;
}
h2 { font-size: clamp(34px, 4.8vw, 62px); line-height: 1; letter-spacing: -.026em; font-variation-settings: "wdth" 108; }
h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.012em; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--mute); max-width: 58ch; }
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1.4 var(--mono); text-wrap: balance; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.label.coral::before { background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.num { font-variant-numeric: tabular-nums; }
.hl { color: var(--brand); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head .lead { margin-top: 4px; }
.sec-head.split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 960px) { .sec-head.split { grid-template-columns: 1.1fr .9fr; gap: 48px; } }

.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

/* ---------- buttons & chips ---------- */
.btn {
  --b: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--b);
  font: 600 16px/1.2 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--text);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { --b: var(--brand); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn.primary { background: var(--brand); --b: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { box-shadow: 0 0 0 4px rgba(231, 229, 228, .16), 0 14px 40px -10px rgba(231, 229, 228, .75); }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn .i { width: 20px; height: 20px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; text-decoration: none;
  padding-block: 8px;
}
.link-arrow .i { transition: transform .4s var(--ease); }
.link-arrow:hover .i { transform: translateX(4px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 14px; color: var(--mute); background: rgba(20, 19, 17, .6);
}
.chip .i { width: 17px; height: 17px; color: var(--brand); }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 50; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px);
  transform: translateX(-50%); width: min(calc(100% - 24px), 1120px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(16, 15, 13, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled { background: rgba(14, 13, 11, .88); border-color: var(--line-2); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; padding-block: 8px; }
.brand .brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.brand b { font: 700 16px/1 var(--display); letter-spacing: -.01em; }
.brand span { font: 500 12px/1 var(--mono); color: var(--dim); letter-spacing: .06em; }
.nav-links { display: none; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; color: var(--mute);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav-links a[aria-current="true"] { color: var(--text); background: rgba(231, 229, 228, .1); }
.nav-cta { display: none; }
.menu-btn {
  position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; cursor: pointer;
}
.menu-btn span {
  position: absolute; left: 15px; right: 15px; height: 1.5px; border-radius: 2px; background: var(--text);
  transition: transform .6s var(--ease), top .6s var(--ease);
}
.menu-btn span:nth-child(1) { top: 19px; }
.menu-btn span:nth-child(2) { top: 27px; }
.menu-open .menu-btn span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { top: 23px; transform: rotate(-45deg); }
@media (min-width: 1020px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }
}
@media (max-width: 420px) { .brand span { display: none; } }

.sheet {
  position: fixed; inset: 0; z-index: 40; display: grid; align-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) max(24px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 40px) max(24px, env(safe-area-inset-left, 0px));
  background: rgba(11, 10, 8, .9); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu-open .sheet { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sheet a:not(.btn) {
  display: block; padding: 10px 0; text-decoration: none;
  font: 750 clamp(36px, 10vw, 54px)/1.05 var(--display); letter-spacing: -.02em;
  opacity: 0; transform: translateY(40px); transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.menu-open .sheet a:not(.btn) { opacity: 1; transform: none; }
.sheet li:nth-child(2) a { transition-delay: .05s; }
.sheet li:nth-child(3) a { transition-delay: .1s; }
.sheet li:nth-child(4) a { transition-delay: .15s; }
.sheet li:nth-child(5) a { transition-delay: .2s; }
.sheet li:nth-child(6) a { transition-delay: .25s; }
.sheet .btn { margin-top: 28px; justify-self: start; }

/* ---------- hero ---------- */
.hero { padding-top: calc(env(safe-area-inset-top, 0px) + 128px); padding-bottom: clamp(64px, 8vw, 110px); position: relative; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 34% at 76% 30%, rgba(214, 210, 204, .13), transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 45%, rgba(231, 229, 228, .08), transparent 70%);
}
.hero-grid { display: grid; gap: clamp(48px, 6vw, 72px); align-items: center; position: relative; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1.02fr; } }
.hero-copy { display: grid; gap: 26px; justify-items: start; min-width: 0; }
.hero-copy h1 { max-width: 12ch; }
.hero-copy h1 em { font-style: normal; color: var(--brand); text-shadow: 0 0 28px rgba(231, 229, 228, .35); }
.hw > * { display: inline-block; }
.hero-copy .lead { max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* storefront window */
.vitrina { position: relative; min-width: 0; padding-top: 58px; }
.sign {
  --on: 1;
  position: absolute; z-index: 8; top: 0; left: 50%; transform: translateX(-50%);
  padding: .16em .6em .2em; border-radius: 16px; border: 2px solid #363533;
  font: 400 clamp(28px, 3.3vw, 44px)/1.15 var(--neon); letter-spacing: .09em; color: #403f3d;
  background: rgba(11, 10, 8, .82); white-space: nowrap;
}
.sign::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #f4f1ec; opacity: var(--on);
  box-shadow: 0 0 5px var(--brand), 0 0 16px rgba(231, 229, 228, .75), 0 0 42px rgba(231, 229, 228, .35), inset 0 0 10px rgba(231, 229, 228, .55);
}
.sign-lit {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: var(--on); color: #ffffff;
  text-shadow: 0 0 3px #fff6, 0 0 10px var(--coral), 0 0 24px var(--coral), 0 0 52px rgba(214, 210, 204, .65);
}
.sign-wire { position: absolute; top: -58px; width: 1px; height: 58px; background: linear-gradient(transparent, #42413f); }
.sign-wire.l { left: 18%; } .sign-wire.r { right: 18%; }
.sign.buzz .sign-lit, .sign.buzz::before { animation: buzz 9s steps(1) infinite 3s; }
@keyframes buzz { 0%, 91%, 93.5%, 100% { opacity: 1; } 92% { opacity: .25; } 93% { opacity: .8; } }

.window {
  position: relative; aspect-ratio: 16 / 11.2; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 62%, #1f1e1c 0%, #141311 55%, #0f0e0c 100%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 8px #151412, 0 0 0 9px var(--line), 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.window .interior {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 70%, rgba(189, 184, 177, .22), transparent 70%);
}
.window .floor { position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.laptop { position: absolute; left: 6%; top: 13%; width: 72%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.laptop .scr { position: relative; aspect-ratio: 16 / 10; border-radius: 12px 12px 3px 3px; border: 7px solid #090806; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #32312f; }
.laptop .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop .base { height: 11px; margin-inline: -7%; border-radius: 2px 2px 12px 12px; background: linear-gradient(#42413f, #1f1e1c 60%, #12110f); box-shadow: 0 1px 0 #535250 inset; }
.glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 42%, transparent 50%, transparent 62%, rgba(255, 255, 255, .04) 66%, transparent 72%);
  transform: translateX(var(--gx, 0));
}
.shutter { display: none; }
.intro .shutter {
  display: block; position: absolute; inset: 0; z-index: 7; border-bottom: 7px solid #646361;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3)),
    repeating-linear-gradient(180deg, #444341 0 10px, #2e2d2b 10px 12px, #555452 12px 13px, #3c3b39 13px 20px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .65);
  animation: shutter-up 1.6s cubic-bezier(.65, 0, .25, 1) .7s both;
}
.shutter::after {
  content: ""; position: absolute; left: 50%; bottom: 16px; width: 72px; height: 9px; transform: translateX(-50%);
  border-radius: 5px; background: #1c1b19; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 rgba(0, 0, 0, .4);
}
.notif {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; max-width: 58%;
  padding: 9px 13px 9px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(19, 18, 16, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; line-height: 1.3; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .8);
}
.notif b { display: block; font-weight: 600; font-size: 13px; }
.notif small { color: var(--mute); font-size: 12px; }
.notif .dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(231, 229, 228, .12); color: var(--brand); }
.notif .dot.c { background: rgba(214, 210, 204, .14); color: var(--coral); }
.notif .dot.g { background: rgba(127, 220, 160, .13); color: var(--green); }
.notif .dot .i { width: 17px; height: 17px; }
.notif.n1 { left: 4%; top: 6%; }
.notif.n2 { right: 3%; top: 30%; }
.notif.n3 { left: 10%; bottom: 7%; }
.ledline {
  margin-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 800 15px/1 var(--led); letter-spacing: .14em; color: var(--coral); text-shadow: 0 0 8px rgba(214, 210, 204, .6);
}
.ledline span:last-child { color: var(--brand); text-shadow: 0 0 8px rgba(231, 229, 228, .5); }
@media (max-width: 640px) {
  .vitrina { padding-top: 48px; }
  .window { aspect-ratio: 4 / 4.4; }
  .laptop { left: -14%; top: 18%; width: 92%; }
  .notif.n2 { display: none; }
  .notif { max-width: 70%; }
  .notif.n1 { left: 4%; top: 4%; }
  .notif.n3 { left: 4%; bottom: 5%; }
  .ledline { font-size: 13px; }
}

/* ---------- LED board ---------- */
.board {
  position: relative; overflow: hidden; border-block: 1px solid var(--line);
  background: #090806; padding-block: 18px;
}
.board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 1.1px, rgba(9, 8, 6, .55) 1.3px) 0 0 / 5px 5px;
}
.board-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.board-track p {
  display: flex; gap: 28px; padding-right: 28px; white-space: nowrap;
  font: 800 clamp(22px, 3vw, 34px)/1 var(--led); letter-spacing: .12em; color: var(--coral);
  text-shadow: 0 0 10px rgba(214, 210, 204, .7);
}
.board-track p span:nth-child(3n + 2) { color: var(--brand); text-shadow: 0 0 10px rgba(231, 229, 228, .6); }
.board-track p span:nth-child(3n) { color: var(--warm); text-shadow: 0 0 10px rgba(189, 184, 177, .55); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- problem / solution ---------- */
.versus { display: grid; gap: 28px; }
@media (min-width: 900px) { .versus { grid-template-columns: 1fr 1fr; gap: 40px; } }
.vs-col { display: grid; gap: 20px; justify-items: center; min-width: 0; }
.vs-col > header { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.vs-col > header h3 { font-size: 20px; }
.vs-col > header .tag { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.vs-col.before .tag { color: var(--coral); background: rgba(214, 210, 204, .1); }
.vs-col.after .tag { color: var(--brand); background: rgba(231, 229, 228, .1); }
.mini-phone {
  width: min(320px, 100%); aspect-ratio: 9 / 16.5; border-radius: 34px; border: 6px solid #090806;
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 60px -30px rgba(0, 0, 0, .9); background: #0d0c0a; overflow: hidden; position: relative;
}
.dm-head { display: flex; align-items: center; gap: 10px; padding: 34px 16px 12px; border-bottom: 1px solid #201f1d; }
.dm-head .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3c3b39, #2c2b29); }
.dm-head b { font-size: 14px; display: block; }
.dm-head small { font-size: 11px; color: var(--dim); }
.dm-list { display: grid; gap: 8px; padding: 14px; align-content: start; }
.bub {
  justify-self: start; max-width: 80%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #232220; font-size: 13.5px; line-height: 1.35;
}
.bub small { display: block; margin-top: 2px; color: var(--dim); font-size: 10.5px; }
.dm-list .unread {
  justify-self: center; margin-top: 6px; font: 600 11px/1 var(--mono); color: var(--coral); letter-spacing: .08em;
  padding: 7px 10px; border-radius: 999px; background: rgba(214, 210, 204, .1);
}
.mini-phone .shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.order-pop {
  position: absolute; left: 10px; right: 10px; bottom: 12px; padding: 12px; border-radius: 16px;
  background: rgba(24, 23, 21, .92); border: 1px solid rgba(127, 220, 160, .35); font-size: 12.5px; line-height: 1.4;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.order-pop b { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; margin-bottom: 4px; }
.order-pop b .i { width: 16px; height: 16px; }
.vs-points { display: grid; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .vs-points { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.vs-points li { list-style: none; padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--night-2); display: grid; gap: 8px; }
.vs-points ul { margin: 0; padding: 0; }
.vs-points .i { width: 26px; height: 26px; color: var(--brand); }
.vs-points b { font: 700 19px/1.2 var(--display); }
.vs-points p { color: var(--mute); font-size: 15.5px; }

/* ---------- work ---------- */
.case { display: grid; gap: 28px; }
.case + .case { margin-top: clamp(80px, 10vw, 140px); }
.case-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.case-head h3 { font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13px/1.4 var(--mono); color: var(--mute); letter-spacing: .04em; }
.case-meta span { white-space: nowrap; }
.story { display: grid; gap: 40px; }
.steps { display: grid; gap: 18px; counter-reset: s; }
.step { padding: 26px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--night-2); display: grid; gap: 12px; transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.step .k { font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.step h4 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.015em; }
.step p { color: var(--mute); }
.step ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15.5px; }
.step li { display: flex; gap: 9px; align-items: flex-start; }
.step li .i { color: var(--brand); width: 18px; height: 18px; margin-top: 3px; }
.step-media { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.step-media img { width: 100%; }
.step-media.duo { display: grid; grid-template-columns: 1fr .42fr; gap: 10px; border: 0; background: none; align-items: start; }
.step-media.duo img { border-radius: 12px; border: 1px solid var(--line); }
.step-media.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; background: none; }
.step-media.stories img, .step-media.stories video { border-radius: 12px; border: 1px solid var(--line); width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.stage { display: none; }
/* one step at a time, chosen with the tabs or the arrows (no scroll-driven stage) */
.case-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--mute); font: 500 15px/1 var(--body); cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.tabs [role="tab"] span { font: 600 12px/1 var(--mono); color: var(--dim); letter-spacing: .08em; }
.tabs [role="tab"]:hover { color: var(--text); border-color: var(--line-2); }
.tabs [role="tab"][aria-selected="true"] { color: var(--night); background: var(--text); border-color: var(--text); }
.tabs [role="tab"][aria-selected="true"] span { color: var(--night); }
.tab-arrows { display: flex; align-items: center; gap: 10px; }
.tab-arrows .arrow {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--text); cursor: pointer; transition: background-color .3s var(--ease), transform .2s var(--ease);
}
.tab-arrows .arrow:hover { background: var(--night-2); }
.tab-arrows .arrow:active { transform: scale(.94); }
.tab-arrows .arrow .i { width: 20px; height: 20px; }
.tab-arrows .prev .i { transform: rotate(180deg); }
.tab-count { font: 500 13px/1 var(--mono); color: var(--dim); min-width: 4.5ch; text-align: center; }
.tab-count b { color: var(--text); font-weight: 600; }
.case > *, .story > *, .case-nav > * { min-width: 0; }
@media (max-width: 639px) {
  .case-nav { flex-wrap: nowrap; }
  .tabs [role="tab"] { width: 44px; padding: 0; justify-content: center; }
  .tabs [role="tab"] span { font-size: 13px; }
  .tabs .tn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab-arrows { gap: 6px; }
}
.js .step:not(.on) { display: none; }
.step.on { animation: step-in .5s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }
.steps { touch-action: pan-y; }
@media (min-width: 1024px) {
  .story { grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; }
  .steps { min-height: 520px; align-content: center; }
  .step { border: 0; background: none; border-radius: 0; padding: 0 0 0 28px; border-left: 2px solid var(--brand); }
  .step .step-media { display: none; }
  .stage { display: block; position: relative; height: 520px; }
  .stage .frame { position: absolute; inset: 0; opacity: 0; transform: scale(.97); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
  .stage .frame.on { opacity: 1; transform: none; pointer-events: auto; }
  .stage .laptop { left: 0; top: 30px; width: 84%; }
}
.case.bio .bio-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .case.bio .bio-grid { grid-template-columns: 1.25fr .75fr; gap: 56px; } }
.bio-shot { position: relative; padding-bottom: 8%; }
.bio-shot .laptop { position: relative; left: 0; top: 0; width: 86%; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--mute); }
.feature-list li b { color: var(--text); font-weight: 600; }
.feature-list .i { color: var(--brand); width: 20px; height: 20px; margin-top: 3px; }

/* ---------- tagline ---------- */
.tagline { padding-block: clamp(110px, 16vw, 220px); }
.tagline p {
  font: 750 clamp(34px, 5.6vw, 76px)/1.04 var(--display); letter-spacing: -.028em; max-width: 19ch; text-wrap: balance;
  font-variation-settings: "wdth" 108;
}
.tagline .w { color: rgba(241, 236, 227, .26); transition: color .5s var(--ease), text-shadow .5s var(--ease); }
.tagline .w.lit { color: var(--text); }
.tagline .w.neon.lit { color: #ffffff; text-shadow: 0 0 10px var(--coral), 0 0 30px rgba(214, 210, 204, .6); }
.no-split .tagline .w { color: var(--text); }

/* ---------- services ---------- */
.svc-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-col { border: 1px solid var(--line); border-radius: var(--r); background: var(--night-2); padding: 26px 24px; display: grid; gap: 18px; align-content: start; }
.svc-col > h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.svc-col > h3 .i { color: var(--coral); width: 24px; height: 24px; }
.svc { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.svc .i { grid-row: span 2; width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.svc b { font-weight: 600; font-size: 16.5px; }
.svc p { color: var(--mute); font-size: 15px; line-height: 1.5; }

/* ---------- pricing ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filters button {
  padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  font-size: 15px; color: var(--mute); transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.filters button:hover { color: var(--text); border-color: var(--dim); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--night); border-color: var(--text); }
.filters .fd { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; background: var(--brand); box-shadow: 0 0 8px rgba(231, 229, 228, .8); }
.filters [data-f="vender"] .fd { background: var(--coral); box-shadow: 0 0 8px rgba(214, 210, 204, .8); }
.filters [data-f="agendar"] .fd { background: var(--warm); box-shadow: 0 0 8px rgba(189, 184, 177, .8); }
.filters [data-f="marca"] .fd { background: #f4efe6; box-shadow: 0 0 8px rgba(244, 239, 230, .7); }
.plans { display: grid; gap: 16px; }
.plans::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
/* each package has its own light: basic = silver, complete = pale, catalogue = stone */
.plan {
  --mx: 50%; --my: 0%; --accent: var(--brand); --accent-rgb: 231, 229, 228;
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 22px 22px; border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .045), transparent 38%), var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 28px 50px -36px rgba(0, 0, 0, .9);
  transition: border-color .4s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
}
.plan[data-cat="vender"] { --accent: var(--coral); --accent-rgb: 214, 210, 204; }
.plan[data-cat="agendar"] { --accent: var(--warm); --accent-rgb: 189, 184, 177; }
.plan.custom { --accent: var(--mute); --accent-rgb: 174, 170, 163; }
.plan::after {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 0 0 3px 3px; background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .9), 0 0 30px rgba(var(--accent-rgb), .45);
}
.plan::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .1), transparent 60%);
}
.plan:hover { border-color: rgba(var(--accent-rgb), .35); }
.plan:hover::before { opacity: 1; }
@media (hover: hover) {
  .plan:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 36px 60px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--accent-rgb), .12); }
}
.plan.hot { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .11), transparent 46%), var(--night-2); }
.plan.hot::after { left: 0; right: 0; height: 3px; border-radius: 0; }
.plan[hidden] { display: none; }
.plan .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plan h3 { font-size: 24px; }
.plan .badge { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); white-space: nowrap; }
.plan .price strong sup { color: var(--accent); }
.plan .for { color: var(--mute); font-size: 15px; line-height: 1.45; min-height: 3em; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price strong { font: 800 46px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.price strong sup { font-size: .45em; vertical-align: .9em; margin-right: 2px; letter-spacing: 0; color: var(--mute); }
.price span { color: var(--dim); font-size: 14px; }
.plan .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 13px/1.3 var(--mono); color: var(--mute); }
.plan .meta span { display: inline-flex; align-items: center; gap: 6px; }
.plan .meta .i { width: 16px; height: 16px; color: var(--accent); }
.plan ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 15px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 9px; align-items: flex-start; }
.plan li .i { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.price strong.word { font-size: 34px; letter-spacing: -.02em; }
.plan .eg { font-size: 14px; color: var(--mute); }
.plan .eg a { color: var(--text); text-underline-offset: 3px; }
.plan .btn { width: 100%; }
.plans-foot a { text-wrap: balance; }
.plans-foot { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: center; font-size: 15.5px; }
.plans-foot .combo { display: flex; gap: 12px; align-items: flex-start; color: var(--mute); max-width: 62ch; }
.plans-foot .combo .i { width: 22px; height: 22px; color: var(--coral); margin-top: 1px; }
.plans-foot .combo b { color: var(--text); font-weight: 600; }
.plan[data-cat="marca"] { --accent: #f4efe6; --accent-rgb: 244, 239, 230; }
.custom-band {
  margin-top: 28px; display: grid; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r); border: 1px dashed var(--line-2);
}
@media (min-width: 900px) { .custom-band { grid-template-columns: 1fr auto; gap: 48px; } }
.custom-band > div:first-child { display: grid; gap: 12px; justify-items: start; }
.custom-band h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.015em; }
.custom-band p:not(.price) { color: var(--mute); max-width: 62ch; }
.custom-cta { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 900px) { .custom-cta { justify-items: end; } }

.extras { margin-top: clamp(56px, 7vw, 88px); }
.extras h3 { margin-bottom: 18px; }
.extra-list { display: grid; gap: 10px; }
@media (min-width: 720px) { .extra-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .extra-list { grid-template-columns: repeat(3, 1fr); } }
.extra { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--night-2); min-width: 0; }
.extra .i { width: 22px; height: 22px; color: var(--coral); }
.extra div { flex: 1; min-width: 0; }
.extra b { display: block; font-weight: 600; font-size: 15.5px; }
.extra small { color: var(--dim); font-size: 13.5px; }
.extra .p { font: 700 18px/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* builder */
.builder { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: 24px; }
@media (min-width: 1024px) { .builder { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; } }
.b-panel { border: 1px solid var(--line); border-radius: 24px; background: var(--night-2); padding: clamp(20px, 3vw, 32px); display: grid; gap: 28px; min-width: 0; }
.b-panel fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.b-panel legend { font: 700 18px/1.2 var(--display); margin-bottom: 12px; padding: 0; }
.b-panel legend small { font: 400 14px/1.4 var(--body); color: var(--dim); margin-left: 6px; }
.opts { display: grid; gap: 8px; }
@media (min-width: 560px) { .opts.two { grid-template-columns: 1fr 1fr; } }
.opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease); min-width: 0; }
.opt:hover { border-color: var(--line-2); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid var(--dim); display: grid; place-items: center; transition: all .3s var(--ease); }
.opt input[type="radio"] + .box { border-radius: 50%; }
.opt .box::after { content: ""; width: 10px; height: 10px; border-radius: inherit; background: var(--brand-ink); transform: scale(0); transition: transform .3s var(--ease); }
.opt input:checked + .box { background: var(--brand); border-color: var(--brand); }
.opt input:checked + .box::after { transform: scale(1); }
.opt input:focus-visible + .box { outline: 2px solid var(--brand); outline-offset: 3px; }
.opt:has(input:checked) { border-color: rgba(231, 229, 228, .5); background: rgba(231, 229, 228, .05); }
.opt span.t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.opt span.t small { display: block; color: var(--dim); font-size: 13px; }
.opt .p { font: 600 14px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.ticket {
  position: relative; border-radius: 24px; padding: 28px clamp(20px, 3vw, 30px); background: #f3efe7; color: #171614; display: grid; gap: 16px; min-width: 0;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
@media (min-width: 1024px) { .ticket { position: sticky; top: 110px; } }
/* on phones the ticket sits after ~30 options: a small sticky total keeps the price in view */
.mini-total {
  position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 16px; background: #f3efe7; color: #171614; text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8);
}
.mini-total strong { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.mini-total .go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.mini-total .go .i { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 1024px) { .mini-total { display: none; } }
.ticket h3 { font-size: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ticket h3 span { font: 600 11px/1 var(--mono); letter-spacing: .12em; color: #656462; text-transform: uppercase; }
.t-lines { list-style: none; margin: 0; padding: 14px 0; border-block: 1.5px dashed #c4c3c1; display: grid; gap: 9px; font-size: 15px; min-height: 60px; }
.t-lines li { display: flex; justify-content: space-between; gap: 16px; }
.t-lines li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.t-lines li.sub { color: #656462; font-size: 14px; }
.t-total { display: grid; gap: 8px; }
.t-total div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.t-total .big strong { font: 800 40px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.t-total .row { font-size: 15px; color: #42413f; }
.t-total .row b { font-variant-numeric: tabular-nums; color: #171614; }
.t-note { font-size: 13.5px; color: #656462; line-height: 1.45; }
.ticket .btn.primary { background: #171614; color: #f3efe7; --b: #171614; }
.ticket .btn.primary:hover { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.ticket .btn.ghost { --b: #c4c3c1; color: #171614; }
.ticket .btn.ghost:hover { --b: #171614; }
.t-actions { display: grid; gap: 8px; }
@media (min-width: 420px) { .t-actions { grid-template-columns: 1fr auto; } }
.toast { font-size: 14px; color: #0b6b3a; min-height: 1.4em; }

/* ---------- maintenance ---------- */
.mx-intro { display: grid; gap: 24px; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 960px) { .mx-intro { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }
/* three plans compared row by row: on wide screens each card is a subgrid, so the same
   feature sits on the same line in all three even when one value wraps */
.mx-plans { display: grid; gap: 16px; }
.mx {
  display: flex; flex-direction: column; padding: 26px 24px 18px; border-radius: var(--r); border: 1px solid var(--line); min-width: 0;
  background: var(--night-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 28px 50px -36px rgba(0, 0, 0, .9);
}
.mx.hot {
  border-color: rgba(231, 229, 228, .5); background: linear-gradient(180deg, rgba(231, 229, 228, .08), transparent 42%), var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(231, 229, 228, .12), 0 30px 60px -34px rgba(0, 0, 0, .95);
}
.mx h3 { font-size: 24px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mx .price { margin-top: 14px; }
.mx .price span small { display: block; font-size: 13px; color: var(--dim); }
.mx .who { color: var(--mute); font-size: 15px; margin: 10px 0 16px; }
.mx dl { margin: 0; display: grid; border-top: 1px solid var(--line); }
.mx dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mx dl > div:last-child { border-bottom: 0; }
.mx dt { color: var(--mute); font-size: 14.5px; line-height: 1.4; }
.mx dd { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.4; text-align: right; max-width: 16ch; }
.mx dd.no { color: var(--dim); font-weight: 400; }
@media (min-width: 900px) {
  .mx-plans { grid-template-columns: repeat(3, 1fr); row-gap: 0; }
  .mx { display: grid; grid-row: span 12; grid-template-rows: subgrid; row-gap: 0; }
  .mx dl { grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; }
}
.small-change { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 16px; }
@media (min-width: 900px) { .small-change { grid-template-columns: 1fr 1fr 1fr; } }
.sc { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.sc h4 { font-size: 19px; display: flex; gap: 10px; align-items: center; }
.sc h4 .i { width: 22px; height: 22px; }
.sc.yes h4 .i { color: var(--green); }
.sc.no h4 .i { color: var(--coral); }
.sc.terms h4 .i { color: var(--brand); }
.sc ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--mute); font-size: 15.5px; }
.sc p { color: var(--dim); font-size: 14.5px; }
.mx-bottom { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 16px; }
@media (min-width: 1024px) { .mx-bottom { grid-template-columns: .8fr 1.2fr; } }
.noplan { border: 1px dashed var(--line-2); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.noplan h4 { font-size: 19px; }
.noplan p { color: var(--mute); font-size: 15.5px; }
.mx-bottom .month { margin-top: 0; }
@media (min-width: 900px) { .mx-bottom .month ol { grid-template-columns: repeat(2, 1fr); } }
.opt-note { margin-top: 12px; display: flex; gap: 8px; align-items: center; color: var(--mute); font-size: 14.5px; }
.opt-note .i { width: 18px; height: 18px; color: var(--warm); flex: none; }
.month { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); background: var(--night-2); display: grid; gap: 18px; }
.month h4 { font-size: 19px; }
.month ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .month ol { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.month li { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--line-2); }
.month li b { font: 800 14px/1 var(--led); letter-spacing: .12em; color: var(--brand); }
.month li span { color: var(--mute); font-size: 15px; }

/* ---------- process ---------- */
.proc { display: grid; gap: 40px; }
@media (min-width: 1024px) { .proc { grid-template-columns: 1.3fr .7fr; gap: 56px; align-items: start; } }
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; display: grid; gap: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.motion .timeline::after {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; transform-origin: top; transform: scaleY(var(--p, 0));
  background: linear-gradient(var(--brand), var(--coral)); box-shadow: 0 0 12px rgba(231, 229, 228, .5);
}
.timeline > li { position: relative; display: grid; gap: 10px; }
.timeline > li::before {
  content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--night); border: 2px solid var(--brand); box-shadow: 0 0 10px rgba(231, 229, 228, .6);
}
.motion .timeline > li::before { border-color: var(--line-2); box-shadow: none; transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease); }
.motion .timeline > li.passed::before { border-color: var(--brand); background: #201f1d; box-shadow: 0 0 12px rgba(231, 229, 228, .7); }
.timeline .day { font: 800 15px/1 var(--led); letter-spacing: .14em; color: var(--coral); text-shadow: 0 0 8px rgba(214, 210, 204, .5); }
.timeline h3 { font-size: clamp(22px, 2.2vw, 27px); }
.timeline .who { display: grid; gap: 6px; font-size: 15.5px; color: var(--mute); }
.timeline .who b { color: var(--text); font-weight: 600; }
.timeline .gets { justify-self: start; }
.need { border: 1px solid var(--line); border-radius: 24px; background: var(--night-2); padding: clamp(22px, 3vw, 30px); display: grid; gap: 18px; }
@media (min-width: 1024px) { .need { position: sticky; top: 110px; } }
.need h3 { font-size: 22px; }
.need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.need li { display: flex; gap: 12px; align-items: flex-start; }
.need li .i { width: 22px; height: 22px; color: var(--brand); margin-top: 1px; }
.need p { color: var(--mute); font-size: 15px; }

/* ---------- always included ---------- */
.always { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px) { .always { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .always { grid-template-columns: repeat(4, 1fr); } }
.always div { background: var(--night); padding: 24px 22px; display: grid; gap: 8px; align-content: start; }
.always .i { width: 26px; height: 26px; color: var(--coral); }
.always b { font: 700 18px/1.2 var(--display); }
.always p { color: var(--mute); font-size: 15px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font: 650 clamp(18px, 1.7vw, 21px)/1.3 var(--display); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; width: 22px; height: 22px; flex: none; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; border-radius: 2px; background: var(--brand); transition: transform .5s var(--ease); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0); }
.faq .ans { padding: 0 0 24px; color: var(--mute); max-width: 72ch; display: grid; gap: 10px; }
.faq-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; } }

/* ---------- final cta ---------- */
.final { text-align: left; overflow: clip; }
.final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 20% 0%, rgba(214, 210, 204, .12), transparent 70%), radial-gradient(ellipse 40% 40% at 90% 100%, rgba(231, 229, 228, .08), transparent 70%);
}
.final-grid { position: relative; display: grid; gap: 40px; }
@media (min-width: 1024px) { .final-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.final .sign { position: relative; left: 0; transform: none; display: inline-block; margin-bottom: 30px; }
.final h2 { max-width: 14ch; }
.final .lead { margin-top: 18px; }
.qform { border: 1px solid var(--line); border-radius: 24px; background: var(--night-2); padding: clamp(20px, 3vw, 30px); display: grid; gap: 22px; }
.qform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.qform legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14.5px; color: var(--mute); cursor: pointer; transition: all .3s var(--ease); }
.pills span:hover { color: var(--text); border-color: var(--dim); }
.pills input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pills input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--night); color: var(--text); font: 400 16px/1.4 var(--body);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(231, 229, 228, .18); }
.field .err { color: var(--coral); font-size: 14px; min-height: 1.2em; }
.contact-alt { display: flex; flex-wrap: wrap; gap: 10px; }

/* message sheet */
.msg-dialog { width: min(560px, calc(100% - 32px)); border: 1px solid var(--line-2); border-radius: 22px; padding: 0; background: var(--night-2); color: var(--text); }
.msg-dialog::backdrop { background: rgba(8, 7, 5, .7); backdrop-filter: blur(6px); }
.msg-dialog[open] { animation: pop .45s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.msg-dialog .in { padding: 24px; display: grid; gap: 16px; }
.msg-dialog h3 { font-size: 22px; }
.msg-dialog pre { margin: 0; white-space: pre-wrap; font: 400 14.5px/1.5 var(--mono); padding: 16px; border-radius: 14px; background: var(--night); border: 1px solid var(--line); max-height: 46vh; overflow: auto; }
.msg-dialog .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 48px calc(env(safe-area-inset-bottom, 0px) + 40px); color: var(--mute); font-size: 15px; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { text-decoration: none; display: inline-block; padding-block: 6px; }
.foot .brand { display: inline-flex; } /* .foot a would leave the logo and the name on different lines' baselines */
.foot a:hover { color: var(--text); }
.foot small { display: block; margin-top: 28px; color: var(--dim); font-size: 13px; line-height: 1.6; }

/* ---------- small pieces ---------- */
.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; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
main section[id], main article[id] { scroll-margin-top: 96px; }
.sec-head.split > div:first-child, .mx-intro > div:first-child { display: grid; gap: 18px; justify-items: start; }
.mx-copy { display: grid; gap: 16px; }
.mx-copy p:not(.lead) { color: var(--mute); }
.bio-copy { display: grid; gap: 24px; }
.eg-line { color: var(--mute); font-size: 15.5px; }
.eg-line a { color: var(--text); text-underline-offset: 3px; }
.faq-grid .sec-head { align-content: start; margin-bottom: 0; }
.final .contact-alt { margin-top: 28px; }
.next-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; max-width: 46ch; }
.next-steps li { position: relative; display: grid; gap: 4px; padding: 0 0 22px 30px; }
.next-steps li::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--brand); background: var(--night); box-shadow: 0 0 10px rgba(231, 229, 228, .55);
}
.next-steps li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 20px; bottom: 2px; width: 1px; background: var(--line-2); }
.next-steps li:last-child { padding-bottom: 0; }
.next-steps b { font: 800 14px/1.2 var(--led); letter-spacing: .14em; color: var(--coral); text-transform: uppercase; }
.next-steps span { color: var(--mute); font-size: 16px; }
.next-steps + .free { margin-top: 26px; display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 15.5px; }
.free .i { width: 20px; height: 20px; color: var(--green); }
.field label small { color: var(--dim); font-weight: 400; }
.foot-grid p { margin-top: 14px; max-width: 38ch; }
.msg-dialog p { color: var(--mute); }
.b-panel > div:first-child { display: grid; gap: 14px; justify-items: start; }
.b-panel h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; }
.mx .badge { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(231, 229, 228, .4); white-space: nowrap; }
.step .cap { font: 500 12px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; }
.stage .float-card {
  position: absolute; right: 0; bottom: 0; width: 34%; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: 0 30px 60px -18px #000, 0 0 0 6px rgba(14, 13, 11, .7);
}
.split-w { display: inline-block; }
.board.off .board-track { animation-play-state: paused; }

/* ---------- Lenis, the only smooth-scroll engine (fine pointers, motion allowed) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- hero intro: pure CSS so the first paint is already the closed shop.
   html.intro is set by the first script in <body>, never under reduced motion. ---------- */
@keyframes shutter-up {
  0% { transform: translateY(0); }
  12% { transform: translateY(-5%); }
  22% { transform: translateY(-3.6%); }
  100% { transform: translateY(-103%); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes word-up { from { opacity: 0; transform: translateY(.42em) rotate(2.5deg); } }
@keyframes flick { 0% { opacity: 0; } 8% { opacity: .9; } 13% { opacity: .1; } 27% { opacity: 1; } 33% { opacity: .2; } 46%, 100% { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes lights-on { from { opacity: .15; } }
.intro .hw > * { animation: word-up .95s var(--ease-out) both; animation-delay: calc(.12s + var(--n, 0) * .07s); }
.intro .hero-copy > :not(h1) { animation: rise .9s var(--ease-out) both; }
.intro .hero-copy > :nth-child(1) { animation-delay: .05s; }
.intro .hero-copy > :nth-child(3) { animation-delay: .55s; }
.intro .hero-copy > :nth-child(4) { animation-delay: .66s; }
.intro .hero-copy > :nth-child(5) { animation-delay: .77s; }
.intro .vitrina { animation: rise 1.1s var(--ease-out) .15s both; }
.intro .vitrina .sign::before, .intro .vitrina .sign-lit { animation: flick 1.1s steps(1, end) 2s both; }
.intro .vitrina .interior { animation: lights-on 1.6s ease-out 1.1s both; }
.intro .hero::before { animation: lights-on 1.4s ease-out 2s both; }
.intro .notif { animation: pop-in .7s var(--ease-out) both; }
.intro .notif.n1 { animation-delay: 2.25s; }
.intro .notif.n2 { animation-delay: 2.6s; }
.intro .notif.n3 { animation-delay: 2.95s; }
.intro .ledline span { animation: flick .9s steps(1, end) 2.5s both; }

@media (prefers-reduced-motion: reduce) {
  .board-track { animation: none; }
  .sign.buzz .sign-lit, .sign.buzz::before { animation: none; }
  .sheet a:not(.btn) { transition: none; }
}

/* ---------- simple pricing (three packages) ---------- */
.plan .price strong { font-size: 54px; }
.inc { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--mute); font-size: 15px; }
.inc li { display: inline-flex; align-items: center; gap: 8px; }
.inc .i { width: 18px; height: 18px; color: var(--green); }
.more { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 16px; }
@media (min-width: 900px) { .more { grid-template-columns: 1fr 1fr; } }
.more > div { border-radius: var(--r); padding: clamp(22px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.more h3 { font-size: 22px; }
.more-big { border: 1px dashed var(--line-2); justify-items: start; }
.more-big > p:not(.price) { color: var(--mute); }
.more-big .price .from { color: var(--dim); font-size: 14px; margin-right: 6px; }
.more-extras { border: 1px solid var(--line); background: var(--night-2); }
.more-extras ul { list-style: none; margin: 0; padding: 0; display: grid; }
.more-extras li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.more-extras li:last-child { border-bottom: 0; }
.more-extras b { font: 600 15px/1.4 var(--mono); color: var(--text); white-space: nowrap; }

.care { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .care { grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; } }
.care-head { display: grid; gap: 12px; align-content: center; justify-items: start; padding-right: 12px; }
.care-head h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; text-wrap: balance; }
.care-head p { color: var(--mute); }
.care-opt { border: 1px solid var(--line); border-radius: var(--r); background: var(--night-2); padding: 24px; display: grid; gap: 10px; align-content: start; }
.care-opt h4 { font-size: 19px; }
.care-opt .price strong { font-size: 40px; }
.care-opt > p:last-child { color: var(--mute); font-size: 15.5px; }
.care-opt.rec { border-color: rgba(231, 229, 228, .45); background: linear-gradient(180deg, rgba(231, 229, 228, .07), transparent 50%), var(--night-2); }
.care-opt.rec .price sup { color: var(--brand); }

/* ---------- four-step process ---------- */
.four { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: f; }
@media (min-width: 640px) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .four { grid-template-columns: repeat(4, 1fr); } }
.four li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--night-2); }
.four li::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: var(--coral); box-shadow: 0 0 10px rgba(214, 210, 204, .7); border-radius: 0 0 3px 3px; }
.four .day { font: 800 15px/1 var(--led); letter-spacing: .14em; color: var(--coral); text-shadow: 0 0 8px rgba(214, 210, 204, .5); }
.four h3 { font-size: 22px; }
.four p { color: var(--mute); font-size: 15.5px; }
.need-line { text-wrap: pretty; margin-top: 20px; display: flex; gap: 10px; align-items: flex-start; color: var(--mute); font-size: 15.5px; max-width: 70ch; }
.need-line .i { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; }

/* ---------- glass (02/11/2026): graphite night, silver light, frosted surfaces ---------- */
body::before {
  content: ""; position: fixed; inset: -10% -10% auto; height: 120vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(231, 229, 228, .085), transparent 70%),
    radial-gradient(30% 28% at 88% 36%, rgba(189, 184, 177, .05), transparent 70%),
    radial-gradient(34% 30% at 40% 96%, rgba(231, 229, 228, .04), transparent 70%);
}
.nav, .vs-col .mini-phone, .vs-points li, .step, .plan, .more > div, .care-opt, .four li, .qform, .faq details,
.chip, .tabs [role="tab"], .tab-arrows .arrow, .notif, .next-steps > *, .board, .pkg {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.vs-points li, .plan, .more > div, .care-opt, .four li, .qform, .step, .faq details {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -32px rgba(0, 0, 0, .9);
}
@media (min-width: 1024px) { .step { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* icons sit in small frosted tiles */
.tile-i, .vs-points .i, .feature-list .i, .need-line .i {
  box-sizing: content-box; width: 22px; height: 22px; padding: 11px; flex: none; border-radius: 13px;
  color: var(--brand); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px -12px rgba(231, 229, 228, .45);
}
.need-line .i { width: 18px; height: 18px; padding: 9px; border-radius: 11px; margin-top: -4px; }
.feature-list .i { width: 18px; height: 18px; padding: 9px; border-radius: 11px; }
.chip { background: rgba(255, 255, 255, .05); }

/* ---------- sample "Página básica" drawn in HTML (problem section + its detail panel) ---------- */
.demo { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 30px 14px 14px; font-size: 12px; line-height: 1.4; color: var(--text); background: radial-gradient(120% 60% at 50% 0%, rgba(231, 229, 228, .16), transparent 60%), #0e0d0c; }
.demo-top { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 6px; }
.demo-logo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--display); color: var(--brand-ink); background: var(--warm); margin-bottom: 4px; }
.demo-top b { font: 700 18px/1.1 var(--display); letter-spacing: -.01em; }
.demo-top small { color: var(--mute); font-size: 11.5px; }
.demo-open { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(127, 220, 160, .12); color: var(--green); font-size: 11px; }
.demo-open i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.demo-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.demo-pics span { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(150deg, #5a4334, #241b16); }
.demo-pics span:nth-child(2) { background: linear-gradient(150deg, #8a6a4d, #3a2b21); }
.demo-pics span:nth-child(3) { background: linear-gradient(150deg, #3f3a35, #191715); }
.demo-btns { display: grid; gap: 7px; }
.demo-btns span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); font-weight: 600; }
.demo-btns .wa { background: #25d366; border-color: #25d366; color: #052e16; }
.demo-btns .i { width: 15px; height: 15px; }
.demo-addr { color: var(--mute); font-size: 11px; display: grid; gap: 4px; }
.demo-addr .i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--brand); }

/* ---------- the four questions everyone asks ---------- */
.qs-intro { margin-top: clamp(40px, 5vw, 64px); color: var(--mute); font-size: 17px; }
.vs-points.qs { margin-top: 18px; }
@media (min-width: 640px) { .vs-points.qs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vs-points.qs { grid-template-columns: repeat(4, 1fr); } }
.vs-points.qs li { gap: 12px; align-content: start; }

/* ---------- package cards: details button ---------- */
.plan-btns { display: grid; gap: 8px; margin-top: auto; }
.btn.link-btn { border-color: transparent; background: rgba(255, 255, 255, .05); color: var(--text); }
.btn.link-btn .i { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn.link-btn:hover { background: rgba(255, 255, 255, .09); }
.btn.link-btn:hover .i { transform: translateX(4px); }

/* ---------- package detail panel ---------- */
.pkg {
  width: min(980px, calc(100% - 24px)); max-height: min(90vh, 900px); padding: 0; border-radius: 24px; color: var(--text);
  border: 1px solid var(--line-2); background: rgba(18, 17, 16, .9); overflow: auto; overscroll-behavior: contain;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 120px -30px #000;
}
.pkg::backdrop { background: rgba(5, 5, 5, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pkg[open] { animation: pop .45s var(--ease-out); }
.pkg-in { display: grid; }
.pkg-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0; }
.pkg-head > div { display: grid; gap: 8px; }
.pkg-head h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.025em; }
.pkg-head p { color: var(--mute); max-width: 60ch; text-wrap: pretty; }
.pkg-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text); cursor: pointer; }
.pkg-x:hover { background: rgba(255, 255, 255, .1); }
.pkg-x .i { width: 20px; height: 20px; }
.pkg-body { display: grid; gap: 24px; padding: 24px clamp(20px, 3vw, 32px); }
@media (min-width: 820px) { .pkg-body { grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: start; } }
.pkg-eg { margin: 0; display: grid; gap: 12px; justify-items: center; }
.pkg-eg .mini-phone { width: min(280px, 100%); }
.pkg-eg figcaption { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 14px; }
.pkg-eg figcaption > span { font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.pkg-note { color: var(--dim); font-size: 13.5px; max-width: 34ch; text-wrap: pretty; }
.pkg-shot { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.pkg-info { display: grid; gap: 20px; }
.pkg-info h4 { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.pkg-info p { color: var(--mute); text-wrap: pretty; }
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pkg-list li { display: flex; gap: 10px; align-items: flex-start; }
.pkg-list .i { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--green); }
.pkg-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); background: rgba(18, 17, 16, .94);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.pkg-foot .price strong { font-size: 40px; }
.pkg-foot .price strong sup { color: var(--brand); }

/* ---------- signs: readable type instead of the dot-matrix LED ---------- */
.vitrina { padding-top: 0; }
.ledline { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-shadow: none; }
.ledline span:last-child { color: var(--text); text-shadow: none; letter-spacing: .06em; text-transform: none; font-size: 13px; }
.vs-points { padding: 0; }
.demo-addr { display: block; line-height: 1.7; }
@media (max-width: 560px) {
  .pkg { width: calc(100% - 16px); max-height: calc(100svh - 16px); border-radius: 20px; }
  .pkg-foot { flex-wrap: nowrap; padding-block: 12px; }
  .pkg-foot .price strong { font-size: 32px; }
  .pkg-foot .price span { display: none; }
}

/* ---------- case heads: each client's own logo instead of plain letters ---------- */
.case-head .case-logo { display: flex; align-items: center; margin: 0; line-height: 0; }
.case-logo.rv img { height: clamp(52px, 7vw, 86px); width: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .7)); }
.case-logo.bb {
  padding: 10px 16px; border-radius: 16px; background: #fbfaf6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.case-logo.bb img { height: clamp(64px, 8vw, 92px); width: auto; }

/* ---------- silver (02/11/2026): grey words, the key phrase lit in white ---------- */
.hero-copy h1 { color: #a19d97; }
.hero-copy h1 em { color: #fff; text-shadow: 0 0 32px rgba(255, 255, 255, .28); }
.case-logo.bb { padding: 0; background: none; box-shadow: none; }
.case-logo.bb img { height: clamp(70px, 9vw, 104px); }

/* ---------- glass bar, silver buttons, textured night (02/11/2026) ---------- */
/* the background: fine grain plus a slow, cloudy mottle so the dark is never flat */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .005' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  background-size: 100% 100%; background-repeat: no-repeat;
}

/* the bar: frosted, lit from above, with a bright edge that fades round the pill */
.nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025)), rgba(20, 19, 17, .42);
  border-color: transparent;
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 44px -22px rgba(0, 0, 0, .9);
}
.nav.scrolled { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(14, 13, 11, .66); border-color: transparent; }
.nav::before, .btn:not(.primary):not(.link-btn)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nav-links a[aria-current="true"] { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.menu-btn { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* buttons: plain ones are small panes of glass, the main one is brushed silver with a passing shine */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn:not(.primary):not(.link-btn) {
  border-color: transparent; background: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 28px -18px rgba(0, 0, 0, .9);
}
.btn:not(.primary):not(.link-btn):hover { background: rgba(255, 255, 255, .1); }
.btn.primary {
  border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #fdfcfa 0%, #e6e3de 48%, #cdc9c2 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .12), 0 10px 30px -14px rgba(231, 229, 228, .55);
}
.btn.primary::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .95) 48%, transparent 62%);
  transform: translateX(-110%); transition: transform .9s var(--ease);
}
.btn.primary:hover::after { transform: translateX(110%); }
.btn.primary:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .12), 0 0 0 4px rgba(231, 229, 228, .14), 0 16px 44px -12px rgba(231, 229, 228, .7); }
@media (prefers-reduced-motion: reduce) { .btn.primary::after { display: none; } }

/* ---------- pricing in colour (02/11/2026): each package has its own light on the silver page ---------- */
/* basic = ice blue, complete = violet to pink, catalogue = amber to coral */
.plan { --accent-2: var(--accent); }
#plan-basica, #pkg-basica { --accent: #6fdcff; --accent-rgb: 111, 220, 255; --accent-2: #7b8dff; }
#plan-completa, #pkg-completa { --accent: #b996ff; --accent-rgb: 185, 150, 255; --accent-2: #ff7ac0; }
#plan-catalogo, #pkg-catalogo { --accent: #ffc65e; --accent-rgb: 255, 198, 94; --accent-2: #ff8063; }
.plan {
  border-color: rgba(var(--accent-rgb), .16);
  background:
    radial-gradient(85% 55% at 100% 0%, rgba(var(--accent-rgb), .17), transparent 62%),
    radial-gradient(60% 40% at 0% 100%, rgba(var(--accent-rgb), .06), transparent 70%),
    var(--night-2);
}
.plan.hot {
  border-color: rgba(var(--accent-rgb), .5);
  background:
    radial-gradient(95% 60% at 100% 0%, rgba(var(--accent-rgb), .26), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(255, 122, 192, .1), transparent 70%),
    var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -36px rgba(var(--accent-rgb), .55);
}
.plan::after, .pkg::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .8), 0 0 34px rgba(var(--accent-rgb), .4); }
.plan .price strong, .pkg-foot .price strong {
  background: linear-gradient(100deg, #fff 15%, var(--accent) 55%, var(--accent-2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan .price strong sup, .pkg-foot .price strong sup { color: var(--accent); }
.plan .badge { color: #0b0b0c; border-color: transparent; background: linear-gradient(100deg, var(--accent), var(--accent-2)); }
.plan .btn.primary, .pkg .btn.primary {
  border-color: transparent; color: #0b0b0c;
  background: linear-gradient(110deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -12px rgba(var(--accent-rgb), .75);
}
.plan .btn.primary:hover, .pkg .btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 4px rgba(var(--accent-rgb), .18), 0 18px 44px -12px rgba(var(--accent-rgb), .85); }
.plan .btn:not(.primary):not(.link-btn)::before {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .75), rgba(var(--accent-rgb), .14) 45%, rgba(var(--accent-rgb), .4));
}
.plan .btn:not(.primary):not(.link-btn):hover { background: rgba(var(--accent-rgb), .14); }
.plan .btn.link-btn:hover { background: rgba(var(--accent-rgb), .1); color: var(--accent); }
/* a lit strip that stays on top while the dialog scrolls */
.pkg::before { content: ""; position: sticky; z-index: 3; top: 0; display: block; height: 3px; margin-bottom: -3px; pointer-events: none; }
.pkg-eg figcaption > span { color: var(--accent, var(--brand)); }
.pkg-list .i { color: var(--accent, var(--green)); }

/* ---------- problem section v3 (02/11/2026): real-looking phones, a laptop, and a sample site you can scroll ---------- */
@media (min-width: 900px) { .versus { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; } }
.vs-col.before .tag { color: #ff9a9a; background: rgba(255, 48, 64, .12); }
.vs-col.after .tag { color: var(--green); background: rgba(127, 220, 160, .12); }

/* iPhone, after Apple's own product shots: natural titanium band, thin black bezel,
   Dynamic Island with its lens, action + volume buttons on the left, side button on the right */
.iphone {
  position: relative; container-type: inline-size; width: min(var(--w, 300px), 100%); aspect-ratio: 9 / 18.9;
  padding: 4px; border-radius: 16.5% / 7.9%;
  background: linear-gradient(135deg, #e4e2dd 0%, #a19f9a 16%, #eeece7 38%, #8e8c87 60%, #d4d2cd 80%, #9d9b96 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 0 2.5px rgba(70, 68, 64, .5),
    0 0 0 1px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .35), 0 50px 80px -40px #000;
}
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; }
.iphone::before {
  left: -2.5px; top: 19%; height: 22%; border-radius: 2px 0 0 2px;
  background: linear-gradient(#cfcdc8 0 18%, transparent 18% 32%, #cfcdc8 32% 61%, transparent 61% 71%, #cfcdc8 71%);
}
.iphone::after { right: -2.5px; top: 29%; height: 10.5%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #a9a7a2, #dcdad5); }
.iphone > .mini-phone {
  width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 15% / 7.2%; padding: 0;
  background: #000; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.iphone > .mini-phone::before {
  content: ""; position: absolute; z-index: 9; top: 3.2cqi; left: 50%; transform: translateX(-50%);
  width: 31cqi; height: 9.2cqi; border-radius: 99px; pointer-events: none;
  background: radial-gradient(circle at 80% 50%, #1d2b44 0 1.1cqi, #0a0f18 1.1cqi 1.9cqi, #000 1.9cqi);
}
.iphone > .mini-phone::after {
  content: ""; position: absolute; z-index: 9; bottom: 2.4cqi; left: 50%; transform: translateX(-50%);
  width: 35cqi; height: 1.4cqi; border-radius: 99px; background: rgba(255, 255, 255, .85); pointer-events: none;
}
.sbar {
  position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 15.5cqi; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8.5cqi 0 11.5cqi; color: #fff; font: 600 4.9cqi/1 var(--body); letter-spacing: -.01em; pointer-events: none;
}
.sbar svg { width: 17.5cqi; height: auto; }
/* the screen sits inside a thin black bezel */
.iphone .demo, .ig, .devices .iphone .scroll { inset: 2.4cqi; border-radius: 12.8% / 6.1%; }
.iphone .demo { padding-top: 17cqi; }
.pkg-eg .iphone { --w: 280px; }

/* iOS notifications: dark frosted material, app icon, name and time, message */
.ios-notes { display: grid; gap: 10px; width: 100%; }
.ios-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 13px 15px; border-radius: 22px;
  background: rgba(28, 28, 30, .72); color: #f5f5f7; font: 400 14px/1.35 var(--body);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 40px -20px rgba(0, 0, 0, .9);
}
.ios-note .app { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(#5ff17b, #22c34a); color: #fff; }
.ios-note .app .i { width: 22px; height: 22px; }
.ios-note header { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ios-note header small { font-weight: 400; color: #98989d; font-size: 13px; }
.ios-note p { margin: 0; color: #d1d1d6; text-wrap: pretty; }
.ios-note p b { color: #fff; font-weight: 600; }

/* Solo redes: the Instagram inbox at night */
.ig {
  position: absolute; overflow: hidden; display: flex; flex-direction: column;
  padding-top: 16cqi; background: #000; color: #f5f5f5; font: 400 4.2cqi/1.35 var(--body);
}
.ig-head { display: flex; align-items: center; padding: 0 5.5cqi 3.4cqi; }
.ig-head b { font-size: 1.3em; font-weight: 700; letter-spacing: -.01em; }
.ig-head .i { margin-left: auto; width: 1.45em; height: 1.45em; }
.ig-search { display: flex; align-items: center; gap: 2cqi; margin: 0 4.4cqi 3.6cqi; padding: 2.3cqi 3.4cqi; border-radius: 3.2cqi; background: #262626; color: #8e8e8e; }
.ig-search .i { width: 1.15em; height: 1.15em; }
.ig-tabs { display: flex; justify-content: space-between; margin: 0; padding: 0 5.5cqi 2cqi; }
.ig-tabs b { font-weight: 700; }
.ig-tabs span { color: #4aa8ff; font-weight: 600; }
.ig-list { list-style: none; margin: 0; padding: 0; }
.ig-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3.2cqi; padding: 2.1cqi 5.5cqi; }
.ig-av {
  width: 12.6cqi; height: 12.6cqi; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 45% 42%), hsl(calc(var(--h) + 40) 40% 24%));
}
.ig-av.ring {
  border: .9cqi solid transparent;
  background: linear-gradient(145deg, hsl(var(--h) 45% 42%), hsl(calc(var(--h) + 40) 40% 24%)) padding-box,
    conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75) border-box;
  box-shadow: inset 0 0 0 .7cqi #000;
}
.ig-list b { display: block; font-weight: 700; }
.ig-list small { display: block; font-size: 1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-list small span { color: #a8a8a8; font-weight: 400; }
.ig-list .dot { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #0095f6; }
.ig .unread {
  align-self: center; margin: auto 0 9cqi; padding: 2cqi 3.4cqi; border-radius: 99px;
  font: 600 3.2cqi/1 var(--mono); letter-spacing: .08em; color: #ff9a9a; background: rgba(255, 48, 64, .14);
}

/* Con tu página: the same sample site on a laptop and on a phone */
.devices { position: relative; width: 100%; aspect-ratio: 1 / .96; }
.devices .laptop { left: 0; top: 0; width: 86%; }
.devices .iphone { position: absolute; right: 0; bottom: 0; width: 32%; }
@media (max-width: 899px) {
  .devices { aspect-ratio: 1 / .97; }
  .devices .laptop { width: 94%; }
  .devices .iphone { width: 45%; }
  .vs-col.after { row-gap: 14px; }
}
.site.mob .s-btns .s-wa { display: none; }
/* on wide screens the notifications sit in the free corner under the laptop */
@media (min-width: 900px) {
  .vs-col.after { grid-template-areas: "head" "dev" "hint"; }
  .vs-col.after > header { grid-area: head; }
  .vs-col.after .devices, .vs-col.after .ios-notes { grid-area: dev; }
  .vs-col.after .ios-notes { z-index: 2; align-self: end; justify-self: start; width: 60%; margin-bottom: 3%; }
  .vs-col.after .dev-hint { grid-area: hint; }
}
.laptop.live .scr { container-type: inline-size; background: #121110; }
.devices .scroll { height: 100%; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; }
.devices .scroll::-webkit-scrollbar { display: none; }
.devices .scroll:focus-visible { outline-offset: -3px; }
.devices .iphone .scroll { position: absolute; height: auto; padding-top: 15.5cqi; background: #121110; }
.dev-hint { display: flex; align-items: center; gap: 8px; justify-self: start; margin: 0; font: 500 13px/1.4 var(--mono); color: var(--dim); }
.dev-hint .i { width: 16px; height: 16px; transform: rotate(90deg); color: var(--brand); }

.site { --s-card: #1c1b19; --s-line: rgba(255, 255, 255, .08); --s-gold: #e2b56c; --s-mute: #b3ada4; color: #f3efe8; background: #121110; line-height: 1.45; text-align: left; }
.site.desk { font-size: 1.85cqi; }
.site.mob { font-size: 5cqi; }
.site h4, .site h5, .site p { margin: 0; }
.s-nav {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .7em; padding: .9em 1.6em;
  background: rgba(18, 17, 16, .9); border-bottom: 1px solid var(--s-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.s-logo { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; font: 700 .85em/1 var(--display); color: #1a1206; background: var(--s-gold); }
.s-nav b { font: 700 1.05em/1 var(--display); white-space: nowrap; }
.s-nav nav { margin-left: auto; display: flex; gap: 1.4em; color: var(--s-mute); font-size: .9em; }
.s-wa, .s-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1.1em; border-radius: 99px;
  font-weight: 700; font-size: .9em; white-space: nowrap;
}
.s-wa { background: #25d366; color: #052e16; }
.s-ghost { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.s-wa .i, .s-ghost .i { width: 1.2em; height: 1.2em; }
.s-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2em; align-items: center; padding: 2.6em 1.6em 2.2em; }
.s-open { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: 99px; background: rgba(127, 220, 160, .12); color: #7fdca0; font-size: .8em; font-weight: 600; }
.s-open i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .25em rgba(127, 220, 160, .2); }
.s-hero h4 { font: 700 2.6em/1.02 var(--display); letter-spacing: -.02em; margin: .45em 0 .35em; text-wrap: balance; }
.s-hero p { color: var(--s-mute); }
.s-btns { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.2em; }
.s-hero .s-rate { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: 1.2em; font-size: .85em; }
.s-rate b { color: #fff; font-size: 1.15em; }
.s-rate .stars { color: var(--s-gold); letter-spacing: .08em; }
.s-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 1em; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 1em;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 .7em, transparent .7em 1.4em),
    radial-gradient(90% 70% at 70% 20%, rgba(226, 181, 108, .45), transparent 65%), linear-gradient(160deg, #6b4a33, #241710);
}
.s-photo b { font: 700 2em/.95 var(--display); letter-spacing: -.02em; }
.s-chip { align-self: flex-start; padding: .35em .7em; border-radius: 99px; background: rgba(0, 0, 0, .45); font-size: .75em; font-weight: 600; }
.s-sec { padding: 1.8em 1.6em; border-top: 1px solid var(--s-line); }
.s-sec h5 { font: 700 1.4em/1.1 var(--display); margin-bottom: .8em; }
.s-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.s-prices li { display: grid; grid-template-columns: 1fr auto; gap: .15em .8em; padding: .85em 1em; border-radius: .7em; background: var(--s-card); border: 1px solid var(--s-line); }
.s-prices small { color: #8f8a82; font-size: .8em; }
.s-prices em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 1.2em/1 var(--display); font-style: normal; color: var(--s-gold); }
.s-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.s-tile {
  aspect-ratio: 1; border-radius: .8em; display: flex; align-items: flex-end; padding: .6em;
  font: 700 1.05em/1 var(--display); letter-spacing: .03em; text-transform: uppercase;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .16), transparent 60%), var(--t);
}
.s-tile.t1 { --t: linear-gradient(160deg, #6b4a33, #22160f); }
.s-tile.t2 { --t: linear-gradient(160deg, #2a4a45, #0e1a18); }
.s-tile.t3 { --t: linear-gradient(160deg, #8a6a3d, #2c2012); }
.s-tile.t4 { --t: linear-gradient(160deg, #73302d, #220e0d); }
.s-revs { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.s-revs blockquote { margin: 0; padding: 1em; border-radius: .7em; background: var(--s-card); border: 1px solid var(--s-line); font-size: .92em; }
.s-revs blockquote::before { content: "★★★★★"; display: block; margin-bottom: .4em; color: var(--s-gold); letter-spacing: .1em; font-size: .85em; }
.s-revs cite { display: block; margin-top: .5em; color: #8f8a82; font-style: normal; font-size: .85em; }
.s-where { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4em; align-items: start; }
.s-where p { color: var(--s-mute); }
.s-map {
  position: relative; aspect-ratio: 4 / 3; border-radius: .8em; overflow: hidden;
  background:
    linear-gradient(32deg, transparent 47%, #37463d 47% 51%, transparent 51%),
    linear-gradient(90deg, transparent 44%, #3c4c42 44% 49%, transparent 49%),
    linear-gradient(0deg, transparent 58%, #3c4c42 58% 62%, transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 17%, rgba(255, 255, 255, .05) 17% 18%),
    repeating-linear-gradient(0deg, transparent 0 21%, rgba(255, 255, 255, .05) 21% 22%),
    #18221c;
}
.s-map i { position: absolute; left: 44%; top: 30%; width: 1.5em; height: 1.5em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff5a4f; box-shadow: 0 .4em .8em rgba(0, 0, 0, .5); }
.s-map i::after { content: ""; position: absolute; inset: .45em; border-radius: 50%; background: #fff; }
.s-hours { display: grid; grid-template-columns: 1fr auto; gap: .35em 1em; margin: .9em 0 0; font-size: .9em; }
.s-hours dt { color: var(--s-mute); }
.s-hours dd { margin: 0; font-weight: 600; }
.s-foot { padding: 1.4em 1.6em 2em; border-top: 1px solid var(--s-line); color: #8f8a82; font-size: .8em; }
.site.desk .s-sticky { display: none; }
.site.mob .s-nav { padding: .8em 1em; }
.site.mob .s-nav nav, .site.mob .s-nav > .s-wa { display: none; }
.site.mob .s-hero { grid-template-columns: 1fr; gap: 1.2em; padding: 1.2em 1em 1.6em; }
.site.mob .s-photo { order: -1; aspect-ratio: 16 / 10; }
.site.mob .s-hero h4 { font-size: 2.05em; }
.site.mob .s-btns > * { flex: 1 1 100%; }
.site.mob .s-sec { padding: 1.4em 1em; }
.site.mob .s-prices, .site.mob .s-revs, .site.mob .s-where { grid-template-columns: 1fr; }
.site.mob .s-pics { grid-template-columns: 1fr 1fr; }
.site.mob .s-foot { padding-bottom: 1em; }
.site.mob .s-sticky { position: sticky; z-index: 3; bottom: 1.6em; display: flex; margin: 0 1em 1.6em; padding: .85em; box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .55); }

/* ---------- faq v2 (02/11/2026): grouped by topic, an icon per question, answers that open smoothly ---------- */
:root { interpolate-size: allow-keywords; }
.faq { border-top: 0; gap: 32px; }
.faq-group { display: grid; gap: 10px; }
.faq-group h3 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
  font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.faq-group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.faq details {
  border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .035);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.faq details:hover { background: rgba(255, 255, 255, .055); }
.faq details[open] { background: rgba(255, 255, 255, .07); border-color: var(--line-2); }
.faq summary { justify-content: flex-start; gap: 14px; padding: 14px 16px 14px 14px; font-size: clamp(16px, 1.4vw, 18px); }
.faq summary .qt { flex: 1; text-wrap: pretty; }
.faq .qi {
  flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 11px; display: grid; place-items: center;
  color: var(--brand); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.faq .qi .i { width: 18px; height: 18px; }
.faq details[open] .qi { color: var(--brand-ink); background: linear-gradient(180deg, #fdfcfa, #cdc9c2); border-color: transparent; }
.faq summary .pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); }
.faq summary .pm::before, .faq summary .pm::after { left: 10px; right: 10px; top: 14.5px; height: 1.5px; }
.faq .ans { padding: 0 20px 20px 64px; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }
@media (max-width: 559px) { .faq .ans { padding-left: 16px; } }

/* the left column stays in view with a way to ask what is not on the list */
.faq-side { display: grid; gap: 28px; align-content: start; align-self: start; }
@media (min-width: 1024px) { .faq-side { position: sticky; top: 110px; } }
.faq-ask {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 20px; border-radius: 22px;
  border: 1px solid var(--line-2); background: radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .09), transparent 60%), rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -32px rgba(0, 0, 0, .9);
}
.faq-ask .qi {
  box-sizing: content-box; width: 22px; height: 22px; padding: 11px; border-radius: 13px; display: grid; place-items: center;
  color: var(--brand-ink); background: linear-gradient(180deg, #fdfcfa, #cdc9c2);
}
.faq-ask .qi .i { width: 22px; height: 22px; }
.faq-ask b { display: block; font: 700 18px/1.2 var(--display); }
.faq-ask p { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.faq-ask-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.faq-ask-btns .btn { flex: 1 1 140px; }

/* ---------- light where it sells (02/11/2026, evening; calmer the same night) ---------- */
/* a package card can light its whole edge (.fx-edge) and send one slow, soft flash across itself (.fx-sweep).
   Hovering only makes the edge glow; the flash runs when "Quiero esta" is clicked, or now and then
   when the cursor reaches "Cuéntame tu idea" (js keeps it to once every few seconds) */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fx-edge, .fx-sweep { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.fx-edge {
  padding: 1px; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(155deg, var(--accent), rgba(var(--accent-rgb), .3) 34%, rgba(var(--accent-rgb), .16) 62%, var(--accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx-sweep { overflow: hidden; }
.fx-sweep::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 46%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .06) 66%, transparent);
  transform: translateX(-150%) skewX(-18deg);
}
.fx-sweep::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(140% 110% at var(--fx-x, 50%) var(--fx-y, 90%), rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 38%, transparent 68%);
}
.more > div { position: relative; overflow: hidden; isolation: isolate; }
@media (hover: hover) { .plan:hover .fx-edge { opacity: .75; } }
.fx-flash .fx-edge { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fx-lit .fx-sweep::before { animation: fx-sweep 1.9s cubic-bezier(.45, .05, .25, 1) both; }
  .fx-flash .fx-sweep::before { animation: fx-sweep-b 1.6s cubic-bezier(.45, .05, .25, 1) both; }
  .fx-flash .fx-sweep::after { animation: fx-burst 1.4s var(--ease) both; }
}
@keyframes fx-spin { to { --fx-a: 360deg; } }
@keyframes fx-sweep { 0% { opacity: 0; transform: translateX(-150%) skewX(-18deg); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(320%) skewX(-18deg); } }
@keyframes fx-sweep-b { 0% { opacity: 0; transform: translateX(-150%) skewX(-18deg); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(320%) skewX(-18deg); } }
@keyframes fx-burst { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* the catalogue: the premium package, in gold, its edge always softly lit and never moving */
#plan-catalogo {
  border-color: rgba(var(--accent-rgb), .38);
  background:
    radial-gradient(95% 60% at 100% 0%, rgba(var(--accent-rgb), .22), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(255, 128, 99, .1), transparent 70%), var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .12), 0 30px 70px -40px rgba(var(--accent-rgb), .5);
}
#plan-catalogo .fx-edge { opacity: .5; }
@media (hover: hover) { #plan-catalogo:hover .fx-edge { opacity: .9; } }

/* something bigger: a black card with a platinum edge, so it reads apart from the gold catalogue */
.more-big {
  --accent: #fff; --accent-rgb: 255, 255, 255; --accent-2: #cfd6dd;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(200, 214, 228, .06), transparent 65%),
    linear-gradient(160deg, #191919, #0a0a0a 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 90px -44px rgba(255, 255, 255, .36);
  transition: box-shadow .9s var(--ease);
}
/* one point of light goes slowly round the edge; pointing at the button lights all of it */
.more-big .fx-edge {
  opacity: 1; padding: 1.5px;
  background: conic-gradient(from var(--fx-a), rgba(255, 255, 255, .22) 0 26%, rgba(255, 255, 255, .75) 38%, #fff 44%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .22) 62% 100%);
}
.more-big .fx-edge::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(155deg, #fff, rgba(255, 255, 255, .55) 38%, rgba(255, 255, 255, .4) 62%, #e2e8ee);
}
.more-big:has(.btn:hover), .more-big:has(.btn:focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 40px -16px rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .3), 0 0 50px -10px rgba(255, 255, 255, .45), 0 40px 100px -40px rgba(255, 255, 255, .55);
}
.more-big:has(.btn:hover) .fx-edge::before, .more-big:has(.btn:focus-visible) .fx-edge::before { opacity: 1; }
.more-big h3 {
  font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 35%, #c3ccd5); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.more-big > p:not(.price) { color: #c9c7c3; }
.more-big .price strong { color: #fff; text-shadow: 0 0 30px rgba(255, 255, 255, .22); }
.more-big .price strong sup { color: #cfd6dd; }
.more-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #f4f6f8;
  border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06);
}
.more-kicker .i { width: 16px; height: 16px; }
.more-big .btn.primary .i { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.more-big .btn.primary:hover .i { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) { .more-big .fx-edge { animation: fx-spin 16s linear infinite; } }
.more-big.off .fx-edge { animation-play-state: paused; }

/* extras: each one with its own colour */
.more-extras {
  border-color: rgba(255, 255, 255, .14); transition: border-color .6s var(--ease);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(111, 220, 255, .1), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(185, 150, 255, .1), transparent 62%), var(--night-2);
}
.more-extras ul { gap: 2px; }
.more-extras li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 10px; margin-inline: -10px;
  border-radius: 14px; border-bottom: 0; transition: background-color .5s var(--ease), translate .6s var(--ease);
}
.more-extras li + li { box-shadow: 0 -1px 0 var(--line); }
.ex-i {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 20px -6px var(--c); transition: box-shadow .5s var(--ease);
}
.ex-i .i { width: 19px; height: 19px; }
.more-extras b {
  padding: 6px 11px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent);
}
@media (hover: hover) {
  .more-extras:hover { border-color: rgba(255, 255, 255, .24); }
  .more-extras li:hover { background: color-mix(in srgb, var(--c) 8%, transparent); translate: 3px 0; }
  .more-extras li:hover .ex-i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 26px -4px var(--c); }
}

/* after launch: one-off changes in ice blue, the monthly plan in green */
.care-opt { --accent: #6fdcff; --accent-rgb: 111, 220, 255; --accent-2: #7b8dff; border-color: rgba(var(--accent-rgb), .2);
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--accent-rgb), .12), transparent 62%), var(--night-2); }
.care-opt.rec { --accent: #7fdca0; --accent-rgb: 127, 220, 160; --accent-2: #6fdcff; border-color: rgba(var(--accent-rgb), .45);
  background: radial-gradient(95% 60% at 100% 0%, rgba(var(--accent-rgb), .22), transparent 62%), radial-gradient(70% 50% at 0% 100%, rgba(111, 220, 255, .08), transparent 70%), var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -40px rgba(var(--accent-rgb), .6); }
.care-opt .price strong { background: linear-gradient(100deg, #fff 20%, var(--accent) 70%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.care-opt .price sup, .care-opt.rec .price sup { color: var(--accent); }
.care-opt > p:not(.price):not(.care-small) { color: var(--mute); font-size: 15.5px; }
.care-opt .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.care-opt .badge { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #06210f; padding: 6px 9px; border-radius: 999px; background: linear-gradient(100deg, var(--accent), var(--accent-2)); }
.care-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--mute); }
.care-list li { display: flex; gap: 9px; align-items: flex-start; }
.care-list b { color: var(--text); font-weight: 600; }
.care-list .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }
.care-small { color: var(--dim); font-size: 14px; }

/* how a change works, in three steps */
.how-changes {
  display: grid; gap: 24px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@media (min-width: 900px) { .how-changes { grid-column: 1 / -1; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 24px 40px; align-items: start; } }
.how-head h4 { font-size: 22px; letter-spacing: -.015em; }
.how-head p { margin-top: 6px; color: var(--mute); font-size: 15.5px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: h; }
@media (min-width: 640px) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.how-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 50px; counter-increment: h; }
.how-steps li::before {
  content: counter(h); position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 var(--display); color: #06210f; background: linear-gradient(180deg, #c3f7d4, #7fdca0);
  box-shadow: 0 0 0 4px rgba(127, 220, 160, .12), 0 0 22px -4px rgba(127, 220, 160, .85);
}
@media (min-width: 640px) {
  .how-steps li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 48px; right: -8px; height: 1px; background: linear-gradient(90deg, rgba(127, 220, 160, .6), rgba(127, 220, 160, .05)); }
}
@media (max-width: 639px) { .how-steps li { padding: 0 0 0 52px; min-height: 36px; } }
.how-steps b { font: 700 17px/1.25 var(--display); }
.how-steps span { color: var(--mute); font-size: 15px; text-wrap: pretty; }
.how-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.how-foot p { color: var(--mute); font-size: 15px; max-width: 62ch; text-wrap: pretty; }
.proc-more { margin-top: 22px; }

/* the week, in colour: each day has its own light and icon, the same ones as the full-process panel */
.four li {
  --c: #6fdcff; border-color: color-mix(in srgb, var(--c) 24%, transparent);
  background: radial-gradient(100% 75% at 0% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 62%), var(--night-2);
  transition: border-color .6s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
}
.four li::after { background: var(--c); box-shadow: 0 0 12px var(--c); }
.four .day { color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
.four-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.four-i {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px -8px var(--c);
}
.four-i .i { width: 20px; height: 20px; }
@media (hover: hover) {
  .four li:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -38px var(--c); }
}
/* on wide screens a short line joins each day to the next */
@media (min-width: 1024px) {
  .four li:not(:last-child)::before {
    content: ""; position: absolute; z-index: 1; top: 42px; right: -15px; width: 16px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c), transparent);
  }
}
.need-line .i {
  color: #ffc65e; border-color: rgba(255, 198, 94, .38); background: rgba(255, 198, 94, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px -8px #ffc65e;
}

/* the whole process, in one panel */
#pkg-proceso { --accent: #7fdca0; --accent-rgb: 127, 220, 160; --accent-2: #6fdcff; width: min(780px, calc(100% - 24px)); }
.proc-steps { list-style: none; margin: 0; padding: 26px clamp(20px, 3vw, 32px) 30px; display: grid; }
.proc-steps > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.proc-steps > li:last-child { padding-bottom: 0; }
.proc-steps > li:not(:last-child)::before {
  content: ""; position: absolute; left: 23px; top: 54px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 8%, transparent));
}
.proc-i {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 28px -8px var(--c);
}
.proc-i .i { width: 22px; height: 22px; }
.proc-when { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.proc-steps h4 { font-size: 21px; letter-spacing: -.01em; margin: 3px 0 10px; }
.proc-steps .pkg-list span { color: #d6d1c9; text-wrap: pretty; }
.proc-steps .pkg-list .i { color: var(--c); }
.proc-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--mute); font-size: 15px; }
.proc-note .i { width: 18px; height: 18px; color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  #pkg-proceso[open] .proc-steps > li { animation: proc-in .6s var(--ease) both; }
  #pkg-proceso[open] .proc-steps > li:nth-child(2) { animation-delay: .08s; }
  #pkg-proceso[open] .proc-steps > li:nth-child(3) { animation-delay: .16s; }
  #pkg-proceso[open] .proc-steps > li:nth-child(4) { animation-delay: .24s; }
}
@keyframes proc-in { from { opacity: 0; transform: translateY(14px); } }

/* WhatsApp in a light green, Instagram in its own gradient */
.btn.primary.is-wa, .pkg .btn.primary.is-wa {
  border-color: rgba(205, 255, 220, .7); color: #052812;
  background: linear-gradient(180deg, #c2f8d3 0%, #93ebb0 52%, #6bd993 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 10px 30px -14px rgba(107, 217, 147, .75);
}
.btn.primary.is-wa:hover, .pkg .btn.primary.is-wa:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 4px rgba(107, 217, 147, .2), 0 16px 44px -12px rgba(107, 217, 147, .85); }
.btn.primary.is-ig {
  border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(60, 0, 40, .35);
  background: radial-gradient(150% 280% at 6% 120%, #fdf497 0%, #fd5949 26%, #d6249f 52%, #9b36d9 74%, #4f5bd5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -14px rgba(214, 36, 159, .85);
}
.btn.primary.is-ig:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px rgba(214, 36, 159, .22), 0 16px 44px -12px rgba(214, 36, 159, .9); }

/* the open sign at the end: pink tube letters inside a blue frame */
.final .sign { border-color: #273235; color: #47323d; box-shadow: 0 0 90px -14px rgba(255, 45, 138, .4), 0 0 140px -30px rgba(92, 225, 255, .35); }
.final .sign::before {
  border-color: #d3f8ff;
  box-shadow: 0 0 5px #5ce1ff, 0 0 16px rgba(92, 225, 255, .8), 0 0 42px rgba(92, 225, 255, .38), inset 0 0 10px rgba(92, 225, 255, .55);
}
.final .sign-lit { color: #fff0f7; text-shadow: 0 0 3px #fff, 0 0 10px #ff4fa3, 0 0 22px #ff2d8a, 0 0 48px rgba(255, 45, 138, .7); }
/* the three next steps take the colours of the week */
.next-steps li { --c: #6fdcff; }
.next-steps li:nth-child(2) { --c: #b996ff; }
.next-steps li:nth-child(3) { --c: #7fdca0; }
.next-steps li::before { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.next-steps b { color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }

/* the LED board, back: warm lights that never stop for the cursor */
.board-track p { color: #ffb04d; text-shadow: 0 0 10px rgba(255, 160, 60, .7); }
.board-track p span:nth-child(3n + 2) { color: #ffe3a3; text-shadow: 0 0 10px rgba(255, 220, 150, .6); }
.board-track p span:nth-child(3n) { color: #ff8a5c; text-shadow: 0 0 10px rgba(255, 120, 80, .6); }

/* the four questions light up, one after another */
.vs-points.qs li {
  --c: #6fdcff; position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--c) 26%, transparent);
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--c) 13%, transparent), transparent 65%), var(--night-2);
  transition: border-color .5s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
}
.vs-points.qs li:nth-child(2) { --c: #ffc65e; }
.vs-points.qs li:nth-child(3) { --c: #ff7ac0; }
.vs-points.qs li:nth-child(4) { --c: #7fdca0; }
.vs-points.qs li::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: var(--c); box-shadow: 0 0 12px var(--c); transition: opacity .4s var(--ease); }
.vs-points.qs .i {
  color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 26px -6px var(--c);
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .6s var(--ease);
}
@media (hover: hover) {
  .vs-points.qs li:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -36px var(--c); }
}
.qs-wait li:not(.lit) { border-color: var(--line); background: var(--night-2); }
.qs-wait li:not(.lit)::after { opacity: 0; }
.qs-wait li:not(.lit) .i { color: var(--dim); background: rgba(255, 255, 255, .04); border-color: var(--line-2); box-shadow: none; }
.qs-wait li.lit .i { animation: flick .8s linear both; }
@keyframes flick { 0% { opacity: .3; } 10% { opacity: 1; } 20% { opacity: .35; } 34% { opacity: 1; } 44% { opacity: .6; } 58%, 100% { opacity: 1; } }

/* case heads: centred on the logo, what it is in chips, the live site as a clear button */
#reverze { --case: #ecc864; --case-rgb: 236, 200, 100; }
.case.bio { --case: #6fd08a; --case-rgb: 111, 208, 138; }
.case-head { align-items: center; gap: 20px 32px; }
.case-meta { flex-direction: column; align-items: flex-end; gap: 12px; font: inherit; letter-spacing: 0; color: inherit; }
.case-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.case-tags li {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .045);
  color: #dcd8d1; font: 500 14px/1.2 var(--body); white-space: nowrap;
}
.case-visit {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px 8px 14px; border-radius: 999px; text-decoration: none; color: var(--text);
  background: linear-gradient(180deg, rgba(var(--case-rgb), .14), rgba(var(--case-rgb), .05)); border: 1px solid rgba(var(--case-rgb), .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 30px -18px rgba(var(--case-rgb), .7);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease), translate .4s var(--ease);
}
.case-visit .live { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.case-visit .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(127, 220, 160, .18), 0 0 10px var(--green); }
.case-visit b { font: 600 16px/1 var(--body); color: var(--case); }
.case-visit .i { width: 18px; height: 18px; color: var(--case); transition: transform .4s var(--ease); }
.case-visit:hover { border-color: rgba(var(--case-rgb), .75); translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 40px -16px rgba(var(--case-rgb), .85); }
.case-visit:hover .i { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: no-preference) { .case-visit .live::before { animation: live 3s ease-in-out infinite; } }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(127, 220, 160, 0), 0 0 14px var(--green); } }
@media (max-width: 759px) {
  .case-meta { align-items: flex-start; }
  .case-tags { justify-content: flex-start; }
}
/* each case's lists and marks in its own brand colour */
#reverze .step li .i, #reverze .step .k { color: var(--case); }
@media (min-width: 1024px) { #reverze .step { border-left-color: var(--case); } }
.case.bio .feature-list .i {
  color: var(--case); border-color: rgba(var(--case-rgb), .38); background: rgba(var(--case-rgb), .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px -8px rgba(var(--case-rgb), .9);
}

/* the steps of the case: a lit track, the chosen part in the brand's colour, arrows you can't miss */
@property --done { syntax: "<number>"; inherits: true; initial-value: .25; }
.case-nav { position: relative; padding-bottom: 16px; transition: --done .6s var(--ease); }
.case-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--case) calc(var(--done) * 100%), rgba(255, 255, 255, .08) 0);
  box-shadow: 0 0 12px -2px rgba(var(--case-rgb), .7);
}
.tabs { gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); }
.tabs [role="tab"] { min-height: 44px; padding: 0 16px 0 7px; gap: 10px; border-color: transparent; color: #cfcac2; font-weight: 600; }
.tabs [role="tab"] > span:first-child {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 12px/1 var(--mono); letter-spacing: 0; color: var(--text); background: rgba(255, 255, 255, .08);
}
.tabs [role="tab"] .tn { font: 600 15px/1 var(--body); color: inherit; letter-spacing: 0; }
.tabs [role="tab"]:hover { background: rgba(255, 255, 255, .06); border-color: transparent; }
.tabs [role="tab"][aria-selected="true"] {
  color: #1a1405; border-color: transparent; background: linear-gradient(180deg, #f7df92, var(--case));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 28px -10px rgba(var(--case-rgb), .85);
}
.tabs [role="tab"][aria-selected="true"] > span:first-child { color: var(--case); background: #1a1405; }
.tabs [role="tab"][aria-selected="true"] .tn { color: #1a1405; }
.tab-arrows .arrow { width: 50px; height: 50px; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.tab-arrows .arrow:hover { background: rgba(255, 255, 255, .12); }
.tab-arrows .arrow:not(.prev) {
  border-color: transparent; color: #1a1405; background: linear-gradient(180deg, #f7df92, var(--case));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 28px -10px rgba(var(--case-rgb), .85);
}
.tab-arrows .arrow:not(.prev):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 4px rgba(var(--case-rgb), .2), 0 14px 34px -10px rgba(var(--case-rgb), 1); }
.tab-count { font: 700 18px/1 var(--display); color: var(--dim); min-width: 4ch; }
.tab-count b { color: var(--case); font-weight: 700; }
/* the next arrow pulses three times, then waits */
@media (prefers-reduced-motion: no-preference) {
  .case-nav:not(.used) .arrow:not(.prev) { animation: nudge 2.6s var(--ease) 2s 3; }
}
@keyframes nudge { 0%, 60%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 0 rgba(var(--case-rgb), .55); } 30% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 10px rgba(var(--case-rgb), 0); } }
@media (max-width: 639px) {
  .tabs [role="tab"] { width: 44px; padding: 0; }
  .tabs [role="tab"] > span:first-child { width: 32px; height: 32px; font-size: 13px; }
  .tab-arrows .arrow { width: 46px; height: 46px; }
}


/* questions: each group has its colour (price and payment gold, your page blue, the rest pink) */
.faq-group { --c: #ffc65e; }
.faq-group:nth-child(2) { --c: #6fdcff; }
.faq-group:nth-child(3) { --c: #ff8fc8; }
.faq-group h3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.faq .qi {
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 36%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 22px -10px var(--c);
}
.faq details[open] { border-color: color-mix(in srgb, var(--c) 32%, transparent); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--c) 8%, transparent), transparent 60%), rgba(255, 255, 255, .06); }
.faq details[open] .qi { color: #0b0b0c; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); }
/* the plus that turns into a minus: two strokes of the same width, only the upright one turns */
.faq summary .pm { display: grid; place-items: center; color: var(--brand); transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: none; }
.faq summary .pm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; overflow: visible; }
.faq summary .pm .v { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.faq details[open] summary .pm .v { transform: rotate(90deg); }
.faq details[open] summary .pm { color: #0b0b0c; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); }
@media (hover: hover) { .faq details:not([open]) summary:hover .pm { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); } }

/* ---------- the stars back, the form in colour, real numbers (02/11/2026, night) ---------- */

/* a few small platinum stars that come and go slowly on "¿Algo más grande?" */
.sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sparks i { position: absolute; width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px 1px rgba(214, 228, 245, .95); opacity: .5; }
.sparks i::before, .sparks i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
}
.sparks i::after { transform: translate(-50%, -50%) rotate(90deg); }
.sparks i:nth-child(1) { left: 82%; top: 16%; transform: scale(1.15); }
.sparks i:nth-child(2) { left: 93%; top: 61%; transform: scale(.7); }
.sparks i:nth-child(3) { left: 70%; top: 8%; transform: scale(.55); }
.sparks i:nth-child(4) { left: 88%; top: 74%; transform: scale(.8); }
.sparks i:nth-child(5) { left: 60%; top: 30%; transform: scale(.5); }
.sparks i:nth-child(6) { left: 96%; top: 12%; transform: scale(.6); }
.sparks i:nth-child(7) { left: 76%; top: 58%; transform: scale(.45); }
@media (prefers-reduced-motion: no-preference) {
  .sparks i { opacity: 0; animation: twinkle 5.2s ease-in-out infinite; }
  .sparks i:nth-child(2) { animation-delay: .8s; } .sparks i:nth-child(3) { animation-delay: 1.7s; }
  .sparks i:nth-child(4) { animation-delay: 2.5s; } .sparks i:nth-child(5) { animation-delay: 3.4s; }
  .sparks i:nth-child(6) { animation-delay: 4.1s; } .sparks i:nth-child(7) { animation-delay: 1.2s; }
}
.more-big.off .sparks i { animation-play-state: paused; }
@keyframes twinkle { 0%, 100% { opacity: 0; scale: .3; } 45%, 55% { opacity: 1; scale: 1; } }

/* the form: a green-lit card, a coloured number for each part, a colour for each choice */
.qform {
  counter-reset: q;
  border-color: rgba(127, 220, 160, .22);
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(127, 220, 160, .09), transparent 62%),
    radial-gradient(70% 50% at 0% 100%, rgba(111, 220, 255, .06), transparent 66%), var(--night-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -50px rgba(127, 220, 160, .35);
}
.qform legend, .qform .field > label { display: flex; align-items: center; gap: 10px; }
.qform legend::before, .qform .field > label::before {
  counter-increment: q; flex: none;
  content: counter(q, decimal-leading-zero);
  content: counter(q, decimal-leading-zero) / "";
  display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 999px;
  font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent);
}
.qform .field > label small { margin-left: -4px; }
.pills span { gap: 9px; }
.pills span::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent);
  transition: box-shadow .4s var(--ease), scale .4s var(--ease);
}
@media (hover: hover) {
  .pills span:hover { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
}
.pills input:checked + span {
  color: #fff; border-color: color-mix(in srgb, var(--c) 75%, transparent);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 24px -8px color-mix(in srgb, var(--c) 75%, transparent);
}
.pills input:checked + span::before { scale: 1.15; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 32%, transparent), 0 0 10px var(--c); }
.pills input:focus-visible + span { outline-color: var(--c); }
.qform .field input:focus, .qform .field textarea:focus {
  border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
.qform .field input[aria-invalid="true"] { border-color: #ff8a7a; box-shadow: 0 0 0 3px rgba(255, 138, 122, .16); }
.qform .field .err { color: #ffa394; }

/* real numbers under each case head, in the case's own colour */
.case-facts { list-style: none; margin: 0; padding: 22px 0 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; max-width: 680px; }
.case-facts li { display: grid; align-content: start; gap: 8px; }
.case-facts li::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--case); box-shadow: 0 0 10px rgba(var(--case-rgb), .6); }
.case-facts b { font: 700 clamp(26px, 3vw, 36px)/1 var(--display); letter-spacing: -.02em; color: var(--case); text-shadow: 0 0 28px rgba(var(--case-rgb), .28); }
.case-facts span { color: var(--mute); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 520px) { .case-facts { gap: 16px 18px; } .case-facts b { font-size: 23px; white-space: nowrap; } .case-facts span { font-size: 14px; } }

/* ---------- one iPhone for every example (02/11/2026, late) ---------- */
/* Every screen is the barbershop's iPhone: the page runs under a clear status bar, its own sticky
   button sits above the home bar, and the screen drifts down by itself (js) while it stays
   scrollable by hand. Screenshot screens (.shot) carry the band under the clock in the image. */
.iphone { isolation: isolate; }
.iphone .scroll {
  position: absolute; inset: 2.4cqi; border-radius: 12.8% / 6.1%;
  overflow-y: auto; overscroll-behavior: auto; scroll-behavior: auto; scrollbar-width: none;
}
.iphone .scroll::-webkit-scrollbar { display: none; }
.iphone .scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.iphone .scroll.shot, .devices .iphone .scroll.shot { padding-top: 0; background: #0b0b0b; }
.iphone.ink-dark .scroll.shot { background: #faf8f3; }
.iphone .scroll.shot > img { display: block; width: 100%; height: auto; }
.iphone .scroll.shot > img[hidden] { display: none; }
.in-vitrina .scroll { overflow: hidden; }
/* a soft scrim keeps the clock readable over whatever passes under it */
.iphone .sbar::after {
  content: ""; position: absolute; z-index: -1; inset: 2.4cqi 2.4cqi 0; border-radius: 12.3cqi 12.3cqi 0 0; pointer-events: none;
  background: linear-gradient(rgba(8, 8, 8, .5), rgba(8, 8, 8, 0));
}
.iphone.ink-dark .sbar { color: #141613; }
.iphone.ink-dark .sbar::after { background: linear-gradient(rgba(250, 248, 243, .62), rgba(250, 248, 243, 0)); }

/* the site's own floating buttons: sticky at the bottom of the screen, clear of the home bar */
.iphone .ov { position: sticky; z-index: 3; bottom: 0; display: block; height: 0; pointer-events: none; }
.iphone .ov[hidden] { display: none; }
.rz-dm, .bb-wa { position: absolute; right: 4.6cqi; bottom: 8.2cqi; display: grid; place-items: center; border-radius: 50%; }
.rz-dm {
  width: 10.4cqi; height: 10.4cqi; color: #f3f1ec; background: rgba(20, 20, 20, .74);
  box-shadow: inset 0 0 0 .3cqi rgba(255, 255, 255, .18), 0 1.4cqi 3.6cqi rgba(0, 0, 0, .55);
}
.rz-dm .i { width: 4.8cqi; height: 4.8cqi; }
.rz-dm::after { content: ""; position: absolute; top: .5cqi; right: .5cqi; width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: #7fdca0; box-shadow: 0 0 0 .5cqi #141414; }
.bb-wa { width: 12.4cqi; height: 12.4cqi; color: #faf8f3; background: #2f4a3a; box-shadow: 0 1.4cqi 3.6cqi rgba(0, 0, 0, .32); }
.bb-wa .i { width: 6.2cqi; height: 6.2cqi; }
.rz-buy {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 3cqi; padding: 3.2cqi 4.4cqi 7.4cqi;
  color: #f3f1ec; background: rgba(16, 16, 16, .84); border-top: .3cqi solid rgba(255, 255, 255, .1);
  font: 600 3.3cqi/1.2 var(--body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rz-buy > span { flex: 1; min-width: 0; display: grid; gap: .6cqi; white-space: nowrap; overflow: hidden; }
.rz-buy small { font: 500 2.5cqi/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a8a49c; }
.rz-buy b { font: 800 5cqi/1 var(--display); letter-spacing: -.02em; }
.rz-buy i {
  font: 700 2.7cqi/1 var(--body); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  padding: 2.6cqi 3.8cqi; border-radius: 1.6cqi; color: #1a1406; background: linear-gradient(#f3d77f, #ecc864);
}

/* where each phone sits */
.vitrina .iphone { position: absolute; right: 6%; bottom: 7%; width: 25%; }
@media (max-width: 640px) { .vitrina .iphone { right: 5%; width: 42%; bottom: 6%; } }
.stage .iphone { position: absolute; right: 0; bottom: 0; width: 30%; }
.stage .iphone.solo { left: 50%; right: auto; top: 0; bottom: auto; width: 244px; transform: translateX(-50%); }
.bio-shot .iphone { position: absolute; right: 0; bottom: 0; width: 27%; }
.step-media.devices, .step-media.solo { border: 0; border-radius: 0; background: none; overflow: visible; }
.step-media.solo { display: grid; justify-items: center; }
.step-media.solo .iphone { --w: 260px; }
.pkg-eg .iphone { --w: 270px; }

/* Los Robles: a logo and real photos */
svg.s-logo { background: none; }
.s-photo img, .s-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-photo::after, .s-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.s-photo::after { background: linear-gradient(rgba(0, 0, 0, .3), transparent 32%, transparent 52%, rgba(0, 0, 0, .72)); }
.s-photo > span, .s-photo > b, .s-tile > b { position: relative; z-index: 1; }
.s-tile { position: relative; overflow: hidden; }
.s-tile::after { background: linear-gradient(transparent 42%, rgba(0, 0, 0, .74)); }
.s-tile > b { font: inherit; }
.demo-logo { background: none; }
.demo-logo svg { width: 100%; height: 100%; }
.demo-pics img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

/* Reverze: the chrome logo and the bolt that falls on its cut (as on reverzesv.com) */
.rz-mark { position: relative; display: inline-block; line-height: 0; }
.rz-strike { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rz-bolt, .rz-flash { opacity: 0; }
.rz-flash { mix-blend-mode: screen; }
.rz-charge { opacity: .55; }
.rz-mark.armed .rz-charge { opacity: 0; }
.rz-mark.struck .rz-bolt { animation: rz-bolt .72s linear both; }
.rz-mark.struck .rz-flash { animation: rz-flash .65s ease-out 30ms both; }
.rz-mark.struck .rz-charge { animation: rz-charge 1.4s ease-out 30ms both, rz-idle 7s steps(1) 1.45s infinite; }
.rz-mark.off .rz-charge { animation-play-state: paused; }
@keyframes rz-bolt { 0% { opacity: 0; } 4% { opacity: 1; } 14% { opacity: .2; } 22% { opacity: 1; } 45% { opacity: .55; } 100% { opacity: 0; } }
@keyframes rz-flash { 0% { opacity: 0; } 10% { opacity: .85; } 100% { opacity: 0; } }
@keyframes rz-charge { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: .55; } }
@keyframes rz-idle { 0%, 70%, 100% { opacity: .55; } 71% { opacity: .95; } 73% { opacity: .32; } 75% { opacity: .9; } 78% { opacity: .55; } }

/* package panels: the parts of the real example, one tap away */
.eg-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 330px; }
.eg-parts button {
  font: 600 13px/1 var(--body); padding: 9px 13px; border-radius: 99px; cursor: pointer;
  color: var(--mute); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.eg-parts button:hover { color: var(--text); border-color: rgba(var(--accent-rgb, 231, 229, 228), .55); }
.eg-parts button:active { transform: translateY(1px); }
.eg-parts button[aria-pressed="true"] { color: #0b0b0c; background: var(--accent, var(--brand)); border-color: transparent; }
.eg-parts button:focus-visible { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; }

/* the quick quote */
.qform fieldset[hidden] { display: none; }
.quote {
  display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(127, 220, 160, .3); background: rgba(127, 220, 160, .06);
}
.quote-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7fdca0; }
.quote-k .i { width: 14px; height: 14px; }
.quote-body { display: grid; gap: 7px; }
.quote-empty { margin: 0; color: var(--mute); font-size: 14.5px; text-wrap: pretty; }
.quote-row { display: flex; justify-content: space-between; gap: 12px; color: var(--mute); font-size: 15px; }
.quote-row.main { color: var(--text); font-weight: 600; }
.quote-row b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 3px; padding-top: 11px; border-top: 1px dashed rgba(255, 255, 255, .16); }
.quote-total span { font-weight: 600; }
.quote-total strong { font: 800 36px/1 var(--display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.quote-total strong sup { font-size: .5em; vertical-align: top; margin-right: 1px; color: #7fdca0; }
.quote-note { margin: 0; color: var(--mute); font-size: 14px; text-wrap: pretty; }
.quote-note b { color: var(--text); font-weight: 600; }
.quote-tip { margin: 0; color: var(--dim); font-size: 13px; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .quote-total strong.bump { animation: bump .45s var(--ease-out); }
  @keyframes bump { 0% { transform: translateY(4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
}
.quote-more {
  display: inline-block; padding: 6px 2px; margin: -6px -2px; font: inherit; font-weight: 600; color: #7fdca0; cursor: pointer;
  background: none; border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.quote-more:hover { color: var(--text); }
.quote-more:focus-visible { outline: 2px solid #7fdca0; outline-offset: 2px; border-radius: 4px; }

/* ---------- extras as cards, the big-project banner and the terms (03/11/2026) ---------- */
.more { grid-template-columns: 1fr; gap: 20px; }
.more-extras { gap: 22px; }
.ex-head { display: grid; gap: 8px; }
.ex-head h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; }
.ex-head p { margin: 0; color: var(--mute); font-size: 15.5px; max-width: 78ch; text-wrap: pretty; }
.more-extras ul { gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .more-extras ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .more-extras ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.more-extras li {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 18px 18px 16px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c) 11%, transparent), transparent 62%), rgba(255, 255, 255, .03);
}
.more-extras li + li { box-shadow: none; }
.ex-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.more-extras h4 { margin: 0; font: 700 18px/1.25 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.more-extras li > p { margin: 0; color: var(--mute); font-size: 15px; text-wrap: pretty; }
.more-extras li > p.ex-for { color: var(--dim); font-size: 14px; }
.ex-for a, .ex-note a, .lead-link, .ans a, .pkg-list a {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .35);
}
.ex-for a:hover, .ex-note a:hover, .lead-link:hover, .ans a:hover, .pkg-list a:hover { text-decoration-color: currentColor; }
.lead-link { white-space: nowrap; }
.ex-add {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--text); font: 600 14.5px/1.2 var(--body); cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.ex-add .i { width: 18px; height: 18px; flex: none; }
button.ex-add .i { display: none; }
.ex-add[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #0b0b0c; }
.ex-add[aria-pressed="true"] .i { display: block; }
.ex-add:active { transform: scale(.98); transition-duration: .1s; }
.ex-add:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.ex-note { margin: 0; color: var(--mute); font-size: 15px; }
.ex-note:empty { display: none; }
@media (hover: hover) {
  .more-extras li:hover {
    translate: none; border-color: color-mix(in srgb, var(--c) 45%, transparent);
    background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 62%), rgba(255, 255, 255, .045);
  }
  .ex-add:hover { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); }
  .ex-add[aria-pressed="true"]:hover { background: var(--c); }
}

/* "¿Algo más grande?" runs the full width: the pitch on the left, price and button on the right */
@media (min-width: 900px) {
  .more-big { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 72px); row-gap: 12px; align-items: center; }
  .more-big > .more-kicker { grid-column: 1; grid-row: 1; }
  .more-big > h3 { grid-column: 1; grid-row: 2; }
  .more-big > p:not(.price) { grid-column: 1; grid-row: 3; max-width: 62ch; }
  .more-big > .price { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: end; }
  .more-big > .btn { grid-column: 2; grid-row: 3; justify-self: end; }
}

/* terms: what I promise and what we agree, side by side */
.terms { display: grid; gap: 16px; }
@media (min-width: 900px) { .terms { grid-template-columns: 1fr 1fr; gap: 20px; } }
.terms-col {
  border-radius: var(--r); padding: clamp(22px, 3vw, 30px); display: grid; gap: 18px; align-content: start;
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 62%), var(--night-2);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -32px rgba(0, 0, 0, .9);
}
.terms-col h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(20px, 2vw, 24px); letter-spacing: -.01em; }
.terms-i {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 20px -6px var(--c);
}
.terms-i .i { width: 20px; height: 20px; }
.terms-list { list-style: none; margin: 0; padding: 0; display: grid; }
.terms-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; }
.terms-list li + li { box-shadow: 0 -1px 0 var(--line); }
.terms-list li:first-child { padding-top: 0; }
.terms-list li:last-child { padding-bottom: 0; }
.terms-list .i { width: 18px; height: 18px; color: var(--c); margin-top: 3px; }
.terms-list p { margin: 0; color: var(--mute); font-size: 15.5px; text-wrap: pretty; }
.terms-list strong, .terms-foot strong { color: var(--text); font-weight: 600; }
.terms-foot { margin: 20px 0 0; display: flex; gap: 10px; align-items: flex-start; color: var(--mute); font-size: 15.5px; max-width: 80ch; text-wrap: pretty; }
.terms-foot .i { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; }