/* ============================================================
   BOOKLIFT — design system
   Same palette/type as the sales deck: ink / cream / green / coral,
   Bricolage Grotesque (display) + Chivo Mono (data/labels).
   ============================================================ */

:root {
  --ink: #0B0E0C;
  --ink-2: #1A211C;
  --ink-3: #2A332C;
  --cream: #F2EEE5;
  --cream-2: #E8E2D3;
  --green: #1AE57A;
  --green-deep: #0E8F4D;
  --green-dim: rgba(26,229,122,0.12);
  --coral: #FF5C39;
  --coral-dim: rgba(255,92,57,0.12);
  --mute: #6B6F6A;
  --mute-2: #9CA39A;
  --line: #D9D4C5;
  --line-dark: #2A332C;
  --wa-bg: #ECE5DD;
  --wa-out: #DCF8C6;
  --wa-in: #FFFFFF;
  --wa-header: #075E54;
  --wa-tick: #34B7F1;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-card: 0 30px 60px rgba(11,14,12,0.10), 0 6px 14px rgba(11,14,12,0.06);
  --shadow-deep: 0 40px 80px rgba(11,14,12,0.25), 0 8px 16px rgba(11,14,12,0.15);

  --max: 1240px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p { margin: 0; }

::selection { background: var(--ink); color: var(--green); }

:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- type scale ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.eyebrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); display: inline-block; }

h2.section-title {
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
p.section-lede {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--mute);
  margin: 20px 0 0;
  max-width: 680px;
}
.mono { font-family: "Chivo Mono", monospace; }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section { position: relative; }
.section-pad { padding: 120px 0; }
@media (max-width: 720px) {
  .section-pad { padding: 76px 0; }
  .wrap { padding: 0 20px; }
}

.section-head { max-width: 760px; margin-bottom: 64px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,14,12,0.22); }
.btn-accent { background: var(--green); color: var(--ink); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(26,229,122,0.35); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-ghost-cream { background: transparent; color: var(--cream); border-color: rgba(242,238,229,0.35); }
.btn-ghost-cream:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-block { width: 100%; }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242,238,229,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-dim); }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--green-deep); }
/* "API" encima de "Agencias", como un solo nombre en dos líneas. El
   interlineado va apretado a propósito: con el 1.6 heredado las dos líneas se
   separarían tanto que la barra crecería y parecerían dos enlaces distintos. */
.nav-links a.nav-dos-lineas { line-height: 1.15; text-align: center; }
.nav-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 3px; gap: 2px; background: var(--cream);
}
.lang-switch button {
  border: none; background: transparent; padding: 7px 13px; border-radius: var(--radius-pill);
  font-family: "Chivo Mono", monospace; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--mute); transition: background .2s, color .2s;
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--green); }

.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent;
  }
}

/* ---------- hero ---------- */
/* La portada tiene que caber entera en la primera pantalla: el alto reservado
   descuenta la barra (sticky, ~66px) y los espaciados se miden en vh, no en
   px fijos, para que en pantallas bajas se compriman en vez de empujar los
   datos de confianza fuera de vista. */
.hero {
  background: var(--ink); color: var(--cream);
  padding: clamp(20px, 3.4vh, 56px) 0 clamp(28px, 5vh, 84px);
  min-height: calc(100vh - 66px);
  min-height: calc(100dvh - 66px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero-inner { width: 100%; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 340px at 84% -8%, rgba(26,229,122,0.20), transparent 60%),
    radial-gradient(500px 300px at 6% 110%, rgba(255,92,57,0.14), transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(242,238,229,0.22); border-radius: var(--radius-pill);
  padding: 8px 16px 8px 10px; font-size: 13.5px; color: var(--mute-2);
  margin-top: clamp(6px, 2.4vh, 30px);
  margin-bottom: clamp(18px, 3.2vh, 34px);
}
.hero-badge .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* start, no center: el borde superior del móvil tiene que caer en la misma
   línea que el badge "Agente de IA", que abre la columna de texto. */
.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-title {
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; margin: 0;
}
.hero-title em { font-style: italic; color: var(--green); }
.hero-tag { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; color: #D7DCD6; max-width: 560px; margin: 26px 0 0; }

/* rotador de canal en el hero: WhatsApp → Instagram → Messenger → teléfono.
   El ancho se anima con las mismas marcas de tiempo que el scroll vertical
   para que el resto de la frase no dé saltos; los --wN los mide app.js. */
.chan-rot {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.45em;
  line-height: 1.45em;
  vertical-align: bottom;
  width: var(--w1, 8.5ch);
  animation: chanWidth 20s infinite;
}
.chan-track { display: block; animation: chanScroll 20s infinite; }
.chan-track b { display: block; height: 1.45em; line-height: 1.45em; font-weight: 700; white-space: nowrap; }
.c-wa { color: #25D366; }
/* Instagram no tiene un color plano de marca, sino el degradado del logo
   (naranja → magenta → morado → azul); se recorta sobre el propio texto. */
.c-ig {
  color: #DD2A7B;
  background: linear-gradient(45deg, #F58529 0%, #FEDA77 18%, #DD2A7B 48%, #8134AF 74%, #515BD4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-ms { color: #0084FF; }
.c-ph { color: var(--coral); }

@keyframes chanScroll {
  0%, 22%   { transform: translateY(0); }
  25%, 47%  { transform: translateY(-1.45em); }
  50%, 72%  { transform: translateY(-2.9em); }
  75%, 97%  { transform: translateY(-4.35em); }
  100%      { transform: translateY(-5.8em); }
}
@keyframes chanWidth {
  0%, 22%   { width: var(--w1, 8.5ch); }
  25%, 47%  { width: var(--w2, 8.5ch); }
  50%, 72%  { width: var(--w3, 9.5ch); }
  75%, 97%  { width: var(--w4, 8ch); }
  100%      { width: var(--w1, 8.5ch); }
}

.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: clamp(22px, 3.6vh, 40px); flex-wrap: wrap; }
.hero-trust { display: flex; gap: clamp(20px, 2.4vw, 30px); margin-top: clamp(26px, 4.6vh, 56px); flex-wrap: wrap; }
.hero-trust div { display: flex; flex-direction: column; gap: 4px; }
.hero-trust .n { font-size: clamp(23px, 3vh, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--green); font-family: "Chivo Mono", monospace; }
.hero-trust .l { font-size: 13px; color: var(--mute-2); }

/* ============================================================
   Maqueta de iPhone del hero.
   Cuatro escenas (WhatsApp, Instagram, Messenger, llamada) apiladas
   en la misma pantalla; app.js activa una cada vez.

   Dos reglas gobiernan el tamaño:
   1. El ancho lo manda el alto disponible. La pantalla es 9/19.5, así que
      cada píxel de ancho cuesta ~2,17 de alto: con el reparto en vh el móvil
      crece en pantallas grandes y se encoge en las bajas sin desbordar.
   2. Todo lo de dentro se mide en em sobre --ph-fs, que es proporcional al
      ancho (la misma proporción que iOS: 17pt de texto sobre 390 de pantalla).
      Así los mensajes se leen igual de bien a cualquier tamaño en vez de
      quedarse en letra diminuta cuando el móvil crece.
   ============================================================ */
.phone {
  /* Proporción de la maqueta anterior a la del iPhone realista: 360x560 de
     pantalla, ≈9:14. Más achatada que la 9/19.5 de un iPhone de verdad, pero
     es la que encaja en el hueco entre el titular y los botones sin salirse
     ni quedarse en un rectángulo apaisado. */
  --ph-ratio: 360 / 560;
  --ph-w: min(480px, 100%);
  /* --ph-off y --ph-h las mide app.js: el móvil arranca en la línea del
     titular (justo debajo del badge) y termina en la de los botones. Como el
     alto depende de cómo rompa el texto —y eso cambia con el idioma y el
     ancho— no hay número fijo que valga; los valores de aquí son solo el
     encuadre por defecto si el JS no llega a correr. */
  --ph-off: 74px;
  --ph-h: 420px;
  /* el alto es ahora la dimensión escasa, así que la tipografía de dentro se
     escala con él y no con el ancho */
  --ph-fs: calc(var(--ph-h) * 0.030);
  width: fit-content; max-width: 100%; margin: var(--ph-off) auto 0;
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.8vh, 18px);
}

.phone-frame {
  position: relative;
  width: 100%;
  padding: 9px;
  height: var(--ph-h);
  width: fit-content; max-width: 100%;
  border-radius: 46px;
  /* el degradado imita el titanio pulido: bandas claras y oscuras
     alternas, no un gris plano */
  background: linear-gradient(150deg, #6E7377 0%, #C9CED2 14%, #84898D 32%, #F0F2F3 50%, #7C8185 68%, #C4C9CD 86%, #5F6367 100%);
  box-shadow: 0 44px 70px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 1px rgba(0,0,0,.22);
}
.ph-btn { position: absolute; border-radius: 2px; }
.ph-btn-silent { left: -2px; top: 13%; width: 2.5px; height: 4.5%; background: linear-gradient(90deg,#5C6165,#B9BEC2); }
.ph-btn-up     { left: -2px; top: 21%; width: 2.5px; height: 7.5%; background: linear-gradient(90deg,#5C6165,#B9BEC2); }
.ph-btn-down   { left: -2px; top: 30.5%; width: 2.5px; height: 7.5%; background: linear-gradient(90deg,#5C6165,#B9BEC2); }
.ph-btn-power  { right: -2px; top: 25%; width: 2.5px; height: 11%; background: linear-gradient(270deg,#5C6165,#B9BEC2); }

.phone-bezel { border-radius: 38px; background: #000; padding: 2.5px; height: 100%; width: fit-content; }
.phone-screen {
  position: relative; border-radius: 36px; overflow: hidden; background: #fff;
  height: 100%; aspect-ratio: var(--ph-ratio);
  font-size: var(--ph-fs);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- barra de estado iOS ---------- */
.ios-status {
  position: absolute; top: 0; left: 0; right: 0; height: 2.8em; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.4em 0 1.55em;
  font-size: .88em; font-weight: 600; letter-spacing: -0.01em;
  color: #000;
}
.ios-icons { display: inline-flex; align-items: center; gap: .38em; }
.ios-icons svg { display: block; }
.ic-signal { width: 1.2em; height: .84em; }
.ic-wifi   { width: 1.12em; height: .84em; }
.ic-batt   { width: 1.92em; height: .92em; }
/* la escena de llamada es oscura: iOS invierte el color del chrome */
.phone-screen[data-ch="call"] .ios-status,
.phone-screen[data-ch="call"] .ios-home { color: #fff; }
.phone-screen[data-ch="call"] .ios-home { background: #fff; }

.ios-island { position: absolute; top: .62em; left: 50%; transform: translateX(-50%); width: 6.1em; height: 1.74em; border-radius: 1.1em; background: #000; z-index: 25; display: flex; align-items: center; justify-content: flex-end; padding-right: .5em; }
.ios-cam { width: .48em; height: .48em; border-radius: 50%; background: #12181f; box-shadow: inset 0 0 0 .1em #0a1f14; }
.ios-home { position: absolute; bottom: .42em; left: 50%; transform: translateX(-50%); width: 7.2em; height: .28em; border-radius: .2em; background: #000; opacity: .3; z-index: 30; }

/* ---------- escenas ---------- */
/* visibility se retrasa hasta que termina el fundido: si cambiase a la vez
   que la opacidad, la escena saliente desaparecería de golpe en vez de
   cruzarse con la entrante. */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }

.ph-head { padding: 3.05em .7em .5em; display: flex; align-items: center; gap: .5em; flex: 0 0 auto; }
.ph-back { width: .62em; height: 1.05em; flex: 0 0 auto; }
.ph-av { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.ph-av-wrap { position: relative; flex: 0 0 auto; display: block; }
.ph-dot { position: absolute; right: -.05em; bottom: -.05em; width: .62em; height: .62em; border-radius: 50%; background: #31D158; border: .14em solid #fff; }
.ph-who { flex: 1; min-width: 0; }
.ph-who .n { display: block; font-size: .92em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-who .s { display: block; font-size: .7em; color: #8E8E93; line-height: 1.3; }
.ph-act { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

.ph-feed { flex: 1; padding: .7em .7em .4em; display: flex; flex-direction: column; gap: .36em; justify-content: flex-end; overflow: hidden; }
.ph-feed .bb {
  max-width: min(82%, 21em); padding: .42em .62em; border-radius: 1.05em;
  font-size: 1em; line-height: 1.35;
  position: relative;
  opacity: 0; transform: translateY(6px) scale(.98);
  animation: bubIn .35s var(--ease) forwards;
}
.ph-feed .bb em { font-style: italic; font-weight: 500; }
.ph-feed .bb strong { font-weight: 600; }
.ph-feed .bb .time { display: block; text-align: right; font-size: .6em; margin-top: .15em; opacity: .55; }
.ph-feed .bb .time .tick { color: #34B7F1; letter-spacing: -2px; opacity: 1; }
@keyframes bubIn { to { opacity: 1; transform: none; } }

/* ---------- WhatsApp ---------- */
.sc-wa { background: #F7F4EF; color: #000; }
.sc-wa .ph-head { background: rgba(247,244,239,.94); border-bottom: .5px solid rgba(0,0,0,.11); padding-bottom: .56em; }
.sc-wa .ph-back, .sc-wa .ph-act { color: #25D366; }
.sc-wa .bb { color: #0b1411; box-shadow: 0 1px .5px rgba(0,0,0,.12); }
.sc-wa .bb.in  { background: #fff;    align-self: flex-start; border-bottom-left-radius: .28em; }
.sc-wa .bb.out { background: #E7FFDB; align-self: flex-end;   border-bottom-right-radius: .28em; }
.sc-wa .ph-input { background: rgba(247,244,239,.96); border-top: .5px solid rgba(0,0,0,.1); }
.sc-wa .ph-input .ph-field { background: #fff; border: .5px solid rgba(0,0,0,.1); }
.sc-wa .ph-ico { color: #25D366; }

/* ---------- Instagram ---------- */
.sc-ig { background: #fff; color: #000; }
.sc-ig .ph-head { border-bottom: .5px solid #EFEFEF; }
.sc-ig .ph-back, .sc-ig .ph-act { color: #000; }
.sc-ig .ph-who .n { font-weight: 700; letter-spacing: -0.02em; }
.sc-ig .bb { border-radius: 1.2em; }
.sc-ig .bb.in  { background: #EFEFEF; color: #000; align-self: flex-start; }
.sc-ig .bb.out { background: #3797F0; color: #fff; align-self: flex-end; }
.ig-cam { width: 1.95em; height: 1.95em; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF); }
.ig-cam svg { width: 1.05em; height: 1.05em; }
.sc-ig .ph-input .ph-field { border: 1px solid #DBDBDB; border-radius: 1.25em; }

/* ---------- Messenger ---------- */
.sc-ms { background: #fff; color: #050505; }
.sc-ms .ph-head { border-bottom: .5px solid #EDEFF2; }
.sc-ms .ph-back, .sc-ms .ph-act, .sc-ms .ph-ico { color: #0084FF; }
.sc-ms .bb { border-radius: 1.12em; }
.sc-ms .bb.in  { background: #F1F2F6; color: #050505; align-self: flex-start; }
.sc-ms .bb.out { background: #0084FF; color: #fff;    align-self: flex-end; }
.sc-ms .ph-input .ph-field { background: #F1F2F6; border-radius: 1.25em; }
.ms-like { font-size: 1.05em; flex: 0 0 auto; }

/* barra de escritura compartida */
.ph-input { flex: 0 0 auto; padding: .42em .7em 1.12em; display: flex; align-items: center; gap: .5em; }
.ph-input .ph-field { flex: 1; min-width: 0; border-radius: 1.12em; padding: .5em .78em; font-size: .82em; color: #A5A8AD; }
.ph-ico { width: 1.26em; height: 1.26em; flex: 0 0 auto; }

/* ---------- llamada ---------- */
.sc-call { background: linear-gradient(175deg,#1b2620 0%,#0d120f 55%,#050706 100%); color: #fff; justify-content: space-between; }
.call-top { padding: 4.3em 1.4em 0; text-align: center; }
.call-av { position: relative; width: 5.45em; height: 5.45em; margin: 0 auto 1em; }
.call-av img { width: 5.45em; height: 5.45em; border-radius: 50%; object-fit: cover; position: relative; display: block; }
.call-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(26,229,122,.6); animation: callRing 2.2s ease-out infinite; }
@keyframes callRing { 0%,100% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.85); opacity: 0; } }
.call-meta { margin: 0; font-size: .78em; color: rgba(255,255,255,.6); }
.call-name { margin: .18em 0 0; font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; }
.call-badge { display: inline-flex; align-items: center; gap: .42em; margin-top: .85em; padding: .35em .78em; border-radius: 999px; background: rgba(26,229,122,.14); border: 1px solid rgba(26,229,122,.35); color: var(--green); font-size: .74em; font-weight: 600; }
.call-badge .pip { width: .42em; height: .42em; border-radius: 50%; background: var(--green); animation: pipPulse 1.4s infinite; }
@keyframes pipPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.call-bottom { padding: 0 1em 1.55em; }
.call-transcript { background: rgba(255,255,255,.09); border: .5px solid rgba(255,255,255,.14); border-radius: 1.25em; padding: .78em .92em; }
.call-tr-head { display: flex; align-items: center; gap: .5em; margin-bottom: .42em; font-size: .64em; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }
.wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.4em; }
.wave i { width: 2.5px; height: 1.4em; border-radius: 2px; background: var(--green); animation: callWave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .15s; }
.wave i:nth-child(3) { animation-delay: .3s; }
.wave i:nth-child(4) { animation-delay: .45s; }
@keyframes callWave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.sc-call .ph-feed { padding: 0; gap: 0; min-height: 5.5em; }
.sc-call .ph-feed .tr { display: flex; gap: .5em; padding: .28em 0; opacity: 0; transform: translateY(6px); animation: bubIn .35s var(--ease) forwards; }
.sc-call .ph-feed .tr .who { flex: 0 0 3.9em; font-family: "Chivo Mono", monospace; font-size: .68em; font-weight: 700; padding-top: .1em; }
.sc-call .ph-feed .tr.in  .who { color: rgba(255,255,255,.55); }
.sc-call .ph-feed .tr.out .who { color: var(--green); }
.sc-call .ph-feed .tr .txt { font-size: .82em; line-height: 1.35; color: rgba(255,255,255,.92); }

.call-actions { display: flex; align-items: flex-start; justify-content: space-between; margin: 1.25em .6em 0; }
.call-actions > div { text-align: center; }
.call-btn { width: 3.5em; height: 3.5em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.call-btn svg { width: 1.45em; height: 1.45em; }
.call-btn.hang { background: #FF3B30; }
.call-btn.hang svg { transform: rotate(133deg); }
.call-btn.take { background: #31D158; }
.call-btn.ia { background: rgba(255,255,255,.14); color: var(--green); font-family: "Chivo Mono", monospace; font-size: .78em; font-weight: 700; }
.call-lbl { display: block; font-size: .7em; margin-top: .35em; color: rgba(255,255,255,.7); }

/* ---------- selector de canal ---------- */
/* wrap + max-width: los cuatro botones suman ~330px, más de lo que queda en
   una pantalla de 360, y sin esto la fila desbordaba y aparecía scroll
   horizontal en toda la página. */
.ph-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; max-width: 100%; padding: 5px; border-radius: 999px; background: rgba(242,238,229,.06); border: 1px solid rgba(242,238,229,.14); }
.ph-tabs button { display: inline-flex; align-items: center; gap: 6px; border: none; padding: 7px 11px; border-radius: 999px; background: transparent; color: var(--mute-2); font-family: "Chivo Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .25s, color .25s; }
.ph-tabs button .d { width: 6px; height: 6px; border-radius: 50%; }
.ph-tabs button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* Apilado ya no hay competencia por el alto: tamaño fijo y la portada deja de
   forzar una sola pantalla, que en vertical sería ilegible. */
@media (max-width: 980px) {
  .hero { min-height: 0; display: block; padding: 56px 0 84px; }
  .phone { --ph-w: min(330px, 86vw); --ph-fs: calc(var(--ph-w) * 0.047); width: 100%; max-width: var(--ph-w); margin: 0 auto; align-self: auto; }
  .phone-frame { height: auto; width: auto; }
  .phone-bezel { width: auto; }
  .phone-screen { height: auto; }
}
@media (max-width: 560px) {
  .ph-tabs { border-radius: 22px; }
  .ph-tabs button { padding: 6px 9px; font-size: 10px; gap: 5px; }
}
@media (max-width: 380px) {
  .ph-tabs button { padding: 6px 7px; font-size: 9.5px; }
}

/* ---------- stat/leak sections ---------- */
.leak-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .leak-grid { grid-template-columns: 1fr; gap: 40px; } }
.leak-quote { font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.leak-quote .strike { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 4px; color: var(--mute); }
.leak-quote .accent { color: var(--coral); font-style: italic; }
.leak-aside .num { font-size: clamp(64px, 9vw, 120px); font-weight: 800; line-height: .85; letter-spacing: -0.04em; color: var(--coral); margin: 0; }
.leak-aside .num-cap { font-size: 18px; margin: 14px 0 0; max-width: 420px; line-height: 1.35; }
.leak-aside .num-foot { font-size: 14px; color: var(--mute); margin-top: 12px; }

.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; margin-top: 56px; }
@media (max-width: 800px) { .stats-grid { grid-template-columns: 1fr; gap: 36px; } }
.stat { border-top: 2px solid var(--ink); padding-top: 28px; }
.stat .big { font-size: clamp(70px, 8vw, 118px); font-weight: 800; line-height: .9; letter-spacing: -0.04em; margin: 0; }
.stat .big.green-fg { color: var(--green-deep); } .stat .big.ink-fg { color: var(--ink); } .stat .big.coral-fg { color: var(--coral); }
.stat .lab { font-size: 18px; line-height: 1.35; margin: 20px 0 0; max-width: 320px; }
.stat .src { color: var(--mute); margin-top: 14px; font-family: "Chivo Mono", monospace; font-size: 12.5px; }

/* ---------- cards / feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 32px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.feature-card .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.feature-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.feature-card p { font-size: 15px; color: var(--mute); line-height: 1.5; }

/* ---------- stacked steps (how it works) ---------- */
.steps-stack { display: flex; flex-direction: column; gap: 0; margin-top: 60px; }
.step-row {
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 48px;
  padding: 52px 0; border-top: 1.5px solid var(--line); align-items: center;
}
.step-row:last-child { border-bottom: 1.5px solid var(--line); }
@media (max-width: 900px) { .step-row { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; } }
.step-num { font-family: "Chivo Mono", monospace; font-size: 22px; font-weight: 600; color: var(--green-deep); display: flex; align-items: center; gap: 14px; }
.step-num .ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--ink); background: var(--cream); }
.step-body h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.step-body p { font-size: 16.5px; color: var(--mute); line-height: 1.55; max-width: 480px; }
.step-body ul { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.step-body li { font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.step-body li::before { content: "✓"; color: var(--green-deep); font-weight: 700; flex-shrink: 0; }
.step-visual {
  background: var(--ink); border-radius: var(--radius-lg); padding: 34px; color: var(--cream);
  min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.step-visual .k { font-family: "Chivo Mono", monospace; font-size: 12.5px; color: var(--green); letter-spacing: .08em; text-transform: uppercase; }
.step-visual .v { font-size: 20px; font-weight: 600; }
.step-visual .d { font-size: 14px; color: var(--mute-2); line-height: 1.4; }

/* ---------- pricing ---------- */
.pricing-toggle { display: inline-flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px; margin-top: 8px; }
.pricing-toggle button { border: none; background: transparent; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--mute); transition: background .2s, color .2s; }
.pricing-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--green); }
.save-badge { background: var(--green-dim); color: var(--green-deep); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); margin-left: 6px; }

/* ---------- precios ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 52px; align-items: stretch; }

.price-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; display: flex; flex-direction: column; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--ink); }
.price-card.feat { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.price-card .tag {
  position: absolute; top: -14px; right: 26px; background: var(--green); color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill);
  letter-spacing: .01em;
}
.price-card .pname { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.price-card .pdesc { font-size: 14px; color: var(--mute); margin-top: 6px; min-height: 40px; line-height: 1.5; }
.price-card.feat .pdesc { color: var(--mute-2); }

/* El precio es la cifra que más se mira: grande, muy ajustada de tracking y
   con el "/mes" claramente subordinado. */
.price-card .pval { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 0; }
.price-card .pval .n {
  font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  font-family: "Chivo Mono", monospace;
}
.price-card .pval .u { font-size: 15px; color: var(--mute); font-weight: 500; }
.price-card.feat .pval .u { color: var(--mute-2); }

/* El IVA se ve, no se esconde: ocultarlo es lo que genera la reclamación en
   el primer cobro. */
.price-card .iva { font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.price-card.feat .iva { color: var(--mute-2); }

.price-card ul {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.price-card li { font-size: 14.5px; line-height: 1.5; padding-left: 26px; position: relative; }
.price-card li::before {
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 13px; height: 7px; border-left: 2px solid var(--green-deep);
  border-bottom: 2px solid var(--green-deep); transform: rotate(-45deg);
}
.price-card.feat li::before { border-color: var(--green); }

/* Los minutos de voz son lo que separa un plan de otro y lo que decide la
   compra. Se destacan en vez de perderse como una viñeta más. */
.price-card li.destacado {
  font-weight: 650; background: var(--green-dim);
  margin-left: -10px; padding: 8px 10px 8px 32px; border-radius: 9px;
}
.price-card li.destacado::before { left: 12px; top: calc(.38em + 8px); }
.price-card.feat li.destacado { background: rgba(255,255,255,.09); }

/* Qué se cobra exactamente y cuándo. Un cargo de 1.176 € que el cliente
   esperaba de 98 € acaba en devolución. */
.price-card .cobro {
  font-size: 12.5px; color: var(--mute); margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.5;
}
.price-card.feat .cobro { color: var(--mute-2); border-top-color: rgba(255,255,255,.16); }
.price-card .btn-block { margin-top: 16px; }

/* En móvil los planes se apilaban en vertical y comparar obligaba a subir y
   bajar recordando cifras. En carrusel se comparan deslizando: la tarjeta
   del medio va delante y las otras dos se van hacia atrás girando, como una
   ruleta (el giro lo calcula ruletaPrecios() en portada.js). El margen
   negativo saca el carril del ancho del contenedor para que llegue de borde
   a borde de la pantalla. */
@media (max-width: 980px) {
  .pricing-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0; padding: 26px 0 30px; margin: 40px -20px 0;
    scrollbar-width: none;
    /* Punto de fuga común: sin esto el giro de las laterales sería plano y
       el efecto se quedaría en un simple encoger. */
    perspective: 1100px; perspective-origin: 50% 46%;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }

  /* Rellenos elásticos a los lados: con scroll-snap centrado, la primera y
     la última tarjeta solo pueden quedarse en el medio si hay media pantalla
     de aire por fuera. Con relleno fijo (o con ninguno) la primera se
     quedaba pegada al borde y nunca llegaba a ser la de delante.
     La cuenta es media caja menos media tarjeta, y la tarjeta mide
     min(78%, 330px), de ahí el min() de dentro. */
  .pricing-grid.ruleta::before,
  .pricing-grid.ruleta::after {
    content: ""; flex: 0 0 calc(50% - min(33%, 144px)); align-self: stretch;
  }

  .pricing-grid > .price-card {
    /* Menos alta y más ancha: antes eran 84% con 34/30 de relleno y salía
       una columna estrecha y larguísima. */
    /* Bastante más estrechas de lo que caben: lo que sobra a cada lado es el
       trozo de las vecinas que asoma por detrás de la del centro, y es lo que
       cuenta de un vistazo que hay tres planes y no uno. */
    flex: 0 0 66%;
    max-width: 288px; min-width: 232px;
    scroll-snap-align: center;
    padding: 26px 22px 24px;
    transform-origin: 50% 55%;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  /* Durante el arrastre manda el JS: una transición aquí haría que las
     tarjetas persiguieran al dedo con retardo. La clase se pone cuando la
     ruleta empieza a pintar de verdad, no antes: quitar la transición desde
     el principio se cargaría la animación de entrada. */
  .pricing-grid.ruleta-viva > .price-card { transition: none; }
  .pricing-grid.ruleta > .price-card.feat { box-shadow: 0 24px 46px rgba(11,14,12,.30); }
  .pricing-grid.ruleta > .price-card:not(.feat) { box-shadow: 0 18px 38px rgba(11,14,12,.14); }

  /* Proporciones de dentro: el alto lo estaban dando el precio enorme, el
     hueco fijo bajo el nombre y la lista muy aireada. */
  .price-card .pdesc { min-height: 0; font-size: 13.5px; margin-top: 5px; }
  .price-card .pval { margin-top: 14px; }
  .price-card .pval .n { font-size: 38px; }
  .price-card ul { margin-top: 16px; gap: 8px; }
  .price-card li { font-size: 13.8px; padding-left: 24px; }
  .price-card li.destacado { padding: 7px 9px 7px 30px; }
  .price-card .cobro { margin-top: 14px; padding-top: 11px; font-size: 12px; }
  .price-card .btn-block { margin-top: 13px; }

  /* El "levantar al pasar por encima" no existe en táctil y descuadra el
     encuadre del scroll-snap. */
  .price-card:hover { transform: none; box-shadow: none; }
}

/* Sin JS (o con "menos movimiento") la ruleta no se activa y el carrusel se
   queda como un deslizante normal: hace falta devolverle el hueco que la
   ruleta se comía con los márgenes negativos. */
@media (max-width: 980px) {
  .pricing-grid:not(.ruleta) { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .pricing-grid:not(.ruleta) > .price-card { flex-basis: 84%; }
}

/* Puntos del carrusel: solo en la pasada de móvil, que es donde el carrusel
   existe. En escritorio los tres planes se ven a la vez y no hacen falta. */
.pricing-pasos { display: none; }
@media (max-width: 980px) {
  .pricing-pasos { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }
  .pricing-pasos button {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(11,14,12,.2); cursor: pointer;
    transition: background .25s var(--ease), width .25s var(--ease);
  }
  /* el activo se alarga en vez de solo cambiar de color: se distingue
     también sin percibir bien el contraste */
  .pricing-pasos button[aria-current="true"] { width: 24px; border-radius: 99px; background: var(--ink); }
  /* el área de toque es mayor que el punto: 9 px no se aciertan con el dedo */
  .pricing-pasos button::before { content: ""; position: absolute; inset: -13px; }
  .pricing-pasos button { position: relative; }
}

.pricing-hint { display: none; }
@media (max-width: 980px) {
  .pricing-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; color: var(--mute); margin-top: 2px;
  }
  .pricing-hint .flecha { animation: hintDesliza 1.8s var(--ease) infinite; }
  @keyframes hintDesliza { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
}
@media (prefers-reduced-motion: reduce) { .pricing-hint .flecha { animation: none; } }

/* Multi-local va aparte y no como cuarta columna a propósito: no es un escalón
   mayor que Premium (600 conversaciones frente a 1.500), es la misma cosa
   vendida por local. Como cuarta tarjeta se leía como "el grande". */
.pricing-multi {
  margin-top: 34px; padding: 22px 26px; border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg); display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pricing-multi p { font-size: 14.5px; color: var(--mute); line-height: 1.55; margin: 0; max-width: 62ch; }
.pricing-multi strong { color: var(--ink); font-weight: 700; }
.pricing-multi .btn { flex: none; }
.price-radio { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.price-card[data-selected="true"] { border-color: var(--green-deep); box-shadow: 0 0 0 3px var(--green-dim); }

/* ---------- comparison table ---------- */
.compare { margin-top: 56px; border-top: 2px solid var(--ink); }
.compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.compare-row > div { padding: 18px 22px; font-size: 15px; line-height: 1.35; }
.compare-row.head > div { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--mute); padding-top: 16px; padding-bottom: 16px; }
.compare-row.head .bk { background: var(--green); color: var(--ink); }
.compare-row .bk-col { background: var(--green-dim); font-weight: 500; }
.yes { color: var(--green-deep); font-weight: 600; }
.no { color: var(--coral); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green); color: var(--ink); padding: 100px 0; text-align: center; }
.cta-band h2 { font-size: clamp(32px, 5vw, 62px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.cta-band p { font-size: 18px; max-width: 560px; margin: 20px auto 40px; color: var(--ink-2); }

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--mute-2); padding: 72px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-grid h4 { color: var(--cream); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px; }
.foot-grid ul { display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { font-size: 14.5px; transition: color .2s; }
.foot-grid a:hover { color: var(--green); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--ink-3); font-size: 13px; flex-wrap: wrap; gap: 12px; }

/* ---------- reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ============================================================
   SIGNUP WIZARD (registration flow)
   ============================================================ */
.wizard-shell { min-height: 100vh; background: var(--cream); display: flex; flex-direction: column; }
.wizard-top { padding: 22px 0; border-bottom: 1px solid var(--line); }
.wizard-top .wrap { display: flex; align-items: center; justify-content: space-between; }

.wizard-progress { display: flex; align-items: center; gap: 8px; margin: 0 auto; padding: 30px 0 0; max-width: 640px; }
.wizard-progress .seg { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.wizard-progress .seg i { display: block; height: 100%; width: 0%; background: var(--green); transition: width .4s var(--ease); }
.wizard-progress .seg.done i { width: 100%; }
.wizard-progress .seg.active i { width: 50%; }

.wizard-labels { display: flex; justify-content: space-between; max-width: 640px; margin: 10px auto 0; font-size: 12px; color: var(--mute); font-family: "Chivo Mono", monospace; }
.wizard-labels span { flex: 1; text-align: center; }
.wizard-labels span.on { color: var(--ink); font-weight: 700; }

.wizard-main { flex: 1; padding: 56px 0 100px; }
.wizard-card { max-width: 640px; margin: 0 auto; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.wizard-head { margin-bottom: 36px; }
.wizard-head h1 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.wizard-head p { font-size: 16px; color: var(--mute); margin-top: 12px; line-height: 1.5; }

/* ---------- Páginas sueltas del flujo: acceder, nueva clave ----------
   Estas no usan .wizard-head (no tienen pasos ni progreso) sino .wizard-h1
   y .wizard-lede, que hasta ahora NO existían en ninguna hoja de estilo.
   Al no existir, el navegador aplicaba sus valores por defecto y el texto
   quedaba pegado al botón de Google, con los 16px del margen de un <p>
   como única separación.

   El respiro va en el lede y no en el botón porque el lede es el final del
   bloque de texto: así separa de lo que venga después, sea el botón de
   Google, un formulario o un aviso.                                     */
.wizard-top-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.wizard-h1 {
  font-size: clamp(28px, 3.4vw, 38px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.12; margin: 0;
}
.wizard-lede {
  font-size: 16px; color: var(--mute); line-height: 1.55;
  margin: 12px 0 40px;
}
/* Cuando el lede lleva su propio margen en línea (los "¿Aún no tienes
   cuenta?" del pie de estas páginas), no debe arrastrar los 40px. */
.wizard-lede[style*="margin-top"] { margin-bottom: 0; }

/* ---------- Teléfono con prefijo ----------
   Rejilla 1:4 -> el prefijo ocupa un quinto y el numero el resto. Antes era
   flex con width:auto, pero la regla generica `.field select { width:100% }`
   viene despues en la hoja y ganaba por orden, asi que el desplegable se
   comia toda la fila y el numero se quedaba con el hueco de un correo.
   Se sube la especificidad (.field .tel-combo select) para que no vuelva. */
.tel-combo { display: grid; grid-template-columns: minmax(84px, 1fr) 4fr; gap: 8px; align-items: start; }
.field .tel-combo select { width: 100%; min-width: 0; padding-left: 10px; padding-right: 6px; text-overflow: ellipsis; }
.field .tel-combo input { width: 100%; min-width: 0; }

/* ---------- Previsualización de los enlaces ----------
   La web y la ficha de Maps se pegan a ciegas, y pegar el enlace de otro
   sitio no da ningún error: se descubre cuando el agente ya se lo ha
   mandado a un cliente. Enseñando lo que hay al otro lado, el fallo se ve
   en el momento. */
.vista-previa { margin-top: 12px; }
.vp-tarjeta {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
a.vp-tarjeta:hover { border-color: var(--ink); box-shadow: 0 8px 22px rgba(11,14,12,.08); }
.vp-icono {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  object-fit: cover; background: var(--green-dim);
}
.vp-cuerpo { min-width: 0; flex: 1; }
.vp-dominio {
  font-size: 12px; color: var(--mute); letter-spacing: .01em;
  display: flex; align-items: center; gap: 6px;
}
.vp-titulo {
  font-size: 14.5px; font-weight: 650; line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-desc {
  font-size: 13px; color: var(--mute); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vp-foto {
  width: 100%; max-height: 150px; object-fit: cover;
  border-radius: 11px; margin-top: 11px; display: block; background: var(--green-dim);
}
/* El mapa va en iframe de OpenStreetMap: no necesita clave, se puede meter
   en un marco (Google Maps sin clave no) y basta para comprobar que la
   chincheta cae donde tiene que caer. */
.vp-mapa {
  width: 100%; height: 190px; border: 0; display: block;
  border-radius: 11px; margin-top: 11px; background: var(--green-dim);
}
.vp-estado { font-size: 13px; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.vp-estado.mal { color: var(--coral); }
.vp-pie { font-size: 12px; color: var(--mute); margin-top: 7px; }
.vp-pie a { color: var(--mute); }

/* ---------- Autocompletado de direcciones ----------
   La lista se posiciona sobre lo que venga debajo, no empuja el
   formulario: si el resto de campos bajaran cada vez que aparece una
   sugerencia, el botón que ibas a pulsar se movería bajo el dedo. */
.ac-caja { position: relative; }
.ac-lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(11,14,12,.13);
  max-height: 268px; overflow-y: auto;
}
.ac-lista li {
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14.5px; line-height: 1.4;
}
/* [aria-selected] lo marca el teclado y :hover el ratón: los dos tienen que
   verse igual, porque son lo mismo. */
.ac-lista li:hover,
.ac-lista li[aria-selected="true"] { background: var(--green-dim); }
.ac-lista li .ac-via { font-weight: 600; display: block; }
.ac-lista li .ac-resto { color: var(--mute); font-size: 13px; display: block; margin-top: 1px; }
.ac-lista li.ac-nada { color: var(--mute); cursor: default; font-size: 13.5px; }
.ac-lista li.ac-nada:hover { background: none; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.005em; }
.field .hint { font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: #fff; font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px var(--green-dim); outline: none; }
.field textarea { resize: vertical; min-height: 90px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field-error { font-size: 12.5px; color: var(--coral); margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--coral); }
.field.invalid .field-error { display: block; }

.pw-meter { height: 4px; border-radius: 4px; background: var(--line); margin-top: 8px; overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0%; background: var(--coral); transition: width .3s, background .3s; }

/* service rows (business data step) */
.svc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.svc-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr auto; gap: 10px; align-items: center; }
@media (max-width: 620px) { .svc-row { grid-template-columns: 1fr 1fr; } }
.svc-row input { padding: 11px 13px; font-size: 14px; }
.svc-remove { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--mute); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.svc-remove:hover { border-color: var(--coral); color: var(--coral); }
.add-row-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green-deep); border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 12px 16px; width: 100%; justify-content: center; background: transparent; }
.add-row-btn:hover { border-color: var(--green-deep); background: var(--green-dim); }

.hours-grid { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: grid; grid-template-columns: 110px auto 1fr 1fr; gap: 10px; align-items: center; }
@media (max-width: 560px) { .hours-row { grid-template-columns: 90px auto 1fr 1fr; } }
.hours-row .day { font-size: 14px; font-weight: 600; }
.hours-row input[type="time"] { padding: 9px 10px; font-size: 13.5px; }
.switch { position: relative; width: 40px; height: 22px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; pointer-events: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .track { background: var(--green-deep); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* selectable option cards (plan / connect method) */
.opt-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 22px;
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; background: #fff;
}
.opt-card:hover { border-color: var(--ink-2); }
.opt-card[data-selected="true"] { border-color: var(--green-deep); background: var(--green-dim); box-shadow: 0 0 0 3px rgba(26,229,122,.18); }
.opt-card input { position: absolute; opacity: 0; }
.opt-card .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; margin-top: 2px; position: relative; }
.opt-card[data-selected="true"] .radio { border-color: var(--green-deep); }
.opt-card[data-selected="true"] .radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--green-deep); }
.opt-card .oc-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.opt-card .oc-desc { font-size: 14px; color: var(--mute); margin-top: 5px; line-height: 1.45; }
.opt-card .oc-badge { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--green-deep); background: var(--green-dim); padding: 3px 9px; border-radius: var(--radius-pill); }
.opt-stack { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 16px; }

/* summary / review */
.summary-list { border-top: 1px solid var(--line); margin-top: 6px; }
/* Resumen del alta. Era flex con el valor alineado a la derecha y limitado al
   60%: en cuanto el negocio tenía una dirección normal o tres servicios, el
   texto se apelotonaba contra el borde y no había forma de leerlo. Con dos
   columnas de rejilla la etiqueta manda y el valor dispone de todo el ancho
   restante, alineado a la izquierda como cualquier texto que haya que leer. */
.summary-row {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr;
  gap: 6px 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  align-items: start;
}
.summary-row .k { color: var(--mute); line-height: 1.45; }
.summary-row .v {
  font-weight: 600;
  line-height: 1.45;
  /* Una dirección o un email largos no deben desbordar la tarjeta. */
  overflow-wrap: anywhere;
}
/* Falta por rellenar: se dice, en vez de dejar un hueco en blanco que parece
   que la página se ha roto. */
.summary-row .v.vacio { font-weight: 400; color: var(--mute); font-style: italic; }
/* Los servicios, uno por línea: en una sola fila separados por puntos eran
   ilegibles a partir del tercero. */
.summary-row .v.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.summary-row .v.lista li { position: relative; padding-left: 14px; }
.summary-row .v.lista li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--green-deep);
}

@media (max-width: 520px) {
  /* En móvil no caben dos columnas sin partir palabras: se apila. */
  .summary-row { grid-template-columns: 1fr; gap: 4px; }
  .summary-row .k { font-size: 13px; }
}

.status-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 20px; }
.status-banner.info { background: #EFEAD9; color: var(--ink-2); }
.status-banner.pending { background: var(--coral-dim); color: #8A3418; }
.status-banner.ok { background: var(--green-dim); color: var(--green-deep); }

.done-check { width: 88px; height: 88px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(11,14,12,.25); border-top-color: var(--ink); animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.api-note { font-size: 12px; color: var(--mute); font-family: "Chivo Mono", monospace; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 26px; line-height: 1.5; }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--cream); padding: 14px 22px; border-radius: var(--radius-pill); font-size: 14px; box-shadow: var(--shadow-deep); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 200; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   ADAPTACIÓN A MÓVIL, TABLET Y ESCRITORIO
   ------------------------------------------------------------
   Correcciones sobre el diseño base. Cada bloque arregla un
   comportamiento concreto, no es maquillaje.
   ============================================================ */

/* --- iOS: no inflar el texto al girar a horizontal ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --- Palabras largas (emails, URLs) no deben desbordar ------ */
body { overflow-wrap: break-word; }

/* --- Alturas reales en móvil -------------------------------
   100vh en Safari iOS cuenta también lo que tapa la barra de
   direcciones: el contenido queda cortado por abajo. 100dvh
   mide el hueco visible de verdad. Se deja 100vh antes como
   respaldo para navegadores que no conocen dvh.            */
.wizard-shell { min-height: 100vh; min-height: 100dvh; }

/* --- Zonas seguras del iPhone (notch e indicador inferior) --
   Sin esto, la barra superior se mete bajo el notch y el aviso
   flotante queda debajo de la barra de gestos.              */
.nav { padding-top: env(safe-area-inset-top); }
.nav-inner {
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}
.wrap {
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}
.toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
.wizard-shell { padding-bottom: env(safe-area-inset-bottom); }

/* --- Campos de formulario: 16px como mínimo ----------------
   Safari en iOS hace zoom automático al enfocar un campo con
   letra menor de 16px, y deja la página descolocada. Con 16px
   no hace zoom. En escritorio se mantiene el tamaño original. */
@media (max-width: 900px) {
  .field input, .field select, .field textarea,
  .svc-row input, .hours-row input[type="time"] {
    font-size: 16px;
  }
}

/* --- Objetivos táctiles ------------------------------------
   Un dedo necesita ~44px. Varios controles se quedaban en 38px
   o menos, difíciles de acertar en marcha.                  */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 12px 18px; }
  .svc-remove { width: 44px; height: 44px; }
  .lang-switch button { min-height: 40px; padding: 9px 15px; }
  .nav-burger { width: 46px; height: 46px; }
  .nav-links a { padding: 6px 0; }
}

/* --- Efectos de hover solo donde hay ratón -----------------
   En táctil, el hover se queda "pegado" tras tocar: el botón
   se ve levantado hasta que tocas en otro sitio.            */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .btn-ghost:hover { background: transparent; color: var(--ink); }
  .btn-ghost-cream:hover { background: transparent; color: var(--cream); }
}

/* --- Barra de navegación en móvil --------------------------
   Cabían el selector de idioma, dos botones y la hamburguesa:
   en 390px se amontonaban. Se deja solo la acción principal;
   "Iniciar sesión" pasa al menú desplegable (ver app.js).   */
@media (max-width: 900px) {
  .nav-inner { padding: 12px 20px; gap: 12px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-ghost { display: none; }
}
@media (max-width: 560px) {
  .brand { font-size: 17px; }
  .brand .dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px var(--green-dim); }
  .lang-switch { display: none; }          /* va dentro del menú */
  .nav-actions .btn-sm { padding: 11px 14px; font-size: 13.5px; }
}

/* --- Casillas y radios -------------------------------------
   `.field input` aplica width:100% y padding a TODOS los input,
   incluidos los checkbox: se estiraban al ancho del campo y el
   texto acababa a media pantalla de la casilla.             */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;      /* que el flex del label no lo encoja */
  padding: 0;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--green-deep);
}

/* --- Tablet ------------------------------------------------
   Entre 720 y 1024 el contenido se quedaba en una columna muy
   estrecha con márgenes enormes.                            */
@media (min-width: 721px) and (max-width: 1024px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
  .section-pad { padding: 92px 0; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Móvil en horizontal -----------------------------------
   Poca altura: los bloques de 120px de aire dejaban la pantalla
   casi vacía.                                                */
@media (max-height: 480px) and (orientation: landscape) {
  .section-pad { padding: 48px 0; }
  .nav { position: static; }   /* la barra fija se comía media pantalla */
}

/* --- Pantallas muy estrechas (iPhone SE, 320px) ------------ */
@media (max-width: 380px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .btn { padding: 14px 20px; font-size: 15px; }
  .svc-row { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 72px auto 1fr 1fr; gap: 8px; }
}

/* --- Impresión --------------------------------------------- */
@media print {
  .nav, .toast, .nav-burger { display: none; }
  body { background: #fff; color: #000; }
}

/* --- Tabla comparativa en móvil ----------------------------
   Se quedaba en tres columnas a cualquier ancho y no tenía
   ninguna media query. Las columnas `fr` no encogen por debajo
   de su palabra más larga, así que en un teléfono la tabla
   sobresalía y arrastraba toda la página en horizontal.     */
@media (max-width: 720px) {
  .compare-row > div { padding: 14px 12px; font-size: 14px; }
  .compare-row.head > div { font-size: 11px; letter-spacing: .04em; padding: 12px; }
}
@media (max-width: 480px) {
  .compare-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .compare-row > div { padding: 12px 8px; font-size: 13px; hyphens: auto; }
}

/* --- Que nada pueda desbordar a lo ancho -------------------
   Por defecto, un hijo de grid o flex no encoge por debajo de
   su contenido mínimo (min-width:auto): una palabra larga basta
   para sacar la página de la pantalla. `min-width: 0` le
   permite encoger, y el corte de palabra evita el recorte.
   Esto ataca la causa; el overflow-x:hidden del body solo
   escondía el síntoma.                                       */
.compare-row > div,
.hero-ctas .btn,
.foot-grid > *,
.feature-grid > *,
.pricing-grid > *,
.stats-grid > *,
.step-row > * {
  min-width: 0;
}

/* Los botones no parten su texto (white-space:nowrap), así que
   en pantallas estrechas se les deja ocupar toda la fila en vez
   de forzar el ancho de la página. */
@media (max-width: 400px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ---------- panel del cliente ---------- */
.panel-h2 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mute); font-family: "Chivo Mono", monospace; margin-bottom: 18px;
}
.panel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.panel-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 22px; min-width: 0;
}
/* La pastilla de estado no parte su texto, asi que en una tarjeta estrecha
   estrujaba el titulo hasta dejarlo de una letra por linea. Con flex-wrap
   baja a la linea siguiente en vez de robarle el sitio. */
.panel-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.panel-card-top h3 { font-size: 18px; letter-spacing: -0.02em; min-width: 8ch; flex: 1 1 auto; overflow-wrap: break-word; }
.panel-card-meta { font-size: 14px; color: var(--mute); line-height: 1.5; }

/* ---------- bloques de código (documentación) ---------- */
.cod {
  background: rgba(242,238,229,0.06);
  border: 1px solid rgba(242,238,229,0.14);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 0;
  overflow-x: auto;              /* el código no debe romper el ancho de la página */
  -webkit-overflow-scrolling: touch;
}
.cod code {
  font-family: "Chivo Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream);
  white-space: pre;
}
/* Sobre fondo claro */
section:not([style*="--ink"]) .cod {
  background: #fff;
  border-color: var(--line);
}
section:not([style*="--ink"]) .cod code { color: var(--ink); }

@media (max-width: 560px) {
  .cod { padding: 12px 14px; }
  .cod code { font-size: 12px; }
}

/* ---------- entrar con Google ----------
   Google exige que su botón sea reconocible: fondo propio, su logo a color y
   el texto sin alterar. Por eso NO hereda de .btn-primary. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: #fff;
  color: #1F1F1F;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-google:hover { background: #F7F5F0; border-color: #BFB9A8; }
.btn-google:active { background: #EFEBE1; }
.btn-google:disabled { opacity: .6; cursor: default; }
.btn-google svg { flex: none; }

/* "o" entre el botón de Google y el formulario de siempre */
.separador-o {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0;
  color: var(--mute); font-size: 13px;
}
.separador-o::before,
.separador-o::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Aviso de hora retenida durante el alta */
.video-retenida {
  border: 1px solid var(--green-deep);
  background: var(--green-dim);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14.5px; line-height: 1.55;
}
.video-retenida h4 { margin: 0 0 6px; font-size: 15px; }
.video-retenida .cambiar {
  background: none; border: 0; padding: 0; margin-top: 8px;
  color: var(--mute); font: inherit; font-size: 13.5px;
  text-decoration: underline; cursor: pointer;
}
.video-retenida .cambiar:hover { color: var(--ink); }

/* ---------- crédito a Mintlify en "Tu primera llamada" ---------- */
.mint-credito {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px;
  font-size: 13px; color: var(--mute-2);
}
.mint-credito a { color: var(--mute-2); text-decoration: none; border-bottom: 1px solid rgba(242,238,229,0.22); }
.mint-credito a:hover { color: var(--cream); }

@media (max-width: 560px) {
  .mint-cod pre { padding: 12px 14px; }
  .mint-cod code { font-size: 12px; }
}

/* ---------- aviso de cookies ---------- */
#cookieBanner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 300;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
#cookieBanner.visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-card {
  max-width: 720px; margin: 0 auto;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
  padding: 22px 24px;
  /* Si el texto legal es largo o la tipografía del sistema es grande, que
     haga scroll dentro en vez de taparlo todo. */
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.cookie-txt { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 16px; }
.cookie-txt a { color: var(--green-deep); font-weight: 600; text-decoration: underline; }

.cookie-config { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 16px; }
.cookie-fila { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; cursor: pointer; }
.cookie-fila input { width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; accent-color: var(--green-deep); }
.cookie-fila strong { display: block; font-size: 14px; margin-bottom: 2px; }
.cookie-fila em { display: block; font-style: normal; font-size: 13px; color: var(--mute); line-height: 1.45; }

/* Los tres botones al mismo nivel: la ley exige que rechazar sea tan fácil
   como aceptar, así que no puede ser un enlace pequeño escondido. */
.cookie-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btns .btn { flex: 1 1 auto; min-width: 140px; }

@media (max-width: 560px) {
  #cookieBanner { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cookie-card { padding: 18px; }
  .cookie-btns .btn { flex: 1 1 100%; }   /* apilados y anchos: fáciles de tocar */
}

/* ---------- página de agencias: adaptación a pantalla ---------- */
/* La lista de pasos usaba padding por defecto de <ol>, que en móvil
   desplazaba todo el bloque y sacaba los ejemplos de código. */
.pasos-api { list-style: none; padding: 0; margin: 0; display: grid; gap: 32px; max-width: 860px; }

@media (max-width: 900px) {
  /* La tabla de "lo que conviene saber" tiene tres columnas de texto largo.
     En tablet se queda sin aire; se apila en bloques legibles. */
  .tabla-saber .compare-row { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .tabla-saber .compare-row > div { padding: 3px 0; }
  .tabla-saber .compare-row.head { display: none; }   /* sin columnas, sobra la cabecera */
  .tabla-saber .compare-row > div:first-child { font-size: 15px; color: var(--ink); }
  .tabla-saber .compare-row > div:nth-child(2) { color: var(--ink-2); }
  .tabla-saber .compare-row > div:nth-child(3) { color: var(--mute); font-size: 14px; }
}

@media (max-width: 560px) {
  .pasos-api { gap: 26px; }
  /* En móvil los dos botones de la portada, uno debajo de otro y anchos. */
  .ag-hero-ctas { flex-direction: column; align-items: stretch; }
  .ag-hero-ctas .btn { width: 100%; }
}

/* ---------- escanear la carta de servicios ---------- */
.escanear {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(26,229,122,0.04);
}
.escanear-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--cream);
  border: none; border-radius: var(--radius-pill);
  padding: 12px 20px; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.escanear-btn:disabled { opacity: .55; cursor: default; }
.escanear .hint { margin-top: 10px; margin-bottom: 0; }
@media (max-width: 560px) {
  /* En móvil el botón a ancho completo: el dedo agradece el objetivo grande,
     y además es donde más se usa (se hace la foto con el propio teléfono). */
  .escanear-btn { width: 100%; justify-content: center; }
}

/* ---------- reserva de videollamada ---------- */
.videollamada {
  margin-top: 28px; padding: 20px;
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: #fff;
}
.video-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.video-cab h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 4px; }
.video-cab .hint { margin: 0; max-width: 46ch; }
.video-cab .btn { flex: 0 0 auto; }

.video-dias { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 6px; -webkit-overflow-scrolling: touch; }
.video-dia {
  flex: 0 0 auto; min-width: 74px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; text-align: center; font-family: inherit;
}
.video-dia[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.video-dia .d { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.video-dia .n { display: block; font-size: 19px; font-weight: 700; line-height: 1.1; }

.video-horas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.video-hora {
  padding: 9px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: #fff; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
}
.video-hora[aria-pressed="true"] { border-color: var(--green-deep); background: var(--green-dim); color: var(--green-deep); }

/* El cuadro de confirmacion cuelga justo debajo de la cabecera ("...no te
   compromete a nada"), asi que necesita aire propio: pegado al parrafo se
   leia como parte del mismo texto en vez de como un aviso aparte. */
#videoHecho:not([hidden]) { margin-top: 22px; }
.video-ok {
  border: 1.5px solid var(--green-deep); background: var(--green-dim);
  border-radius: var(--radius-sm); padding: 16px; margin-top: 0;
}
.video-ok h4 { font-size: 15px; margin-bottom: 6px; }
.video-ok p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 560px) {
  .video-cab { flex-direction: column; }
  .video-cab .btn { width: 100%; }
  /* Objetivos grandes: esto se rellena casi siempre desde el móvil. */
  .video-hora { flex: 1 1 calc(50% - 4px); text-align: center; min-height: 44px; }
}

/* ---------- casilla con descripción ---------- */
.check-linea { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check-linea strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.check-linea em { display: block; font-style: normal; font-size: 13px; color: var(--mute); line-height: 1.45; }