/* ============================================================
   Soft Dental — Landing (Clinical Modern)
   Rediseño 2026-10-05. Light canvas + 1 brand azul clínico.
   Sin glass, sin mesh gradients, sin gradients multicolor.
   CSS aislado del SPA Vuexy — tokens + componentes para la landing
   pública (/) y el formulario de solicitud (/request-access).
   ============================================================ */

/* ─── Reset mínimo ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; }
html { scroll-behavior: smooth; }

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:    #FAFBFC;   /* canvas: casi blanco, evita glare */
  --bg-elevated:   #FFFFFF;   /* cards */
  --bg-tinted:     #F3F6FB;   /* secciones alternas, hero backdrop */
  --bg-dark:       #0D1726;   /* sección CTA final (contraste) */

  /* Ink / texto */
  --ink-900:       #0A1120;
  --ink-700:       #2E3650;
  --ink-500:       #6B7490;
  --ink-300:       #B3B9CA;
  --ink-on-dark:   #F2F5FB;

  /* Brand — azul clínico */
  --brand:         #0C7FFF;
  --brand-dark:    #0860C8;
  --brand-50:      #E6F1FF;

  /* Accents funcionales (uso muy restringido) */
  --accent-success:#0A9A6B;
  --accent-warn:   #B5651D;

  /* Borders */
  --border-subtle: rgba(10, 17, 32, 0.08);
  --border-strong: rgba(10, 17, 32, 0.14);
  --border-brand:  rgba(12, 127, 255, 0.35);

  /* Spacing (8pt grid) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Type */
  --font-display: 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --fz-display:   clamp(44px, 6vw, 72px);
  --fz-h2:        clamp(30px, 4vw, 44px);
  --fz-h3:        clamp(20px, 2vw, 24px);
  --fz-lead:      clamp(17px, 1.3vw, 20px);
  --fz-body:      16px;
  --fz-small:     14px;
  --fz-micro:     12px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 10px;    /* botones */
  --r-lg: 16px;    /* cards */
  --r-xl: 20px;    /* browser frames */

  /* Shadows (soft, nothing dramatic) */
  --sh-xs: 0 1px 2px rgba(10,17,32,0.04);
  --sh-sm: 0 1px 3px rgba(10,17,32,0.06), 0 1px 2px rgba(10,17,32,0.04);
  --sh-md: 0 4px 12px rgba(10,17,32,0.06), 0 2px 4px rgba(10,17,32,0.04);
  --sh-lg: 0 12px 28px rgba(10,17,32,0.08), 0 4px 8px rgba(10,17,32,0.04);
  --sh-brand: 0 8px 24px rgba(12,127,255,0.18);

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Base ────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--fz-body);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv02', 'cv03', 'cv04';
}

p { margin: 0 0 var(--s-3); color: var(--ink-700); }
h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 600;
}
h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

/* Reveal on scroll — opt-in via data-reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* ─── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 251, 252, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  /* El elemento tiene también .container (padding: 0 var(--s-6)) — por eso
     NO usamos shorthand aquí: solo vertical, para no pisar el horizontal
     que da el gutter responsive del container. */
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
/* Logo oficial Soft-Dental es un wordmark horizontal (ratio ~2.2:1).
   36px alto en desktop queda visible y proporcionado. En mobile reducimos
   un poco. */
.nav__brand-logo { height: 36px; width: auto; display: block; }
@media (max-width: 540px) {
  .nav__brand-logo { height: 30px; }
}
.nav__links {
  display: flex;
  gap: var(--s-6);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
}
.nav__links a {
  color: var(--ink-700);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--ink-900); }
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-md);
  transition: transform 0.15s var(--ease-out),
              box-shadow 0.15s var(--ease-out),
              background 0.15s;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn--primary:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(12,127,255,0.26);
}
.btn--secondary {
  background: var(--bg-elevated);
  color: var(--ink-900);
  border: 1px solid var(--border-strong);
}
.btn--secondary:hover {
  background: var(--bg-tinted);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-700);
  padding: 10px 14px;
}
.btn--ghost:hover { color: var(--ink-900); background: var(--bg-tinted); }
.btn--dark {
  background: #FFFFFF;
  color: var(--bg-dark);
}
.btn--dark:hover { transform: translateY(-1px); }
.btn--large { padding: 14px 24px; font-size: 16px; }

/* ─── Section header ──────────────────────────────────────── */
.section {
  padding: clamp(56px, 8vw, 112px) 0;
}
.section--tinted { background: var(--bg-tinted); }
.section--dark   { background: var(--bg-dark); color: var(--ink-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(242, 245, 251, 0.75); }

.sec-head {
  max-width: 780px;
  margin: 0 auto var(--s-12);
  text-align: center;
}
.sec-head--left { text-align: left; margin-left: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--fz-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.section--dark .eyebrow { color: #7DB8FF; }

.sec-title {
  font-size: var(--fz-h2);
  margin-bottom: var(--s-3);
}
.sec-lead {
  font-size: var(--fz-lead);
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 680px;
}
.sec-head--left .sec-lead { margin-left: 0; }
.section--dark .sec-lead { color: rgba(242, 245, 251, 0.7); }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 96px);
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}
/* Container más ancho SOLO para el hero. El resto de secciones
   sigue en 1180px para no romper el ritmo del scroll. */
.hero > .container {
  max-width: 1400px;
}
.hero::before {
  /* Backdrop sutil azul — menos del 3% de saturación */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 0%, rgba(12, 127, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 15% 100%, rgba(12, 127, 255, 0.04) 0%, transparent 35%);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Hero split 45/55 — copy mantiene 2 líneas con h1 clamp(44-72px),
     visual gana ~90px extra para la agenda ser más protagonista. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-12); }
}
.hero__copy { max-width: 540px; }
.hero__title {
  font-size: var(--fz-display);
  margin-bottom: var(--s-5);
  letter-spacing: -0.03em;
  line-height: 1.03;
}
.hero__title em {
  font-style: normal;
  color: var(--brand);
}
.hero__sub {
  font-size: var(--fz-lead);
  color: var(--ink-500);
  line-height: 1.55;
  margin-bottom: var(--s-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-5);
}
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-500);
}
.hero__note svg {
  width: 14px; height: 14px; color: var(--accent-success); flex-shrink: 0;
}

/* ─── Browser frame (reusable para screenshots) ───────────── */
.frame {
  margin: 0;              /* reset del user-agent default: figure { margin: 1em 40px } */
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.frame__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F0F2F6;
  border-bottom: 1px solid var(--border-subtle);
}
.frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #CBD1DA;
}
.frame__dot:nth-child(1) { background: #F57070; }
.frame__dot:nth-child(2) { background: #F5B547; }
.frame__dot:nth-child(3) { background: #4CBF72; }
.frame__url {
  margin-left: auto;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--ink-500);
  background: #FAFBFC;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
/* Cuerpo del frame: NO forzar aspect-ratio ni altura. La imagen define
   su propia altura via width:100% + height:auto, y el frame crece con
   ella. Esto preserva el 100% del contenido del screenshot (zero crop).
   Si una variante necesita recortar (ej. mostrar solo el top del dashboard
   en una sección distinta), se añade una clase modifier específica para
   ese caso, nunca a nivel base. */
.frame__body {
  display: block;
  background: var(--bg-elevated);
  line-height: 0; /* evita gap por whitespace del <img> inline */
}
.frame__body img {
  display: block;
  width: 100%;
  height: auto;
}

/* Variante hero: ancho pensado para el grid 50/50 del hero.
   Permitimos que el visual gane espacio hacia la derecha sin tocar
   el ancho del copy. */
.frame--hero {
  width: 100%;
  max-width: 680px;
  justify-self: end;
}
@media (max-width: 980px) {
  .frame--hero {
    max-width: 100%;
    justify-self: stretch;
  }
}

/* ─── Daily (narrativa breve) ─────────────────────────────── */
.daily__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 820px) { .daily__grid { grid-template-columns: 1fr; } }
.daily__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.daily__card h3 {
  font-size: 17px;
  margin-bottom: var(--s-2);
}
.daily__card p { font-size: 15px; color: var(--ink-700); margin: 0; }

/* ─── Segments (para quién) ───────────────────────────────── */
.segments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 820px) { .segments__grid { grid-template-columns: 1fr; } }
.segments__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.segments__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.segments__card h3 { font-size: 20px; margin-bottom: var(--s-2); }
.segments__card p { font-size: 15px; color: var(--ink-700); margin: 0; }

/* ─── Clinic (expediente — flagship) ──────────────────────── */
.clinic__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: var(--s-16);
}
.clinic__hero--reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.clinic__hero--reverse .clinic__hero-copy { order: 2; }
.clinic__hero--reverse .clinic__hero-visual { order: 1; }
@media (max-width: 980px) {
  .clinic__hero,
  .clinic__hero--reverse { grid-template-columns: 1fr; }
  .clinic__hero--reverse .clinic__hero-copy,
  .clinic__hero--reverse .clinic__hero-visual { order: initial; }
}
.clinic__hero-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 32px);
  margin-bottom: var(--s-4);
  letter-spacing: -0.015em;
}
.clinic__hero-copy > p {
  font-size: 17px;
  color: var(--ink-700);
  line-height: 1.55;
  margin-bottom: var(--s-5);
}
.clinic__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.clinic__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-700);
}
.clinic__bullets li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent-success);
  margin-top: 2px;
}

/* Clinic — resto de módulos (4 cards tight) */
.clinic__rest {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-12);
}
@media (max-width: 980px) { .clinic__rest { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .clinic__rest { grid-template-columns: 1fr; } }
.clinic__rest-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.clinic__rest-card h4 {
  font-size: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.clinic__rest-card p { font-size: 14px; color: var(--ink-700); margin: 0; line-height: 1.5; }

/* ─── Ops (operación diaria — 4 cards tight) ──────────────── */
.ops__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .ops__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ops__grid { grid-template-columns: 1fr; } }
.ops__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.ops__card h3 {
  font-size: 17px;
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.ops__card p { font-size: 14px; color: var(--ink-700); margin: 0; line-height: 1.5; }

/* ─── Flow (del plan al cobro — timeline) ─────────────────── */
.flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 820px) { .flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .flow__steps { grid-template-columns: 1fr; } }
.flow__step {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.flow__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--s-3);
}
.flow__step h3 { font-size: 16px; margin-bottom: var(--s-2); font-weight: 600; }
.flow__step p { font-size: 14px; color: var(--ink-700); margin: 0; line-height: 1.5; }

/* ─── Trust (3 pilares, uno por fila) ─────────────────────── */
.trust__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 720px;
  margin: 0 auto;
}
.trust__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-4);
  align-items: start;
}
.trust__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust__icon svg { width: 20px; height: 20px; }
.trust__item h3 { font-size: 17px; margin-bottom: 4px; font-weight: 600; }
.trust__item p { font-size: 15px; color: var(--ink-700); margin: 0; line-height: 1.5; }
.trust__footnote {
  text-align: center;
  margin-top: var(--s-8);
  font-size: 13px;
  color: var(--ink-500);
}

/* ─── Pricing ─────────────────────────────────────────────── */
.pricing__toggle-track {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-8);
}
.pricing__toggle {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 4px;
}
.pricing__toggle-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-500);
  border-radius: 999px;
  transition: all 0.15s;
}
.pricing__toggle-btn.is-active {
  background: var(--brand);
  color: #fff;
}
.pricing__save {
  margin-left: 4px;
  font-size: 11px;
  color: var(--accent-success);
  font-weight: 500;
}
.pricing__toggle-btn.is-active .pricing__save { color: #D9EFE4; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 980px) { .pricing__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.pricing__loading, .pricing__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-12);
  color: var(--ink-500);
  font-size: 14px;
}
.pricing__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--sh-sm);
}
.pricing__card--featured {
  border: 2px solid var(--brand);
  box-shadow: 0 12px 32px rgba(12,127,255,0.12);
  padding: var(--s-8) var(--s-6);
}
.pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pricing__name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}
.pricing__desc {
  font-size: 13px;
  color: var(--ink-500);
  margin: 0 0 var(--s-5);
  line-height: 1.5;
}
.pricing__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 2px;
}
.pricing__per {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: var(--s-5);
}
.pricing__limits {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-700);
}
.pricing__features {
  list-style: none;
  padding: var(--s-4) 0 0;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pricing__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-700);
}
.pricing__features svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--accent-success);
  margin-top: 3px;
}
.pricing__storage {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: var(--s-3);
}
.pricing__cta {
  margin-top: var(--s-5);
  display: inline-flex;
  justify-content: center;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.pricing__cta:hover { background: var(--brand-dark); transform: translateY(-1px); }
.pricing__footnote {
  text-align: center;
  margin-top: var(--s-6);
  font-size: 12px;
  color: var(--ink-500);
}

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq__list {
  max-width: 760px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-5) 0;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  color: var(--ink-900);
  transition: color 0.15s;
}
.faq__q:hover { color: var(--brand); }
.faq__q-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq__q[aria-expanded="true"] .faq__q-icon { transform: rotate(45deg); color: var(--brand); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a { max-height: 240px; }
.faq__a p {
  padding: 0 0 var(--s-5);
  font-size: 15px;
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
}

/* ─── CTA Final (dark contrast section) ───────────────────── */
.cta-final { text-align: center; }
.cta-final h2 {
  font-size: var(--fz-h2);
  margin-bottom: var(--s-3);
}
.cta-final p {
  font-size: var(--fz-lead);
  color: rgba(242, 245, 251, 0.7);
  margin: 0 auto var(--s-8);
  max-width: 520px;
}
.cta-final__actions {
  display: inline-flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
/* 2 caminos claros: "Crear cuenta" (self-service) vs "Hablar con
   nosotros" (contacto consultivo). Cada uno con hint que explica
   para quién es. */
.cta-final__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .cta-final__paths { grid-template-columns: 1fr; gap: var(--s-5); }
}
.cta-final__path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.cta-final__path-hint {
  font-size: 13px;
  color: rgba(242, 245, 251, 0.65);
  line-height: 1.5;
  max-width: 260px;
}

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--bg-tinted);
  padding: var(--s-16) 0 var(--s-6);
  border-top: 1px solid var(--border-subtle);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}
@media (max-width: 820px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
.footer__brand { margin-bottom: var(--s-3); }
.footer__brand img { height: 40px; width: auto; display: block; }
.footer__tagline { font-size: 14px; color: var(--ink-500); max-width: 320px; line-height: 1.5; margin: 0; }
.footer__col-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--s-4);
}
.footer__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer__col-list a {
  font-size: 14px;
  color: var(--ink-700);
  transition: color 0.15s;
}
.footer__col-list a:hover { color: var(--brand); }
.footer__bottom {
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-500);
}
@media (max-width: 540px) {
  .footer__bottom { flex-direction: column; gap: var(--s-3); text-align: center; }
}

/* ─── Nav responsive mobile ───────────────────────────────────
   En viewports estrechos (<540px) los dos botones + logo pueden
   apretar el navbar. Compactamos padding/tipografía y escondemos
   el ghost "Iniciar sesión" dejando solo "Crear cuenta" como CTA
   primario (login sigue accesible desde el footer). */
@media (max-width: 540px) {
  .nav__inner { gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .nav__actions { gap: var(--s-2); }
  .nav__actions .btn--ghost { display: none; }
  .nav__actions .btn--primary {
    padding: 9px 14px;
    font-size: 14px;
  }
}

/* ─── Back-to-top floating button ─────────────────────────────
   Aparece via JS después de scroll > 400px. Posición fija bottom-right,
   no interfiere con contenido ni con cookies banner. */
.back-to-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(12,127,255,0.28), 0 4px 8px rgba(10,17,32,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              background 0.15s;
  padding: 0;
}
.back-to-top svg { width: 20px; height: 20px; display: block; }
.back-to-top:hover { background: var(--brand-dark); transform: translateY(0) scale(1.05); }
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (max-width: 540px) {
  .back-to-top { right: var(--s-4); bottom: var(--s-4); width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.1s; transform: none; }
  .back-to-top.is-visible { transform: none; }
}