/* mylinks.place: marketing home. Tokens only (css/tokens.css); components from css/bundle.css (ml-*).
   The idea: the link-row pill from the logo runs everything. Buttons, photo masks, FAQ tiles,
   list bullets and the giant Filas in the hero and footer are all that one shape. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --gutter: 24px;
  --fs-h1: clamp(56px, 8vw, 128px);
  --fs-h2: clamp(36px, 4.4vw, 64px);
  --fs-num: clamp(56px, 6.4vw, 96px);
  --fs-st: clamp(22px, 2.6vw, 36px);
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-small: 15px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: .95; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
.small { font-size: var(--fs-small); line-height: 1.5; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: var(--radius-full); background: var(--ink); color: var(--on-ink); font-weight: 500; text-decoration: none; }
.skip:focus { top: 16px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Fields: one flat colour per section ---------- */
.field { position: relative; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(72px, 9vw, 144px); }
@media (min-width: 960px) { .field { min-height: 90svh; } .step-field { min-height: 64svh; } }
.f-accent { background: var(--accent); color: var(--on-accent); --accent-ink: var(--ink); }
.f-ink { background: var(--ground-ink); }
.f-raised { background: var(--ground-raised); }
.f-sand { background: var(--sand); color: var(--ink); }
.f-paper { background: var(--paper); color: var(--ink); }
.on-ink { color: var(--ink); }
.f-raised .capture { background: var(--ground-ink); }

/* Entrance: heading, text, visual rise 24px, staggered 70ms. site.js plays it with the Web Animations API the
   first time an element gets near the screen; at rest everything is simply visible, so nothing depends on script.
   .reveal-wait is added by site.js (and only there) to the blocks still below the screen, so they are already hidden when they come in; site.js removes it, and starts the rise, just before they are seen. */
.reveal-wait { opacity: 0; }

/* ---------- Nav (plain bar on the hero field) ---------- */
.lang-bar {
  background: var(--ink);
  color: var(--paper);
  padding: 10px var(--gutter);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.lang-bar[hidden] { display: none !important; }
.lang-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lang-bar__link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang-bar__link:hover { text-decoration-thickness: 2px; }
.lang-bar__close {
  background: transparent;
  border: 0;
  color: var(--paper);
  opacity: 0.7;
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 8px;
}
.lang-bar__close:hover { opacity: 1; }

.nav { position: relative; display: flex; align-items: center; gap: 12px; min-height: 84px; padding-block: 20px; }
.nav__logo { display: block; flex: none; line-height: 0; margin-right: auto; border-radius: var(--radius-s); }
.nav__logo img { display: block; width: 125px; height: auto; }
.nav__links { list-style: none; margin: 0; padding: 0; display: none; gap: 28px; align-items: center; font-size: var(--fs-small); font-weight: 500; }
.nav__links a { display: inline-block; padding: 8px 0; text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav__toggle { display: none; width: var(--control-m); height: var(--control-m); place-items: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); cursor: pointer; }
.nav__toggle:hover { background: var(--ink); color: var(--paper); }
.js .nav__toggle { display: grid; }
.nav.is-open .nav__links {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: absolute; top: calc(100% - 8px); left: 0; right: 0; z-index: 20;
  padding: 8px 24px; border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--shadow-2); /* taste-skill-ignore: open menu floats above the page */
}
.nav.is-open .nav__links a { display: block; padding: 14px 0; font-size: var(--fs-body); }
.nav__demo a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.nav__demo .ico { width: 16px; height: 16px; fill: currentColor; stroke-width: 2; }
.nav.is-open .nav__demo a { display: flex; }
html:not(.js) .nav__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__toggle, .js .nav__toggle { display: none; }
  .nav__logo { margin-right: 0; }
  .nav__links { margin-left: auto; }
  .nav { gap: 32px; }
}
@media (min-width: 960px) and (max-width: 1099px) { .nav, .nav__links { gap: 20px; } .nav__links { gap: 18px; } }
@media (min-width: 1100px) {
  .nav__demo a { padding: 6px 14px; border: 2px solid var(--ink); border-radius: var(--radius-full); }
  .nav__demo a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
}
@media (max-width: 380px) { .nav__cta { padding: 0 12px; } }
/* At 320 px logo + button + menu icon are wider than the column and the menu icon is cut: tighten the row (the icon is a 20 px glyph in a 32 px box, so it can overhang the gutter a little). */
@media (max-width: 340px) { .nav { gap: 8px; } .nav__logo img { width: 100px; } .nav__cta { padding: 0 10px; } .nav__toggle { margin-right: -6px; } }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; padding-block: 0 clamp(48px, 6vw, 80px); overflow-x: clip; }
.hero > .wrap { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero__main { flex: 1; display: flex; align-items: center; padding-block: clamp(24px, 5vw, 56px) 0; }
.hero__text { width: 100%; min-width: 0; max-width: 640px; }
.hero h1 { max-width: 9em; }
.hero .lead { margin-top: 24px; max-width: 40ch; }

.claim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; max-width: 620px; }
.claim__field {
  display: flex; align-items: center; gap: 0; height: 60px; padding: 0 24px;
  border-radius: var(--radius-full); background: var(--paper);
  font-family: var(--font-mono); /* taste-skill-ignore: brand rule, address text */ font-size: var(--fs-lead); font-weight: 500;
}
.claim__field:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.claim__prefix { flex: none; color: var(--ink-muted); cursor: text; }
.claim__input {
  flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: inherit;
}
.claim__input::placeholder { color: var(--line-strong); opacity: 1; }
.claim__submit { width: 100%; }
@media (min-width: 560px) {
  .claim { display: flex; gap: 8px; padding: 6px; border-radius: var(--radius-full); background: var(--paper); }
  .claim__field { flex: 1; min-width: 0; height: var(--control-l); padding: 0 8px 0 20px; background: transparent; }
  .claim__field:focus-within { outline-offset: 2px; }
  .claim__submit { flex: none; width: auto; }
}
.claim__help { margin-top: 14px; }
/* Below ~390 px the prefix (14 mono characters) plus the placeholder no longer fit at 20 px: shrink the type and the padding so nothing is cut. */
@media (max-width: 389px) { .claim__field { padding: 0 16px; font-size: 16px; } }
.claim__risk { margin-top: 12px; font-weight: 600; font-size: var(--fs-body); }
.claim__demo { margin-top: 20px; max-width: 620px; container-type: inline-size; }
.demo-cta {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 22px 12px 12px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper);
  text-decoration: none; transition: background-color 160ms ease-out;
}
.demo-cta:hover { background: var(--ground-raised); }
.demo-cta__icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.demo-cta__icon .ico { width: 22px; height: 22px; fill: currentColor; stroke-width: 2; margin-left: 2px; }
.demo-cta__text { display: grid; gap: 2px; min-width: 0; }
.demo-cta__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.demo-cta__sub { font-size: 14px; line-height: 1.4; color: #cfc8bc; text-wrap: pretty; }
.demo-cta__arrow { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .demo-cta__icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); animation: demo-ring 2.6s ease-out infinite; }
  .demo-cta:hover .demo-cta__arrow { transform: translate(2px, -2px); }
  .demo-cta__arrow { transition: transform 160ms ease-out; }
}
@keyframes demo-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 420px) { .demo-cta { gap: 12px; padding-right: 18px; } .demo-cta__title { font-size: 18px; } .demo-cta__icon { width: 48px; height: 48px; } }
/* Narrow pill (phones): the support line made it a 3 to 4 line block, so only the title stays visible and the pill is slim (play circle + title + arrow).
   The line is not removed: it stays in the DOM, visually hidden, so it is still part of the link's accessible name. It is judged by the pill's own width (container query on .claim__demo):
   from ~400px it fits in two lines, which is how it already looks on desktop. Browsers without container queries fall back to the viewport width. */
@supports (container-type: inline-size) {
  @container (max-width: 399px) {
    .demo-cta { gap: 10px; padding: 6px 16px 6px 6px; }
    .demo-cta__icon { width: 44px; height: 44px; }
    .demo-cta__title { font-size: 17px; text-wrap: balance; }
    .demo-cta__sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}
@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .demo-cta { gap: 10px; padding: 6px 16px 6px 6px; }
    .demo-cta__icon { width: 44px; height: 44px; }
    .demo-cta__title { font-size: 17px; }
    .demo-cta__sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}
.sec-cta--pair { display: flex; flex-wrap: wrap; gap: 12px; }

/* The giant Filas: three flat pills, left-aligned, long to short, bleeding off the right edge */
.hero__art { position: relative; z-index: 1; margin-top: 40px; padding-block: 56px; }
.pills { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; --ph: clamp(72px, 17vw, 130px); }
.pill { display: block; height: var(--ph); margin-bottom: calc(var(--ph) * .25); border-radius: var(--radius-full); translate: calc(var(--px, 0px) * var(--k, 1)) 0; }
.pill:last-child { margin-bottom: 0; }
.pill--1 { width: 125vw; background: var(--ink); }
.pill--2 { width: 98vw; background: var(--paper); }
.pill--3 { width: 72vw; background: var(--sand); }
.hero__page { position: relative; width: min(320px, calc(100vw - 32px)); margin-inline: auto; }
.hero__page .ex { width: min(320px, calc(100vw - 32px)); }
@media (min-width: 640px) { .hero__page, .hero__page .ex { width: 340px; } }
@media (min-width: 960px) {
  .hero__art { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
  .pills { left: 56vw; top: calc(50% + 42px); --ph: min(13vw, 19svh); }
  .pill--1 { width: 70vw; }
  .pill--2 { width: 54vw; }
  .pill--3 { width: 38vw; }
  .hero__page { position: absolute; margin: 0; left: min(63vw, calc(100vw - 340px - var(--gutter))); top: calc(50% + 42px); translate: 0 -50%; }
  .hero__main { padding-bottom: 0; }
  .hero__text { max-width: calc(56vw - 120px); min-width: 0; }
}
@media (min-width: 1300px) { .hero__text { width: 100%; min-width: 0; max-width: 640px; } }

@media (prefers-reduced-motion: no-preference) {
  .js .pill { animation: pill-in 700ms var(--ease) both; animation-delay: calc(var(--i) * 120ms + 120ms); }
  .js .hero__page .ex { animation: page-in 650ms var(--ease) 900ms both; }
}
@keyframes pill-in { from { transform: translateX(110vw); } to { transform: none; } }
@keyframes page-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---------- The hero's example link page (product fragment, data-ui). The five trade examples in #ejemplos are real screenshots now (see "Ejemplos"). ---------- */
.ex {
  width: min(340px, 100%); margin: 0 auto; overflow: hidden; text-align: left; pointer-events: none;
  background: var(--paper); color: var(--ink); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
  font-family: var(--font-sans); --link-row: 52px;
}
.ex__bar { padding: 10px 14px; background: var(--surface); }
.ex__url { display: block; padding: 5px 14px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font: 500 13px/18px var(--font-mono); /* taste-skill-ignore: address text in a product fragment */ text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One column that can shrink (minmax(0, 1fr)), not the implicit `auto` track: an auto track grows to the min-content of its widest item, and the nowrap footer pill (~310px) made every row 312px wide
   inside a 288px (phones) or 308px (desktop) content box, so the buttons ran past the card's right padding and, on phones, past the card edge. */
.ex__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 16px 14px; }
.ex .ml-profile { gap: 6px; }
.ex .ml-profile__avatar { width: 72px; height: 72px; }
.ex__avatar-brand { display: grid; place-items: center; background: var(--ink); }
.ex__avatar-brand svg { width: 44%; height: auto; }
.ex__avatar-brand .sym-a { fill: var(--accent); }
.ex__avatar-brand .sym-b { fill: var(--paper); }
.ex .ml-profile__name { font-size: 24px; line-height: 28px; }
.ex .ml-profile__bio { font-size: 15px; line-height: 20px; }
.ex .ml-profile__socials { margin-top: 4px; }
.ex .ml-profile__social { width: 36px; height: 36px; }
.ex__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ex .ml-link-row { min-height: 52px; padding: 6px; }
.ex .ml-link-row__label { font-size: 15px; line-height: 20px; }
.ex__foot { margin: 0; text-align: center; }
.ex__foot .ml-made-with { max-width: 100%; gap: 6px; padding-inline: 10px; font-size: 11px; white-space: normal; text-align: left; text-wrap: balance; }
.ex__foot .ml-made-with > span:last-child { min-width: 0; }

/* ---------- Marquee: example addresses ---------- */
.marquee { overflow: hidden; padding-block: 32px; background: var(--paper); }
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; flex: none; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.addr {
  display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: var(--radius-full);
  background: var(--sand); color: var(--ink); font-family: var(--font-mono); /* taste-skill-ignore: address text */ font-size: var(--fs-lead); font-weight: 500; white-space: nowrap;
}
.addr span { color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 70s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-33.3333%); } }

/* ---------- Section helpers ---------- */
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head .lead { max-width: 34ch; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 32px; } }
.sec-cta { margin: 32px 0 0; }

/* ---------- Cómo funciona ---------- */
.step-field { padding-block: clamp(56px, 6vw, 88px); }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.step__text h3 { font-size: var(--fs-h2); }
.step__text .lead { margin-top: 24px; max-width: 34ch; }
@media (min-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .step--flip .step__text { order: 2; }
}

/* Capture slots: product screenshots drop in as capturas/<file>; site.js swaps the placeholder for the image */
.capture { position: relative; margin: 0; aspect-ratio: var(--ar, 4/3); overflow: hidden; background: var(--sand); border-radius: var(--radius-l); color: var(--ink-muted); }
.capture__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }
.capture__mark { height: clamp(56px, 24%, 168px); width: auto; aspect-ratio: 720 / 840; fill: currentColor; }
.capture figcaption { max-width: 38ch; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted); }
.capture__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Clips: short muted videos in the capture slots ---------- */
/* Two videos per slot (wide for the computer, tall for the phone); the CSS shows one and site.js plays it while it is on screen. */
.capture--clip { background: var(--ground-ink); }
.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ground-ink); cursor: pointer; }
.clip--tall { display: none; }
.clip__btn { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-full); background: rgba(20, 20, 20, .62); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.clip__btn:hover { background: rgba(20, 20, 20, .8); }
.clip__btn:focus-visible { outline-color: #fff; outline-offset: 2px; }
.clip__btn[hidden] { display: none; }
/* el botón no tapa el panel grabado: aparece al pasar el mouse o enfocar con el teclado; en pantallas táctiles se pausa tocando el video */
.clip__btn { opacity: 0; transition: opacity var(--dur-fast, .15s) ease; }
.capture--clip:hover .clip__btn, .capture--clip:focus-within .clip__btn, .clip__btn:focus-visible { opacity: 1; }
.clip__ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; }
.clip__ico--play { fill: currentColor; stroke-width: 1.5; }
.clip__btn[data-playing="true"] .clip__ico--play, .clip__btn[data-playing="false"] .clip__ico--pause { display: none; }
@media (max-width: 719px) {
  /* phone: the portrait clip, a modest centred frame (never taller than 70% of the screen) */
  .capture--clip { width: min(100%, calc(min(70svh, 640px) * 390 / 844)); aspect-ratio: 390 / 844; margin-inline: auto; }
  .clip--wide { display: none; }
  .clip--tall { display: block; }
  .clip__btn { right: 8px; bottom: 8px; }
}
/* Phone body around the portrait clips (below 720px only; the wide clips are not phones). The video is a recorded panel (390x844) whose header row sits flush against its own top edge, so on its own it reads as a cropped video: here it
   gets a bezel, a dark status strip holding the camera island (the panel's header starts below it) and concentric corners. All sizes are fractions of the frame's width (cqw, the figure is an inline-size container), and the
   frame's aspect ratio already includes bezel and strip, so nothing shifts: bezel 3.2% + strip 9% on top, bezel 3.2% on the sides and bottom, screen 390:844 -> frame 1 : 2.1796. Without container units the plain clip above stays. */
@supports (width: 1cqw) {
  @media (max-width: 719px) {
    figure.capture.capture--clip {
      /* the two darks are the dark-field tokens (--surface-sunken, --paper) pinned here so the body stays dark on any section */
      --phone-body: #0c0b0a; --phone-screen: #121110; --phone-rim: rgba(246, 243, 238, .2);
      --bz: 3.2cqw; --st: 9cqw; --r-in: 11.3cqw; /* bezel, status strip, inner (screen) radius = outer 14.5% of the width - bezel */
      container-type: inline-size;
      width: min(100%, calc(min(70svh, 640px) / 2.1796));
      aspect-ratio: 1 / 2.1796;
      overflow: visible;
      background: var(--phone-body);
      border-radius: 14.5% / 6.652%; /* = 14.5% of the width on both axes (the figure's own radius cannot use cqw) */
      box-shadow: inset 0 0 0 1px var(--phone-rim), 0 0 0 1px rgba(246, 243, 238, .08);
    }
    /* the screen: the strip colour behind the video, with the inner radius at all four corners */
    figure.capture.capture--clip::before { content: ""; position: absolute; inset: var(--bz); border-radius: var(--r-in); background: var(--phone-screen); pointer-events: none; }
    /* the camera island, centred in the strip */
    figure.capture.capture--clip::after { content: ""; position: absolute; left: 50%; top: calc(var(--bz) + (var(--st) - 5.2cqw) / 2); width: 24cqw; height: 5.2cqw; translate: -50% 0; border-radius: var(--radius-full); background: #000; pointer-events: none; }
    figure.capture.capture--clip .clip { position: absolute; left: var(--bz); top: calc(var(--bz) + var(--st)); width: calc(100% - 2 * var(--bz)); height: calc(100% - 2 * var(--bz) - var(--st)); border-radius: 0 0 var(--r-in) var(--r-in); }
    figure.capture.capture--clip .clip--wide { display: none; }
    figure.capture.capture--clip .clip__btn { right: calc(var(--bz) + 8px); bottom: calc(var(--bz) + 8px); }
  }
}

/* The install clip is a phone screen, so it gets the phone body at every width (the portrait clips above only below 720px). Same geometry as that block (bezel 3.2% + status strip 9% of the width, concentric corners,
   frame 1 : 2.1796; the figure is an inline-size container). The video is 390x848 and the screen box 390x844: object-fit: cover trims 4px. */
.capture--phone { background: var(--ground-ink); }
.capture--phone .clip, .capture--phone .clip--tall { display: block; cursor: pointer; }
.capture--phone:hover .clip__btn, .capture--phone:focus-within .clip__btn { opacity: 1; }
@supports (width: 1cqw) {
  figure.capture.capture--phone {
    --phone-body: #0c0b0a; --phone-screen: #121110; --phone-rim: rgba(246, 243, 238, .2);
    --bz: 3.2cqw; --st: 9cqw; --r-in: 11.3cqw;
    container-type: inline-size;
    width: min(100%, calc(min(70svh, 640px) / 2.1796));
    aspect-ratio: 1 / 2.1796;
    margin-inline: auto;
    overflow: visible;
    background: var(--phone-body);
    border-radius: 14.5% / 6.652%;
    box-shadow: inset 0 0 0 1px var(--phone-rim), 0 0 0 1px rgba(246, 243, 238, .08);
  }
  figure.capture.capture--phone::before { content: ""; position: absolute; inset: var(--bz); border-radius: var(--r-in); background: var(--phone-screen); pointer-events: none; }
  figure.capture.capture--phone::after { content: ""; position: absolute; left: 50%; top: calc(var(--bz) + (var(--st) - 5.2cqw) / 2); width: 24cqw; height: 5.2cqw; translate: -50% 0; border-radius: var(--radius-full); background: #000; pointer-events: none; }
  figure.capture.capture--phone .clip { position: absolute; left: var(--bz); top: calc(var(--bz) + var(--st)); width: calc(100% - 2 * var(--bz)); height: calc(100% - 2 * var(--bz) - var(--st)); border-radius: 0 0 var(--r-in) var(--r-in); }
  figure.capture.capture--phone .clip__btn { right: calc(var(--bz) + 8px); bottom: calc(var(--bz) + 8px); }
}
@supports not (width: 1cqw) {
  .capture--phone { width: min(100%, calc(min(70svh, 640px) * 390 / 844)); aspect-ratio: 390 / 844; margin-inline: auto; }
  .capture--phone .clip__btn { right: 8px; bottom: 8px; }
}

/* ---------- Instalala como app ---------- */
/* Text on top (title, lead), then the switch, the two overlapping phones and the chosen platform's steps, then the computer sentence and the offline note. Wide enough (1100px): the phones on the left, the text on the right. */
.inst-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.inst-step__text h3 { font-size: var(--fs-h2); }
.inst-step__text .lead { margin-top: 24px; max-width: 34ch; }
.inst__desk { max-width: 40ch; font-size: var(--fs-body); line-height: 1.45; }
.inst__desk strong, .plat__steps strong { font-weight: 600; }
.inst__note { margin-top: 20px; color: var(--ink-muted); max-width: 40ch; }
.inst__hint { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-muted); }

.plats { display: grid; gap: 28px; justify-items: center; width: 100%; min-width: 0; --pk: .62; }
.plat { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.plat__name { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--fs-lead)/1.2 var(--font-sans); letter-spacing: 0; }
.plat__logo { display: block; flex: none; width: 24px; height: 24px; fill: currentColor; }
.plat__steps { margin: 0; width: 100%; max-width: 40ch; font-size: var(--fs-body); line-height: 1.45; }
.plats__pick { display: none; }

/* Without JavaScript there is no switch: the two phones side by side (one under the other below 720px), then each platform's name and steps in the same two columns. */
.plats__devices, .plats__texts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; }
@media (min-width: 720px) {
  .plats__devices, .plats__texts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
  .plats__devices { align-items: start; }
}

/* With JavaScript: the same composition as the computer + phone of «Una para cada lugar». The switch sits on top, the two phones overlap (iPhone left, Android right, the chosen one in front at full size and playing,
   the other stepped back: smaller, dimmed, still, poster only), and under them only the chosen platform's steps. --pk is the phone width as a share of the composition (the rest is the visible offset). */
html.js .plats__pick { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: rgba(246, 243, 238, .1); }
.plats__pick button {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit;
  font: 500 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out;
}
.plats__pick button:hover { background: rgba(246, 243, 238, .12); }
.plats__pick button[aria-pressed="true"] { background: var(--ink); color: var(--ground-raised); }
@media (max-width: 340px) { .plats__pick button { padding: 0 14px; } }

html.js .plats__devices { position: relative; display: block; width: min(100%, calc(min(70svh, 640px) / (2.1796 * var(--pk)))); aspect-ratio: 1 / 1.3515; }
html.js .plats__devices figure.capture.capture--phone {
  position: absolute; bottom: 0; width: calc(var(--pk) * 100%); margin: 0; z-index: 2; filter: none;
  box-shadow: inset 0 0 0 1px var(--phone-rim), 0 0 0 1px rgba(246, 243, 238, .08), 0 22px 44px -14px rgba(0, 0, 0, .55);
  transition: transform 700ms var(--ease), filter 480ms ease-out, box-shadow 480ms ease-out;
}
html.js .plat-dev--iphone { left: 0; transform-origin: 0 100%; }
html.js .plat-dev--android { right: 0; transform-origin: 100% 100%; }
html.js .plats[data-plat="iphone"] .plats__devices figure.plat-dev--android, html.js .plats[data-plat="android"] .plats__devices figure.plat-dev--iphone { z-index: 1; transform: scale(.86); filter: brightness(.6); cursor: pointer; box-shadow: inset 0 0 0 1px var(--phone-rim), 0 0 0 1px rgba(246, 243, 238, .08); }

/* the steps of both platforms share one cell (so the block never changes height); the chosen one is shown, the other waits invisible and out of the accessibility tree */
html.js .plats__texts { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(100%, 40ch); }
html.js .plat { grid-area: 1 / 1; transition: opacity 260ms ease-out 120ms, transform 480ms var(--ease) 120ms, visibility 0s linear 0s; }
html.js .plats[data-plat="iphone"] .plat--android, html.js .plats[data-plat="android"] .plat--iphone { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 140ms ease-out, transform 480ms var(--ease), visibility 0s linear 140ms; }
/* the name (with its logo) is only for screen readers once the switch is there */
html.js .plat__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html.js .plats__devices figure.capture.capture--phone, html.js .plats .plat, html.js .plats[data-plat] .plat, .plats__pick button { transition: none !important; }
}

@media (max-width: 719px) { html.js .plats { --pk: .7; } html.js .plats__devices { aspect-ratio: 1 / 1.5257; } html.js .plats__texts { justify-self: start; } }
@media (min-width: 720px) { html.js .plats__texts { justify-self: center; } }
@media (min-width: 1100px) {
  .inst-step { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "plats text" "plats more"; column-gap: clamp(40px, 6vw, 96px); row-gap: 0; align-items: start; }
  .inst-step__text { grid-area: text; align-self: end; }
  .plats { grid-area: plats; grid-row: 1 / span 2; }
  .inst-step__more { grid-area: more; }
  .inst__desk { margin-top: 28px; }
}
@media (max-width: 1099px) { .inst-step__more { max-width: 40ch; } }

/* ---------- Ejemplos ---------- */
.ej { display: flex; flex-direction: column; gap: 32px; }
.ej__text { display: contents; }
.ej h2 { order: 0; }
.stage { order: 1; }
.rubros { order: 2; }
.dato { order: 3; }
.ej .sec-cta { order: 4; margin: 0; }
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-content: center; row-gap: 20px; padding-block: 32px; --stage-bg: var(--accent); }
.stage[data-tone="1"] { --stage-bg: var(--ink); }
.stage[data-tone="2"] { --stage-bg: var(--accent-soft); }
.stage[data-tone="3"] { --stage-bg: var(--line-strong); }
.stage[data-tone="4"] { --stage-bg: var(--paper); }
.stage__pill { position: absolute; left: 0; right: 0; top: 50%; height: 52%; translate: 0 -50%; border-radius: var(--radius-full); background: var(--stage-bg); transition: background-color 240ms ease-out; }
.stage__pages { position: relative; display: grid; width: 100%; }

/* The five examples are real screenshots of Caro's Pro example pages (their published public page), shown twice: in a browser window and in a phone.
   Only the active example is displayed; the others are display:none, so their lazy images are not requested until the visitor picks them (the rubro buttons also warm them up on hover/focus). */
.exv { display: none; grid-area: 1 / 1; }
.exv.is-active { display: block; animation: exv-in 260ms ease-out; }
@keyframes exv-in { from { opacity: 0; } to { opacity: 1; } }
.devices { position: relative; width: min(100%, 560px); height: 560px; height: min(70svh, 640px); margin-inline: auto; }
.dev { position: absolute; margin: 0; transition: transform 700ms var(--ease), opacity 480ms ease-out, visibility 0s linear 700ms; }
.dev img { display: block; }

/* Browser window: three dots, the address, the desktop screenshot */
.dev--win { left: 0; top: 50%; width: 100%; overflow: hidden; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-2); transform-origin: 50% 50%; transform: translateY(-50%); }
.win__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); }
.win__dots { display: flex; flex: none; gap: 5px; }
.win__dots i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--line-strong); }
.win__url { flex: 1; min-width: 0; padding: 3px 12px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font: 500 12px/18px var(--font-mono); /* taste-skill-ignore: address text in a product fragment */ text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev--win img { width: 100%; height: auto; aspect-ratio: 1280 / 800; background: var(--surface-sunken); }

/* Phone: same body as the vertical clips (bezel, status strip with the camera island, concentric corners), drawn in percentages so it needs no container units.
   Frame 1 : 2.1796 = bezel 3.2% + strip 9% of the width on top, bezel 3.2% on the sides and bottom; the screen is the 390x844 screenshot. */
.dev--phone {
  --phone-body: #0c0b0a; --phone-screen: #121110; --phone-rim: rgba(246, 243, 238, .2);
  left: 50%; top: 0; height: 100%; aspect-ratio: 1 / 2.1796; transform-origin: 50% 100%; transform: translateX(-50%);
  background: var(--phone-body); border-radius: 14.5% / 6.652%;
  box-shadow: inset 0 0 0 1px var(--phone-rim), 0 0 0 1px rgba(246, 243, 238, .08), var(--shadow-2);
}
.dev--phone::before { content: ""; position: absolute; inset: 1.468% 3.2%; border-radius: 11.3% / 5.184%; background: var(--phone-screen); }
.dev--phone::after { content: ""; position: absolute; left: 50%; top: 2.34%; width: 24%; height: 2.386%; transform: translateX(-50%); border-radius: var(--radius-full); background: #000; }
.dev--phone img { position: absolute; left: 3.2%; top: 5.597%; width: 93.6%; height: 92.935%; object-fit: cover; border-radius: 0 0 12.07% 12.07% / 0 0 5.58% 5.58%; background: var(--phone-screen); }

/* The phone comes first in the markup (its image is requested first) and sits above the window */
.dev--phone { z-index: 2; }

/* Narrow screens: one device fills the stage and the other waits behind it (crossfade with a small slide) */
.stage[data-view="computer"] .dev--phone { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(7%) scale(.92); }
.stage[data-view="phone"] .dev--win { opacity: 0; visibility: hidden; transform: translateY(-58%) scale(.92); }
.stage[data-view="phone"] .dev--phone { transition-delay: 0s, 0s, 0s; }
.stage[data-view="computer"] .dev--win { transition-delay: 0s, 0s, 0s; }

.stage__view { position: relative; z-index: 2; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--paper); }
.stage__view button {
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink);
  font: 500 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out;
}
.stage__view button:hover { background: var(--sand); }
.stage__view button[aria-pressed="true"] { background: var(--ground-ink); color: var(--paper); }
html:not(.js) .stage__view { display: none; }
/* At 320 px the two view buttons (En la computadora / En el celular) are wider than the 272 px column and push the page 4 px past the screen: a little less padding. */
@media (max-width: 340px) { .stage__view button { padding: 0 10px; } }

/* Wide enough (stage about 600px or more): both devices at once. The window sits left; in the phone state the phone comes forward over its bottom-right corner and the window steps back. */
@media (min-width: 720px) {
  .devices { width: min(100%, 640px); height: auto; aspect-ratio: 1 / .9; }
  .dev--win { top: 6%; width: 100%; transform: none; transform-origin: 0 0; }
  .dev--phone { left: auto; right: 1%; top: auto; bottom: 0; width: 34%; height: auto; transform-origin: 100% 100%; transform: none; }
  .stage[data-view="computer"] .dev--phone { opacity: 0; visibility: hidden; transform: translate(9%, 10%) scale(.9); }
  .stage[data-view="phone"] .dev--win { opacity: 1; visibility: visible; transform: translate(-1%, -2%) scale(.86); }
}

.rubros { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.rubros::-webkit-scrollbar { display: none; }
.rubro {
  flex: none; height: var(--control-m); padding: 0 20px; border: 0; border-radius: var(--radius-full);
  background: var(--paper); color: var(--ink); font: 500 var(--fs-body)/1 var(--font-sans); white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.rubro:hover { background: var(--ground-ink); color: var(--paper); }
.rubro[aria-pressed="true"] { background: var(--ground-ink); color: var(--paper); }
.dato { font-size: var(--fs-body); max-width: 40ch; min-height: 3.1em; }
@media (min-width: 600px) { .rubros { flex-wrap: wrap; overflow: visible; } }
@media (min-width: 960px) {
  .ej { display: grid; grid-template-columns: 6fr 6fr; gap: 24px clamp(32px, 5vw, 72px); align-items: center; }
  .ej__text { display: block; }
  .ej__text h2 { margin: 0; }
  .ej h2, .stage, .rubros, .dato, .ej .sec-cta { order: 0; }
  .stage { padding-block: 40px; min-height: 680px; }
  .stage__pill { height: min(56%, 400px); }
  .rubros {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; overflow: visible;
    margin: 36px 0 0; padding: 0; scroll-snap-type: none;
  }
  .rubro {
    display: flex; align-items: center; gap: 0; height: auto; padding: 4px 0; border-radius: 0; background: none;
    color: var(--ink-muted); font: 600 var(--fs-st)/1.15 var(--font-display); letter-spacing: -0.02em; text-align: left;
  }
  .rubro:hover { background: none; color: var(--ink); }
  .rubro[aria-pressed="true"] { background: none; color: var(--ink); }
  .rubro::before { content: ""; flex: none; width: 0; height: 14px; margin-right: 0; border-radius: var(--radius-full); background: var(--accent); transition: width 200ms var(--ease), margin-right 200ms var(--ease); }
  .rubro[aria-pressed="true"]::before { width: 30px; margin-right: 14px; }
  .dato { margin-top: 24px; }
  .ej .sec-cta { margin-top: 24px; }
}

/* ---------- Bloques ---------- */
.bloques h2 { max-width: 14em; }
.bands { margin-top: clamp(32px, 4vw, 56px); }
.band { background: var(--paper); transition: background-color 240ms ease-out; }
.band.is-on[data-tone="accent"] { background: var(--accent); }
.band.is-on[data-tone="sand"] { background: var(--sand); }
.band.is-on[data-tone="soft"] { background: var(--accent-soft); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: clamp(24px, 3vw, 40px); }
.band__sentence { display: block; max-width: 24em; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-st); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.band__more { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows 240ms ease-out, opacity 240ms ease-out, visibility 0s linear 240ms; }
.band__more > div { min-height: 0; overflow: hidden; }
.band__more p { margin-top: 12px; max-width: 60ch; font-size: var(--fs-body); }
.band__more .ml-badge { margin-left: 4px; vertical-align: 1px; }
.band.is-on .band__more { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition-delay: 0s; }
.band__switch { transform: scale(1.5); transform-origin: right center; margin-right: 4px; }
@media (max-width: 640px) { .band__switch { transform: scale(1.3); } }

/* ---------- Panel ---------- */
.panel__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.stats { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 0; padding: 0; list-style: none; }
.stat__n { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-num); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__u { font-size: var(--fs-st); letter-spacing: -0.02em; }
.stat__t { margin-top: 12px; max-width: 34ch; font-size: var(--fs-body); }
.stat__note { margin-top: 32px; color: var(--ink-muted); }
.estilos { margin-top: clamp(72px, 8vw, 120px); }
.estilos h3 { max-width: 26em; margin-bottom: 32px; font-size: var(--fs-st); line-height: 1.1; }
.panel .sec-cta { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .panel__row { grid-template-columns: 7fr 5fr; gap: clamp(40px, 5vw, 80px); } }

/* ---------- Precios ---------- */
.precios { padding-bottom: 0; }
.promo { max-width: 560px; margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.promo[hidden] { display: none; }
.promo__text { max-width: 34ch; }
.promo__left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-st); line-height: 1.1; letter-spacing: -0.02em; }
.promo__n { font-size: var(--fs-num); line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.promo__bar { height: 12px; margin-top: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.promo__fill { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .promo__fill { transition: width 900ms var(--ease); } }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(40px, 5vw, 72px); --edge: var(--gutter); }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(40px, 5vw, 72px) var(--gutter); }
.plan__name { font-size: var(--fs-h2); }
.plan__who { margin-top: 12px; max-width: 26ch; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: clamp(32px, 4vw, 48px); }
.plan__amount { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--fs-body); }
.plan__per--big { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.02em; }
.plan__cta { margin-top: 32px; }
.plan__inc { margin-top: 40px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.plist { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.plist li { position: relative; padding-left: 28px; max-width: 46ch; }
.plist li::before { content: ""; position: absolute; left: 0; top: .68em; width: 12px; height: 6px; border-radius: var(--radius-full); background: var(--accent); }
.plan__note { margin-top: 24px; color: var(--ink-muted); }
@media (min-width: 960px) {
  .plans { grid-template-columns: 5fr 7fr; --edge: max(var(--gutter), calc((100vw - 1200px) / 2)); }
  .plan--free { padding-left: var(--edge); padding-right: clamp(32px, 4vw, 56px); }
  .plan--full { padding-right: var(--edge); padding-left: clamp(40px, 5vw, 72px); }
  .plist--two { grid-template-columns: 1fr 1fr; gap: 10px 32px; }
  .plist--two li:first-child { grid-column: 1 / -1; max-width: none; }
}
.compare__h { margin-top: clamp(72px, 8vw, 120px); font-size: var(--fs-st); }
.compare { margin: 32px 0 clamp(72px, 9vw, 144px); }
.compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.compare th, .compare td { padding: 16px 20px 16px 0; text-align: left; vertical-align: top; font-weight: 400; border-bottom: 1px solid var(--line); }
.compare thead th { padding-top: 0; font-weight: 600; border-bottom-color: var(--ink); }
.compare tbody th { font-weight: 500; width: 36%; }
.compare .yes { display: inline-flex; color: var(--success); }
.compare .no { color: var(--ink-muted); }
@media (max-width: 719px) {
  /* Each row is a small card: the feature on top, then two labelled lines (Gratis, Pro). The role attributes in the markup keep the table semantics. */
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare table, .compare tbody { display: block; }
  .compare tr { display: block; margin-top: 12px; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
  .compare tbody th { display: block; width: auto; padding: 0 8px 12px; border: 0; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .compare td { position: relative; display: block; min-height: 40px; padding: 10px 8px 10px calc(4.25rem + 20px); border: 0; border-radius: var(--radius-m); line-height: 1.4; }
  .compare td + td { margin-top: 6px; }
  .compare td::before { content: attr(data-label); position: absolute; left: 8px; top: 10px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--sand); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 16px; }
  .compare td[data-label="Pro"] { background: var(--accent-soft); }
  .compare td[data-label="Pro"]::before { background: var(--ink); color: var(--paper); }
}

/* ---------- Preguntas ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq__list { display: grid; gap: 8px; }
.faq__list .sec-cta { margin-top: 24px; }
.faq details { background: var(--sand); border-radius: var(--radius-full); transition: background-color 240ms ease-out, border-radius 240ms ease-out; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 28px;
  list-style: none; cursor: pointer; font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; border-radius: var(--radius-full);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--line); }
.faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-l); }
.faq details[open] summary { border-radius: var(--radius-l) var(--radius-l) 0 0; }
.faq details[open] summary:hover { background: transparent; }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { max-width: 60ch; padding: 0 28px 24px; font-size: var(--fs-body); }
@media (prefers-reduced-motion: no-preference) { .faq details[open] p { animation: faq-in 260ms var(--ease); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .faq { grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
  .faq__head { position: sticky; top: 96px; }
}
@media (max-width: 640px) { .faq summary { font-size: 18px; padding-inline: 22px; } .faq details p { padding-inline: 22px; } }

/* ---------- Cierre ---------- */
.cierre { padding-block: clamp(72px, 9vw, 128px); }
.cierre__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.cierre h2 { font-size: var(--fs-num); line-height: .95; letter-spacing: -0.03em; max-width: 8em; }
.cierre .lead { margin-top: 24px; max-width: 30ch; }
.dialog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; padding: 24px; }
@media (min-width: 600px) { .dialog { padding: 32px; } }
.dialog .ml-field__input::placeholder { color: var(--line-strong); opacity: 1; }
.dialog__title { font-family: var(--font-display); font-size: var(--fs-st); line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 960px) {
  .cierre__grid { grid-template-columns: 7fr 5fr; align-items: center; min-height: 56svh; }
  .cierre__text { align-self: end; }
  .dialog { justify-self: end; max-width: 440px; }
}

/* ---------- Footer ---------- */
.foot { min-height: 0; justify-content: flex-start; padding-block: clamp(72px, 9vw, 120px) 40px; }
.foot__mark { display: block; width: 100%; height: auto; }
.fm--1 { fill: var(--accent); }
.fm--2 { fill: var(--line-strong); }
.fm--3 { fill: var(--sand); }
.foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 760px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } .foot__cols--4 { grid-template-columns: repeat(4, 1fr); } } /* la home trae una cuarta columna (Idioma); los legales siguen con tres */
.foot a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.foot__h { margin-bottom: 16px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.foot ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.foot a { text-underline-offset: 4px; }
.foot ul a { display: inline-block; padding: 4px 0; text-decoration: none; }
.foot ul a:hover { text-decoration: underline; }
.foot__last { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; font-size: var(--fs-small); }

/* ---------- Reduced motion: keep content, drop travel ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill { translate: 0 0; }
  .dev, .stage__view button, .exv.is-active { transition: none; animation: none; }
  .stage__pill, .band, .band__more, .faq details, .faq summary i::before, .faq summary i::after { transition: none; }
}

/* ---------- Phone: primary actions run the full width of the column ---------- */
@media (max-width: 599px) {
  .sec-cta .ml-button, .plan__cta { width: 100%; }
  .plan { align-items: stretch; }
}