/* ===== FILE: base.css ===== */
/* base.css — Centro Empatía
   - Tokens + tipografía + elementos base
   - Componentes base mínimos (card / cards / chips)
   - SIN layout global (eso va en system.css)
*/

/* Tipografía: Inter local + fallback System UI
   - Inter se sirve desde /public/fonts (WOFF2)
   - Fallback a System UI por seguridad
*/

/* Inter (local, WOFF2)
   - Regular 400, Medium 500, SemiBold 600, Bold 700
   - font-display: swap para evitar FOIT
*/
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-sans:"Inter", system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
/* Typography tuning (Typography Pass v1) */
--body-font-weight: 400;
--body-line-height: 1.75;
--body-letter-spacing: 0em;
--p-line-height: 1.65;

/* Card surface tuning */
--card-bg: var(--bg-surface);
--card-border: var(--border-soft);
--card-border-ink: rgba(15, 23, 42, 0.10);
  /* Base palette */
  --bg-page:#f2f4f8;
  --bg-surface:#ffffff;
  --text-main:#1e293b;
  --text-muted:#475569;
  --border-soft:#e2e8f0;

  /* Accent (más suave) */
  --accent:#5f86b6;
  --accent-rgb: 95 134 182; /* FIX: coherente con --accent */

  --accent-warm:#f4b08a;
  --accent-warm-rgb: 244 176 138;

  /* Sizing */
  --radius-lg:1.1rem;
  --radius-md:0.95rem;

  /* Shadows */
  --shadow-surface:0 1px 2px rgba(15,23,42,.06), 0 10px 28px rgba(15,23,42,.06);
  --shadow-float:0 2px 6px rgba(15,23,42,.08), 0 18px 48px rgba(15,23,42,.10);

  /* Aliases (compatibilidad con el resto del CSS) */
  --surface: var(--bg-surface);
  --card: var(--bg-surface);
  --border: var(--border-soft);
  --muted: var(--text-muted);
  --text: var(--text-main);
  --shadow-sm: var(--shadow-surface);
  --shadow: var(--shadow-surface);
}

/* Reset mínimo */
*{ box-sizing:border-box; }
html,body{ height:100%; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  font-size: 16px;
  margin:0;
  font-family:var(--font-sans);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing, 0);
  color:var(--text-main);
  background:var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;


@media (min-width: 900px){
  body{ font-size: 17px; }
}

.homeShortcuts__grid,
.homeChips__list{
  list-style: none;
  padding: 0;
}

.homeShortcuts__grid > li,
.homeChips__list > li{
  margin: 0;
}
}

/* Controles: misma tipografía y tono */
button, input, textarea, select{ font: inherit; color: inherit; }

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

/* Links: sin subrayado por defecto (la “línea fea”) */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

/* Focus accesible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* -------------------------------------------------------------------------- */
/* NAV (base) */
nav{
  position:sticky;
  top:0;
  background:rgba(242,244,248,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border-soft);
  z-index:10;
}

nav .navInner{
  width:min(var(--content-max), calc(100% - (var(--content-pad) * 2)));
  margin:0 auto;
  padding:0.6rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Marca (logo + nombre) */
.brand{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  /*
    Área táctil cómoda en móvil.
    Compensamos el padding horizontal para que el icono/texto queden
    alineados con el resto del contenido del contenedor.
  */
  --brand-pad-x: 0.6rem;
  padding:0.35rem var(--brand-pad-x);
  margin-left: calc(var(--brand-pad-x) * -1);
  border-radius:0.6rem;
  font-weight:700;
  letter-spacing:-0.01em;
}
.brandMark{
  width:22px;
  height:22px;
  border-radius:6px;
  flex:0 0 auto;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.brandMark__warm{ fill:var(--accent-warm); }
.brandMark__cool{ fill:var(--accent); }
@supports (color: color-mix(in srgb, black, white)){
  .brandMark__warm{ fill:color-mix(in srgb, var(--accent-warm) 70%, var(--bg-surface) 30%); }
  .brandMark__cool{ fill:color-mix(in srgb, var(--accent) 70%, var(--bg-surface) 30%); }
}
.brandText{ white-space:nowrap; }

nav a{
  text-decoration:none;
  color:var(--text-main);
  padding:0.35rem 0.6rem;
  border-radius:0.6rem;
  transition:background-color .18s ease, color .18s ease;
}

nav a:hover{ background:rgba(var(--accent-warm-rgb) / 0.22); }
nav a[aria-current="page"]{
  background:var(--bg-surface);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
/* Toggle tema (Auto/Claro/Noche) */
.themeToggle{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;

  padding:0.35rem 0.6rem;
  border-radius:0.6rem;

  border:1px solid transparent;
  background:transparent;
  color:var(--text-main);

  font:inherit;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.themeToggle:hover{
  background:rgba(var(--accent-warm-rgb) / 0.22);
}

.themeToggle:active{
  transform:translateY(0.5px);
}

.themeToggle__dot{
  width:10px; height:10px;
  border-radius:999px;
  background:rgba(var(--accent-rgb) / 0.55);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / 0.14);
}

.themeToggle[data-mode="dark"] .themeToggle__dot,
.themeToggle__dot[data-mode="dark"]{
  background:rgba(148,163,184,0.75);
  box-shadow:0 0 0 3px rgba(148,163,184,0.16);
}

.themeToggle[data-mode="light"] .themeToggle__dot,
.themeToggle__dot[data-mode="light"]{
  background:rgba(var(--accent-rgb) / 0.65);
}

.themeToggle[data-mode="system"] .themeToggle__dot,
.themeToggle__dot[data-mode="system"]{
  background:rgba(var(--accent-warm-rgb) / 0.75);
  box-shadow:0 0 0 3px rgba(var(--accent-warm-rgb) / 0.16);
}

/* -------------------------------------------------------------------------- */
/* Tipografía */
h1,h2,h3{
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin:0 0 0.75rem 0;
}

h1{ font-weight:700; }

/* Detalle visual sutil: subrayado corto en títulos de sección */
h2{
  position:relative;
  display:inline-block;
}
h2::after{
  content:"";
  display:block;
  height:2px;
  width:26px;
  margin-top:0.35rem;
  border-radius:999px;
  background:var(--accent);
  opacity:.55;
}

p{ margin:0 0 1rem 0; line-height: var(--p-line-height); }
p.muted{ color:var(--text-muted); }
.small{ font-size:0.95rem; color:var(--text-muted); }

/* Utilities */
.mt-xs{ margin-top:.25rem; }
.mt-sm{ margin-top:.75rem; }

/* -------------------------------------------------------------------------- */
/* Componentes base (mínimos) */

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.9rem;
}
@media (max-width:700px){
  .cards{ grid-template-columns:1fr; }
}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-surface);
  padding: clamp(1rem, 1.2vw, 1.15rem);
}

/* Rhythm inside cards */
.card > :first-child{ margin-top: 0; }
.card > :last-child{ margin-bottom: 0; }
.card > h2,
.card > h3{ margin-top: 0; }

/* Card clicable */
.card-link{
  display:block;
  text-decoration:none;
  background:var(--card-bg);
  border:1px solid var(--card-border-ink);
  border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.05);
  padding:1rem 2.6rem 1rem 1rem;
  position:relative;
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  cursor:pointer;
}

.card-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--accent);
  opacity:.85;
}

.card-link p{ margin:0; color:var(--text-muted); }

.card-link:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-float);
}

/* Señal visual de que es clicable (chevron) */
.card-link::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  line-height:1;
  opacity:.42;
  transition:transform .12s ease, opacity .12s ease;
}

.card-link:hover::after{
  opacity:.85;
  transform:translate(2px,-50%);
}

/* Feedback táctil (móvil/iOS) */
.card-link:active{
  transform:translateY(0);
  box-shadow:var(--shadow-surface);
  background-color: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .card-link:active{
    background-color: rgb(var(--accent-rgb) / 0.06);
  }
}

.card-link:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

/* Teclado / accesibilidad */
.card-link:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 70%, white 30%);
  outline-offset:3px;
}

/* iOS: evita el “tap highlight” gris */
.card-link, .chips a{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Cabecera de card */
.card-head{
  display:flex;
  align-items:center;
  gap:0.65rem;
  margin-bottom:0.35rem;
}

/* Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  padding:0;
  list-style:none;
  margin:0;
}

/* Base neutral, hover cálido */
.chips a{
  display:inline-block;
  position:relative;
  text-decoration:none;
  padding:0.5rem 1.05rem 0.5rem 0.75rem;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(15, 23, 42, 0.10);
  color:var(--text-main);
  transition:background-color .22s ease, border-color .22s ease;
  cursor:pointer;
}

.chips a::before{
  content:"";
  display:inline-block;
  width:10px;
  height:3px;
  border-radius:999px;
  background:rgba(15, 23, 42, 0.22);
  margin-right:0.45rem;
  vertical-align:middle;
}

.chips a::after{
  content:"›";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
  opacity:.38;
  transition:transform .12s ease, opacity .12s ease;
}

.chips a:hover::after{
  opacity:.75;
  transform:translate(2px,-50%);
}

.chips a:active{
  background-color: color-mix(in srgb, var(--bg-surface) 90%, var(--accent-warm) 10%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent-warm) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .chips a:active{
    background-color: rgb(var(--accent-warm-rgb) / 0.08);
  }
}

.chips a:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

.chips a:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent-warm) 70%, white 30%);
  outline-offset:3px;
}

.chips a:hover,
.chips a:focus-visible{
  background:rgba(var(--accent-warm-rgb) / 0.18);
  border-color:rgba(var(--accent-warm-rgb) / 0.35);
}

.chips a:hover::before,
.chips a:focus-visible::before{
  background:rgb(var(--accent-warm-rgb));
}

/* Back link */
.back-link,
.page-back{
  display:inline-block;
  margin:0.5rem 0 1.5rem 0;
  text-decoration:none;
  color:var(--text-muted);
}
.back-link:hover,
.page-back:hover{ color:var(--text-main); }
/* HERO — aire entre el texto y los botones */
.pageHero__cta{
  margin-top: clamp(1rem, 1.4vw, 1.6rem) !important;
}

/* Extra: si hay varios botones, que respiren mejor */
.pageHero__ctaRow{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* En móvil, un pelín más de aire */
@media (max-width: 520px){
  .pageHero__cta{
    margin-top: 1.15rem !important;
  }
}
/* CTA del PageHero: botones arriba, texto de ayuda abajo (alineado) */
.pageHero__cta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.pageHero__ctaRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Fuerza que el hint vaya a línea nueva, no a la derecha del WhatsApp */
.pageHero__ctaHint{
  display: block;
  width: 100%;
  flex-basis: 100%;
  margin: 0;
}

/* ===========================================
   Modo oscuro (automático por sistema)
   Nota: también soporta html[data-theme="dark"] por si más adelante añadimos toggle.
=========================================== */

@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html:not([data-theme]){
    color-scheme: dark;
    --bg-page:#0b1220;
    --bg-surface:#0f172a;
    --text-main:#e7eef8;
    --text-muted:#c7d2e2;
    --border-soft:#1f2a44;

--body-font-weight: 500;
--body-line-height: 1.70;
--p-line-height: 1.72;

--card-bg:#1d2436;
--card-border: var(--border-soft);
--card-border-ink: rgba(148, 163, 184, 0.18);

--body-font-weight: 500;
--body-line-height: 1.70;
--p-line-height: 1.72;

--card-bg:#1d2436;
--card-border: var(--border-soft);
--card-border-ink: rgba(148, 163, 184, 0.18);

    /* Accent se mantiene, pero con contraste adecuado */
    --shadow-surface:0 1px 2px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.35);
    --shadow-float:0 2px 8px rgba(0,0,0,.40), 0 22px 60px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"],
html[data-theme="dark"]{
  color-scheme: dark;
  --bg-page:#0b1220;
  --bg-surface:#0f172a;
  --text-main:#e7eef8;
  --text-muted:#c7d2e2;
  --border-soft:#1f2a44;

  --body-font-weight: 500;
  --body-line-height: 1.70;
  --p-line-height: 1.72;

  --shadow-surface:0 1px 2px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.35);
  --shadow-float:0 2px 8px rgba(0,0,0,.40), 0 22px 60px rgba(0,0,0,.45);
}

:root[data-theme="light"],
html[data-theme="light"]{
  color-scheme: light;
  --bg-page:#f2f4f8;
  --bg-surface:#ffffff;
  --text-main:#1e293b;
  --text-muted:#475569;
  --border-soft:#e2e8f0;

  --shadow-surface:0 1px 2px rgba(15,23,42,.06), 0 10px 28px rgba(15,23,42,.06);
  --shadow-float:0 2px 6px rgba(15,23,42,.10), 0 18px 48px rgba(15,23,42,.12);
}
/* Ajustes nav en oscuro (evita barra clara con texto claro) */
/* Si el sistema está en oscuro pero el usuario fuerza “Claro” */
html[data-theme="light"] nav{
  background:rgba(242,244,248,.90);
  border-bottom:1px solid var(--border-soft);
}
html[data-theme="light"] nav a[aria-current="page"]{
  background:var(--bg-surface);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}


/* Si el navegador soporta color-mix, afinamos el fondo de tarjeta en oscuro */
@supports (background: color-mix(in srgb, black, white)){
  @media (prefers-color-scheme: dark){
    html[data-theme="auto"], html:not([data-theme]){
      --card-bg: color-mix(in srgb, var(--bg-surface) 94%, white 6%);
    }
  }
  html[data-theme="dark"]{
    --card-bg: color-mix(in srgb, var(--bg-surface) 94%, white 6%);
  }
}

/* Accesibilidad */
.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- NAV: mantener menú visible y alineado (sin romper diseño) ---
   Objetivo: evitar que en algunos navegadores el menú quede reducido a un solo enlace.
   Estrategia: no envolver en varias líneas y permitir scroll horizontal en pantallas estrechas.
*/
header nav{
  flex-wrap: nowrap;
}
header nav ul{
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
header nav ul::-webkit-scrollbar{ display:none; }

/* Si algún estilo “agresivo” estuviera ocultando enlaces, esto lo neutraliza.
   (Se deja acotado al menú del header.) */
header nav ul > li{ display:block; }
header nav ul a{ display:inline-flex; }

/* ===== FILE: system.css ===== */
/*
  system.css — layout & rhythm (single source of truth)
  Objetivo: mismo espacio vertical y mismo “ritmo” en TODAS las páginas.
  Regla: el espaciado grande se decide aquí, no en páginas sueltas.
*/

:root{
  /* Layout: más ancho útil (reduce “bordes” laterales en pantallas grandes) */
  --content-max: 1240px;
  --content-pad: clamp(1rem, 2.2vw, 1.35rem);

  /* Rhythm */
  --page-top-gap: clamp(1.0rem, 2vw, 1.35rem);  /* distancia navbar → contenido */
  --page-y-pad: clamp(1.4rem, 2.4vw, 1.9rem);     /* padding vertical dentro del <main> */
  --section-gap: clamp(1.35rem, 2.8vw, 2.2rem);      /* separación entre “cards/sections” */
}

/* Contenedor estándar */
.container{
  width: min(var(--content-max), 100% - (var(--content-pad) * 2));
  margin-inline: auto;
}

/* Clase “legacy” que ya usa el proyecto.
   Solo aporta el hueco superior. El resto lo define <main>. */
.sectionSpacing{
  margin-top: var(--page-top-gap);
}

/* El <main> manda (padding vertical consistente en todas las páginas) */
main.container{
  padding-block: var(--page-y-pad);
}

/* Layout estándar: stack por gap (no márgenes sueltos por página) */
main.container.sectionSpacing{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
  justify-items: stretch; /* opcional pero recomendable */
}

/* Evita que márgenes de hijos “cuelen” separaciones distintas */
main.container.sectionSpacing > *{
  margin: 0;
}

/* Fallback si alguna página aún no usa sectionSpacing */
main.container:not(.sectionSpacing) > * + *{
  margin-top: var(--section-gap);
}

/* Helper reutilizable */
.stack{
  display: grid;
  gap: var(--section-gap);
}

/* Utilidades mínimas */
.mt-xs{ margin-top: .25rem !important; }
.mt-sm{ margin-top: .9rem !important; }


/* --- NAV movil: reglas migradas a components.css (T2c) --- */

/* ===== FILE: components.css ===== */
/* components.css — Centro Empatía
   Reglas:
   - SOLO componentes reutilizables.
   - Nada de estilos "de una página" aquí.
*/

/* Grid reutilizable (2 columnas en desktop, 1 en móvil) */
.cards-grid{
  display: grid;
  gap: 1rem;
}
@media (min-width: 860px){
  .cards-grid{ grid-template-columns: 1fr 1fr; }
}

/* Accesibilidad */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */
.site-footer{
  margin-top: 2.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--border, rgba(15,23,42,.10));
  color: var(--muted, #64748B);
}

.site-footer__inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

/* Agrupa listas (contacto + legal) */
.site-footer__links{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.site-footer__brand{
  font-weight: 700;
  color: var(--text, #0F172A);
  margin: 0;
}

.site-footer__subtitle{
  margin: .35rem 0 0;
  font-size: .95rem;
}

.site-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-footer__list a{
  color: inherit;
  text-decoration: none;
}
.site-footer__list a:hover{
  text-decoration: underline;
}


.site-footer__list a:focus-visible{
  outline: 2px solid var(--accent, #F59E0B);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (max-width: 720px){
  .site-footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__links{ align-items: flex-start; }
  .site-footer__list{ justify-content: flex-start; }
  /* Móvil: que los enlaces legales se vean y se puedan 'pinchar' */
  .site-footer__list--legal a{
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    display: inline-block;
    padding: .2rem .15rem;
  }

}

/* =========================
   Terapia (directorio)
   ========================= */

.howChoose ol{
  margin:.25rem 0 0;
  padding-left:1.1rem;
}
.howChoose li{ margin:.35rem 0; }

.modalityGrid{
  display:grid;
  gap:1rem;
  margin-top:1rem;
}

/* Cards grandes, una por modalidad (diferente al 2x2 de Home) */
.modalityCard{
  display:block;
  padding:1.15rem 1.15rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  text-decoration:none;
  color:inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.modalityCard:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.modalityCard::after{
  content:"→";
  position:absolute;
  top:1rem;
  right:1rem;
  font-size:1.05rem;
  line-height:1;
  opacity:.35;
  transform: translateX(0);
  transition: opacity .15s ease, transform .15s ease;
}
.modalityCard:hover::after{
  opacity:.75;
  transform: translateX(2px);
}
.modalityCard:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.modalityCard:active{
  transform: translateY(0);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.modalityCard h3{ margin:0 0 .35rem; }
.modalityCard p{ margin:.25rem 0 .75rem; color:var(--text-muted); }
.modalityCard ul{
  margin:0;
  padding-left:1.1rem;
  color:var(--text-main);
}
.modalityCard li{ margin:.25rem 0; }
.modalityCard .modalityCard__more{
  display:inline-flex;
  margin-top:.85rem;
  font-weight:600;
  color:var(--accent);
}

/* Motivos en /terapia (lista en 2 columnas en desktop) */
.motivesGrid{
  display:grid;
  gap:.65rem;
  margin-top:.85rem;
  padding:0;
  list-style:none;
}
@media (min-width: 860px){
  .motivesGrid{ grid-template-columns: 1fr 1fr; }
}
.motivesGrid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem .95rem;
  border:1px solid var(--border);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  cursor:pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.motivesGrid a::after{
  content:"→";
  margin-left:.75rem;
  font-weight:700;
  opacity:.85;
  color:var(--accent);
}

html[data-theme="dark"] .motivesGrid a::after{
  color:var(--accent-warm);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]) .motivesGrid a::after{
    color:var(--accent-warm);
  }
}

.motivesGrid a:focus-visible{
  outline:2px solid rgba(var(--accent-warm-rgb) / .85);
  outline-offset:3px;
}
html[data-theme="light"] .motivesGrid a:focus-visible{
  outline-color: rgba(var(--accent-rgb) / .85);
}

.motivesGrid a:active{
  transform: translateY(0);
  box-shadow:none;
}
.motivesGrid a:hover{
  background: rgba(var(--accent-warm-rgb) / 0.14);
  border-color: rgba(var(--accent-warm-rgb) / 0.55);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* =========================
   Consultas (/motivos) - items tipo lista
   ========================= */

.listCard{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}

.listCard a{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:space-between;
  padding:1rem 1.1rem;
  text-decoration:none;
  color:inherit;
}

.listCard a + a{ border-top:1px solid var(--border); }

.listCard__title{
  margin:0 0 .25rem;
  font-weight:700;
}

.listCard__desc{
  margin:0;
  color:var(--text-muted);
}

.listCard__chev{
  opacity:.5;
  font-size:1.35rem;
  line-height:1;
  padding-top:.25rem;
}

/* Compact lists (used in therapy pages to avoid oversized bullets) */
.list--compact{
  padding-left: 1.1rem;
  margin: .35rem 0 0;
}
.list--compact li{
  margin: .25rem 0;
  font-size: .98rem;
  line-height: 1.45;
}
.list--compact strong{
  font-weight: 600;
}

/* Inline links (used inside text/FAQ where default links inherit color) */
.link{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  font-weight: 600;
}
.link--arrow::after{
  content: " →";
  font-weight: 600;
}

/* =================================================================
   NAV -- estilos consolidados (T2c)
   Origen: tweaks.css (bloques nav) + system.css lineas 63-92
   Conflictos resueltos: ganan los valores de system.css
   (right:14px, width:360px, max-height:calc, padding:14px 16px)
   Bug preexistente: --space-7 no definido (padding-top desktop = 0)
   ================================================================= */

/* -- Token nav-reserve -- */
:root { --nav-reserve: 0px; }

/* -- Barra base (sticky, glass) -- */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 0;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
  background: rgba(15,23,42,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,0.18);
}

/* -- navInner -- */
nav .navInner {
  padding: 0.65rem 0 !important;
  gap: 1rem !important;
}

/* -- Lista de links -- */
nav ul {
  padding: 0 !important;
  gap: 0.55rem !important;
}

/* -- Links -- */
nav a {
  padding: 0.46rem 0.95rem !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

nav a:hover {
  background: rgba(var(--accent-warm-rgb) / 0.24) !important;
}

nav a:focus-visible {
  outline: 2px solid rgba(var(--accent-warm-rgb) / 0.55) !important;
  outline-offset: 2px !important;
  background: rgba(var(--accent-warm-rgb) / 0.18) !important;
}

nav a[aria-current="page"] {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}

@media (max-width: 820px) {
  nav a[aria-current="page"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
    opacity: 1;
  }
}

/* -- navRight -- */
nav .navRight {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  justify-content: flex-end;
}

/* -- Hamburguesa (toggle + icono) -- */
.navToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
}

.burger {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  display: inline-block;
  position: relative;
  opacity: 0.92;
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.92;
}
.burger::before { top: -6px; }
.burger::after  { top:  6px; }

nav.is-open .burger           { background: transparent; }
nav.is-open .burger::before   { top: 0; transform: rotate(45deg); }
nav.is-open .burger::after    { top: 0; transform: rotate(-45deg); }

/* -- Modo oscuro auto -- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) nav {
    background: rgba(15,23,42,0.72) !important;
    border-bottom-color: rgba(148,163,184,0.14) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28) !important;
  }

  html:not([data-theme="light"]) nav a {
    color: rgba(226,232,240,0.88) !important;
  }
  html:not([data-theme="light"]) nav a:hover {
    background: rgba(244,176,138,0.16) !important;
  }
  html:not([data-theme="light"]) nav a[aria-current="page"] {
    background: rgba(2,6,23,0.34) !important;
    border: 1px solid rgba(148,163,184,0.18) !important;
    box-shadow: none !important;
    color: rgba(226,232,240,0.96) !important;
  }
}

@media (max-width: 820px) {
  html:not([data-theme="light"]) nav a[aria-current="page"] {
    background: transparent !important;
    border: none !important;
    color: rgba(226,232,240,0.96) !important;
    font-weight: 600;
  }
}

/* -- Nav movil: hamburguesa + fixed (max-width: 820px) -- */
@media (max-width: 820px) {
  :root { --nav-reserve: 60px; }
  nav { position: fixed !important; left: 0; right: 0; top: 0; overflow: visible; }
  body { padding-top: var(--nav-reserve, 60px); }

  nav .navInner {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .navToggle { display: inline-flex; }

  nav .navRight {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Popover anclado al boton */
  nav ul#primaryNav {
    display: none !important;

    position: absolute;
    top: calc(100% + 10px);
    right: max(14px, env(safe-area-inset-right));
    left: auto;

    width: min(220px, calc(100vw - 28px));
    max-height: calc(100vh - var(--nav-reserve, 64px) - 24px);
    overflow: auto;

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    gap: 0.15rem !important;
    padding: 0.5rem !important;
    border-radius: 18px !important;

    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(148,163,184,0.22) !important;
    box-shadow: 0 16px 40px rgba(2,6,23,0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  nav.is-open ul#primaryNav { display: flex !important; }

  /* Items del popover */
  nav ul#primaryNav li { margin: 0 !important; }

  nav ul#primaryNav a {
    display: block;
    width: 100%;
    text-align: right;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    line-height: 1.2;
    font-size: 0.95rem;
  }

  /* Separador visual para "Area profesional" en movil */
  nav ul#primaryNav .navUtilityItem {
    margin-top: 6px !important;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
  }

  /* Popover: oscuro forzado */
  html[data-theme="dark"] nav ul#primaryNav {
    background: rgba(2,6,23,0.60) !important;
    border-color: rgba(148,163,184,0.16) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.38) !important;
  }
}

/* Popover: oscuro auto (sistema en oscuro, usuario no ha forzado claro) */
@media (max-width: 820px) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) nav ul#primaryNav {
    background: rgba(2,6,23,0.60) !important;
    border-color: rgba(148,163,184,0.16) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.38) !important;
  }
}

/* Ajustes extra small */
@media (max-width: 520px) {
  nav .navInner { padding: 0.6rem 0 !important; }
  nav a         { padding: 0.44rem 0.85rem !important; }
}

/* -- iOS/Safari: backdrop-filter en nav fixed puede bloquear taps -- */
@media (hover: none) and (pointer: coarse) {
  nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme="light"] nav { background: rgba(242,244,248,0.98) !important; }
  html[data-theme="dark"]  nav { background: rgba(15,23,42,0.88)  !important; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) nav { background: rgba(15,23,42,0.88) !important; }
  }
  @media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) nav { background: rgba(242,244,248,0.98) !important; }
  }
}

/* -- Desktop: nav fixed + nav-reserve -- */
@media (min-width: 960px) {
  :root { --nav-reserve: 64px; }
  nav {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
  main.container.sectionSpacing {
    padding-top: calc(1.25rem + var(--nav-reserve));
  }
}

/* -- Ocultar waFab cuando el menu movil esta abierto -- */
.siteNav.is-open ~ .waFab,
nav.is-open ~ .waFab {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}

/* -- Link secundario "Area profesional" en desktop -- */
nav ul#primaryNav .navUtilityItem a {
  font-size: 0.92em;
  opacity: 0.82;
}

@media (min-width: 821px) {
  nav ul#primaryNav .navUtilityItem {
    margin-left: 0.4rem;
    position: relative;
    padding-left: 0.55rem;
  }
  nav ul#primaryNav .navUtilityItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(148,163,184,0.35);
  }
  html[data-theme="light"] nav ul#primaryNav .navUtilityItem::before {
    background: rgba(15,23,42,0.14);
  }

  nav ul#primaryNav .navUtilityItem a {
    border-color: transparent;
    background: transparent;
  }
  nav ul#primaryNav .navUtilityItem a:hover {
    opacity: 1;
    background: rgba(30,41,59,0.06);
  }
  html:not([data-theme="light"]) nav ul#primaryNav .navUtilityItem a:hover {
    background: rgba(148,163,184,0.10);
  }
}

/* ===== FILE: tweaks.css ===== */
/* tweaks.css — UNIFICADO (aprobado)
   Objetivo:
   - Mantener ajustes validados (chips, quitar “ojos” en cards, etc.)
   - Nav: hover pastel + activo discreto + aire
   - Botones: unificar altura/padding/hover/focus
   Nota: no toca layout global (eso vive en system.css)
*/


/* =========================
   BOTONES
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;

  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  color: var(--text-main);

  box-shadow: 0 1px 3px rgba(15,23,42,0.08);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 130ms ease,
    border-color 130ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}

.btn:focus-visible {
  outline: 2px solid rgb(var(--accent-rgb) / 0.40);
  outline-offset: 3px;
}

.btn--sm {
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
}

/* Primary */
.btn--primary {
  background: color-mix(in srgb, rgb(var(--accent-rgb)) 82%, #000 18%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.28);
}

.btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.34);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  border-color: #35577f;
  color: #35577f;
  box-shadow: none;
}

.btn--ghost:hover {
  background: rgb(53 87 127 / 0.08);
  border-color: #2e4b6f;
  box-shadow: none;
}

/* WhatsApp */
.btn--whatsapp {
  background: rgba(37,211,102,0.09);
  border-color: rgba(37,211,102,0.65);
  color: rgb(20,120,67);
  box-shadow: none;
}

.btn--whatsapp:hover {
  background: rgba(37,211,102,0.14);
  border-color: rgba(37,211,102,0.80);
  box-shadow: none;
}

/* Dark mode — solo sombras y WhatsApp (los tokens se adaptan solos) */
html[data-theme=”dark”] .btn {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
html[data-theme=”dark”] .btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
html[data-theme=”dark”] .btn--primary {
  box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.20);
}
html[data-theme=”dark”] .btn--primary:hover {
  box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.28);
}
html[data-theme=”dark”] .btn--whatsapp {
  color: rgb(52,211,153);
  border-color: rgba(52,211,153,0.50);
  background: rgba(52,211,153,0.08);
}
html[data-theme=”dark”] .btn--whatsapp:hover {
  background: rgba(52,211,153,0.13);
  border-color: rgba(52,211,153,0.65);
}

html[data-theme="dark"] .btn--ghost {
  background: transparent;
  border-color: rgba(231,238,248,0.72);
  color: #f8fbff;
}

html[data-theme="dark"] .btn--ghost:hover {
  background: rgb(231 238 248 / 0.12);
  border-color: rgba(231,238,248,0.9);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme=”light”]) .btn {
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }
  html:not([data-theme=”light”]) .btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  html:not([data-theme=”light”]) .btn--primary {
    box-shadow: 0 2px 8px rgb(var(--accent-rgb) / 0.20);
  }
  html:not([data-theme=”light”]) .btn--primary:hover {
    box-shadow: 0 4px 14px rgb(var(--accent-rgb) / 0.28);
  }
  html:not([data-theme=”light”]) .btn--whatsapp {
    color: rgb(52,211,153);
    border-color: rgba(52,211,153,0.50);
    background: rgba(52,211,153,0.08);
  }
  html:not([data-theme=”light”]) .btn--whatsapp:hover {
    background: rgba(52,211,153,0.13);
    border-color: rgba(52,211,153,0.65);
  }

  html:not([data-theme="light"]) .btn--ghost {
    background: transparent;
    border-color: rgba(231,238,248,0.72);
    color: #f8fbff;
  }

  html:not([data-theme="light"]) .btn--ghost:hover {
    background: rgb(231 238 248 / 0.12);
    border-color: rgba(231,238,248,0.9);
  }
}


/* =========================
   CHIPS (Motivos de consulta)
   ========================= */

/* Objetivo:
   - Que se vean “clicables” incluso sin sombras (móvil)
   - Más aire entre chips
   - Borde/acento cálido (pastel) + feedback claro al tocar
*/

.chips{
  justify-content: center;
  gap: 1rem;
  row-gap: 0.9rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.chips li{ margin: 0; }

.chips a{
  padding: 0.6rem 1.15rem;
  padding-right: 1.65rem; /* espacio para el chevron › */
  border-radius: 14px;

  background: color-mix(in srgb, white 88%, rgb(var(--accent-warm-rgb)) 12%) !important;
  border: 1px solid rgba(var(--accent-warm-rgb) / 0.34) !important;

  /* “botón” suave, sin ruido */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 1px 2px rgba(15,23,42,0.06) !important;

  transition: transform 140ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .chips a{
    background: rgba(255,255,255,0.92) !important;
  }
}

.chips a:hover,
.chips a:focus-visible{
  background: rgba(var(--accent-warm-rgb) / 0.18) !important;
  border-color: rgba(var(--accent-warm-rgb) / 0.52) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 3px 10px rgba(15,23,42,0.10) !important;
  transform: translateY(-1px);
}

.chips a:active{
  background: rgba(var(--accent-warm-rgb) / 0.24) !important;
  border-color: rgba(var(--accent-warm-rgb) / 0.62) !important;
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.60) inset,
    0 1px 2px rgba(15,23,42,0.08) !important;
}

.chips a::before{ display: none !important; }

.chips + p{ margin-top: 0.75rem; }


/* =========================
   MOTIVOS / CONSULTAS — lista (cards-link)
   ========================= */

.motivos-links{
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

/* En móvil, un pelín menos de aire */
@media (max-width: 520px){
  .motivos-links{ gap: 0.85rem; }
}

/* =========================
   TARJETAS (Terapias) — quitar “ojos”
   ========================= */

.card-icon,
.card-icon::after{
  display: none !important;
}

/* Acento lateral más sutil */
.card-link::before{
  opacity: 0.25 !important;
}


/* =========================
   RAIL UNIVERSAL (aire + evitar colapso)
   ========================= */

main.container.sectionSpacing{
  padding-top: calc(1.25rem + var(--nav-reserve)) !important;
  padding-bottom: 1.25rem !important;
  display: grid !important;
  gap: var(--section-gap) !important;
}

@media (max-width: 820px) {
  main.container.sectionSpacing {
    padding-top: 1.25rem !important;
  }
}

main.container.sectionSpacing > section:first-child{
  margin-top: 0 !important;
}

/* =========================
   PAGE HERO — aire entre texto y botones
   (en algunas páginas se veía “apretado”)
   ========================= */

.pageHero__cta{
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
}

/* En móviles un pelín más de aire */
@media (max-width: 520px){
  .pageHero__cta{ margin-top: 1.25rem !important; }
}

/* =========================
   BACK LINK — “Volver” en páginas internas (Motivos)
   ========================= */

.back-link,
.page-back{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  line-height: 1;
  font-weight: 500;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.30);
  color: var(--text-main);
  text-decoration: none;

  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}

.back-link:hover,
.page-back:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(148,163,184,0.46);
  box-shadow: 0 3px 10px rgba(15,23,42,0.10);
  transform: translateY(-1px);
}

.back-link:active,
.page-back:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(15,23,42,0.10);
}

.back-link:focus-visible,
.page-back:focus-visible{
  outline: 2px solid rgba(var(--accent-rgb) / 0.55) !important;
  outline-offset: 2px !important;
}

/* Dark forzado */
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .page-back {
  background: rgba(255,255,255,0.07);
  border-color: rgba(148,163,184,0.18);
  color: var(--text-main);
}

/* Dark auto (sistema en oscuro, usuario no ha forzado claro) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .back-link,
  html:not([data-theme="light"]) .page-back {
    background: rgba(255,255,255,0.07);
    border-color: rgba(148,163,184,0.18);
    color: var(--text-main);
  }
}


/* --- Click affordance: modalidad cards (siempre visible) --- */
/* En móvil no existe hover, así que el indicador debe verse siempre. */
.modalityCard{ position: relative; }

.modalityCard::after{
  content:"→";
  position:absolute;
  top:1rem;
  right:1rem;
  font-size:1.05rem;
  line-height:1;
  opacity:.62;
  transform: translateX(0);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events:none;

  color: var(--modality-arrow-color);
}

@media (hover:hover){
  .modalityCard:hover::after{
    opacity:.88;
    transform: translateX(2px);
  }
}

@media (hover:none){
  .modalityCard::after{
    opacity:.78; /* más visible en táctil */
  }
}


/* =========================
   Modality arrow colors (claro/noche/auto)
   - Claro: azul (--accent)
   - Noche: naranja (--accent-warm)
   - Auto: depende de prefers-color-scheme
   ========================= */
:root{
  --modality-arrow-color: var(--accent);
}
html[data-theme="light"]{
  --modality-arrow-color: var(--accent);
}
html[data-theme="dark"]{
  --modality-arrow-color: var(--accent-warm);
}
/* Auto (si el sistema está en oscuro → naranja) */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"], html:not([data-theme]){
    --modality-arrow-color: var(--accent-warm);
  }
}
@media (prefers-color-scheme: light){
  html[data-theme="auto"], html:not([data-theme]){
    --modality-arrow-color: var(--accent);
  }
}


/* =========================
   HOME (Portada) — ritmo y menos texto
   - Se apoya en cards existentes y añade bloques compactos
   ========================= */

/* HOME — Bloque "Qué es Centro Empatía" (más humano, menos catálogo) */
.home .homeIntro{
  margin-top: 1.2rem;
  padding: 1.1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 420px at 18% 18%, rgb(var(--accent-warm-rgb) / 0.18), transparent 60%),
    radial-gradient(900px 420px at 82% 82%, rgb(var(--accent-rgb) / 0.10), transparent 55%),
    var(--bg-surface);
}
.home .homeIntro p{
  max-width: 72ch;
}
.home .homeIntro__bullets{
  margin: .75rem 0 0;
  padding-left: 1.15rem;
}
.home .homeIntro__bullets li{
  margin: .35rem 0;
  color: var(--text-muted);
}
.home .homeIntro__cta{
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}


/* Dark + Auto(dark): sube contraste del bloque */
html[data-theme="dark"] .home .homeIntro{
  background:
    radial-gradient(900px 420px at 18% 18%, rgb(var(--accent-warm-rgb) / 0.14), transparent 60%),
    radial-gradient(900px 420px at 82% 82%, rgb(var(--accent-rgb) / 0.10), transparent 55%),
    rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .home .homeIntro{
    background:
      radial-gradient(900px 420px at 18% 18%, rgb(var(--accent-warm-rgb) / 0.14), transparent 60%),
      radial-gradient(900px 420px at 82% 82%, rgb(var(--accent-rgb) / 0.10), transparent 55%),
      rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
  }
}


/* HOME — Bloque "Nuestro compromiso" (texto importante, sin parecer un tocho) */
.home .homeCommitment{
  margin-top: 1.0rem;
  padding: 1.1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(920px 460px at 14% 40%, rgb(var(--accent-warm-rgb) / 0.16), transparent 62%),
    var(--bg-surface);
}
.home .homeCommitment p{
  max-width: 74ch;
}
.home .homeCommitment__tagline{
  margin-top: .9rem;
}
.home .homeCommitment__sub{
  margin-top: .15rem;
  color: var(--text-muted);
}

/* Dark + Auto(dark) */
html[data-theme="dark"] .home .homeCommitment{
  background:
    radial-gradient(920px 460px at 14% 40%, rgb(var(--accent-warm-rgb) / 0.12), transparent 62%),
    rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .home .homeCommitment{
    background:
      radial-gradient(920px 460px at 14% 40%, rgb(var(--accent-warm-rgb) / 0.12), transparent 62%),
      rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.10);
  }
}


.home .chips{
  justify-content: flex-start;
  margin-top: 0.9rem;
  margin-bottom: 0.25rem;
}

/* Home chips con iconos — estilo pill (evita “tarjetones”) */
.home .chips a{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.55rem 1.0rem;
  padding-right: 1.05rem;
}

.home .chips a::after{ display: none !important; }
.home .chips a::before{ display: none !important; }

.home .chip__i{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  opacity: 0.65;
}

.home .chip__i svg{
  width: 18px;
  height: 18px;
  display: block;
}

.home .chip__t{
  white-space: nowrap;
}

.home .chips a:hover .chip__i,
.home .chips a:focus-visible .chip__i{
  opacity: 0.82;
}

 (max-width: 520px){
  /* En móvil, un pelín más compactos */
  .home .chips{ gap: 0.75rem; row-gap: 0.65rem; }
  .home .chips a{ padding: 0.52rem 0.9rem; }
}


/* Mini-cards (resumen) */
.homeHighlights{
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

@media (min-width: 900px){
  .homeHighlights{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card--mini{
  padding: 1.05rem 1.1rem;
}

.homeMini__t{
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  line-height: 1.2;
}

/* Pasos (primera sesión) */
.homeSteps{
  position: relative;
  overflow: hidden;
}

.homeSteps::before{
  content: "";
  position: absolute;
  top: -40px;
  right: -60px;
  width: 420px;
  height: 320px;
  background: url("/decor/halo.svg") no-repeat;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
}

.homeSteps__grid{
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 900px){
  .homeSteps__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.homeStep{
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: color-mix(in srgb, white 92%, var(--accent) 8%);
}

/* Dark theme support:
   - html[data-theme="dark"]: user forced dark
   - prefers-color-scheme dark + NOT forced light: auto/system dark
*/
html[data-theme="dark"] .homeStep{
  border-color: rgba(255,255,255,0.10);
  background: color-mix(in srgb, var(--bg-surface) 86%, var(--accent) 14%);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .homeStep{
    border-color: rgba(255,255,255,0.10);
    background: color-mix(in srgb, var(--bg-surface) 86%, var(--accent) 14%);
  }
}

.homeStep__n{
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
  background: color-mix(in srgb, white 85%, var(--accent-warm) 15%);
  border: 1px solid rgba(0,0,0,0.08);
  flex: 0 0 auto;
}

html[data-theme="dark"] .homeStep__n{
  border-color: rgba(255,255,255,0.12);
  background: color-mix(in srgb, var(--bg-surface) 78%, var(--accent-warm) 22%);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .homeStep__n{
    border-color: rgba(255,255,255,0.12);
    background: color-mix(in srgb, var(--bg-surface) 78%, var(--accent-warm) 22%);
  }
}

.homeStep__t{
  margin: 0 0 0.15rem 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.homeStep__body p{
  margin: 0;
  opacity: 0.9;
}

/* Cita breve (para romper bloques de texto) */
.homeQuote{
  margin: 1.25rem 0;
  padding: 0.25rem 0;
}

.homeQuote blockquote{
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: color-mix(in srgb, white 92%, var(--accent-warm) 8%);
  font-size: 1.05rem;
  line-height: 1.4;
}

html[data-theme="dark"] .homeQuote blockquote{
  border-color: rgba(255,255,255,0.10);
  background: color-mix(in srgb, var(--bg-surface) 86%, var(--accent-warm) 14%);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .homeQuote blockquote{
    border-color: rgba(255,255,255,0.10);
    background: color-mix(in srgb, var(--bg-surface) 86%, var(--accent-warm) 14%);
  }
}

/* CTA final un poco más compacto */
.homeCTA p{ max-width: 70ch; }

/* =========================
   HOTFIX — CHIPS en modo oscuro / automático
   (evita texto claro sobre fondo claro)
   ========================= */

html[data-theme="dark"] .chips a{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .chips a:hover,
html[data-theme="dark"] .chips a:focus-visible{
  background: rgba(var(--accent-warm-rgb) / 0.14) !important;
  border-color: rgba(var(--accent-warm-rgb) / 0.42) !important;
  color: rgba(255,255,255,0.92) !important;
}

html[data-theme="dark"] .chips a:active{
  background: rgba(var(--accent-warm-rgb) / 0.20) !important;
  border-color: rgba(var(--accent-warm-rgb) / 0.55) !important;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .chips a{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.16) !important;
    color: rgba(255,255,255,0.88) !important;
    box-shadow: none !important;
  }

  html:not([data-theme="light"]) .chips a:hover,
  html:not([data-theme="light"]) .chips a:focus-visible{
    background: rgba(var(--accent-warm-rgb) / 0.14) !important;
    border-color: rgba(var(--accent-warm-rgb) / 0.42) !important;
    color: rgba(255,255,255,0.92) !important;
  }

  html:not([data-theme="light"]) .chips a:active{
    background: rgba(var(--accent-warm-rgb) / 0.20) !important;
    border-color: rgba(var(--accent-warm-rgb) / 0.55) !important;
  }
}


/* =========================
   HOME — chips con iconos (pill, no “tarjetones”)
   Motivo: al meter SVG inline, si no fijamos tamaño, el SVG puede crecer (300x150)
   y convertir los chips en bloques enormes.
   ========================= */

.home .chips{
  justify-content: flex-start;
}

.home .chips a{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;
  min-height: 40px !important;
  padding: 0.55rem 1.0rem !important;
  padding-right: 1.05rem !important; /* ya no hay chevron */

  border-radius: 999px !important;
}

.home .chips a::after{ display:none !important; }
.home .chips a::before{ display:none !important; }

.home .chip__i{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  opacity: 0.62;
}

.home .chip__i svg{
  width: 18px;
  height: 18px;
  display: block;
}

.home .chips a:hover .chip__i,
.home .chips a:focus-visible .chip__i{ opacity: 0.78; }

.home .chip__t{ white-space: nowrap; }

@media (max-width: 520px){
  .home .chips{ gap: 0.75rem; row-gap: 0.65rem; }
  .home .chips a{ padding: 0.5rem 0.9rem !important; }
}

/* Dark + Auto(dark): un pelín más de contraste para iconos */
html[data-theme="dark"] .home .chip__i{ opacity: 0.74; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .home .chip__i{ opacity: 0.74; }
}

/* ===== FILE: scroll-top.css ===== */
/* Scroll-to-top button (visible only after scrolling) */
/* Theme-aware accent:
   - Light: azul (accent)
   - Dark/Noche: naranja pastel (accent-warm)
*/
html[data-theme="light"]{
  --scrolltop-accent: var(--accent);
  --scrolltop-accent-rgb: var(--accent-rgb);
}

html[data-theme="dark"]{
  --scrolltop-accent: var(--accent-warm);
  --scrolltop-accent-rgb: var(--accent-warm-rgb);
}

/* Auto / sin data-theme: azul por defecto, naranja si el sistema está en oscuro */
html[data-theme="auto"],
html:not([data-theme]){
  --scrolltop-accent: var(--accent);
  --scrolltop-accent-rgb: var(--accent-rgb);
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html:not([data-theme]){
    --scrolltop-accent: var(--accent-warm);
    --scrolltop-accent-rgb: var(--accent-warm-rgb);
  }
}

.scrollTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--scrolltop-accent, var(--accent, #5f86b6));

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;

  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
}

.scrollTop span{
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.scrollTop:hover{
  background: var(--surface-2, rgba(255,255,255,.06));
  border-color: var(--scrolltop-accent, var(--accent, #5f86b6));
}

.scrollTop:focus-visible{
  outline: 2px solid var(--scrolltop-accent, var(--accent, #5f86b6));
  outline-offset: 2px;
}

.scrollTop.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(var(--scrolltop-accent-rgb, var(--accent-rgb, 95 134 182)) / 0.55);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .scrollTop{
    transition: none;
  }
}

/* ===== FILE: page-hero.css ===== */
/* page-hero.css — patrón estándar de “hero” (internas + portada)
   Objetivo:
   - Misma rejilla, mismas proporciones y misma caja de imagen en todas las páginas
   - Compatible con dos nombres históricos: .pageHero (camel) y .page-hero (kebab)
*/

:where(.pageHero, .page-hero){
  display: grid;
  /* Evita que el texto (sobre todo el H1 largo) “empuje” la ilustración */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--section-gap);
  align-items: start;
}

/* Cuando el hero es también una tarjeta */
:where(.pageHero.card, .page-hero.card){
  padding: 1.25rem;
  overflow: hidden;
}

/* Texto: centrado vertical en desktop; en móvil vuelve arriba */
:where(.pageHero__text, .page-hero__text){
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* clave en CSS Grid: permitir que el bloque de texto se encoja y haga wrap */
  min-width: 0;
  min-height: 100%;
  padding-block: .25rem;
}

/* Títulos largos: mejor wrap y menos “saltos” raros */
:where(.pageHero__text h1, .page-hero__text h1){
  overflow-wrap: anywhere;
  hyphens: auto;
}

:where(.pageHero__lead, .page-hero__lead){
  margin: .85rem 0 0;
  max-width: 62ch;

  /* Antes estaba demasiado "gris". Aquí subimos contraste sin hacerlo pesado. */
  color: var(--text, #1e293b);
  opacity: .86;

  font-size: 1.12rem;
  line-height: 1.55;
}

:where(.pageHero__muted, .page-hero__muted){
  margin: .75rem 0 0;
  color: var(--muted, #64748B);
  font-size: .95rem;
}

:where(.pageHero__muted strong, .page-hero__muted strong){
  font-weight: 700;
  color: #0F172A;
}

/* Hero image filter (tema)
   - En light: sin filtro (las versiones -light ya están afinadas)
   - En dark: un pelín de brillo/saturación para igualar PC + móvil
*/
:root{
  --hero-img-filter: var(--hero-img-filter);
}

/* -------------------------------------------------------------------------- */
/* Media: caja consistente (CANÓNICA) */
:where(.pageHero__media, .page-hero__media){
  border-radius: var(--radius-md, 0.95rem);
  overflow: hidden;

  
  position: relative;
/* “aire” sin perder presencia */
  background: var(--surface);
  padding: 0;
/* caja única en todo el sitio */
  aspect-ratio: 16 / 10;

  border: 0;
  min-width: 0;
}

/* Imagen directa */
:where(.pageHero__media img, .page-hero__media img, .pageHero__img){
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* encuadre más “vertical” sin cambiar la imagen */
  object-position: 50% 50%;
  transform: none;
/* micro-nitidez “pro” */
  filter: var(--hero-img-filter);
border-radius: inherit;
}

/* Slot (por si metes <picture> o algo dentro) */
:where(.pageHero__media, .page-hero__media) > :is(img, picture, svg){
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

/* Soporte para <picture><img/></picture> */
:where(.pageHero__media, .page-hero__media) picture > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
border-radius: inherit;
}

/* Responsive */
@media (max-width: 900px){
  :where(.pageHero, .page-hero){
    grid-template-columns: 1fr;
  }

    :where(.pageHero__media, .page-hero__media){
    order: -1;
    padding: 0;
    aspect-ratio: 16 / 10;
  }

  :where(.pageHero__media img, .page-hero__media img, .pageHero__img),
  :where(.pageHero__media, .page-hero__media) picture > img{
    transform: none;
}

:where(.pageHero__text, .page-hero__text){
    justify-content: flex-start;
  }
}

/* CTA row */
:where(.pageHero__ctaRow, .page-hero__ctaRow){
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero meta (modalidad: presencial / online) */
:where(.pageHero, .page-hero) .heroMeta{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(.pageHero, .page-hero) .heroMeta__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--muted, #64748B);
  font-size: .95rem;
  line-height: 1.2;
}

:where(.pageHero, .page-hero) .heroMeta__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: inherit;
  text-decoration: none;
}

:where(.pageHero, .page-hero) .heroMeta__link:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

:where(.pageHero, .page-hero) .heroMeta__link:focus-visible{
  outline: 2px solid rgba(30, 64, 175, .35);
  outline-offset: 4px;
  border-radius: 10px;
}
/* Iconos consistentes */
:where(.pageHero, .page-hero) .heroMeta__icon{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  opacity: .9;
}

/* Separador sutil entre items (sin "·" en el HTML) */
:where(.pageHero, .page-hero) .heroMeta__item + .heroMeta__item{
  position: relative;
  padding-left: 14px;
}
:where(.pageHero, .page-hero) .heroMeta__item + .heroMeta__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
}

/* =========================================================
   Ajuste fino: CTAs del hero (desktop)
   - Evita botones "gorditos" en la primera tarjeta (PageHero)
   - Solo afecta al hero, no al resto de botones del sitio
   ========================================================= */
:where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow) .btn{
  min-height: 40px;
  padding: 0.56rem 0.95rem;
  font-size: 0.95rem;
}

@media (max-width: 520px){
  :where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow){
    gap: 10px;
  }
  :where(.pageHero, .page-hero) :where(.pageHero__ctaRow, .page-hero__ctaRow) .btn{
    min-height: 42px; /* dedo-friendly en móvil */
    padding: 0.62rem 0.95rem;
    font-size: 0.95rem;
  }
}

html[data-theme="dark"] :where(.pageHero__lead, .page-hero__lead){
  opacity: 0.96;
}

/* Dark hero: marco suave (sin viñeta) */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) :where(.pageHero__media, .page-hero__media){
    border: 1px solid rgba(148,163,184,0.14);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.25);
    background: rgba(2,6,23,0.20);
  }
}

html[data-theme="dark"] :where(.pageHero__media, .page-hero__media){
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.25);
  background: rgba(2,6,23,0.20);
}

/* =========================================================
   Dark mode: brillo unificado (PC = móvil)
   ========================================================= */

/* Forzado modo oscuro */
/* Modo automático oscuro (si no fuerzas light) */

/* Dark: hero image filter (unificado) */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html:not([data-theme]):not([data-theme="light"]){
    --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
  }
  html:not([data-theme="light"]){
    /* compat: si algún html queda sin data-theme en auto */
    --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
  }
}
html[data-theme="dark"]{
  --hero-img-filter: brightness(0.92) saturate(0.96) contrast(1.02);
}
html[data-theme="light"]{
  --hero-img-filter: none;
}

/* ===== FILE: polish.css ===== */
/* polish.css — Web Empatía
   Objetivo:
   - Mejor legibilidad general (contraste suave + tipografía más “nítida”)
   - Sombras y transiciones consistentes (micro, no “app”)
   - Accesibilidad: focus visible + reduce motion
   - Unificación visual: solo los “paneles” (hero/pageHero) se sienten como card
*/

:root{
  /* Sombras: coherentes y un poco más “crisp” */
  --shadow-surface: 0 1px 2px rgba(15,23,42,.07), 0 10px 28px rgba(15,23,42,.07);
  --shadow-float:   0 3px 10px rgba(15,23,42,.10), 0 22px 54px rgba(15,23,42,.12);

  /* Aro de foco */
  --focus-ring: rgba(243, 181, 98, 0.60);
  --focus-ring-soft: rgba(243, 181, 98, 0.22);

  /* Duraciones “calmas” */
  --t-fast: 140ms;
  --t-med:  200ms;
}

/* Texto secundario: boost SOLO en CLARO (en oscuro lo define base.css) */
html[data-theme="light"], :root[data-theme="light"]{
  --text-muted: #526071;
  --muted: var(--text-muted);
}

/* Auto en sistema claro */
@media (prefers-color-scheme: light){
  html[data-theme="auto"], html:not([data-theme]){
    --text-muted: #526071;
    --muted: var(--text-muted);
  }
}

/* Tipografía: más nitidez y ritmo */
body{
  font-family: var(--font-sans);
  font-weight: var(--body-font-weight, 400);
  line-height: var(--body-line-height, 1.65);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   PANELES (solo donde toca)
   - PageHero/Hero sí tienen lenguaje “card”
   - Las secciones normales NO lo son por defecto
   ========================================================= */

:where(.hero, .pageHero, .page-hero){
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-surface);
  border-radius: var(--radius-md);
}

/* Las secciones normales NO son tarjetas por defecto */
:where(main section){
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* =========================================================
   TRANSICIONES coherentes
   ========================================================= */

:where(.card, .card-link, .btn, .hero, .pageHero, .page-hero, main section){
  transition:
    transform var(--t-med) ease,
    box-shadow var(--t-med) ease,
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    filter var(--t-fast) ease;
}

/* Inputs: foco suave */
:where(input, textarea){
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

/* =========================================================
   WhatsApp CTA (más pro, integrado y consistente)
   ========================================================= */

.btn__icon{
  display: inline-flex;
  align-items: center;
}
.btn__icon svg{
  display: block;
}

a.btn.btn--whatsapp,
.btn.btn--whatsapp{
  background: rgba(37, 211, 102, 0.10) !important;
  border-color: rgba(37, 211, 102, 0.60) !important;
  color: rgb(20, 120, 67) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

a.btn.btn--whatsapp:hover,
.btn.btn--whatsapp:hover{
  background: rgba(37, 211, 102, 0.10) !important;
  border-color: rgba(37, 211, 102, 0.55) !important;
}

.btn.btn--whatsapp .waIcon{
  color: currentColor;
}

/* =========================================================
   Interacción
   ========================================================= */

@media (any-hover: hover){
  /* Tarjetas clickables: lift sutil + sombra (evitamos aplicarlo al hero) */
  :where(.card, .card-link):hover{
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
  }

  /* Botones: sin lift (solo feedback visual) */
  .btn:hover{
    transform: none;
    filter: none;
  }
}

/* “Pressed” (touch y desktop): respuesta clara al toque/clic */
.btn:active{
  transform: none;
  filter: brightness(0.98);
}
.card-link:active{
  transform: translateY(1px);
}


/* =========================================================
   CLICKABILITY — señales claras en móvil (v0.2)
   ========================================================= */

.card-link{
  position:relative;
  padding-right:2.6rem;
  border:1px solid rgba(15, 23, 42, 0.10);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Chevron (no requiere tocar HTML) */
.card-link::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  line-height:1;
  opacity:.42;
  transition:transform var(--t-med) ease, opacity var(--t-med) ease;
}

@media (any-hover: hover){
  .card-link:hover::after{
    opacity:.85;
    transform:translate(2px,-50%);
  }
}

/* Feedback táctil visible */
.card-link:active{
  transform:translateY(0);
  background-color: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .card-link:active{
    background-color: rgb(var(--accent-rgb) / 0.06);
  }
}

.card-link:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

/* Chips / Motivos */
.chips a{
  position:relative;
  padding-right:1.05rem;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.chips a::after{
  content:"›";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
  opacity:.38;
  transition:transform var(--t-med) ease, opacity var(--t-med) ease;
}

@media (any-hover: hover){
  .chips a:hover::after{
    opacity:.75;
    transform:translate(2px,-50%);
  }
}

.chips a:active{
  background-color: color-mix(in srgb, var(--bg-surface) 90%, var(--accent-warm) 10%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent-warm) 50%);
}

@supports not (color-mix(in srgb, white 50%, black 50%)){
  .chips a:active{
    background-color: rgb(var(--accent-warm-rgb) / 0.08);
  }
}

.chips a:active::after{
  opacity:.9;
  transform:translate(3px,-50%);
}

/* ===========================================
   Micro-interacciones (sutiles)
   - Objetivo: sensación “premium” sin distraer
   - Respeta prefers-reduced-motion
=========================================== */

/* Estados de foco visibles y consistentes */
:where(a, button, input, textarea, select, summary):focus-visible{
  outline: 2px solid rgba(var(--accent-rgb) / 0.38);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Solo animamos elementos realmente clicables */
a.card,
a.modalityCard,
.card-link{
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  text-decoration: none;
}

@media (any-hover: hover){
  a.card:hover,
  a.modalityCard:hover,
  .card-link:hover{
    transform: translateY(-2px);
    border-color: rgba(148,163,184,0.65);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.70) inset,
      0 14px 34px rgba(15,23,42,0.12);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  a.card,
  a.modalityCard,
  .card-link{ transform:none !important; }
}

/* =========================================================
   Theme typography parity
   - Auto (system) matches forced themes
   - Prevents “Auto looks bigger” inconsistencies
   ========================================================= */

/* Defaults (claro) */
html[data-theme="light"],
:root[data-theme="light"]{
  --body-font-weight: 400;
  --body-line-height: 1.65;
  --p-line-height: 1.65;
}

/* Forced dark */
html[data-theme="dark"],
:root[data-theme="dark"]{
  --body-font-weight: 500;
  --body-line-height: 1.70;
  --p-line-height: 1.72;
}

/* Auto: system decides */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html:not([data-theme]){
    --body-font-weight: 500;
    --body-line-height: 1.70;
    --p-line-height: 1.72;
  }
}

@media (prefers-color-scheme: light){
  html[data-theme="auto"],
  html:not([data-theme]){
    --body-font-weight: 400;
    --body-line-height: 1.65;
    --p-line-height: 1.65;
  }
}

/* ===== FILE: visual.css ===== */
/* phase3.css -- Web Empatia -- Fase 3: retoques visuales
   Cargado al final de la cascada. Solo suma, nunca pisa sin intencion.
   Tokens base: --accent, --accent-warm, --accent-rgb, --accent-warm-rgb
   Modo oscuro: siempre html[data-theme="dark"] + @media(prefers-color-scheme:dark) html:not([data-theme="light"])
*/

/* =============================================================
   TOKENS FALTANTES
   Referenciados en tweaks.css pero nunca definidos.
   - --accent-cool-rgb  : alias de --accent-rgb (azul)
   - --bg-rgb           : canales RGB de --bg-surface
   - --text-rgb         : canales RGB de --text-main
   ============================================================= */

:root {
  --accent-cool-rgb: 95 134 182;
  --bg-rgb: 255 255 255;
  --text-rgb: 30 41 59;
  --shadow-md: var(--shadow-float);
}

html[data-theme="dark"] {
  --bg-rgb: 15 23 42;
  --text-rgb: 231 238 248;
  --shadow-md: var(--shadow-float);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg-rgb: 15 23 42;
    --text-rgb: 231 238 248;
    --shadow-md: var(--shadow-float);
  }
}


/* =============================================================
   TRUST BAND
   Banda de datos clave: Desde / Enfoque / Modalidad / Ubicacion.
   Antes: sin ningun estilo. Ahora: tira horizontal discreta.
   ============================================================= */

.trustBand {
  padding: 0.9rem 0 0.85rem;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.trustBand__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 0;
}

.trustBand__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  padding: 0 1.75rem;
}

.trustBand__item + .trustBand__item {
  border-left: 1px solid var(--border-soft);
}

.trustBand__k {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.trustBand__v {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.trustBand__v a {
  color: inherit;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.trustBand__v a:hover {
  opacity: 0.75;
}

/* Movil: 2x2 */
@media (max-width: 540px) {
  .trustBand__item {
    padding: 0 1.25rem;
  }
  .trustBand__item:nth-child(odd):not(:first-child) {
    border-left: none;
  }
  .trustBand__item:nth-child(3),
  .trustBand__item:nth-child(4) {
    border-top: 1px solid var(--border-soft);
    padding-top: 0.55rem;
  }
}


/* =============================================================
   HOW CHOOSE -- lista numerada en página /terapia/
   Números como círculos de acento warm, sin card.
   ============================================================= */

ol.howChoose {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  counter-reset: howChoose-counter;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

ol.howChoose + p {
  margin-top: 1rem;
}

.howChoose li {
  counter-increment: howChoose-counter;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

.howChoose li::before {
  content: counter(howChoose-counter);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  background: rgb(var(--accent-warm-rgb) / 0.15);
  border: 1px solid rgb(var(--accent-warm-rgb) / 0.30);
  color: var(--text-main);
}

html[data-theme="dark"] .howChoose li::before {
  background: rgb(var(--accent-warm-rgb) / 0.20);
  border-color: rgb(var(--accent-warm-rgb) / 0.40);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .howChoose li::before {
    background: rgb(var(--accent-warm-rgb) / 0.20);
    border-color: rgb(var(--accent-warm-rgb) / 0.40);
  }
}


/* =============================================================
   HOME SHORTCUTS -- tarjetas de terapias
   Acento de color por tarjeta (azul/warm alternados), jerarquia interna.
   ============================================================= */

.homeShortcut {
  border-top: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.homeShortcut:nth-child(2),
.homeShortcut:nth-child(4) {
  border-top-color: var(--accent-warm);
}

.homeShortcut__t {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.homeShortcut p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.homeShortcuts__more {
  margin-top: 1rem;
}

.homeShortcuts__grid {
  margin: 0;
}


/* =============================================================
   HOME CHIPS -- alias homeChips__list -> .chips
   El HTML usa .homeChips__list / .chip,
   el CSS base usa .chips / .chips a.
   ============================================================= */

.homeChips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
  margin: 0.9rem 0 0.25rem;
}

.homeChips__list > li {
  display: flex;
}

.homeChips__list .chip {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 0.5rem 1.05rem 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: var(--text-main);
  transition: background-color .22s ease, border-color .22s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.homeChips__list .chip:hover,
.homeChips__list .chip:focus-visible {
  background: rgba(var(--accent-warm-rgb) / 0.18);
  border-color: rgba(var(--accent-warm-rgb) / 0.35);
}

.homeChips__list .chip:active {
  background-color: color-mix(in srgb, var(--bg-surface) 90%, var(--accent-warm) 10%);
  border-color: color-mix(in srgb, rgba(15, 23, 42, 0.10) 50%, var(--accent-warm) 50%);
}

.homeChips__list .chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-warm) 70%, white 30%);
  outline-offset: 3px;
}

html[data-theme="dark"] .homeChips__list .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .homeChips__list .chip:hover,
html[data-theme="dark"] .homeChips__list .chip:focus-visible {
  background: rgba(var(--accent-warm-rgb) / 0.14);
  border-color: rgba(var(--accent-warm-rgb) / 0.42);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .homeChips__list .chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
  }
  html:not([data-theme="light"]) .homeChips__list .chip:hover,
  html:not([data-theme="light"]) .homeChips__list .chip:focus-visible {
    background: rgba(var(--accent-warm-rgb) / 0.14);
    border-color: rgba(var(--accent-warm-rgb) / 0.42);
  }
}


/* =============================================================
   HOME STEPS -- "Como es la primera sesion"
   Arregla tokens rotos (--accent-cool-rgb / --bg-rgb / --text-rgb)
   y mejora numeros con acento warm.
   ============================================================= */

.homeStep {
  background: color-mix(in srgb, var(--bg-surface) 96%, rgb(var(--accent-rgb)) 4%);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .homeStep {
  background: color-mix(in srgb, var(--bg-surface) 90%, rgb(var(--accent-rgb)) 10%);
  border-color: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .homeStep {
    background: color-mix(in srgb, var(--bg-surface) 90%, rgb(var(--accent-rgb)) 10%);
    border-color: rgba(255, 255, 255, 0.10);
  }
}

.homeStep__n {
  background: rgb(var(--accent-warm-rgb) / 0.15);
  border-color: rgb(var(--accent-warm-rgb) / 0.30);
  color: var(--text-main);
}

html[data-theme="dark"] .homeStep__n {
  background: rgb(var(--accent-warm-rgb) / 0.20);
  border-color: rgb(var(--accent-warm-rgb) / 0.40);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .homeStep__n {
    background: rgb(var(--accent-warm-rgb) / 0.20);
    border-color: rgb(var(--accent-warm-rgb) / 0.40);
  }
}


/* =============================================================
   HOME QUOTE -- pull quote
   Borde izquierdo accent-warm, comilla decorativa grande.
   ============================================================= */

.homeQuote {
  margin: 0;
}

.homeQuote blockquote {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.6rem 1.4rem 2rem;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-warm);
  background: rgb(var(--accent-warm-rgb) / 0.04);
  font-size: 1.08rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-main);
}

.homeQuote blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.2rem;
  left: 0.65rem;
  font-size: 3.2rem;
  line-height: 1;
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--accent-warm);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

html[data-theme="dark"] .homeQuote blockquote {
  background: rgb(var(--accent-warm-rgb) / 0.07);
  border-color: rgba(255, 255, 255, 0.10);
  border-left-color: var(--accent-warm);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .homeQuote blockquote {
    background: rgb(var(--accent-warm-rgb) / 0.07);
    border-color: rgba(255, 255, 255, 0.10);
    border-left-color: var(--accent-warm);
  }
}


/* =============================================================
   RITMO TIPOGRAFICO -- headings y lead text en home
   ============================================================= */

.home section > h2 {
  font-size: clamp(1.18rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.homeShortcuts__lead,
.homeChips__lead {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.2rem;
  margin-bottom: 0.85rem;
}


/* =============================================================
   MOTIVES GRID -- indicadores de flecha en "Motivos frecuentes"
   Origen: hotfix-lastminute.css (integrado en T3-B)
   - Flecha visible siempre (movil no tiene hover)
   - Color cambia a warm en modo oscuro
   ============================================================= */

.motivesGrid a::after{
  opacity: .78 !important;
  transform: none !important;
  transition: opacity 140ms ease, transform 140ms ease;
}

.motivesGrid a .motiveArrow,
.motivesGrid a .motivesArrow,
.motivesGrid a .arrow{
  opacity: .78;
  transition: opacity 140ms ease, transform 140ms ease;
}

.motivesGrid a:hover::after{
  opacity: .95 !important;
  transform: translateX(2px) !important;
}

.motivesGrid a:hover .motiveArrow,
.motivesGrid a:hover .motivesArrow,
.motivesGrid a:hover .arrow{
  opacity: .95;
  transform: translateX(2px);
}

.motivesGrid a:focus-visible::after{
  opacity: .95 !important;
  transform: translateX(2px) !important;
}

@media (hover: none){
  .motivesGrid a::after{ opacity: .88 !important; }
  .motivesGrid a .motiveArrow,
  .motivesGrid a .motivesArrow,
  .motivesGrid a .arrow{ opacity: .88; }
}

html[data-theme="light"] .motivesGrid a::after,
html[data-theme="light"] .motivesGrid a .motiveArrow,
html[data-theme="light"] .motivesGrid a .motivesArrow,
html[data-theme="light"] .motivesGrid a .arrow{
  color: var(--accent);
}

html[data-theme="dark"] .motivesGrid a::after,
html[data-theme="dark"] .motivesGrid a .motiveArrow,
html[data-theme="dark"] .motivesGrid a .motivesArrow,
html[data-theme="dark"] .motivesGrid a .arrow{
  color: var(--accent-warm);
}

html[data-theme="auto"] .motivesGrid a::after,
html[data-theme="auto"] .motivesGrid a .motiveArrow,
html[data-theme="auto"] .motivesGrid a .motivesArrow,
html[data-theme="auto"] .motivesGrid a .arrow{
  color: var(--accent);
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .motivesGrid a::after,
  html[data-theme="auto"] .motivesGrid a .motiveArrow,
  html[data-theme="auto"] .motivesGrid a .motivesArrow,
  html[data-theme="auto"] .motivesGrid a .arrow{
    color: var(--accent-warm);
  }
}


/* =============================================================
   MODALITY CARDS -- borde superior de acento (igual que homeShortcut)
   ============================================================= */

.modalityCard {
  border-top: 3px solid var(--accent);
}

.modalityCard:nth-child(even) {
  border-top-color: var(--accent-warm);
}


/* =============================================================
   FAB STACKING -- scrollTop apilado encima de waFab
   Origen: hotfix-lastminute.css (integrado en T3-B)
   Tokens --fab-gap y --fab-size usados en el calc de .scrollTop.
   ============================================================= */

:root{
  --fab-gap: 12px;
  --fab-size: 54px;
}

.scrollTop{
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom) + var(--fab-size) + var(--fab-gap));
  z-index: 50;
}

/* Ocultar ambos FABs cuando el menu movil esta abierto */
.siteNav.is-open ~ .waFab,
.siteNav.is-open ~ .scrollTop{
  opacity: 0;
  pointer-events: none;
}

/* =============================================================
   WAFAB -- posicion, apilado y comportamiento movil
   Origen: hotfix-wafab.css (integrado en T3-C)
   ============================================================= */

:root { --wa-fab-gap: 24px; }

.waFab {
  position: fixed;
  left: auto;
  right: max(var(--wa-fab-gap), env(safe-area-inset-right));
  bottom: max(var(--wa-fab-gap), env(safe-area-inset-bottom));
  z-index: 999;

  /* FAB sólido */
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.20);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.waFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Siempre solo icono — consistente con scroll-top */
.waFab__label { display: none; }

.waFab {
  width: 54px;
  height: 54px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 520px) {
  .waFab {
    width: 52px;
    height: 52px;
  }
}


/* =============================================================
   SOBRE — stat 2006
   ============================================================= */

.sobreStat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--text-muted);
}

.sobreStat__num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-warm);
  flex: 0 0 auto;
}

/* =============================================================
   SOBRE — estilo grid
   ============================================================= */

.sobre-estilo-grid {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.sobreEstilo__label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--accent);
}

.sobre-estilo-grid .card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* =============================================================
   CARD variante fondo calido
   ============================================================= */

.card--warm {
  background: color-mix(in srgb, var(--bg-surface) 94%, var(--accent-warm) 6%);
}

html[data-theme="dark"] .card--warm {
  background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent-warm) 8%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .card--warm {
    background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent-warm) 8%);
  }
}