/* Colores tomados de lib/design_system/palette.dart (oscuro y claro). */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: local("IBM Plex Sans"), url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: local("IBM Plex Sans SemiBold"), url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  font-display: swap;
  src: local("IBM Plex Sans Bold"), url("fonts/IBMPlexSans-Bold.ttf") format("truetype");
}

/* Oscuro por defecto, sin importar la preferencia del sistema. El claro solo
   se activa con data-theme="light" en <html>. */
:root {
  color-scheme: dark;
  --navy: #0e1220;
  --bg: #141824;
  --card: #1e2433;
  --control: #2a3145;
  --border: #2e364a;
  --accent: #2ed3c6;
  --on-accent: #0e1220;
  --accent-text: #2ed3c6;
  --ok: #3ddb8a;
  --alert: #e0a030;
  --text: #f2f4f8;
  --secondary: #8a93a8;
  --tint-alert: #36322e;
  --grid: rgba(242, 244, 248, 0.04);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --radius: 14px;
  --max: 70rem;
}
:root[data-theme="light"] {
  color-scheme: light;
  --navy: #1e2433;
  --bg: #f3f5f9;
  --card: #ffffff;
  --control: #e3e7f0;
  --border: #c9d0df;
  --accent-text: #00696e;
  --ok: #1b7a46;
  --alert: #8f5b00;
  --text: #141824;
  --secondary: #4a5470;
  --tint-alert: #fbeed0;
  --grid: rgba(20, 24, 36, 0.05);
  --shadow: 0 12px 32px rgba(20, 24, 36, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font: 400 1rem/1.6 "IBM Plex Sans", system-ui, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
a { color: var(--accent-text); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }
.skip {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--card); padding: 0.5rem 1rem; border-radius: 8px; z-index: 20;
}
.skip:focus { left: 0.5rem; }

/* Cabecera */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem; min-height: 4rem;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--text); text-decoration: none; font-weight: 700;
}
.brand img { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
.brand small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--secondary); line-height: 1.2; }
.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav a { color: var(--secondary); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav a:hover { color: var(--text); }
@media (max-width: 40rem) { .nav { display: none; } .site-header .wrap { justify-content: space-between; } }

/* Botones y etiquetas */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.6rem 1.2rem;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  font: 600 0.95rem "IBM Plex Sans", system-ui, sans-serif; text-decoration: none;
}
.btn.primary { background: var(--navy); color: #f2f4f8; border-color: var(--navy); }
.btn[aria-disabled="true"] { opacity: 0.75; cursor: default; }
.btn small { display: block; font-weight: 400; font-size: 0.7rem; opacity: 0.8; line-height: 1.2; }
.tag {
  display: inline-block; padding: 0.3rem 0.8rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--secondary); font-size: 0.8rem;
}
.tag::before { content: "● "; color: var(--accent-text); }

/* Hero */
.hero { padding: 3.5rem 0 4rem; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.hero .wrap > * { min-width: 0; }
@media (max-width: 54rem) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: 2rem; } }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.1; margin: 1rem 0; letter-spacing: -0.02em; }
.lead { font-size: 1.15rem; color: var(--secondary); max-width: 36rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 2rem 0; padding: 0; list-style: none; }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr; } }
.facts li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.facts span { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); }
.facts strong { display: block; font-size: 1.15rem; margin: 0.15rem 0; }
.facts p { margin: 0; font-size: 0.85rem; color: var(--secondary); line-height: 1.4; }
.cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.meta-line { margin: 1.2rem 0 0; font-size: 0.8rem; color: var(--secondary); }

/* Teléfono: réplica en HTML de la pantalla de inicio */
.phone-col { display: flex; justify-content: center; }
.phone {
  width: min(100%, 19rem); border: 9px solid #0b0e18; border-radius: 2.4rem;
  background: #141824; box-shadow: var(--shadow); overflow: hidden;
  color: #f2f4f8; font-size: 0.8rem;
}
.phone .bar { background: #0e1220; display: flex; align-items: center; gap: 0.6rem; padding: 1.4rem 0.9rem 0.7rem; font-weight: 700; font-size: 0.95rem; }
.phone .bar img { width: 1.7rem; height: 1.7rem; border-radius: 6px; }
.phone .screen { padding: 0.5rem 0.6rem 1rem; }
.phone h3 { margin: 0.7rem 0.2rem 0.35rem; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8a93a8; font-weight: 600; }
.phone .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.phone .grid span {
  background: #1e2433; border: 1px solid #2e364a; border-radius: 9px;
  padding: 0.8rem 0.6rem; font-weight: 600;
}

/* Secciones */
section { padding: 3.5rem 0; }
section.alt { background: color-mix(in srgb, var(--card) 55%, transparent); border-block: 1px solid var(--border); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.sub { color: var(--secondary); max-width: 40rem; margin: 0 0 2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.card h4, .card h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.card p { margin: 0; font-size: 0.9rem; color: var(--secondary); line-height: 1.45; }
.group { margin-top: 2rem; }
.group > h3 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 0.7rem; }
.notice {
  background: var(--tint-alert); border: 1px solid var(--alert); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; max-width: 48rem;
}
.notice h2 { font-size: 1.2rem; }
.notice p { margin: 0.3rem 0 0; }

/* Pie */
.site-footer { border-top: 1px solid var(--border); padding: 2rem 0 3rem; color: var(--secondary); font-size: 0.9rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Página de política */
.doc { max-width: 44rem; padding: 2.5rem 1rem 3rem; margin: 0 auto; }
.doc h1 { font-size: 2rem; }
.doc h2 { font-size: 1.15rem; margin-top: 2rem; }
.doc .meta { color: var(--secondary); font-size: 0.9rem; margin-top: -0.4rem; }