/* ============================================================================
   Dr.M — Dr. Victor Mariscal Campos | Médico Internista
   main.css — Sistema de diseño premium (mobile-first)
   ----------------------------------------------------------------------------
   Estructura:
     1.  Variables de marca (colores, tipografía, espacios, sombras)
     2.  Reset y base
     3.  Tipografía
     4.  Utilidades de layout
     5.  Botones y CTAs
     6.  Encabezado / navegación
     7.  Hero + anatomía SVG
     8.  Secciones genéricas
     9.  Documentos y rejilla de credibilidad
     10. Acerca de
     11. Servicios
     12. Consulta en línea
     13. Ubicaciones
     14. Reflexiones (galería)
     15. Galería de identidad de marca
     16. Preguntas frecuentes (acordeón)
     17. Formulario de contacto
     18. Botón flotante de WhatsApp
     19. Pie de página
     20. Animaciones
     21. Accesibilidad y movimiento reducido
     22. Responsivo
   ============================================================================ */

/* 1. VARIABLES DE MARCA --------------------------------------------------- */
:root {
  /* Paleta — verde esmeralda profundo, carbón, marfil, plata, acentos */
  --c-emerald-deep: #0a2620;
  --c-emerald: #0f3b32;
  --c-emerald-mid: #145a4b;
  --c-emerald-bright: #1f8a70;
  --c-charcoal: #12171a;
  --c-charcoal-soft: #1b2227;
  --c-ivory: #f6f2e9;
  --c-ivory-dim: #ece5d6;
  --c-paper: #fbf9f3;
  --c-silver: #c7ccd2;
  --c-silver-bright: #eef1f4;
  --c-red: #b23a48;          /* acento clínico (cardiovascular), sobrio */
  --c-red-soft: #c75766;
  --c-neon: #38e07b;         /* micro-acento, uso muy esporádico */
  --c-blue: #9cc4d6;         /* acento cápsula / consulta en línea */

  /* Roles semánticos */
  --bg: var(--c-paper);
  --bg-dark: var(--c-emerald-deep);
  --text: #1d2426;
  --text-dim: #4a565a;
  --text-on-dark: var(--c-ivory);
  --text-on-dark-dim: #aebfb9;
  --line: rgba(18, 23, 26, 0.12);
  --line-on-dark: rgba(246, 242, 233, 0.16);
  --gold: #c8a96a;           /* dorado tenue para detalles tipo sello */

  /* Tipografía */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Apple Garamond",
                Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Escala tipográfica fluida */
  --fs-300: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-400: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --fs-500: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-600: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-700: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --fs-800: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
  --fs-900: clamp(2.6rem, 1.9rem + 3.8vw, 4.6rem);

  /* Espaciado */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.75rem;
  --space-7: 5.5rem;
  --space-section: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Radios, sombras, transiciones */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(10, 38, 32, 0.08);
  --shadow: 0 14px 40px -18px rgba(10, 38, 32, 0.35);
  --shadow-lg: 0 30px 70px -28px rgba(10, 38, 32, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms var(--ease);
  --t: 320ms var(--ease);
  --t-slow: 600ms var(--ease);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --header-h: 68px;

  /* Gradiente chrome para el wordmark Dr.M */
  --chrome: linear-gradient(180deg, #ffffff 0%, #d7dde2 28%, #9aa3ab 52%,
            #eef2f5 70%, #b9c0c7 100%);
}

/* 2. RESET Y BASE --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* El desplazamiento de anclas lo aporta scroll-margin-top en los destinos
     (sección 25); así no se duplica el desfase ni se crea espacio excesivo. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Pie de página adherido: en pantallas altas el footer queda al final del
     contenido, sin dejar espacio marfil vacío debajo. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img,
svg,
video { display: block; max-width: 100%; height: auto; }

img { background: var(--c-ivory-dim); }

a { color: var(--c-emerald-mid); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-emerald-bright); }

ul, ol { padding-left: 1.2em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--c-emerald-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3. TIPOGRAFÍA ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--c-emerald);
}

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }

p { margin: 0 0 var(--space-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-emerald-bright);
  margin: 0 0 var(--space-2);
  display: inline-block;
}
.on-dark .eyebrow { color: var(--c-neon); }

.lead {
  font-size: var(--fs-500);
  color: var(--text-dim);
  max-width: 60ch;
}

.muted { color: var(--text-dim); }
.small { font-size: var(--fs-300); }

/* 4. UTILIDADES DE LAYOUT ------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--space-section); }

.section__head {
  max-width: 62ch;
  margin-bottom: var(--space-5);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.on-dark {
  background: linear-gradient(165deg, var(--c-emerald) 0%, var(--c-emerald-deep) 100%);
  color: var(--text-on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--c-ivory); }
.on-dark .lead, .on-dark .muted { color: var(--text-on-dark-dim); }

.on-charcoal {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(31, 138, 112, 0.18), transparent 60%),
    linear-gradient(165deg, var(--c-charcoal-soft) 0%, var(--c-charcoal) 100%);
  color: var(--text-on-dark);
}
.on-charcoal h2, .on-charcoal h3 { color: var(--c-ivory); }

.grid { display: grid; gap: var(--space-4); }

.divider-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0;
  opacity: 0.5;
}

/* 5. BOTONES Y CTAs ------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-emerald);
  --btn-fg: var(--c-ivory);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-400);
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1;
  transition: transform var(--t-fast), box-shadow var(--t),
              background var(--t), color var(--t);
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* brillo sutil al pasar el cursor */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%,
              rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--t-slow);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary { --btn-bg: var(--c-emerald); --btn-fg: var(--c-ivory); }
.btn--gold {
  --btn-bg: linear-gradient(180deg, #e0c489, var(--gold));
  --btn-fg: #2c2410;
}
.btn--whatsapp { --btn-bg: #25d366; --btn-fg: #08331c; }
.btn--whatsapp:hover { --btn-bg: #1fbe5b; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-emerald);
  border-color: var(--line);
}
/* Contextos oscuros (incluye el hero, que no lleva la clase .on-dark) */
.on-dark .btn--ghost,
.on-charcoal .btn--ghost,
.hero .btn--ghost {
  --btn-fg: var(--c-ivory);
  border-color: rgba(246, 242, 233, 0.45);
  background: rgba(246, 242, 233, 0.07);
}
.btn--ghost:hover { background: rgba(15, 59, 50, 0.06); }
.on-dark .btn--ghost:hover,
.on-charcoal .btn--ghost:hover,
.hero .btn--ghost:hover { background: rgba(246, 242, 233, 0.16); }

.btn--sm { padding: 0.6em 1.1em; font-size: var(--fs-300); }
.btn--block { display: flex; width: 100%; justify-content: center; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
}
.text-link::after { content: "→"; transition: transform var(--t-fast); }
.text-link:hover::after { transform: translateX(3px); }

/* 6. ENCABEZADO / NAVEGACIÓN ---------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-emerald);
  color: var(--c-ivory);
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--c-ivory); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(251, 249, 243, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Wordmark Dr.M con efecto cromo */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1;
}
.brand__mark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}
.brand__sub {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
/* Legibilidad del wordmark sobre el encabezado claro: contorno oscuro
   alrededor de las letras cromadas (el sello del hero y el footer van sobre
   fondo oscuro y conservan el cromo puro, por eso este ajuste es solo aquí). */
.site-header .brand__mark {
  -webkit-text-stroke: 0.4px #0a2620;
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  padding: 0.4em 0;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--c-emerald-bright);
  transition: width var(--t);
}
.nav__link:hover { color: var(--c-emerald); }
.nav__link:hover::after { width: 100%; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  align-items: center;
  justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; stroke: var(--c-emerald); }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* 7. HERO + ANATOMÍA ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 78% 18%, rgba(31, 138, 112, 0.22), transparent 60%),
    radial-gradient(700px 500px at 12% 88%, rgba(178, 58, 72, 0.10), transparent 55%),
    linear-gradient(160deg, var(--c-emerald) 0%, var(--c-emerald-deep) 62%, var(--c-charcoal) 100%);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 2rem + 8vw, 6.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero__content { position: relative; z-index: 2; max-width: 60ch; }

.hero__title {
  color: var(--c-ivory);
  margin-bottom: var(--space-2);
}
.hero__title .name { display: block; }
.hero__title .role {
  display: block;
  font-size: var(--fs-500);
  font-weight: 500;
  color: var(--c-silver-bright);
  letter-spacing: 0.01em;
  margin-top: var(--space-1);
}

.hero__slogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-600);
  color: var(--c-neon);
  margin: var(--space-2) 0 var(--space-3);
}

.hero__sub {
  font-size: var(--fs-500);
  color: var(--text-on-dark-dim);
  max-width: 54ch;
  margin-bottom: var(--space-4);
}

.hero__cta { margin-bottom: var(--space-4); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-300);
  color: var(--text-on-dark-dim);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-on-dark);
}
.hero__meta strong { color: var(--c-ivory); font-weight: 600; }

/* Sello Dr.M cromado del hero */
.hero__seal {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(56, 224, 123, 0.10), transparent 60%),
    conic-gradient(from 210deg, rgba(199,204,210,0.10), rgba(199,204,210,0.02), rgba(199,204,210,0.12));
  border: 1px solid var(--line-on-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--shadow-lg);
}
.hero__seal-mark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 6rem);
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-align: center;
  line-height: 0.9;
}
.hero__seal-cap {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-silver);
  margin-top: 0.6rem;
  text-align: center;
  -webkit-text-fill-color: var(--c-silver);
}

/* Anatomía SVG de fondo */
.hero__anatomy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  pointer-events: none;
}
.hero__anatomy svg { width: min(620px, 95%); height: auto; }
.anatomy-stroke {
  fill: none;
  stroke: rgba(199, 204, 210, 0.45);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anatomy-organ { fill: none; stroke-width: 1.6; }
.anatomy-heart { stroke: rgba(199, 86, 102, 0.6); }
.anatomy-lung { stroke: rgba(156, 196, 214, 0.55); }
.anatomy-gut { stroke: rgba(200, 169, 106, 0.5); }

/* 8. SECCIONES GENÉRICAS -------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(31,138,112,0.35); }
.on-dark .card, .on-charcoal .card {
  background: rgba(246, 242, 233, 0.04);
  border-color: var(--line-on-dark);
  color: var(--text-on-dark);
}
.on-dark .card h3, .on-charcoal .card h3 { color: var(--c-ivory); }
.on-dark .card p, .on-charcoal .card p { color: var(--text-on-dark-dim); }

/* 9. DOCUMENTOS Y CREDIBILIDAD -------------------------------------------- */
.docs-grid { grid-template-columns: 1fr; }
.doc-card { display: flex; flex-direction: column; }
.doc-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-emerald-mid);
  background: rgba(31, 138, 112, 0.10);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.doc-card__badge svg { width: 1em; height: 1em; }
.doc-card dl { margin: 0 0 var(--space-3); display: grid; gap: 0.35rem; }
.doc-card dt { font-size: var(--fs-300); color: var(--text-dim); font-weight: 600; }
.doc-card dd { margin: 0 0 0.4rem; }
.doc-card__note {
  font-size: var(--fs-300);
  color: var(--text-dim);
  font-style: italic;
  margin-top: auto;
  padding-top: var(--space-2);
}
.doc-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }

.cred-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.cred-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(15, 59, 50, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--c-emerald);
}
.cred-item svg { width: 1.4em; height: 1.4em; color: var(--c-emerald-bright); flex: none; }

.placeholder-flag {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: var(--fs-300);
  color: #8a5a00;
  background: #fff6e2;
  border: 1px dashed #d8b25a;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
.placeholder-flag svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.15em; }

/* 10. ACERCA DE ----------------------------------------------------------- */
.about__layout { display: grid; gap: var(--space-5); }
.scope-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.scope-list li {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.scope-list li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--c-emerald-bright);
  flex: none;
}

.callout {
  border-left: 3px solid var(--c-red);
  background: rgba(178, 58, 72, 0.06);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-400);
}
.callout strong { color: var(--c-red); }

/* 11. SERVICIOS ----------------------------------------------------------- */
.services-grid { grid-template-columns: 1fr; }
.service-card { display: flex; flex-direction: column; }
.service-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(31,138,112,0.16), rgba(31,138,112,0.04));
  border: 1px solid rgba(31,138,112,0.22);
  margin-bottom: var(--space-3);
}
.service-card__icon svg { width: 26px; height: 26px; color: var(--c-emerald-mid); }
.service-card h3 { font-size: var(--fs-500); margin-bottom: 0.5rem; }
.service-card p { font-size: var(--fs-400); margin-bottom: var(--space-3); }
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* 12. CONSULTA EN LÍNEA --------------------------------------------------- */
.online__panel {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
.online__visual {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background:
    radial-gradient(420px 300px at 70% 10%, rgba(156, 196, 214, 0.22), transparent 60%),
    linear-gradient(160deg, var(--c-charcoal-soft), var(--c-charcoal));
  border: 1px solid var(--line-on-dark);
  overflow: hidden;
  min-height: 240px;
}
.online__capsule {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 700;
  background: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.online__capsule + p { color: var(--c-blue); font-size: var(--fs-400); }

.boundary-list { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-4); display: grid; gap: 0.7rem; }
.boundary-list li { display: flex; gap: 0.6em; align-items: flex-start; }
.boundary-list svg { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.2em; color: var(--c-blue); }

/* 13. UBICACIONES --------------------------------------------------------- */
.loc-grid { grid-template-columns: 1fr; }
.loc-card { display: flex; flex-direction: column; gap: var(--space-2); }
.loc-card__name { display: flex; align-items: center; gap: 0.5em; margin: 0; }
.loc-card__name svg { width: 1.1em; height: 1.1em; color: var(--c-emerald-bright); }
.loc-card address {
  font-style: normal;
  color: var(--text-dim);
  display: grid;
  gap: 0.2rem;
}
.loc-card__row { display: flex; align-items: center; gap: 0.5em; }
.loc-card__row svg { width: 1.05em; height: 1.05em; color: var(--c-emerald-mid); flex: none; }
.loc-tag {
  display: inline-block;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--c-emerald-mid);
  background: rgba(31,138,112,0.10);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  align-self: flex-start;
}
.loc-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); padding-top: var(--space-2); }
/* Mapas embebidos de Google (sin API key) — estética Dr.M.
   El ::after es un respaldo elegante mientras carga el mapa; queda oculto
   bajo el iframe en cuanto Google Maps se muestra. */
.map-frame {
  position: relative;
  width: 100%;
  margin-top: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(15, 59, 50, 0.05);
  box-shadow: var(--shadow-sm);
}
.map-frame::after {
  content: "Cargando mapa…";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-300);
  letter-spacing: 0.03em;
}
.map-frame iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 300px;
  border: 0;
  filter: saturate(0.92) contrast(1.02);
}
@media (max-width: 768px) {
  .map-frame iframe { min-height: 240px; }
}

/* 14. REFLEXIONES (GALERÍA) ----------------------------------------------- */
.reflections-grid { grid-template-columns: 1fr; }
.reflection-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.reflection-card__media { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--c-emerald-deep); }
/* El video se muestra completo (sin recortar) para no perder encuadre vertical. */
.reflection-card video.reflection-card__media { object-fit: contain; background: #03100c; }
.reflection-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.reflection-card__type {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--c-emerald-bright);
}
.reflection-card__title { font-size: var(--fs-500); margin: 0; }
.reflection-card__date { font-size: var(--fs-300); color: var(--text-dim); }
.reflection-card--quote .reflection-card__date,
.reflection-card--poem .reflection-card__date { color: var(--text-on-dark-dim); }
.reflection-card__caption { color: var(--text-dim); margin: 0; flex: 1; }
.reflection-card--quote .reflection-card__body,
.reflection-card--poem .reflection-card__body {
  background: linear-gradient(160deg, var(--c-emerald), var(--c-emerald-deep));
  color: var(--c-ivory);
  justify-content: center;
  min-height: 220px;
}
.reflection-card--quote .reflection-card__title,
.reflection-card--poem .reflection-card__title {
  color: var(--c-ivory);
  font-style: italic;
  font-size: var(--fs-600);
}
.reflection-card--quote .reflection-card__caption,
.reflection-card--poem .reflection-card__caption { color: var(--text-on-dark-dim); }
.reflection-card--poem .reflection-card__caption { white-space: pre-line; font-style: italic; }
.reflection-card__share { align-self: flex-start; margin-top: 0.4rem; }
.gallery-empty, .gallery-error {
  text-align: center;
  color: var(--text-dim);
  padding: var(--space-5);
}

/* 15. GALERÍA DE IDENTIDAD ------------------------------------------------ */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.brand-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  background: var(--c-charcoal-soft);
}
/* contain + caja cuadrada: muestra la obra completa (texto, sello y QR) sin recortar */
.brand-figure img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1; background: #06150f; }
.brand-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-3);
  font-size: var(--fs-300);
  color: var(--c-ivory);
  background: linear-gradient(180deg, transparent, rgba(10,38,32,0.85));
}
.brand-figure--quote {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  background: linear-gradient(160deg, var(--c-emerald), var(--c-charcoal));
}
.brand-figure--quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-700);
  color: var(--c-neon);
  margin: 0;
}

/* 16. PREGUNTAS FRECUENTES ------------------------------------------------ */
.faq-list { display: grid; gap: var(--space-2); max-width: var(--maxw-narrow); margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--c-emerald);
}
.faq-item__icon { flex: none; width: 16px; height: 16px; position: relative; transition: transform var(--t); }
.faq-item__icon::before {
  content: ""; position: absolute; left: 50%; top: 2px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-emerald-bright);
  border-bottom: 2px solid var(--c-emerald-bright);
  transform: translateX(-50%) rotate(45deg);
}
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(-180deg); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t);
}
.faq-item__a-inner { padding: 0 var(--space-4) var(--space-4); color: var(--text-dim); }

/* 17. FORMULARIO DE CONTACTO ---------------------------------------------- */
.contact__layout { display: grid; gap: var(--space-5); }
.contact__aside .lead { margin-bottom: var(--space-4); }
.contact__aside-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.contact__aside-list li { display: flex; gap: 0.6em; align-items: flex-start; color: var(--text-on-dark-dim); }
.contact__aside-list svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.2em; color: var(--c-neon); }

.form {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow);
}
.form__grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-300); font-weight: 600; color: var(--text); }
.field .req { color: var(--c-red); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-400);
  color: var(--text);
  padding: 0.7em 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--c-paper);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-emerald-bright);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.14);
}
.field__error { font-size: var(--fs-300); color: var(--c-red); min-height: 1.1em; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--c-red); }

.consent {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  font-size: var(--fs-300);
  color: var(--text-dim);
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.consent input { width: 1.2em; height: 1.2em; margin-top: 0.15em; flex: none; accent-color: var(--c-emerald); }

/* honeypot oculto para humanos, visible para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__feedback {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-weight: 600;
  display: none;
}
.form__feedback.is-success { display: block; background: rgba(31,138,112,0.12); color: var(--c-emerald-mid); }
.form__feedback.is-error { display: block; background: rgba(178,58,72,0.12); color: var(--c-red); }

.form__fallback {
  margin-top: var(--space-3);
  font-size: var(--fs-300);
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* 18. BOTÓN FLOTANTE WHATSAPP --------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.8em 1.1em;
  background: #25d366;
  color: #08331c;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast), box-shadow var(--t);
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); color: #08331c; }
.wa-float svg { width: 1.5em; height: 1.5em; }
.wa-float__label { font-size: var(--fs-300); }

/* 19. PIE DE PÁGINA ------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  background: linear-gradient(165deg, var(--c-charcoal-soft), var(--c-charcoal));
  color: var(--text-on-dark-dim);
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.footer-col h4 { color: var(--c-ivory); font-size: var(--fs-500); margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.footer-col a { color: var(--text-on-dark-dim); text-decoration: none; }
.footer-col a:hover { color: var(--c-ivory); }
.footer-brand .brand__mark { font-size: 2rem; }
.footer-brand p { color: var(--text-on-dark-dim); margin-top: var(--space-2); max-width: 32ch; }
.footer-disclaimer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-300);
  display: grid;
  gap: var(--space-2);
}
.footer-disclaimer strong { color: var(--c-silver-bright); }
.footer-bottom {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-300);
}

/* 20. ANIMACIONES --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.hero__content > * { animation: fade-up 0.9s var(--ease) both; }
.hero__content > *:nth-child(2) { animation-delay: 0.08s; }
.hero__content > *:nth-child(3) { animation-delay: 0.16s; }
.hero__content > *:nth-child(4) { animation-delay: 0.24s; }
.hero__content > *:nth-child(5) { animation-delay: 0.32s; }
.hero__content > *:nth-child(6) { animation-delay: 0.40s; }

@keyframes seal-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 0 rgba(56,224,123,0.0), var(--shadow-lg); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 60px -10px rgba(56,224,123,0.45), var(--shadow-lg); }
}
.hero__seal { animation: seal-glow 5.5s ease-in-out infinite; }

/* trazado de líneas de anatomía */
.anatomy-stroke,
.anatomy-organ {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: draw 3.2s var(--ease) forwards;
}
.anatomy-organ { animation-delay: 0.8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* 21. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO --------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .anatomy-stroke, .anatomy-organ { stroke-dashoffset: 0; }
}

/* 22. RESPONSIVO ---------------------------------------------------------- */
@media (min-width: 600px) {
  .docs-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
  .reflections-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-list { grid-template-columns: repeat(2, 1fr); }
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .about__layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .online__panel { grid-template-columns: 0.9fr 1.1fr; }
  .reflections-grid { grid-template-columns: repeat(3, 1fr); }
  .contact__layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Navegación móvil */
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: var(--space-2) 1.25rem var(--space-4);
    transform: translateY(-130%);
    transition: transform var(--t);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 0.9em 0.25em;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-400);
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: var(--space-3); }
}

/* 23. VERIFICACIÓN PROFESIONAL Y CV --------------------------------------- */
.section--tight { padding-top: var(--space-5); }

.verify-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.verify-card { display: flex; flex-direction: column; }
.verify-card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 12px; margin-bottom: var(--space-3);
  background: linear-gradient(160deg, rgba(31, 138, 112, 0.16), rgba(31, 138, 112, 0.04));
  border: 1px solid rgba(31, 138, 112, 0.22);
}
.verify-card__icon svg { width: 24px; height: 24px; color: var(--c-emerald-mid); }
.verify-card h3 { font-size: var(--fs-500); margin-bottom: 0.35rem; }
.verify-card__source {
  font-size: var(--fs-300); font-weight: 600; color: var(--c-emerald-mid);
  margin: 0 0 var(--space-2);
}
.verify-card p { font-size: var(--fs-400); margin-bottom: var(--space-3); }
.verify-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.verify-card__fallback {
  font-size: var(--fs-300); font-style: italic; color: var(--text-dim);
  background: rgba(31, 138, 112, 0.06); border: 1px dashed var(--line);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
/* Nota informativa (no "pendiente"): borde superior sobrio, sin línea discontinua. */
.verify-card__note {
  font-size: var(--fs-300); color: var(--text-dim);
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.verify-note {
  font-size: var(--fs-300); color: var(--text-dim); max-width: 74ch;
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.btn .icon-ext { width: 1em; height: 1em; opacity: 0.85; }

.verify-compact { margin-top: var(--space-5); }
.verify-compact h3 { font-size: var(--fs-500); margin-bottom: var(--space-1); }
.verify-compact > p { margin-bottom: var(--space-3); }
.verify-compact__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (min-width: 760px) {
  .verify-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 24. TARJETAS DE VIDEO (REFLEXIONES): poster + etiqueta curada ----------- */
.reflection-card__media-wrap { position: relative; display: block; }
.reflection-card__vlabel {
  position: absolute; left: 0.7rem; top: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.32em 0.72em; border-radius: 999px;
  background: rgba(10, 38, 32, 0.72); color: var(--c-ivory);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none; transition: opacity var(--t);
}
.reflection-card__vlabel svg { width: 0.95em; height: 0.95em; }
.reflection-card__media-wrap.is-playing .reflection-card__vlabel { opacity: 0; }

/* 25. POLISH FINAL: anclas, pasos, cédulas, flotante, biografía ----------- */
/* El destino de cada ancla no queda oculto bajo el encabezado fijo */
:where(section[id], main[id]) { scroll-margin-top: calc(var(--header-h) + 22px); }

/* Pasos "Cómo funciona" (consulta en línea) */
.steps-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mini-lista de cédulas (verificación, informativa y discreta) */
.verify-card__list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 0.4rem; }
.verify-card__list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 0.8em;
  font-size: var(--fs-300); color: var(--text-dim);
  border-bottom: 1px dotted var(--line); padding-bottom: 0.4rem;
}
.verify-card__list li strong { color: var(--c-emerald); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Botón flotante de WhatsApp: ocultar junto al pie y compactar en móvil */
.wa-float { transition: transform var(--t-fast), box-shadow var(--t), opacity var(--t), visibility var(--t); }
.wa-float.is-hidden { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
@media (max-width: 560px) {
  .wa-float { padding: 0.72em; gap: 0; }
  .wa-float__label { display: none; }
  .wa-float svg { width: 1.7em; height: 1.7em; }
}

/* Biografía "¿Quién es el Dr. Mariscal?" */
.bio-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-4); }
@media (min-width: 760px) { .bio-grid { grid-template-columns: repeat(3, 1fr); } }
.bio-card h3 { font-size: var(--fs-500); margin-bottom: 0.4rem; }
.bio-card p { font-size: var(--fs-400); margin: 0; color: var(--text-dim); }
.bio-prose p { max-width: 68ch; }

/* Página legal (aviso de privacidad): encabezados más legibles, nota serena */
.legal h1 { font-size: var(--fs-700); }
.legal h2 { font-size: var(--fs-500); margin-top: var(--space-5); }
.legal p { max-width: 74ch; }
.legal-note {
  font-size: var(--fs-300); color: var(--text-dim);
  background: rgba(31, 138, 112, 0.06);
  border-left: 3px solid var(--c-emerald-bright);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 var(--space-5); max-width: 74ch;
}
.legal-note strong { color: var(--c-emerald); }

/* 26. SELECTOR DE CONSULTORIO PARA WHATSAPP (modal) ---------------------- */
.wa-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-3); }
.wa-modal[hidden] { display: none; }
.wa-modal__backdrop {
  position: absolute; inset: 0; background: rgba(10, 38, 32, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.wa-modal__panel {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: var(--c-paper); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-lg); text-align: center;
  animation: fade-up 0.3s var(--ease) both;
}
.wa-modal__close {
  position: absolute; top: 0.5rem; right: 0.8rem;
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--text-dim); cursor: pointer; padding: 0.2em 0.4em; border-radius: 50%;
}
.wa-modal__close:hover { color: var(--c-emerald); }
.wa-modal__title { font-size: var(--fs-600); margin-bottom: var(--space-1); }
.wa-modal__text { font-size: var(--fs-300); color: var(--text-dim); margin-bottom: var(--space-4); }
.wa-modal__options { display: grid; gap: var(--space-2); }