/* Sistema de diseño del sitio. Sale de packages/ui/src/tokens/*.ts sin cambiar
   un hexadecimal: el sitio y la app son el mismo sistema.
   Compartido por las tres páginas — una copia por página es como divergen. */

/* ─────────────────────────────────────────────────────────────
   TOKENS — salen de packages/ui/src/tokens/color.ts sin tocar
   un hex. El sitio y la app son el mismo sistema.
   ───────────────────────────────────────────────────────────── */
:root {
  --petroleo-1000: #081113;
  --petroleo-950:  #0B1618;
  --petroleo-900:  #0C2226;
  --petroleo-800:  #132225;
  --petroleo-600:  #26383A;
  --petroleo-500:  #47605F;
  --petroleo-300:  #8AA09E;
  --mineral-050:   #DDE7E5;
  --mineral-100:   #F2F5F4;
  --mineral-200:   #E6EAEA;
  --mineral-300:   #DADFDF;
  --mineral-400:   #C3CDCC;
  --ocre-700:      #8F4711;
  --ocre-600:      #B75E17;
  --ocre-400:      #E08A3C;
  --teal-800:      #0C6E6A;
  --teal-700:      #0F7A76;
  --teal-400:      #3EB3AC;
  --rojo-700:      #A8322A;
  --rojo-400:      #D96A5E;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 72rem;

  /* Semánticos — tema claro por defecto */
  --bg:        var(--mineral-100);
  --surface:   #FFFFFF;
  --sunk:      var(--mineral-200);
  --txt:       var(--petroleo-900);
  --txt-2:     var(--petroleo-500);
  --hairline:  rgba(12, 34, 38, 0.12);
  --strong:    rgba(12, 34, 38, 0.28);
  --energia:   var(--teal-700);
  --consumo:   var(--ocre-700);
  --gasolina:  var(--rojo-700);
  --ring:      var(--teal-700);
  --scrim:     rgba(8, 17, 19, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--petroleo-1000);
    --surface:  var(--petroleo-900);
    --sunk:     var(--petroleo-950);
    --txt:      var(--mineral-100);
    --txt-2:    var(--petroleo-300);
    --hairline: rgba(242, 245, 244, 0.10);
    --strong:   rgba(242, 245, 244, 0.26);
    --energia:  var(--teal-400);
    --consumo:  var(--ocre-400);
    --gasolina: var(--rojo-400);
    --ring:     var(--teal-400);
  }
}

:root[data-theme="dark"] {
  --bg:       var(--petroleo-1000);
  --surface:  var(--petroleo-900);
  --sunk:     var(--petroleo-950);
  --txt:      var(--mineral-100);
  --txt-2:    var(--petroleo-300);
  --hairline: rgba(242, 245, 244, 0.10);
  --strong:   rgba(242, 245, 244, 0.26);
  --energia:  var(--teal-400);
  --consumo:  var(--ocre-400);
  --gasolina: var(--rojo-400);
  --ring:     var(--teal-400);
}

:root[data-theme="light"] {
  --bg:       var(--mineral-100);
  --surface:  #FFFFFF;
  --sunk:     var(--mineral-200);
  --txt:      var(--petroleo-900);
  --txt-2:    var(--petroleo-500);
  --hairline: rgba(12, 34, 38, 0.12);
  --strong:   rgba(12, 34, 38, 0.28);
  --energia:  var(--teal-700);
  --consumo:  var(--ocre-700);
  --gasolina: var(--rojo-700);
  --ring:     var(--teal-700);
}

/* ─────────────────────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .mono {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; max-width: var(--measure); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack   { display: flex; flex-direction: column; }
.gap-2   { gap: .5rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }

/* Eyebrow: numera solo lo que de verdad es una secuencia. Aquí no lo es,
   así que es una etiqueta de sección y no un contador. */
.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* ─────────────────────────────────────────────────────────────
   LA PRIMITIVA DE DATO — la regla del sistema, en la web
   ───────────────────────────────────────────────────────────── */
.dato {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  display: inline-block;
  border-bottom: 2px solid currentColor;
  padding-bottom: .08em;
  line-height: 1.1;
}
.dato--estimado { border-bottom-style: dotted; }
.dato--energia  { color: var(--energia); }
.dato--consumo  { color: var(--consumo); }
.dato--gasolina { color: var(--gasolina); }
.dato--neutro   { color: var(--txt); }

/* El trazo se dibuja al cargar: la medición tomándose. Un solo momento. */
@media (prefers-reduced-motion: no-preference) {
  .hero .dato {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    border-bottom-color: transparent;
    animation: trazo .7s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero .dato--estimado { animation: none; border-bottom-color: currentColor; background-image: none; }
  .hero .cifra-ev  { animation-delay: .25s; }
  .hero .cifra-gas { animation-delay: .45s; }
  @keyframes trazo { to { background-size: 100% 2px; } }
}

/* ─────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
.marca {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
/* El monograma es un activo de marca: NO se recolorea ni cambia con el tema.
   Trae su propio fondo petróleo, igual que el ícono de la app. */
.marca__glifo { width: 26px; height: 26px; flex: none; border-radius: 6px; display: block; }
.nav__links { display: none; gap: 1.35rem; font-size: .875rem; }
.nav__links a { color: var(--txt-2); text-decoration: none; transition: color .18s ease; }
.nav__links a:hover { color: var(--txt); }
@media (min-width: 900px) { .nav__links { display: flex; } }

/* ─────────────────────────────────────────────────────────────
   BOTONES — un solo primario por pantalla
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primario {
  background: var(--energia);
  color: var(--petroleo-1000);
}
.btn--primario:hover { background: color-mix(in srgb, var(--energia) 85%, #FFFFFF); }
.btn--fantasma {
  border-color: var(--strong);
  color: var(--txt);
  background: transparent;
}
.btn--fantasma:hover { border-color: var(--txt); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ─────────────────────────────────────────────────────────────
   SECCIONES
   ───────────────────────────────────────────────────────────── */
section { padding-block: clamp(3.5rem, 9vw, 7rem); }
section + section { border-top: 1px solid var(--hairline); }

.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem); }
.hero h1 {
  font-size: clamp(1.875rem, 5.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 20ch;
}
.hero__lede { font-size: clamp(1.0625rem, 2vw, 1.1875rem); color: var(--txt-2); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

/* ─────────────────────────────────────────────────────────────
   PANEL — el instrumento, no una tarjeta de marketing
   ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.panel__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1.15rem;
  background: var(--sunk);
  border-bottom: 1px solid var(--hairline);
}
.panel__cuerpo { padding: 1.35rem 1.15rem; display: flex; flex-direction: column; gap: 1.35rem; }
.panel__pie {
  padding: .85rem 1.15rem;
  border-top: 1px solid var(--hairline);
  font-size: .8125rem;
  color: var(--txt-2);
}

.fila { display: flex; flex-direction: column; gap: .3rem; }
.fila__etq {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.fila__cifra { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.fila__cifra .dato { font-size: clamp(1.75rem, 5vw, 2.35rem); }
.fila__u { font-family: var(--mono); font-size: .875rem; color: var(--txt-2); }
.fila__nota { font-size: .8125rem; color: var(--txt-2); }

.regla { height: 1px; background: var(--hairline); }

.veredicto {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: .2rem;
}
.veredicto .dato { font-size: clamp(2.25rem, 6vw, 3rem); }
.veredicto__txt { font-size: .9375rem; color: var(--txt-2); }

/* Leyenda de la convención */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: .8125rem;
  color: var(--txt-2);
}
.leyenda__it { display: inline-flex; align-items: center; gap: .5rem; }
.leyenda__muestra { width: 26px; height: 0; border-bottom: 2px solid var(--txt-2); }
.leyenda__muestra--est { border-bottom-style: dotted; }

/* ─────────────────────────────────────────────────────────────
   IMÁGENES

   Van a sangre, fuera de `.wrap`: una foto de campaña metida dentro
   del contenedor se lee como ilustración de un artículo, y a ancho
   completo se lee como campaña.

   El `aspect-ratio` reserva el sitio ANTES de que la imagen llegue —
   es la mitad del presupuesto de CLS. Cada `<img>` lleva además su
   `width` y `height` reales por si el CSS tarda.
   ───────────────────────────────────────────────────────────── */
.banda { margin: 0; width: 100%; overflow: hidden; border-block: 1px solid var(--hairline); }
.banda img { display: block; width: 100%; height: auto; }
.banda--alta img { aspect-ratio: 16 / 9; object-fit: cover; }

.foto { margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--hairline); }
.foto img { display: block; width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────
   REJILLAS
   ───────────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
@media (min-width: 640px) { .rejilla--2, .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.celda {
  background: var(--surface);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.celda__icono { width: 24px; height: 24px; color: var(--energia); }
.celda h3 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.celda p { font-size: .9375rem; color: var(--txt-2); }

/* Comparación estrato — barras honestas, no decorativas */
/* El valor va en su propia columna, no flotando junto a la barra: colgado del
   extremo se salía de la pantalla en 375 px, y ahí el signo lo dice la barra. */
.estratos { display: flex; flex-direction: column; gap: 1.1rem; }
.estrato {
  display: grid;
  grid-template-columns: clamp(4.5rem, 17vw, 6.5rem) 1fr clamp(4rem, 15vw, 5rem);
  gap: .7rem;
  align-items: center;
}
.estrato__etq { font-family: var(--mono); font-size: .8125rem; color: var(--txt-2); }
.estrato__pista { position: relative; height: 30px; background: var(--sunk); border-radius: 3px; }
.estrato__cero { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--strong); }
.estrato__barra { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; }
.estrato__val {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Lista de hechos */
.hechos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.hechos li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; color: var(--txt-2); max-width: var(--measure); }
.hechos svg { width: 18px; height: 18px; color: var(--energia); flex: none; margin-top: .22rem; }
.hechos strong { color: var(--txt); font-weight: 600; }

/* Bloque B2B, deliberadamente sobrio */
.b2b { background: var(--sunk); }
.b2b .panel { background: var(--surface); }

/* Tabla de datos públicos */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--surface); }
caption { text-align: left; padding: .9rem 1.1rem; font-size: .8125rem; color: var(--txt-2); border-bottom: 1px solid var(--hairline); }
th, td { text-align: left; padding: .7rem 1.1rem; font-size: .875rem; border-bottom: 1px solid var(--hairline); }
th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); font-weight: 500; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
tbody tr:last-child td { border-bottom: 0; }

/* ─────────────────────────────────────────────────────────────
   FORMULARIO — el llamado principal mientras la tienda no exista
   ───────────────────────────────────────────────────────────── */
.pioneros { background: var(--sunk); }
.pioneros__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .pioneros__grid { grid-template-columns: 1fr 1fr; } }

.forma { display: flex; flex-direction: column; gap: 1.15rem; }

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo__etq {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.campo__req { color: var(--energia); }
.campo__ayuda { font-size: .8125rem; color: var(--txt-2); }

/* El error va DEBAJO del campo que falla, y dice qué hacer. Vacío no ocupa. */
.campo__error { font-size: .8125rem; color: var(--gasolina); }
.campo__error:empty { display: none; }
.forma [aria-invalid="true"] { border-color: var(--gasolina); }

/* 1rem exacto: por debajo de 16 px iOS hace zoom al enfocar el campo. */
.forma input[type="text"],
.forma input[type="email"],
.forma input[type="tel"],
.forma select {
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--strong);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .18s ease;
}
.forma input::placeholder { color: var(--txt-2); opacity: .75; }
.forma input:hover, .forma select:hover { border-color: var(--txt-2); }

/* Segmentado: radios de verdad, pintados como opciones */
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { position: relative; }
.opcion input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--txt-2);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.opcion input:checked + span {
  border-color: var(--energia);
  color: var(--energia);
  background: color-mix(in srgb, var(--energia) 10%, transparent);
}
.opcion input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }

.consentimiento { display: flex; gap: .7rem; align-items: flex-start; }
.consentimiento input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: .2rem 0 0;
  accent-color: var(--energia);
  cursor: pointer;
}
.consentimiento label { font-size: .8125rem; color: var(--txt-2); }
.consentimiento a { color: var(--energia); }

.forma__enviado {
  display: none;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  border: 1px solid var(--energia);
  border-radius: 4px;
  background: color-mix(in srgb, var(--energia) 8%, transparent);
}
.forma__enviado svg { width: 26px; height: 26px; color: var(--energia); }
/* El atributo vive en el <form>, que lleva la clase .panel; .forma es el cuerpo
   de dentro. Anclar el selector en .forma no casaba nunca. */
[data-enviado] .forma__campos { display: none; }
[data-enviado="si"] .forma__enviado { display: flex; }

/* Estado de prototipo: cuando ENDPOINT está vacío no se envió nada, y decirlo
   es obligatorio. Un «cupo reservado» sobre un envío que no ocurrió es
   exactamente la clase de afirmación falsa que este producto borra en el resto
   de sus pantallas — y ya engañó una vez, que es la prueba de que estaba mal. */
.forma__prototipo {
  display: none;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  border: 1px dashed var(--consumo);
  border-radius: 4px;
}
.forma__prototipo svg { width: 26px; height: 26px; color: var(--consumo); }
[data-enviado="prototipo"] .forma__prototipo { display: flex; }

/* Tiendas: sin insignias oficiales — esas tienen su propio kit y sus reglas */
.tiendas { display: flex; flex-wrap: wrap; gap: .6rem; }
.tienda {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border: 1px dashed var(--strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--txt-2);
}
.tienda svg { width: 17px; height: 17px; flex: none; }
.tienda em { font-style: normal; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* CTA final */
.cierre { text-align: center; }
.cierre h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.08; margin-inline: auto; max-width: 20ch; }
.cierre p { margin-inline: auto; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* Pie */
footer { border-top: 1px solid var(--hairline); padding-block: 3rem; font-size: .875rem; color: var(--txt-2); }
.pie__grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__col { display: flex; flex-direction: column; gap: .55rem; }
.pie__col h4 { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-2); margin: 0 0 .25rem; font-weight: 500; }
.pie__col a { color: var(--txt-2); text-decoration: none; }
.pie__col a:hover { color: var(--txt); text-decoration: underline; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: .8125rem; }

/* Aviso de estado — honesto sobre que aún no se publica */
.aviso {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border: 1px solid var(--strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--txt-2);
  align-self: flex-start;
}
.aviso__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--energia); flex: none; }

/* ─────────────────────────────────────────────────────────────
   PÁGINAS DE TEXTO — política y borrado de cuenta

   Son documentos, no pantallas: la medida manda sobre todo lo
   demás. 65 caracteres por línea es lo que se lee sin perder el
   renglón, y en un texto legal eso no es estética.
   ───────────────────────────────────────────────────────────── */
.doc { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3.5rem, 9vw, 6rem); }
.doc__cuerpo { max-width: 40rem; }

.doc h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: .75rem;
}
.doc h2 {
  font-size: clamp(1.125rem, 3vw, 1.375rem);
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.doc h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
  color: var(--energia);
}
.doc p { margin-bottom: 1rem; max-width: none; }
.doc ul { margin: 0 0 1.25rem; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.doc li { padding-left: .15rem; }
.doc li::marker { color: var(--txt-2); }
.doc strong { color: var(--txt); }
.doc a { color: var(--energia); }

/* El resumen de arriba: lo que alguien lee si no lee nada más. */
.doc__resumen {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--energia);
  border-radius: 4px;
  background: var(--surface);
  padding: 1.25rem 1.35rem;
  margin-block: 2rem;
}
.doc__resumen ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.doc__resumen li::marker { font-family: var(--mono); color: var(--energia); }

.doc__meta {
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--txt-2);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}

/* Ficha del responsable: es lo primero que comprueba quien revisa. */
.doc__responsable {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1.15rem 1.35rem;
  background: var(--sunk);
  margin-block: 1.5rem;
  font-size: .9375rem;
}
.doc__responsable p { margin-bottom: .35rem; }
.doc__responsable p:last-child { margin-bottom: 0; }

/* Aviso fuerte: solo para lo irreversible. */
.doc__critico {
  border: 1px solid var(--gasolina);
  border-radius: 4px;
  padding: 1.15rem 1.35rem;
  margin-block: 1.75rem;
  background: color-mix(in srgb, var(--gasolina) 7%, transparent);
}
.doc__critico p:last-child { margin-bottom: 0; }

/* Los dos caminos para borrar la cuenta. */
.pasos { list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: 1rem; }
.pasos li { display: flex; gap: .85rem; align-items: flex-start; }
.pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--strong);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--txt-2);
  margin-top: .1rem;
}

/* ─────────────────────────────────────────────────────────────
   INTERRUPTOR DE TEMA — solo en la portada

   La portada llega en oscuro aunque el sistema esté en claro: es
   sobre el petróleo donde los subrayados y las cifras en mono se
   leen como instrumento, y eso es lo que la marca dice ser.
   Pero es una preferencia, no una imposición — el visitante la
   cambia y se recuerda.

   Las páginas legales NO llevan interruptor y siguen al sistema:
   son texto largo, se leen enteras, y ahí pesa más la comodidad
   de quien lee que la voz de quien escribe.
   ───────────────────────────────────────────────────────────── */
.tema {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--strong);
  border-radius: 4px;
  background: transparent;
  color: var(--txt-2);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.tema:hover { color: var(--txt); border-color: var(--txt); }
.tema svg { width: 18px; height: 18px; }

/* Se enseña el destino, no el estado: en oscuro el sol, que es a
   dónde lleva pulsarlo. */
.tema__sol { display: none; }
:root[data-theme="dark"] .tema__sol  { display: block; }
:root[data-theme="dark"] .tema__luna { display: none; }