/* ============================================================
   Ghoosted — landing  ·  cosmos.so-inspired
   Warm near-white gallery · editorial neo-grotesk (variable Inter) ·
   a floating field of aesthetic photo chips (drift + parallax + drag).
   Colour is carried by the photography; the UI stays monochrome and
   quiet. Instagram gradient survives only as a tiny accent.
   ============================================================ */

:root{
  --sec:150px;      /* aire entre secciones */
  --sec-end:56px;   /* cierre de una seccion antes de la siguiente */
  --bg:#F7F5F0;              /* warm near-white */
  --bg-2:#F1EDE5;           /* alternate section wash */
  --ink:#141210;            /* near-black */
  --ink-2:#6B655D;          /* muted body / labels */
  --ink-3:#736B60;          /* faint captions — kept above 4.5:1 on --bg */
  --paper:#FFFFFF;
  --line:rgba(20,18,16,.12);
  --line-2:rgba(20,18,16,.20);
  --surface:rgba(20,18,16,.035);
  --surface-2:rgba(20,18,16,.06);

  /* brand accent — Instagram gradient, used sparingly */
  --ig:linear-gradient(115deg,#feda75,#fa7e1e 22%,#d62976 52%,#962fbf 76%,#4f5bd5);
  --ig-2:linear-gradient(115deg,#d62976,#7a3ff2);
  --accent:#D6427E;
  --alert:#C4443A;

  --glass:rgba(247,245,240,.72);
  --glass-strong:rgba(247,245,240,.9);
  --blur:blur(14px) saturate(140%);

  --r:16px; --r-lg:24px; --r-xl:32px; --card-radius:14px;
  --shadow-s:0 10px 30px rgba(20,18,16,.10);
  --shadow:0 26px 60px -30px rgba(20,18,16,.28);
  --shadow-lg:0 40px 90px -34px rgba(20,18,16,.30);
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1180px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;
  --display:'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;min-width:0}
/* The UA sheet's [hidden]{display:none} loses to any author display rule, so
   `el.hidden = true` silently does nothing on things with display:flex
   (display:flex). This makes the attribute actually mean hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--bg);-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga";font-optical-sizing:auto;
  overflow-x:clip;position:relative;width:100%;max-width:100%;
}
/* ambient wash — neutral warm-grey only, no hue (colour comes from photos) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 42% at 82% -8%,rgba(147,145,122,.05),transparent 62%),
    radial-gradient(46% 44% at 4% 6%,rgba(147,145,122,.07),transparent 64%)}
/* Plain opacity, NOT mix-blend-mode: a blend-mode on a full-viewport fixed
   layer forces the browser to re-blend the ENTIRE screen against whatever's
   underneath every single frame the chips are animating (which is always,
   now that they're not gated by prefers-reduced-motion) — a much heavier,
   continuous cost than a static overlay just sitting there at low opacity. */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(20,18,16,.12);color:var(--ink)}

/* headline accent word — genuine (variable) italic carries the accent */
.grad{font-style:italic;font-weight:400;color:inherit;letter-spacing:-.052em}

.hl{color:var(--ink);font-weight:600}

/* focus-visible — keyboard affordance (was entirely missing) */
.btn:focus-visible,.nav-links a:focus-visible,.lang-btn:focus-visible,.lang-item:focus-visible,
.faq-item summary:focus-visible,.foot-col a:focus-visible,.brand:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.cta-band .btn:focus-visible{outline-color:#F7F5F0}

/* ---------- buttons (pill) ---------- */
.btn{--pad:16px 26px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:var(--pad);border-radius:100px;font-weight:500;font-size:15px;line-height:1;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;font-family:var(--font);letter-spacing:-.015em;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .35s,filter .3s}
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn .arr{transition:transform .35s var(--ease)}.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--ink);color:#F7F5F0;box-shadow:0 6px 22px rgba(20,18,16,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,18,16,.28)}
.btn-accent{background:var(--ink);color:#F7F5F0;box-shadow:0 6px 22px rgba(20,18,16,.18)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,18,16,.28)}
.btn-ghost{background:rgba(255,255,255,.5);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.9)}
.btn-sm{--pad:11px 18px;font-size:13.5px}
.btn-lg{--pad:17px 30px;font-size:16px}
.btn-block{display:flex;width:100%;white-space:normal;text-align:center;line-height:1.3}

/* ---------- nav (cosmos-style: brand · links · centered search · actions) ---------- */
.nav-wrap{position:sticky;top:0;z-index:100;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.nav{position:relative;pointer-events:auto;display:flex;align-items:center;gap:18px;width:100%;
  padding:14px clamp(20px,3.4vw,44px);transition:background .3s var(--ease),border-color .3s,box-shadow .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom-color:var(--line)}
/* centered liquid-glass search pill — truly centered on the bar itself
   (position:absolute + translate), not on the leftover flex gap, which was
   never symmetric because the brand+links group and the lang+CTA group on
   the right don't weigh the same */
.nav-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;width:100%;max-width:clamp(200px,26vw,380px);
  height:46px;padding:0 20px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px -14px rgba(20,18,16,.25);
  transition:background .3s,border-color .3s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.nav-search:hover{background:rgba(255,255,255,.85);border-color:var(--line-2);transform:translate(-50%,calc(-50% - 1px))}
.nav-search svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;flex:none}
.nav-search span{font-size:14px;color:var(--ink-3);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1040px){.nav-search{display:none}}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.03em;flex:none;color:var(--ink)}
.brand-mark{width:26px;height:26px;border-radius:50%;background:var(--ig);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px -3px rgba(214,41,118,.5)}
.brand-mark svg{width:16px;height:16px;fill:#fff}
.brand-mark.sm{width:22px;height:22px}.brand-mark.sm svg{width:13px;height:13px}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-burger{display:none;order:-1;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:38px;height:38px;margin-right:2px;border:1px solid var(--line);border-radius:11px;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-burger span{display:block;width:16px;height:1.7px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.35px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.35px) rotate(-45deg)}
.nav-links a{position:relative;color:var(--ink-2);font-size:14px;font-weight:450;letter-spacing:-.01em;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;background:transparent;color:var(--ink-2);border:none;border-radius:100px;
  padding:10px 12px;min-height:44px;font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.lang-btn:hover{color:var(--ink);background:var(--surface)}
.lang-flag{font-size:15px;line-height:1}
.lang-flag.fi{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(20,18,16,.14)}
.lang-name{white-space:nowrap}
.lang-caret{font-size:9px;color:var(--ink-3);transition:transform .25s var(--ease)}
.lang-wrap.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:232px;max-height:70vh;overflow-y:auto;
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;
  scrollbar-width:none;-ms-overflow-style:none;
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .18s,transform .2s var(--ease);z-index:50}
.lang-menu::-webkit-scrollbar{display:none}
.lang-wrap.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;
  border-radius:11px;padding:11px 12px;font:500 15px/1.1 var(--font);color:var(--ink);cursor:pointer;transition:background .14s}
.lang-item:hover{background:var(--surface)}
.lang-item-flag{flex:none;line-height:1}
.lang-item-flag.fi{width:24px;height:24px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(20,18,16,.14)}
.lang-item-name{flex:1;min-width:0}
.lang-check{width:17px;height:17px;flex:none;color:var(--ink-3);opacity:1}
/* Brand accent at its normal tint lands at 3.9:1 here, just under AA for text
   this size; a slightly deeper shade keeps the brand read and clears 4.5:1. */
.lang-item.active{color:#B83A6B;font-weight:600}
.lang-item.active .lang-check{color:#B83A6B}
.lang-item.soon{color:var(--ink-3);cursor:default}
.lang-item.soon:hover{background:none}
.lang-item.soon .lang-item-flag{filter:grayscale(.35);opacity:.7}
.lang-soon{font-size:11px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border-radius:100px;padding:4px 11px;flex:none}

/* ---------- hero (floating-chip field) ----------
   Pinned like cosmos: the hero sticks under the viewport and the next
   section (.over) slides OVER it on scroll. */
.hero{position:sticky;top:0;z-index:0;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:40px 22px 72px;overflow:hidden}
/* everything after the hero scrolls above it on its own solid ground */
.over{position:relative;z-index:2;background:var(--bg)}
/* chip field bleeds 10% off both edges so cards hang off-screen */
.field{position:absolute;inset:0 -10%;z-index:1;pointer-events:none}
/* NO mask on #field. A mask-image here forces the browser to rasterise the
   whole field — 13 children that each carry `will-change:transform` and a
   `filter:blur()` — into one composited layer, and on some GPUs that layer
   smears the blurred photos into a large grey cloud across the hero. The
   header clearance it was buying is now handled by the slot positions in
   hero.js instead: the topmost chip sits ~230px down, over 100px clear of the
   header even at maximum drift+parallax travel. */
.hero-center{position:relative;z-index:20;text-align:center;max-width:840px;pointer-events:none}
.hero-center > *{pointer-events:auto}
.hero-center::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:132%;height:158%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(247,245,240,.94) 0%,rgba(247,245,240,.74) 40%,rgba(247,245,240,0) 72%)}
/* minimal, cosmos-style: big title · two pills. Nothing else. */
.hero-title{font-family:var(--display);font-size:clamp(52px,9vw,96px);line-height:.99;font-weight:360;
  letter-spacing:-.05em;max-width:14ch;margin:0 auto;text-wrap:balance}
.hero-title .grad{display:block}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* ---------- a chip ---------- */
.chip{position:absolute;top:0;left:0;border-radius:12px;overflow:hidden;background:#e9e6e0;
  pointer-events:auto;cursor:grab;will-change:transform;touch-action:pan-y;
  box-shadow:0 6px 18px rgba(20,18,16,.10),0 1px 4px rgba(20,18,16,.06)}
.chip img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none;
  transition:opacity .4s ease}
.chip .inner{width:100%;height:100%;transition:transform .5s var(--ease),filter .5s ease,box-shadow .5s ease}
.chip:hover{z-index:40 !important}
.chip:hover .inner{transform:scale(1.05)}
.chip.grabbing{cursor:grabbing}
/* liquid-glass sheen sweep on hover — a soft diagonal highlight glides
   across the photo, Apple-style, on top of the existing drift/parallax/drag */
.chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  background-size:260% 260%;background-position:130% 130%;opacity:0;
  transition:opacity .4s ease,background-position 1.2s cubic-bezier(.2,.7,.2,1)}
.chip:hover::after{opacity:1;background-position:-30% -30%}

/* ---------- app-shot component ---------- */
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--paper)}
.shot img{width:100%;height:auto;display:block}
.shot-live{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:100px;padding:6px 11px;font-size:11px;font-weight:500;color:var(--ink-2)}
.shot-live i{width:7px;height:7px;border-radius:50%;background:#2fbf83;box-shadow:0 0 8px 1px #2fbf83;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- film moment (caption line + big rounded media card) ---------- */
.film{width:100%;padding:100px 24px 0}
.film-cap{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 26px;
  color:var(--ink);font-size:15.5px;font-weight:500;letter-spacing:-.015em}
.film-cap svg{width:13px;height:13px;fill:var(--ink);flex:none}
/* The shot is 4:3, so it goes tall fast — cap it against the viewport height
   too, not just the column, or it swallows the whole screen on laptops. */
.film-card{max-width:min(1060px,100%);margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--paper)}
/* height:auto is load-bearing — without it the img's height attribute wins as a
   presentational hint and the shot renders stretched instead of at its ratio. */
.film-card img{width:100%;height:auto;display:block}
/* The scroll-linked zoom on this card is driven from app.js (setFilmZoom), not
   by a CSS scroll-driven animation — view() timelines are still Chromium-only,
   and the global reduced-motion rule at the bottom of this file would kill a
   CSS animation outright. JS lets it degrade to the plain full-size card. */
.film-card{will-change:transform}

/* ---------- "every profile hides a story" — dark rounded collage panel ---------- */
.worlds{max-width:1288px;margin:0 auto;padding:var(--sec) 24px 0;text-align:center}
.worlds-title{font-family:var(--display);font-size:clamp(34px,5.4vw,64px);font-weight:360;letter-spacing:-.047em;
  line-height:1.02;color:var(--ink);text-wrap:balance;margin:0 auto 44px;max-width:20ch}
/* the panel cycles scenes: background tone + three photos + pill text
   crossfade together every few seconds (fluid, apple-2026, no cuts) */
.worlds-panel{position:relative;border-radius:28px;overflow:hidden;background:var(--worlds-bg,#B2687C);
  height:clamp(340px,54vw,620px);box-shadow:var(--shadow);
  transition:background-color 1.1s var(--ease)}
.w-slot{position:absolute;overflow:hidden}
.worlds-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:10px;padding:15px 26px;border-radius:100px;
  background:rgba(20,18,16,.4);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 50px -12px rgba(0,0,0,.45);white-space:nowrap}
.worlds-pill svg{width:15px;height:15px;stroke:#fff;fill:none;flex:none}
.worlds-pill span{transition:opacity .4s ease}
.worlds-pill span.swap{opacity:0}
/* All three slots are IDENTICAL: same width, full height, flush to the panel's
   top and bottom. They used to be staggered (left 27%x82% inset 9% from the
   top, centre 21%x74% inset 13%, right 27%x100% flush) which made the right
   one read as correct and the other two as mistakes rather than as a
   deliberate rhythm. Three columns of 27% leave 19% for the two gutters. */
.w-left{left:0;top:0;width:27%;height:100%}
.w-center{left:36.5%;top:0;width:27%;height:100%}
.w-right{right:0;top:0;width:27%;height:100%}
.w-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease)}
.w-slot img.on{opacity:1}
@media (max-width:720px){
  .worlds{padding-top:104px}
  .worlds-panel{height:clamp(300px,88vw,430px)}
  /* same three-equal-columns rule, just wider slots and tighter gutters */
  .w-left{left:0;top:0;width:31%;height:100%}
  .w-center{left:34.5%;top:0;width:31%;height:100%}
  .w-right{right:0;top:0;width:31%;height:100%}
}

/* ---------- trust / stats strip ---------- */
.stats{max-width:var(--maxw);margin:0 auto;padding:8px 24px 0}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{text-align:center;padding:40px 16px}
.stat + .stat{border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(30px,4.6vw,50px);font-weight:430;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:proportional-nums lining-nums}
.stat b.g{background:none;-webkit-background-clip:initial;color:var(--ink)}
.stat span{font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em}

/* ---------- section heads (left-aligned, cosmos editorial) ---------- */
.section-head{max-width:var(--maxw);margin:0 auto;text-align:left;padding:var(--sec) 24px 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.section-title{font-family:var(--display);font-size:clamp(32px,5.2vw,56px);font-weight:380;letter-spacing:-.043em;line-height:1.02;color:var(--ink);text-wrap:balance;max-width:18ch}
.section-sub{color:var(--ink-2);font-size:17px;max-width:46ch;margin:16px 0 0;line-height:1.55}
/* FAQ head stays centered above its narrow column */
.section-head#faq{text-align:center;max-width:800px}
.section-head#faq .kicker{justify-content:center}
.section-head#faq .section-title{max-width:none}

/* ---------- features (bento, editorial) ---------- */
.features-head{max-width:var(--maxw);margin:0 auto;padding:var(--sec) 24px 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.features-head-copy{display:flex;flex-direction:column;gap:18px;max-width:620px}
.features-sub{color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:330px;margin:0;text-wrap:pretty}

.fb-grid{max-width:var(--maxw);margin:0 auto;padding:52px 24px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fb-lg{grid-column:span 2;border-radius:var(--r-lg);background:var(--ink);padding:32px;display:flex;flex-direction:column;gap:28px}
.fb-lg-copy{display:flex;flex-direction:column;gap:8px}
.fb-lg-copy h3{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);font-weight:400;letter-spacing:-.038em;color:#fff;margin:0}
.fb-lg-copy p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.66);margin:0;max-width:440px}
.fb-lg-media{flex:none;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0B0A09}
.fb-lg-media img{width:100%;height:100%;object-fit:cover;object-position:top center}

.fb-side{display:flex;flex-direction:column;gap:16px}
.fb-tile{flex:1;border-radius:var(--r-lg);background:var(--bg-2);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:182px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fb-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-s)}
.fb-tile svg{width:22px;height:22px;color:var(--ink);flex:none}
.fb-tile h3{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px}
.fb-tile p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0}
/* Third-party rights reminder on the downloads tile: present and legible, but
   quiet enough that it never competes with the feature itself. */
.fb-note{font-size:11.5px!important;line-height:1.45!important;color:var(--ink-2)!important;margin-top:7px!important}

.fb-row3{grid-column:span 3;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fb-row2{grid-column:span 3;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fb-tile-flat{border-radius:var(--r-lg);background:var(--bg-2);padding:28px;display:flex;align-items:center}
.fb-tile-flat h3{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px}
.fb-tile-flat p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0}

.fb-wide{grid-column:span 3;border-radius:var(--r-lg);background:var(--ink);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.fb-wide-copy{display:flex;flex-direction:column;gap:10px}
.fb-wide-copy h3{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);font-weight:400;letter-spacing:-.038em;color:#fff;margin:0}
.fb-wide-copy p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.66);margin:0;max-width:420px}
.fb-wide-media{border-radius:14px;overflow:hidden;background:#0B0A09;aspect-ratio:16/10}
.fb-wide-media img{width:100%;height:100%;object-fit:cover;object-position:top center}

@media (max-width:860px){
  .features-head{padding-top:104px}
  .fb-grid{grid-template-columns:1fr}
  .fb-lg,.fb-row3,.fb-row2,.fb-wide{grid-column:span 1}
  .fb-row3,.fb-row2{grid-template-columns:1fr}
  .fb-wide{grid-template-columns:1fr}
  .fb-wide-media{order:-1}
}
@media (max-width:560px){
  .features-head{padding-top:72px;align-items:flex-start}
  .fb-lg,.fb-wide{padding:24px}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}


/* ---------- showcase (auto-cycling product slides) ---------- */
.show{max-width:1180px;margin:0 auto;padding:var(--sec) 24px var(--sec-end);
  display:grid;grid-template-columns:1fr 500px 1fr;gap:40px;align-items:center}
/* Sized for the LONGEST translation, not the shortest. The side column is
   300px at full width (the grid is 1fr 420px 1fr inside a 1180px max-width),
   and the three-column layout only exists above 1040px — below that it stacks
   and the title gets the full width, so only this range matters.

   MEASURED: "espectadores." rendered 302px at 54px — two pixels wider than the
   column, which is all it takes for hyphens:auto to fire and split it as
   "espec-tadores". The cap is 50px (280px, 20px of headroom) and the vw factor
   is 3.7 rather than 3.9 so the mid range keeps margin too: at the 1040px
   breakpoint the column is only 230px wide.

   German's "Story-Betrachtern." never fits at any usable size, but it carries
   a real hyphen and breaks there cleanly ("Betrachtern." is 238px). hyphens
   stays on as the last resort for a future string longer still. */
.show-title{font-family:var(--display);font-size:clamp(32px,3.7vw,46px);font-weight:380;letter-spacing:-.04em;
  line-height:1.02;color:var(--ink);margin:0;text-align:right;text-wrap:balance;
  overflow-wrap:break-word;hyphens:auto}

/* The stage is a fixed 3:4 window; the two shots cross-fade inside it, each
   drifting up in scale while it's the active one. */
.show-stage{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:#E7E2D8;cursor:pointer;
  /* isolation crea contexto de apilamiento: sin el, la diapositiva activa
     lleva un scale(1.04) y en algunos motores el recorte redondeado del
     padre no se le aplica, asi que las esquinas volvian a salir rectas. */
  isolation:isolate}
/* Slide 0 is the profile dossier, a LANDSCAPE shot (4:3) — the other slide is
   a portrait phone panel (3:4). The stage follows whichever is on: for the
   landscape one it flips to 4:3 and grows past its 420px column on both
   sides, so the side panel in the picture stays readable instead of being
   cropped to a phone-shaped sliver. The title column is untouched. */
.show-stage:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.show-slide{position:absolute;inset:0;opacity:0;transform:scale(1);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.6s cubic-bezier(.22,.61,.36,1)}
.show-slide.is-on{opacity:1;transform:scale(1.04)}
.show-slide img{width:100%;height:100%;object-fit:cover;object-position:center}

.show-copy{display:flex;flex-direction:column;gap:32px;max-width:300px}
.show-lede{display:none;font-size:22px;line-height:1.32;letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:pretty}
.show-lede.is-on{display:block}
.show-tabs{display:flex;flex-direction:column;gap:12px}
.show-tab{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;font-size:13.5px;text-align:left;
  color:rgba(20,18,16,.42);transition:color .5s ease}
.show-tab.is-on{color:var(--ink)}
.show-tab:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.show-bar{width:44px;height:2px;flex:none;background:rgba(20,18,16,.14);border-radius:2px;overflow:hidden}
/* width is driven per-frame from app.js; .12s smooths the 100ms tick */
.show-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .12s linear}

@media (max-width:1120px){
  .show{grid-template-columns:1fr;gap:36px;justify-items:center;padding:104px 24px 104px}
  .show-title{text-align:center}
  .show-stage{width:100%;max-width:420px}
  .show-copy{max-width:520px;text-align:center;align-items:center}
  .show-tabs{align-items:flex-start}
}
@media (max-width:560px){
  .show{padding:64px 20px 68px}
  .show-lede{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .show-slide.is-on{transform:none}
}

/* ---------- pricing ---------- */
/* ---------- transparency / compatibility (states the limits BEFORE pricing) ---------- */
.compat{max-width:1080px;margin:0 auto;padding:var(--sec) 24px var(--sec-end)}
.compat-head{text-align:center;margin-bottom:44px}
.compat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left}
.compat-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.compat-col h3{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:14px}
.compat-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.compat-col li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.compat-col li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.compat-foot{max-width:66ch;margin:28px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
@media (max-width:860px){
  .compat{padding:104px 20px 40px}
  .compat-grid{grid-template-columns:1fr;gap:16px}
}

.pricing{max-width:1000px;margin:0 auto;padding:var(--sec) 24px var(--sec-end);text-align:center;
  /* tick/dash marks for the feature rows — masked so each card can recolour them */
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.3 3.2 7.7-8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.price-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:18px}
.price-title{font-family:var(--display);font-size:clamp(38px,6vw,64px);font-weight:380;letter-spacing:-.045em;line-height:1;color:var(--ink);margin:0;max-width:16ch;text-wrap:balance}
.price-sub{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0;max-width:34ch;text-wrap:balance}


/* Requirements line. Quiet on desktop (where the answer is "yes, it works"),
   promoted to an alert on phones by app.js — see .is-mobile below. */
/* Device requirements. This is material pre-purchase information (it tells a
   phone visitor the product cannot run for them at all), so it does not live
   on the faint token. */
/* Fuera del bloque de precio salvo para quien de verdad le afecta. app.js le
   pone .is-mobile cuando el visitante entra desde un movil, y ahi si tiene
   que verse: esa persona no puede usar la extension y enterarse despues de
   pagar acaba en devolucion. El detalle completo vive en las condiciones. */
.price-req{display:none}
.price-req.is-mobile{display:flex;align-items:flex-start;justify-content:center;gap:9px;
  margin:0 auto 40px;max-width:46ch;font-size:13.5px;line-height:1.45;text-wrap:balance}
.price-req svg{width:15px;height:15px;flex:none;color:var(--ink-2);margin-top:3px}
.price-req.is-mobile{color:var(--ink);background:rgba(196,68,58,.08);border:1px solid rgba(196,68,58,.28);
  border-radius:14px;padding:14px 18px;font-weight:500;text-align:left;align-items:flex-start}
.price-req.is-mobile svg{color:var(--alert);margin-top:2px}

.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pcard{text-align:left;padding:38px 36px 36px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:30px}
.pcard-pro{background:var(--ink)}
.pcard-plus{background:var(--paper);border:1px solid rgba(20,18,16,.1)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard-name{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.pcard-pro .pcard-name{color:#fff}
.pcard-tier{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:100px;padding:4px 11px;color:var(--ink-2);border:1px solid rgba(20,18,16,.14)}
.pcard-pro .pcard-tier{color:var(--ink);background:#fff;border-color:transparent;padding:5px 11px}

.pcard-price{display:flex;flex-direction:column;gap:8px}
.pcard-amount{display:flex;align-items:baseline;gap:12px}
/* the gradient rides on the text itself, so the figure carries the accent
   without any coloured chrome around it */
.pcard-now{font-family:var(--display);font-size:clamp(52px,7vw,68px);font-weight:350;letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:proportional-nums lining-nums;
  background-image:linear-gradient(100deg,#A78BFA,#FF6A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard-plus .pcard-now{background-image:linear-gradient(100deg,#7C3AED,#F0522F)}
.pcard-later{font-size:16px;font-weight:400;color:var(--ink-3);letter-spacing:-.01em}
.pcard-pro .pcard-later{color:rgba(255,255,255,.4)}
.pcard-period{font-size:14px;color:var(--ink-2)}
.pcard-pro .pcard-period{color:rgba(255,255,255,.55)}

/* "Todo lo de Plus, y ademas:" — encabeza la lista de Pro. Se separa de la
   lista para que se lea como una condicion, no como un punto mas. */
.pcard-all{margin:18px 0 -4px;font-size:13.5px;font-weight:550;color:var(--ink-2);letter-spacing:-.01em}
.pcard-pro .pcard-all{color:rgba(255,255,255,.66)}
.pcard-feats{list-style:none;display:flex;flex-direction:column;gap:13px;padding-top:18px;
  border-top:1px solid rgba(20,18,16,.1)}
.pcard-pro .pcard-feats{border-top-color:rgba(255,255,255,.13)}
.pcard-feats li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.45;color:#3B3733}
.pcard-pro .pcard-feats li{color:rgba(255,255,255,.86)}
.pcard-feats li::before{content:"";width:13px;height:13px;flex:none;margin-top:5px;background-color:var(--ink);
  -webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.pcard-pro .pcard-feats li::before{background-color:var(--accent)}
.pcard-feats li.is-excluded{color:var(--ink-2)}
.pcard-feats li.is-excluded::before{background-color:var(--ink-2);
  -webkit-mask-image:var(--dash);mask-image:var(--dash)}

.pcard-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:100px;
  padding:17px 22px;font-size:15.5px;font-weight:550;letter-spacing:-.015em;white-space:normal;text-align:center;
  background:var(--bg);color:var(--ink);border:1px solid transparent;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.pcard-cta:hover{background:#fff}
.pcard-cta-ghost{background:transparent;color:var(--ink);border-color:rgba(20,18,16,.18);padding:16px 22px}
.pcard-cta-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pcard-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pcard-pro .pcard-cta:focus-visible{outline-color:#F7F5F0}

.price-foot{font-size:13.5px;color:var(--ink-2);margin:32px 0 0}
@media (max-width:720px){.price-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* ---------- faq ---------- */
.faq-list{max-width:760px;margin:36px auto 0;display:flex;flex-direction:column;text-align:left;
  border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);transition:opacity .3s}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 4px;font-weight:500;font-size:16px;letter-spacing:-.02em;
  display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;font-weight:300;color:var(--ink-3);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 4px 24px;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:62ch}

/* ---------- closing CTA (inverted ink, bookends the hero) ---------- */
/* The band used to repeat the hero's photo chips as background "bokeh". Blurred
   and faded over near-black they read as grey smudges, not photos, and one
   always ended up under the button. Replaced with two light sources built in
   CSS: a wide brand-gradient wash rising from behind the headline, and a
   tighter warm core right under it. Nothing competes with the message now. */
.faq-close{padding-bottom:130px}
@media (max-width:720px){.faq-close{padding-bottom:88px}}
.cta-band{position:relative;text-align:center;padding:150px 24px;color:#F7F5F0;overflow:hidden;isolation:isolate;
  background:
    /* core: sits directly behind the headline+button, brand magenta */
    radial-gradient(52% 62% at 50% 44%, rgba(214,66,126,.30) 0%, rgba(214,66,126,0) 70%),
    /* ambient: a wider, cooler indigo lift so the core doesn't float alone */
    radial-gradient(96% 88% at 50% 40%, rgba(94,86,196,.20) 0%, rgba(94,86,196,0) 72%),
    var(--ink)}
/* vignette pulls the corners down so the glow reads as a light source in a
   room rather than a flat gradient, and keeps the seam with the footer dark */
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(72% 68% at 50% 44%, rgba(0,0,0,0) 30%, rgba(20,18,16,.72) 100%)}
/* las fotos del cierre van detras del texto y algo apagadas: el mismo motivo
   visual que la cabecera, pero sin competir con lo que hay que leer */
.cta-band .field{position:absolute;inset:0 -10%;z-index:1;pointer-events:none;opacity:.5}
.cta-band .field img{filter:saturate(.9)}
.cta-band > h2,.cta-band > p,.cta-band > a{position:relative;z-index:2}
.cta-band h2{font-family:var(--display);font-size:clamp(34px,6vw,66px);font-weight:360;letter-spacing:-.05em;line-height:1;margin-bottom:16px;max-width:16ch;margin-inline:auto;color:#F7F5F0;text-wrap:balance}
.cta-band p{color:rgba(247,245,240,.66);font-size:17px;margin-bottom:30px;max-width:42ch;margin-inline:auto}
.cta-band .btn-primary{background:#F7F5F0;color:var(--ink)}
.cta-band .btn-primary:hover{background:#fff}

/* ---------- pair phone (index.html — desktop-to-phone handoff, design 4b) ---------- */
.pair{max-width:1288px;margin:0 auto;padding:var(--sec) 24px 0}
.pair-card{position:relative;background:var(--ink);border-radius:28px;overflow:hidden}
.pair-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:900px;height:520px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(124,58,237,.28),rgba(20,18,16,0) 70%)}
.pair-inner{position:relative;max-width:1100px;margin:0 auto;padding:100px 40px 104px}

.pair-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:64px}
.pair-badge{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:7px 16px}
.pair-badge .pair-dot{width:5px;height:5px;border-radius:50%;background:#A49B8E;transition:background .5s ease}
.pair-card.is-linked .pair-badge .pair-dot{background:#7C3AED}
.pair-head h2{font-family:var(--display);font-size:clamp(38px,6vw,64px);font-weight:380;letter-spacing:-.048em;
  line-height:1;color:#FFFFFF;margin:0;text-wrap:balance}
.pair-head p{font-size:17.5px;line-height:1.55;color:rgba(255,255,255,.6);margin:0;max-width:480px;text-wrap:pretty}

.pair-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center}

/* Both objects sit a little smaller than the design's raw sizes and lean in
   under the cursor — same "grow into place" gesture as the showcase shot at
   the top of the page. transform only, so nothing reflows around them. */
.pair-qr-card,.pair-phone-wrap{transition:transform .5s var(--ease)}
.pair-qr-card:hover,.pair-phone-wrap:hover{transform:scale(1.07)}

/* QR card — reads as the extension's own popup window */
.pair-qr-side{display:flex;justify-content:flex-end}
.pair-qr-card{width:100%;max-width:330px;border-radius:16px;overflow:hidden;background:#0B0A09;
  border:1px solid rgba(255,255,255,.11)}
.pair-qr-titlebar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.pair-qr-titlebar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.pair-qr-titlebar span{margin-left:10px;font-size:11.5px;color:rgba(255,255,255,.34)}
.pair-qr-body{padding:28px 26px 30px;display:flex;flex-direction:column;gap:20px}
.pair-qr-label{font-size:14px;font-weight:550;letter-spacing:-.015em;color:#FFFFFF}
.pair-qr-window{position:relative;background:#FFFFFF;border-radius:14px;padding:18px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pair-qr-slot{width:100%;height:100%;opacity:.25;transition:opacity .6s ease}
.pair-qr-slot svg{width:100%;height:100%;display:block}
.pair-card.is-scanning .pair-qr-slot{opacity:1}
/* real QR (rendered by qr.js, same generator the extension uses); it points
   at this page, not a live pairing session — a static page can't mint one */
.pair-scanline{position:absolute;left:10px;right:10px;height:2px;top:12%;
  background:linear-gradient(90deg,rgba(124,58,237,0),#7C3AED,#F0522F,rgba(240,82,47,0));
  box-shadow:0 0 24px 7px rgba(124,58,237,.4);opacity:0;pointer-events:none;
  transition:opacity .45s ease}
.pair-card.is-scanning .pair-scanline{animation:pairSweep 5.6s ease-in-out}
/* the sweep fades itself in and out at the ends, so the beam never blinks on
   at the top or cuts off dead at the bottom the instant the read completes */
@keyframes pairSweep{
  0%{top:12%;opacity:0}
  8%{opacity:1}
  86%{opacity:1}
  100%{top:88%;opacity:0}
}
.pair-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;opacity:0;transition:opacity .55s ease;pointer-events:none}
.pair-card.is-linked .pair-done{opacity:1}
/* the tick settles in rather than appearing at full size with the backdrop */
.pair-done i{width:46px;height:46px;border-radius:50%;background:linear-gradient(100deg,#7C3AED,#F0522F);
  display:flex;align-items:center;justify-content:center;
  transform:scale(.82);transition:transform .55s cubic-bezier(.2,.9,.3,1.3)}
.pair-card.is-linked .pair-done i{transform:scale(1)}
.pair-done svg{width:18px;height:18px;color:#FFFFFF}
/* Two labels on one row inside a narrow card. Longer translations ("Tersambung",
   "Привязано") clipped the right-hand one, so the left label is allowed to
   shrink and the status label keeps its full width. */
.pair-qr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pair-qr-foot span:first-child{font-size:12.5px;color:rgba(255,255,255,.42);min-width:0;flex:1 1 auto}
.pair-qr-foot span:last-child{font-size:12.5px;font-weight:500;color:#FFFFFF;flex:0 0 auto}

/* connector */
.pair-connector{position:relative;display:flex;align-items:center;height:2px;width:120px;padding:0 26px}
.pair-connector::before{content:"";position:absolute;left:26px;right:26px;top:50%;height:1px;background:rgba(255,255,255,.14)}
.pair-connector-dot{position:absolute;top:50%;left:26px;transform:translate(-50%,-50%);width:7px;height:7px;
  border-radius:50%;background:#F0522F;box-shadow:0 0 16px 4px rgba(240,82,47,.5);opacity:0;
  transition:opacity .45s ease}
.pair-card.is-scanning .pair-connector-dot{animation:pairTravel 5.6s ease-in-out}
/* fades at both ends like the beam, so the dot doesn't pop out of existence
   the moment it reaches the phone */
@keyframes pairTravel{
  0%{left:26px;opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{left:94px;opacity:0}
}

/* phone mockup */
.pair-phone-side{display:flex;justify-content:flex-start}
/* definite width, not min(240px,100%): the column shrink-wraps to its content,
   so a percentage here resolves against itself and collapses the phone */
.pair-phone-wrap{position:relative;width:240px;max-width:100%}
.pair-phone-glow{position:absolute;inset:-56px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,82,47,.2),rgba(20,18,16,0) 68%);opacity:.42;transition:opacity .8s ease}
.pair-card.is-linked .pair-phone-glow{opacity:1}
.pair-phone{position:relative;border-radius:46px;padding:3px;opacity:.42;transform:translateY(10px);
  background:linear-gradient(150deg,#3A3733,#151311 42%,#2A2724);
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.pair-card.is-linked .pair-phone{opacity:1;transform:translateY(0)}
.pair-phone-screen{position:relative;border-radius:43px;overflow:hidden;background:#08070d;aspect-ratio:9/19.5;
  box-shadow:inset 0 0 0 3px #0B0A09}
.pair-phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:78px;height:22px;
  border-radius:100px;background:#0B0A09;z-index:3}
.pair-phone-sheen{position:absolute;inset:0;border-radius:43px;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(122deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.14) 100%)}
.pair-phone-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:96px;height:4px;
  border-radius:100px;background:rgba(255,255,255,.4)}
.pair-mirrored-pill{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:7px;background:rgba(20,18,16,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:100px;padding:6px 13px;opacity:0;transition:opacity .6s ease;z-index:3}
.pair-mirrored-pill i{width:5px;height:5px;border-radius:50%;background:#F0522F}
.pair-mirrored-pill span{font-size:10.5px;font-weight:500;letter-spacing:-.01em;color:#FFFFFF}
.pair-card.is-linked .pair-mirrored-pill{opacity:1}

/* phone screen contents, per design 4b: brand wallpaper + real status bar, with
   the panel capture floating centred as a sheet — not a full-bleed screenshot */
.pair-phone-os{position:absolute;inset:0;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#241C33 0%,#141210 46%,#2A1A16 100%)}
.pair-phone-status{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px 0;font-size:11px;font-weight:600;letter-spacing:-.01em;color:#FFFFFF}
.pair-phone-icons{display:flex;align-items:center;gap:5px}
.pair-phone-icons svg:first-child{width:15px;height:9px;color:#FFFFFF}
.pair-phone-icons svg:last-child{width:17px;height:9px;color:#FFFFFF}
.pair-phone-sheet{flex:1;display:flex;align-items:center;padding:14px 10px 22px}
.pair-phone-sheet img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}

.pair-trust{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:76px;flex-wrap:wrap;padding:0 24px}
.pair-trust-item{display:flex;align-items:center;gap:9px}
.pair-trust-item svg{width:14px;height:14px;color:rgba(255,255,255,.5);flex:none}
.pair-trust-item span{font-size:13.5px;color:rgba(255,255,255,.55)}
.pair-trust-sep{width:1px;height:14px;background:rgba(255,255,255,.16)}

.pair-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:44px auto 0;max-width:1052px;
  border-top:1px solid rgba(255,255,255,.13);padding:0 24px}
.pair-step{display:flex;gap:14px;padding:26px 32px 0 0}
.pair-step:nth-child(2){padding-left:32px}
.pair-step:nth-child(3){padding-left:32px;padding-right:0}
.pair-step-n{font-size:11.5px;font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.32);margin-top:3px;flex:none}
.pair-step span{font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
.pair-step b{color:#FFFFFF;font-weight:500}

@media (max-width:960px){
  .pair-inner{padding:72px 28px 76px}
  .pair-grid{grid-template-columns:1fr;gap:40px;justify-items:center}
  .pair-qr-side,.pair-phone-side{width:100%;justify-content:center}
  .pair-connector{display:none}
  .pair-steps{grid-template-columns:1fr;gap:0;max-width:420px;border-top:0;padding:0}
  .pair-step,.pair-step:nth-child(2),.pair-step:nth-child(3){padding:20px 0 0}
  .pair-step + .pair-step{border-top:1px solid rgba(255,255,255,.13)}
}
@media (max-width:560px){
  .pair{padding-top:72px}
  .pair-card{border-radius:var(--r-lg)}
  .pair-inner{padding:56px 20px 60px}
  .pair-head{margin-bottom:44px}
  .pair-trust{gap:22px;margin-top:48px;flex-direction:column;padding:0}
  .pair-trust-sep{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* Deliberately minimal here. The scanline sweep and the travelling dot ARE
     the illustration — without them the panel just blinks between two static
     frames and never shows a phone being read — so they keep running even
     under reduced motion, on the owner's call. Both are small, contained and
     confined to their own box: no parallax, nothing crossing the viewport.
     The hover grow keeps its easing too; snapping is more jarring than easing. */
  .pair-phone,.pair-phone-glow,.pair-mirrored-pill,.pair-qr-slot,.pair-done{transition:none}
  /* The blanket `*{animation:none!important}` at the bottom of this file wins on
     origin, so re-enabling these two takes !important plus more specificity —
     scoped to exactly these elements so nothing else comes back with them. */
  .pair-card.is-scanning .pair-scanline{animation:pairSweep 5.6s ease-in-out !important}
  .pair-card.is-scanning .pair-connector-dot{animation:pairTravel 5.6s ease-in-out !important}
}

/* ---------- footer (full-bleed ink band; inner blocks keep the page grid) ---------- */
.footer{background:var(--ink);padding:120px 24px 56px}
.foot-inner{max-width:var(--maxw);margin:0 auto}
.foot-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:34px}
.foot-brand{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.foot-brand b{font-size:16px;color:#fff;letter-spacing:-.02em}
.foot-tag{font-size:12.5px;color:rgba(255,255,255,.42);width:100%;margin-top:2px}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.foot-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.42);margin-bottom:12px;font-weight:500}
.foot-col a{display:block;color:rgba(255,255,255,.66);font-size:13.5px;margin-bottom:9px;transition:color .3s}
.foot-col a:hover{color:#fff}
.foot-col a:focus-visible{outline:2px solid #F7F5F0;outline-offset:3px;border-radius:6px}
/* Independence + trademark notice. Deliberately calm: readable and clearly
   present, but styled as a statement of fact rather than a warning banner. */
.indep{border-top:1px solid rgba(255,255,255,.13);margin-top:8px;padding-top:24px;max-width:74ch}
.indep-lead{font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);margin-bottom:6px}
.indep-sub{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.38)}
.foot-disclaimer{font-size:11.5px;color:rgba(255,255,255,.38);max-width:70ch;line-height:1.65;margin:16px 0 10px}
.foot-rights{font-size:12px;color:rgba(255,255,255,.38)}

@media (prefers-reduced-motion:reduce){
}

/* ---------- cookie banner ---------- */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-lg);
  transform:translateY(140%);transition:transform .4s var(--ease)}
.cookie.show{transform:none}
.cookie p{flex:1;min-width:180px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.cookie p a{color:var(--ink);text-decoration:underline}
.cookie-btns{display:flex;gap:8px;flex:none}
.cookie .btn{--pad:9px 15px;font-size:12.5px}

/* ---------- RTL ---------- */
/* .pcard rows are flex + gap, so they mirror on their own — no RTL overrides needed */
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .lang-item{text-align:right}
[dir="rtl"] .price-note{text-align:right}
[dir="rtl"] .stat + .stat{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .section-head{text-align:right}
[dir="rtl"] .nav-links a::after{transform-origin:left}
[dir="rtl"] .nav-links a:hover::after{transform-origin:right}

/* ---------- responsive ---------- */
@media (max-width:860px){
  /* El menu no desaparece: se pliega detras del boton de la izquierda.
     Antes se ocultaba sin sustituto y en movil no habia forma de llegar a
     Funciones, Precio ni Emparejar movil. */
  .nav-burger{display:flex}
  .nav-links{position:absolute;left:12px;right:12px;top:calc(100% + 8px);
    flex-direction:column;gap:0;margin:0;padding:6px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 18px 40px rgba(20,16,28,.18);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
  .nav-links.abierto{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:13px 12px;font-size:15px;color:var(--ink);border-radius:10px}
  .nav-links a:active{background:var(--accent-soft)}
  .nav-links a::after{display:none}
  .feat{grid-template-columns:1fr;gap:34px;text-align:center;padding:60px 24px}
  .feat:nth-child(even) .feat-media{order:0}
  .feat:nth-child(odd) .feat-media,.feat:nth-child(even) .feat-media{justify-self:center}
  .feat p{margin-inline:auto}
  .feat-tag{margin-inline:auto}
  .section-head{padding-top:96px}
}
@media (max-width:720px){
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  .stat:nth-child(3){border-left:0}
}
@media (max-width:560px){
  .nav .lang-name{display:none}
  .nav .btn-primary{display:inline-flex}
  .nav .btn-primary .arr{display:none}
  .nav-right{gap:6px}
  .hero{padding-top:30px}
  .pricing{padding:104px 20px}
  .cta-band{padding:96px 20px}
  .feat{padding:48px 20px}
  .section-head{padding-top:72px}
  .showcase{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}