/* 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)
*/

/* Inter (local) */
@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; /* FIX: era 400 */
  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{
  /* Base palette */
  --bg-page:#f2f4f8;
  --bg-surface:#ffffff;
  --nav-bg:rgba(242,244,248,.9);
  --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%; }

body{
  font-size: clamp(16px, 0.35vw + 15px, 17px);
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65;
  color:var(--text-main);
  background:var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 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:var(--nav-bg);
  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{
  line-height:1.2;
  margin:0 0 0.75rem 0;
  font-weight:600;
}

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; }
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(--bg-surface);
  border:1px solid var(--border-soft);
  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(--bg-surface);
  border:1px solid rgba(15, 23, 42, 0.10);
  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{
  display:inline-block;
  margin:0.5rem 0 1.5rem 0;
  text-decoration:none;
  color:var(--text-muted);
}
.back-link: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;
    --nav-bg:rgba(15,23,42,.92);
    --text-main:#e2e8f0;
    --text-muted:#b6c2d2;
    --border-soft:#1f2a44;

    /* 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;
  --nav-bg:rgba(15,23,42,.92);
  --text-main:#e2e8f0;
  --text-muted:#b6c2d2;
  --border-soft:#1f2a44;

  --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);
}

/* 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; }