/* ===== Fonts ===== */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-variable-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-600-normal.woff2") format("woff2");
}

/* ===== Tokens =====
   Valores tomados directamente del mockup original (beevo-home.html), no
   reinventados — para que el sitio real quede igual, no "parecido". */
:root {
  --bg-dark: #101013;
  --card-dark: #141416;
  --bg-cream: #f6f4ee;
  --pink: #f13b8c;
  --pink-hover: #d92878;
  --pink-link: #c9226e;
  --pink-light: #ff7ab4;
  --green: #00b375;
  --green-live: #00d68f;
  --ink: #141416;
  --ink-soft: #5c5c66;
  --ink-faint: #87878f;
  --paper: #ffffff;
  --line: rgba(20, 20, 22, 0.07);
  --line-strong: rgba(20, 20, 22, 0.1);
  --line-dark: rgba(255, 255, 255, 0.07);
  --on-dark: #ffffff;
  --on-dark-soft: #a2a2ae;
  --on-dark-faint: #86868f;
  --on-dark-dim: #6d6d78;
  --nav-link: #d2d2da;
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1320px;
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo [hidden] es de baja prioridad (UA stylesheet) — cualquier
   regla nuestra con `display` (ej. .btn, .chat-input-row) le gana y el
   elemento se sigue viendo aunque tenga `hidden`. Esto lo neutraliza de
   raíz para todo el sitio, en vez de parchear caso por caso. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}

a { color: var(--pink-link); text-decoration: none; }
a:hover { color: var(--pink); }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input::placeholder { color: #a5a5ad; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: var(--pink);
  color: #fff;
}
.btn-primary:hover { background: var(--pink-hover); }
.btn-ghost {
  background: transparent;
  color: var(--pink);
  border: 1.5px solid var(--pink);
}
.btn-large { padding: 15px 30px; font-size: 1rem; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 170;
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand-mark { display: block; height: 28px; width: auto; }
.main-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  flex: 1;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 500;
}
.main-nav a {
  color: var(--nav-link);
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--on-dark); }
.header-actions { display: flex; align-items: center; gap: 12px; position: relative; z-index: 200; }
.header-actions .btn-primary { padding: 11px 22px; }
.header-actions .btn-primary:hover { background: #ff5ba1; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--on-dark);
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-backdrop.is-open { display: block; opacity: 1; }

/* ===== Hero ===== */
.hero {
  position: relative;
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: hidden;
}
.hero-blobs {
  position: absolute;
  top: -70px;
  right: 20px;
  width: 780px;
  height: 640px;
  filter: blur(18px) contrast(26);
  opacity: 0.34;
  pointer-events: none;
}
.hero-blob-1 {
  position: absolute;
  left: 160px;
  top: 40px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--pink);
  animation: bvGooBig 13s cubic-bezier(.5,0,.3,1) infinite;
}
.hero-blob-2 {
  position: absolute;
  left: 519px;
  top: 310px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: var(--green);
  animation: bvGoo 13s cubic-bezier(.5,0,.3,1) infinite;
}
.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #101013 6%, rgba(16,16,19,.8) 30%, rgba(16,16,19,.18) 56%, rgba(16,16,19,0) 72%);
  pointer-events: none;
}
@keyframes bvGooBig { 0%,100% { transform: scale(1); } 40% { transform: scale(.94); } 84% { transform: scale(1); } }
@keyframes bvGoo { 0%,100% { transform: translate(0,0) scale(1); } 34%,50% { transform: translate(-232px,-118px) scale(.86); } 84% { transform: translate(0,0) scale(1); } }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  gap: 60px;
  align-items: end;
  padding: 84px 0 64px;
}
.eyebrow-row { display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; max-width: 560px; }
.eyebrow-row .eyebrow-line { height: 2px; background: var(--pink); width: 100%; }
.trap-intro .eyebrow-row { max-width: 420px; }
.live-ops-head .eyebrow-row { max-width: 460px; }
.pruebalo-copy .eyebrow-row { max-width: 340px; }
.cobertura-copy .eyebrow-row { max-width: 400px; }
.eyebrow {
  font-family: var(--font-mono);
  color: var(--pink-light);
  font-weight: 400;
  font-size: 0.69rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.hero-copy h1 {
  font-size: 5.375rem;
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.05em;
  max-width: 13ch;
  margin-bottom: 22px;
}
.hero-subtitle {
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.hero-description {
  color: var(--on-dark-soft);
  font-size: 1.19rem;
  line-height: 1.65;
  max-width: 47ch;
  margin-bottom: 22px;
}
.address-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 7px 7px 26px;
  backdrop-filter: blur(6px);
  max-width: 600px;
}
.address-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 14px 0;
}
.address-form input::placeholder { color: var(--on-dark-faint); }
.form-hint {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--on-dark-faint);
  padding-left: 26px;
}

.hero-card {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.hero-card-label {
  padding: 18px 24px;
  border-bottom: 1px solid #f1eee6;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-card-lines { display: flex; flex-direction: column; }
.hero-card-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 24px;
  font-size: 1rem;
  color: var(--ink-soft);
}
.hero-card-lines li:first-child { padding-top: 17px; font-weight: 600; color: var(--ink); }
.hero-card-lines li:last-child { padding-bottom: 20px; }
.hero-card-lines li .amount { font-family: var(--font-mono); font-size: 1.25rem; color: #00905e; }
.hero-card-lines li .amount.paid { color: var(--ink); }
.hero-card-total {
  margin: 0 16px 16px;
  background: var(--card-dark);
  color: var(--on-dark);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-card-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.hero-card-total-label { font-weight: 700; font-size: 1.06rem; }
.hero-card-total-note { font-size: 0.875rem; color: #9a9aa4; }
.hero-card-total-amount { font-family: var(--font-mono); font-size: 1.875rem; font-weight: 600; white-space: nowrap; }

.trust-badges {
  padding: 56px 0 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trust-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 1px 2px rgba(20, 20, 22, 0.03);
}
.trust-badge .label {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trust-badge .value { font-size: 1.06rem; font-weight: 700; color: var(--ink); }

/* ===== Sections ===== */
.section { padding: 90px 0; }
.section-dark { background: var(--bg-dark); color: var(--on-dark); }
.section-heading { max-width: 640px; margin-bottom: 30px; }
.section-heading h2 {
  font-size: 3.125rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 12px;
}
.section-heading p {
  font-size: 1.125rem;
  color: var(--ink-soft);
}
.section-dark .section-heading p { color: var(--on-dark-soft); }
.section-dark .eyebrow-row .eyebrow-line { background: var(--pink-light); }
.section-dark .eyebrow { color: var(--pink-light); }

/* ===== Plans ===== */
.plans-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.dgo-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid rgba(20, 20, 22, 0.08);
  border-radius: 999px;
  padding: 12px 22px 12px 16px;
  box-shadow: 0 1px 2px rgba(20, 20, 22, 0.03);
}
.dgo-track {
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #dcd7cb;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.dgo-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: left 0.2s cubic-bezier(.4,1.4,.5,1);
}
.dgo-toggle.is-on .dgo-track { background: var(--pink); }
.dgo-toggle.is-on .dgo-knob { left: 25px; }
.dgo-toggle-label { font-size: 1rem; color: var(--ink); }
.dgo-toggle-label .dot { color: var(--ink-faint); }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
.plan-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 20, 22, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20,20,22,.04), 0 22px 44px -26px rgba(20,20,22,.5); }
.plan-card.is-selected { border: 2px solid var(--pink); }
.plan-card.is-selected::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plan-tag {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pink-link);
  min-height: 15px;
  position: relative;
}
.plan-name { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; position: relative; }
.plan-price { display: flex; align-items: baseline; gap: 7px; position: relative; }
.plan-price .amount { font-family: var(--font-mono); font-size: clamp(1.625rem, 2.3vw, 2.125rem); font-weight: 600; line-height: 1; }
.plan-price .period { color: var(--ink-faint); font-size: 0.875rem; }
.plan-breakdown { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); position: relative; overflow-wrap: anywhere; }
.plan-description { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; flex: 1; position: relative; }
.plan-cta {
  position: relative;
  align-self: flex-start;
  border-radius: 999px;
  background: #f6f0f4;
  color: var(--pink-link);
  padding: 10px 20px;
  font-size: 0.94rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.plan-cta:hover { background: var(--pink); color: #fff; }

.plan-detail-card {
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 20, 22, 0.03);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
}
.plan-stats {
  padding: 34px 34px 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid #f1eee6;
}
.plan-stats-head { display: flex; align-items: center; gap: 12px; }
.plan-stats-head .label {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.plan-stats-head .pill {
  border-radius: 999px;
  background: var(--card-dark);
  color: #fff;
  padding: 5px 14px;
  font-size: 0.875rem;
  font-weight: 600;
}
.plan-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
.plan-stat { display: flex; flex-direction: column; gap: 5px; }
.plan-stat .num { font-family: var(--font-mono); font-size: 2.375rem; font-weight: 600; line-height: 1; }
.plan-stat .word { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: #00905e; }
.plan-stat .label { font-size: 0.94rem; color: var(--ink-soft); }

.streams-compare {
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fcfbf8;
}
.streams-compare h3 {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.streams-bars { display: flex; flex-direction: column; gap: 14px; }
.streams-bar {
  display: grid;
  grid-template-columns: 74px 1fr 44px;
  gap: 14px;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.streams-bar .bar-label { font-size: 0.875rem; font-weight: 600; color: #3d3d44; }
.streams-bar .bar-track { display: block; height: 12px; border-radius: 999px; background: #efece3; overflow: hidden; }
.streams-bar .bar-fill { display: block; height: 100%; border-radius: 999px; background: #d8d3c6; transition: width 0.45s cubic-bezier(.3,1,.4,1), background 0.2s ease; }
.streams-bar.is-active .bar-fill { background: var(--pink); }
.streams-bar .bar-value { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-soft); text-align: right; }
.streams-hint { font-size: 0.875rem; line-height: 1.55; color: var(--ink-faint); border-top: 1px solid #f1eee6; padding-top: 16px; }

/* ===== Trap grid (FAQ hero) ===== */
.section-trap { background: var(--card-dark); color: var(--on-dark); position: relative; overflow: hidden; }
.trap-blob-1 { position: absolute; top: -160px; left: -100px; width: 480px; height: 480px; border-radius: 50%; background: var(--pink); opacity: .13; filter: blur(20px); pointer-events: none; }
.trap-blob-2 { position: absolute; bottom: -200px; left: 220px; width: 400px; height: 400px; border-radius: 50%; background: var(--green); opacity: .1; filter: blur(20px); pointer-events: none; }
.trap-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; padding: 90px 40px; }
.trap-intro h2 { font-size: 3.375rem; line-height: 1; max-width: 14ch; }
.trap-intro p { max-width: 40ch; font-size: 1.19rem; color: var(--on-dark-soft); }
.trap-grid { display: flex; flex-direction: column; gap: 12px; }
.trap-item {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trap-item h4 { font-size: 1.31rem; font-weight: 700; letter-spacing: -0.015em; }
.trap-item p { color: var(--on-dark-soft); font-size: 1rem; line-height: 1.65; }

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 48px;
}
.stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-card.is-live { background: rgba(0, 214, 143, 0.07); border-color: rgba(0, 214, 143, 0.2); }
.stat-card .stat-value { font-family: var(--font-mono); font-size: 2.625rem; font-weight: 600; line-height: 1; color: var(--on-dark); }
.stat-card.is-live .stat-value { color: var(--green-live); }
.stat-card .stat-label { font-size: 0.94rem; color: var(--on-dark-soft); line-height: 1.45; }

.ops-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ops-feature { display: flex; flex-direction: column; gap: 12px; }
.ops-feature .dot { width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.12); }
.ops-feature:first-child .dot { background: var(--pink); }
.ops-feature h4 { font-size: 1.19rem; font-weight: 700; letter-spacing: -0.015em; }
.ops-feature p { color: var(--on-dark-soft); font-size: 0.94rem; line-height: 1.65; }

.section-cta { position: relative; overflow: hidden; padding: 0; }
.cta-blob-1 { position: absolute; top: -190px; left: -150px; width: 800px; height: 800px; border-radius: 50%; background: var(--pink); opacity: .16; mix-blend-mode: multiply; pointer-events: none; }
.cta-blob-2 { position: absolute; top: 180px; left: 400px; width: 500px; height: 500px; border-radius: 50%; background: var(--green); opacity: .2; mix-blend-mode: multiply; pointer-events: none; }
.section-cta .wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 112px 40px 112px 90px; }
.section-cta h2 { font-size: 4.75rem; line-height: .94; font-weight: 800; letter-spacing: -0.05em; max-width: 15ch; }
.section-cta p { font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); max-width: 38ch; }
.section-cta .address-form {
  background: var(--paper);
  border-color: var(--line-strong);
  width: 100%;
  box-shadow: 0 2px 4px rgba(20,20,22,.03), 0 22px 48px -24px rgba(20,20,22,.4);
}
.section-cta .address-form input { color: var(--ink); }
.section-cta .address-form input::placeholder { color: var(--ink-faint); }

/* ===== Steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.steps li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(20, 20, 22, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps li::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--pink);
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.steps li:last-child::before { background: var(--green); opacity: 0.08; }
.step-number {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 600;
}
.steps li:last-child .step-number { background: var(--card-dark); }
.steps h4 { position: relative; font-size: 1.44rem; font-weight: 700; letter-spacing: -0.025em; }
.steps p { position: relative; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.step-duration {
  position: relative;
  align-self: flex-start;
  border-radius: 999px;
  background: var(--bg-cream);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.81rem;
  color: var(--ink-faint);
}

/* ===== TV ===== */
.section-tv { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tv-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.tv-eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.tv-eyebrow-row .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--pink-link);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 7px;
}
.tv-partner-logo { height: 20px; width: auto; }
.tv-copy h2 { font-size: 3.125rem; line-height: 1; max-width: 15ch; margin-bottom: 20px; }
.tv-copy > p { font-size: 1.125rem; color: var(--ink-soft); max-width: 44ch; margin-bottom: 6px; }
.tv-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; margin-bottom: 28px; }
.tv-bullets li {
  display: flex; align-items: baseline; gap: 16px;
  color: #3d3d44;
  font-size: 1rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 12px;
}
.tv-bullets .tv-bullet-index {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--pink-link);
}
.tv-visual {
  border-radius: 20px;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.tv-visual img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Cobertura ===== */
.cobertura-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.cobertura-copy .address-form { margin-top: 24px; max-width: 500px; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(20,20,22,.03); padding: 6px 6px 6px 24px; }
.cobertura-copy .address-form input { color: var(--ink); font-size: 1rem; padding: 13px 0; }
.cobertura-copy .address-form input::placeholder { color: var(--ink-faint); }
.cobertura-copy .address-form .btn { padding: 13px 26px; font-size: 0.94rem; }
.cobertura-copy h2 { font-size: 3.125rem; line-height: 1; max-width: 16ch; margin-bottom: 20px; }
.cobertura-copy > p { font-size: 1.125rem; color: var(--ink-soft); max-width: 44ch; }
.cobertura-copy .eyebrow-row .eyebrow-line { background: var(--card-dark); }
.cobertura-copy .eyebrow { color: var(--pink-link); }
.cobertura-map {
  border-radius: 20px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  overflow: hidden;
}
.cobertura-map img { width: 100%; height: 100%; object-fit: cover; }

/* ===== FAQ accordion ===== */
.section-faq { background: var(--paper); border-top: 1px solid var(--line); }
.faq-inner { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 60px; align-items: start; }
.faq-inner h2 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #faf8f4;
  border: 1px solid rgba(20, 20, 22, 0.05);
  border-radius: 16px;
  padding: 22px 26px;
  transition: background 0.16s ease;
}
.faq-item:hover { background: #f6f2ec; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  font-size: 1.19rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
  color: var(--ink);
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20, 20, 22, 0.08);
  color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 1rem;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-answer p { padding-top: 12px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; max-width: 78ch; }
.faq-item.is-open .faq-answer { max-height: 400px; }

/* ===== Footer ===== */
.site-footer { background: var(--card-dark); color: var(--on-dark); }
.footer-top {
  padding: 56px 0 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .brand-mark { height: 40px; width: auto; }
.footer-brand p { color: var(--on-dark-faint); font-size: 0.875rem; max-width: 34ch; line-height: 1.65; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; font-size: 0.94rem; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h5 { font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: 3px; }
.footer-col a { color: var(--on-dark-soft); }
.footer-legal-wrap { padding-top: 22px; padding-bottom: 46px; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; font-size: 0.81rem; color: var(--on-dark-dim); }

/* ===== Chat widget ===== */
.chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 200; }
/* Forma de "globo de conversación" sin pieza de cola aparte: un squircle con
   una sola esquina bastante menos redondeada que las otras tres. Es el mismo
   truco que usan Slack, Discord o iMessage para sus burbujas — no hay costura
   entre "cuerpo" y "cola" que afinar porque es una sola forma continua. */
.chat-fab {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50% 50% 10px 50%;
  background: var(--pink);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(241,59,140,0.4);
  cursor: pointer;
}
/* Tres puntitos tipo "está escribiendo", como el indicador real del chat
   (.chat-typing), en vez del isotipo estático. La animación va metida en el
   propio keyframe: rebota solo en el primer ~15% del ciclo de 6s y el resto
   del tiempo queda quieta, así que se repite "cada 6 segundos", no todo el
   rato — no hace falta JS ni setInterval para lograr ese ritmo. */
.chat-fab-dots { display: flex; align-items: center; gap: 5px; }
.chat-fab-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: chatFabDotWave 6s ease-in-out infinite;
}
.chat-fab-dots span:nth-child(2) { animation-delay: 0.16s; }
.chat-fab-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes chatFabDotWave {
  0%, 15%, 100% { transform: translateY(0); opacity: 0.55; }
  6% { transform: translateY(-4px); opacity: 1; }
}
/* Saludo de entrada: un pequeño "wiggle" que se reproduce una sola vez (JS
   agrega esta clase solo si el visitante nunca lo ha visto) para llamar la
   atención hacia el botón sin depender de hover — funciona igual en mobile. */
@keyframes chatFabIntro {
  0% { transform: scale(0) rotate(0deg); }
  45% { transform: scale(1.14) rotate(10deg); }
  62% { transform: scale(0.96) rotate(-8deg); }
  78% { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.chat-fab.chat-fab-intro { animation: chatFabIntro 0.85s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
/* Pulso ambiental: un anillo que respira hacia afuera y se desvanece, no un
   punto ni un número de notificación — sugiere "estoy vivo y esperando"
   sin simular un mensaje sin leer. Se apaga solo la primera vez que se abre
   el chat (ver chat.js), porque ya cumplió su función de aviso. */
@keyframes chatFabPulse {
  0% { box-shadow: 0 12px 28px rgba(241,59,140,0.4), 0 0 0 0 rgba(241,59,140,0.45); }
  70% { box-shadow: 0 12px 28px rgba(241,59,140,0.4), 0 0 0 14px rgba(241,59,140,0); }
  100% { box-shadow: 0 12px 28px rgba(241,59,140,0.4), 0 0 0 14px rgba(241,59,140,0); }
}
.chat-fab.chat-fab-pulse { animation: chatFabPulse 3.4s ease-out infinite 2.2s; }
.chat-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 520px;
  max-height: calc(100vh - 140px);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  overflow: hidden;
}
.chat-widget.is-open .chat-panel { display: flex; }
.chat-widget.is-open .chat-fab { display: none; }
.chat-keyboard-filler { display: none; }
.chat-header {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.chat-title { font-weight: 800; }
.chat-subtitle { font-size: 0.75rem; color: var(--green); font-weight: 600; }
.chat-close { background: none; border: none; color: var(--on-dark); font-size: 1.1rem; cursor: pointer; padding: 10px; margin: -10px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { padding: 12px 14px; border-radius: 14px; font-size: 0.92rem; max-width: 85%; line-height: 1.45; }
.chat-bubble-assistant { background: var(--bg-cream); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-bubble-user { background: var(--pink); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-bubble-error { background: #fdecea; color: #b3261e; align-self: flex-start; }
.chat-bubble p { margin: 0; }
.chat-bubble p + p { margin-top: 8px; }
.chat-bubble ul { margin: 0; padding-left: 18px; }
.chat-bubble li { margin: 3px 0; }
.chat-bubble strong { font-weight: 800; }
.chat-bubble a { color: var(--pink); font-weight: 700; text-decoration: underline; word-break: break-all; }
.chat-bubble-user a { color: #fff; }
.chat-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.chat-suggestion {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}
.chat-suggestion:hover { border-color: var(--pink); color: var(--pink); }
.chat-gate { position: relative; z-index: 1; background: var(--paper); padding: 14px; border-top: 1px solid var(--line); }
.chat-gate-label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 6px; }
.chat-gate-question { font-weight: 800; font-size: 1rem; margin-bottom: 10px; }
.chat-gate-row { display: flex; gap: 8px; }
.chat-gate-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}
.chat-gate-row input:focus { border-color: var(--pink); }
.chat-gate-error { margin-top: 8px; font-size: 0.82rem; color: #b3261e; }
.chat-input-row { position: relative; z-index: 1; background: var(--paper); display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.chat-input-row[hidden], .chat-gate[hidden] { display: none; }
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}
.chat-input-row input:focus { border-color: var(--pink); }
.chat-typing { display: flex; gap: 4px; padding: 4px 0; align-self: flex-start; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== "Operación en vivo" — eyebrow con pulso ===== */
.live-eyebrow-row { display: flex; align-items: center; gap: 12px; }
.live-pulse { width: 18px; height: 2px; background: var(--green-live); animation: bvPulse 2.6s ease-in-out infinite; }
@keyframes bvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
.live-ops-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 38px; }
.live-ops-head h2 { font-size: 2.875rem; line-height: 1.03; max-width: 22ch; }
.live-ops-note { font-family: var(--font-mono); font-size: 0.81rem; color: var(--on-dark-dim); max-width: 30ch; line-height: 1.7; }

/* ===== "Pruébalo ahora" — panel de chat decorativo ===== */
.section-pruebalo .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.pruebalo-copy h2 { font-size: 2.75rem; line-height: 1.03; max-width: 14ch; }
.pruebalo-copy p { max-width: 38ch; font-size: 1.125rem; }
.chat-preview-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  cursor: pointer;
}
.chat-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-preview-label {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.chat-preview-body { padding: 26px; min-height: 210px; font-size: 1rem; line-height: 1.7; color: var(--on-dark-dim); }
.chat-preview-suggestions { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 20px 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.chat-preview-pill {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.875rem;
  color: var(--on-dark-soft);
  background: none;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.chat-preview-pill:hover { border-color: var(--pink); color: #fff; background: rgba(241, 59, 140, 0.12); }

/* ===== Verificación de identidad ===== */
.verify-body {
  background: var(--bg-cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.verify-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.verify-header-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.verify-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.verify-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 16px 40px rgba(16, 16, 19, 0.06);
}
.verify-card h1 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.verify-card > p { color: var(--ink-soft); }
.verify-card > .btn { margin-top: 20px; }
.verify-card > .btn + .btn { margin-top: 10px; }
.verify-eyebrow {
  color: var(--pink);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.verify-hint { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 22px; }
.verify-form { display: flex; flex-direction: column; gap: 16px; }
.verify-text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
.verify-text-field input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
}
.verify-text-field input:focus { border-color: var(--pink); outline: none; }
.verify-error { color: #b3261e; font-size: 0.85rem; }
.verify-form .btn { margin-top: 8px; }
.verify-cancel-link {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.verify-cancel-link:hover { color: #b3261e; }

.upload-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-tile:hover { border-color: var(--pink); }
.upload-tile.is-filled {
  border-style: solid;
  border-color: var(--green);
  background: rgba(0, 179, 117, 0.06);
}
.upload-tile-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.upload-tile-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.upload-tile-text strong { font-size: 0.95rem; }
.upload-tile-hint {
  font-size: 0.8rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-tile.is-filled .upload-tile-hint { color: var(--green); font-weight: 600; }
.upload-tile-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.upload-tile.is-filled .upload-tile-check { display: flex; }

.verify-card-camera { max-width: 420px; }
.camera-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-dark);
  margin-bottom: 16px;
}
.camera-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.camera-oval {
  position: absolute;
  inset: 12% 18%;
  border: 3px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50% / 40%;
  pointer-events: none;
}
.camera-instruction {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(16, 16, 19, 0.85);
  color: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 1rem;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.camera-instruction-arrow {
  font-size: 1.5rem;
  line-height: 1;
  animation: instruction-pulse 0.9s infinite ease-in-out;
}
@keyframes instruction-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .hero-inner, .tv-inner, .cobertura-inner, .trap-inner, .faq-inner, .section-pruebalo .wrap { grid-template-columns: 1fr; }
  .plans-grid, .stats-grid, .ops-features, .steps { grid-template-columns: repeat(2, 1fr); }
  .plan-detail-card { grid-template-columns: 1fr; }
  .plan-stats { border-right: none; border-bottom: 1px solid #f1eee6; }
  .hero-copy h1 { font-size: 3.5rem; }
  .hero-subtitle { font-size: 1.5rem; }
  .section-heading h2, .tv-copy h2, .cobertura-copy h2 { font-size: 2.25rem; }
  .trap-intro h2 { font-size: 2.5rem; }
  .section-cta h2 { font-size: 3rem; }
}
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    width: min(300px, 84vw);
    background: var(--bg-dark);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 88px 12px 24px;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a {
    padding: 16px 12px;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .plans-grid, .stats-grid, .ops-features, .steps { grid-template-columns: 1fr; }
  .plan-stats-grid { grid-template-columns: 1fr 1fr; }
  .address-form { flex-direction: column; border-radius: var(--radius-sm); padding: 12px; }
  .address-form input { padding: 8px 4px; }
  .address-form .btn { width: 100%; }
  .section-cta .wrap { padding-left: 0; }
  .chat-widget { right: 12px; bottom: 12px; }
  .chat-panel {
    position: fixed;
    inset: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* evita el salto por la barra de direcciones móvil */
    max-height: none;
    border-radius: 0;
  }
  /* Cuando se abre el teclado en iOS, chat.js achica .chat-panel al alto
     real que reporta VisualViewport, pero esa medida a veces deja un resto
     de la página (traslúcido, detrás de la barra de accesorios del teclado)
     visible justo debajo del input. Este relleno cubre ese resto con el
     mismo fondo del panel, para que se vea sólido y no se transparente nada. */
  .chat-widget.is-open .chat-keyboard-filler {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: var(--paper);
    pointer-events: none;
  }
}
/* Mientras el chat o el menú están abiertos en mobile, la página de fondo
   no debe poder hacer scroll — si no, el panel fijo "se mueve"/se corta al
   arrastrar, porque el gesto de scroll se lo lleva la página, no el panel. */
body.chat-open, body.nav-open { overflow: hidden; }
body.nav-open .chat-widget { display: none; }

/* ===== Página de regulaciones ===== */
.legal-main { background: var(--paper); }
.legal-hero { padding-top: 64px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 22ch; }
.legal-hero p { font-size: 1.06rem; color: var(--ink-soft); max-width: 60ch; margin-top: 12px; }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; padding-top: 48px; padding-bottom: 90px; }
.legal-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.legal-nav a { display: block; padding: 8px 0 8px 12px; font-size: 0.94rem; color: var(--ink-soft); border-left: 2px solid var(--line); }
.legal-nav a:hover { color: var(--ink); border-left-color: var(--pink); }
.legal-content { max-width: 78ch; }
.legal-section { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-section h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; }
.legal-section h3 { font-size: 1.19rem; font-weight: 700; margin: 24px 0 8px; }
.legal-section p { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }
.legal-section ul, .legal-section ol { margin: 0 0 14px 20px; }
.legal-section li { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
.legal-note { background: var(--bg-cream); border-radius: var(--radius-sm); padding: 16px 20px; font-size: 0.94rem; color: var(--ink-soft); margin: 20px 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.94rem; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.legal-table th { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.legal-meta { font-family: var(--font-mono); font-size: 0.81rem; color: var(--ink-faint); }
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .legal-nav a { padding: 4px 0; border-left: none; border-bottom: 2px solid var(--line); }
}

/* ===== Blog: listado y home preview ===== */
.blog-main { background: var(--paper); }
.blog-hero { padding-top: 64px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 20ch; }
.blog-hero p { font-size: 1.06rem; color: var(--ink-soft); max-width: 60ch; margin-top: 12px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 56px; padding-bottom: 90px; }
.blog-card { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(20,20,22,.03); transition: transform .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20,20,22,.04), 0 22px 44px -26px rgba(20,20,22,.5); }
.blog-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-cream); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-tag { font-family: var(--font-mono); font-size: 0.69rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pink-link); }
.blog-card h3 { font-size: 1.19rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.blog-card p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; flex: 1; }
.blog-card-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); }
.blog-card-link { color: var(--pink-link); font-weight: 700; font-size: 0.94rem; }

/* Sección "Últimas notas" en el home */
.section-blog-preview { background: var(--paper); border-top: 1px solid var(--line); }
.blog-preview-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.blog-preview-head h2 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.blog-preview-head .blog-preview-link { font-weight: 700; color: var(--pink-link); white-space: nowrap; }
.section-blog-preview .blog-grid { padding: 0; }

/* Página de artículo */
.article-main { background: var(--paper); }
.article-header { padding-top: 56px; }
.article-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-link); margin-bottom: 16px; }
.article-header h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 22ch; margin-bottom: 16px; }
.article-header .article-dek { font-size: 1.19rem; color: var(--ink-soft); max-width: 62ch; line-height: 1.6; margin-bottom: 20px; }
.article-meta { font-family: var(--font-mono); font-size: 0.81rem; color: var(--ink-faint); padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.article-hero-image { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; margin-bottom: 48px; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.article-body { padding-bottom: 90px; }
.article-body > h2 { max-width: 780px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin: 48px 0 16px; }
.article-body h2:first-child { margin-top: 0; }
.article-body > h3 { max-width: 780px; font-size: 1.19rem; font-weight: 700; margin: 28px 0 10px; }
.article-body > p { max-width: 780px; font-size: 1.06rem; line-height: 1.8; color: var(--ink-soft); margin-bottom: 18px; }
.article-body > ul, .article-body > ol { max-width: 780px; margin: 0 0 18px 22px; }
.article-body li { font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 8px; }
.article-body strong { color: var(--ink); }
.article-body figure { margin: 32px 0; }
.article-body figcaption { font-family: var(--font-mono); font-size: 0.81rem; color: var(--ink-faint); text-align: center; margin-top: 10px; }
.article-table-wrap { overflow-x: auto; margin: 20px 0 28px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.article-body th, .article-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.article-body th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.article-callout { max-width: 780px; background: var(--bg-cream); border-radius: var(--radius-sm); padding: 20px 24px; margin: 28px 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.7; }
.article-callout strong { color: var(--ink); }
.article-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; margin: 32px 0; background: var(--paper); }
.article-cta { border-radius: var(--radius); background: var(--card-dark); color: var(--on-dark); padding: 40px; margin-top: 56px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.article-cta h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.article-cta p { color: var(--on-dark-soft); font-size: 1rem; max-width: 48ch; }
.article-related { border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: 90px; }
.article-related h2 { font-size: 1.31rem; font-weight: 800; margin-bottom: 24px; }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-header h1 { font-size: 2rem; }
  .article-body p, .article-body li { font-size: 1rem; }
}