/* =====================================================
   Papeleo  ·  Diseño "Trámite claro"
   Blanco con azul muy tenue, violeta de marca en degradado, menta para lo
   confirmado y ámbar para lo que no se pudo confirmar.

   QUÉ CAMBIÓ Y POR QUÉ (agosto de 2026)
   Antes esto era "Papel y sello": papel hueso, tinta verde petróleo y naranja de
   sello de goma. Se cambió a la paleta del taller —la misma familia visual de
   Cocuyo y Botica— para que los tres proyectos se reconozcan como hechos por la
   misma mano. La copia de la versión anterior está en `papeleo-original.css`.

   Lo que NO cambió, porque no es estilo sino producto:
   - El fondo sigue claro. Esto se lee de día, en la calle, haciendo una fila, en
     teléfonos baratos y a veces con el brillo al mínimo. Un fondo oscuro con sol
     encima no se ve. Hay modo oscuro más abajo porque medio país revisa trámites
     de noche en la cama, pero el claro manda.
   - Las áreas tocables siguen en 48 px mínimo: esto se usa de pie y con una mano.
   - "Dato oficial" y "De referencia" siguen viéndose distinto de un vistazo. Es la
     pieza que sostiene la confianza en todo lo demás.

   PALETA: para cambiarla, edita solo las variables de :root
   ===================================================== */
:root {
  /* — Superficies, de la más honda a la que flota — */
  --papel:        #F4F5F7;   /* base de la página */
  --papel-hondo:  #ECEEF2;   /* secciones hundidas, el pie */
  --papel-alto:   #FFFFFF;   /* tarjetas, lo que flota */
  --papel-borde:  #E6E8EC;

  /* — Tinta (texto) — */
  --tinta:        #16181D;
  --tinta-media:  #5A6070;
  --tinta-suave:  #8A90A0;

  /* — Marca: el verde de «Servicios para RD», la familia de esta app — */
  --sello:        #35A96B;
  --sello-vivo:   #3FBD79;
  --sello-hondo:  #298252;   /* el verde COMO TEXTO: pasa 4.5:1 sobre blanco */
  --sello-tenue:  rgba(53, 169, 107, 0.10);
  --degradado:    linear-gradient(135deg, #298252 0%, #1F6B44 100%);

  /* — Señales de estado —
     El verde de «confirmado» es el MISMO de la marca a propósito: dos verdes
     distintos en la misma pantalla no se leen como dos significados, se leen
     como un error de color. El ámbar sigue siendo el de «sin confirmar». */
  --verde:        #298252;
  --verde-tenue:  rgba(53, 169, 107, 0.12);
  --ambar:        #b06d05;   /* sin confirmar, ojo con esto */
  --ambar-tenue:  rgba(176, 109, 5, 0.11);

  /* — Tipografía — */
  --letra-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-texto:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Medidas —
     Los radios subieron a 26 px (rediseño claymorphism, agosto de 2026): es la
     medida que pide la fórmula de arcilla del skill `estilo-daia`. Por debajo de
     ~20 px una tarjeta blanca sobre fondo claro se lee como una caja de
     formulario y el conjunto pierde la suavidad. */
  --radio:      26px;
  --radio-chico: 16px;
  --ancho:      68rem;   /* ancho máximo del contenido */
  --ancho-texto: 44rem;  /* ancho de lectura cómoda */

  /*
   * Claymorphism (rediseño de Daia, agosto de 2026). Tres capas por token:
   *
   *   1. Una sombra de CONTACTO de 1-2 px. Es la que dibuja el canto. Sin ella
   *      un botón blanco sobre este fondo casi blanco se desdibuja y deja de
   *      leerse como algo que se puede tocar — pasó exactamente eso con la
   *      primera versión de esta fórmula, que solo tenía la difusa.
   *   2. Una sombra ancha y desplazada, que es la que lo despega del papel.
   *   3. Una interna oscura en el borde de abajo: el canto inferior de la pieza
   *      de arcilla, lo que le da grosor.
   *
   * NO lleva luz interna blanca. Sobre una tarjeta blanca no aporta volumen —
   * blanco sobre blanco no se ve— y lo único que deja es un velo lechoso.
   *
   * Teñido de violeta y no de negro: una sombra gris pura ensucia el blanco.
   * `--sombra-hundida` es el estado AL presionar: la arcilla cede.
   *
   * `.aviso`/`.alerta` NO usan estas variables a propósito: los avisos de "sin
   * confirmar" se quedan planos, sin relieve, para no competir con el color de
   * advertencia. Ver la nota en la sección de avisos, más abajo.
   */
  --sombra:      0 1px 2px rgba(22, 24, 29, 0.06), 0 12px 26px -14px rgba(22, 24, 29, 0.22), inset 0 -7px 14px rgba(22, 24, 29, 0.035);
  --sombra-alta: 0 2px 4px rgba(22, 24, 29, 0.08), 0 22px 44px -18px rgba(22, 24, 29, 0.30), inset 0 -9px 18px rgba(22, 24, 29, 0.05);
  --sombra-marca: 0 8px 22px -8px rgba(41, 130, 82, 0.5);
  --sombra-hundida: 0 8px 16px -10px rgba(22, 24, 29, 0.2), inset 4px 4px 10px rgba(22, 24, 29, 0.14), inset -2px -2px 6px rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:       #0E0F13;
    --papel-hondo: #08090C;
    --papel-alto:  #16181D;
    --papel-borde: #24262E;
    --tinta:       #F2F3F6;
    --tinta-media: #A3A9B8;
    --tinta-suave: #767C8C;
    --sello:       #35A96B;
    --sello-vivo:  #4FC286;
    --sello-hondo: #4FC286;   /* sobre fondo oscuro el verde de texto sube, no baja */
    --sello-tenue: rgba(53, 169, 107, 0.16);
    --verde:       #4FC286;
    --verde-tenue: rgba(53, 169, 107, 0.16);
    --ambar:       #fbbf24;
    --ambar-tenue: rgba(251, 191, 36, 0.14);
    --sombra:      0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 26px -14px rgba(0, 0, 0, 0.7), inset 0 -7px 14px rgba(0, 0, 0, 0.3), inset 0 7px 14px rgba(255, 255, 255, 0.035);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.55), 0 22px 44px -18px rgba(0, 0, 0, 0.75), inset 0 -9px 18px rgba(0, 0, 0, 0.35), inset 0 9px 18px rgba(255, 255, 255, 0.045);
    --sombra-marca: 0 8px 22px -8px rgba(41, 130, 82, 0.6);
    --sombra-hundida: 0 8px 16px -10px rgba(0, 0, 0, 0.55), inset 4px 4px 10px rgba(0, 0, 0, 0.4), inset -2px -2px 6px rgba(255, 255, 255, 0.06);
  }
}

/* ---------- Tipografías, servidas desde el propio sitio ----------
   No van desde Google Fonts. Dos razones: una petición menos a un tercero que ve
   la IP de cada visitante, y sobre todo velocidad — este sitio se abre desde
   Google con datos móviles contados, y una hoja de estilos de otro dominio añade
   una conexión nueva antes de poder pintar una sola letra.

   La carpeta se llama `tipografias/` y no `fuentes/` porque `/fuentes/` ya es una
   PÁGINA del sitio (de dónde sale cada dato). Dos cosas distintas con el mismo
   nombre en la misma raíz: la carpeta se comería la página. */
@font-face {
  font-family: "Outfit";
  src: url("/tipografias/outfit.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/tipografias/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--letra-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.2rem; margin-top: 1.6em; }

p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }

a { color: var(--sello-hondo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sello); }

@media (prefers-color-scheme: dark) { a { color: var(--sello); } }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.15rem; }
.columna-texto { max-width: var(--ancho-texto); }

/* Saltar al contenido: sin esto, quien navega con teclado se come el menú entero
   en cada página. */
.saltar {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: 0.7rem 1.1rem; border-radius: var(--radio-chico); z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2.5px solid var(--sello); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cabecera ---------- */
.cabecera {
  border-bottom: 1px solid var(--papel-borde);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.cabecera__fila {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--letra-titulo); font-size: 1.32rem; font-weight: 700;
  color: var(--tinta); text-decoration: none; letter-spacing: -0.03em;
}
.marca:hover { color: var(--tinta); }
/* El logo va dentro de una pastilla del color de la familia: es la única pieza de
   la página que lo lleva a pleno, y por eso funciona como firma. Si hubiera dos o
   tres, el ojo no sabría cuál mirar.

   El monito va apoyado en el borde de abajo y no centrado: así se le ve la cara
   entera dentro de un cuadrado pequeño. */
.marca__pastilla {
  display: flex; align-items: flex-end; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; overflow: hidden;
  background: var(--verde-tenue);
  box-shadow: inset 0 -3px 8px rgba(22, 24, 29, 0.06);
  flex-shrink: 0;
}
.marca__pastilla img { width: 34px; height: auto; margin-bottom: -1px; }

.menu { display: flex; gap: 0.35rem; margin-left: auto; font-size: 0.95rem; }
.menu a {
  color: var(--tinta-media); text-decoration: none; font-weight: 500;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  transition: background 0.14s, color 0.14s;
}
.menu a:hover { color: var(--sello-hondo); background: var(--sello-tenue); }
.menu a[aria-current="page"] { color: var(--sello-hondo); background: var(--sello-tenue); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .menu a:hover, .menu a[aria-current="page"] { color: var(--sello); }
}
/* En el teléfono la cabecera va justa de ancho: el logo, el nombre y tres
   enlaces. Con «Papeleo» cabía; con «PapeleosRD» (28 de agosto de 2026) se
   salía por la derecha y la página entera se podía arrastrar de lado — lo cazó
   la prueba de desborde. Por eso aquí el nombre se esconde y queda solo el
   logo: en una pantalla de 390 px, el nombre del sitio ya está en la pestaña y
   en el titular, y el sitio de verdad es el menú. */
@media (max-width: 34rem) {
  .cabecera__fila { min-height: 60px; gap: 0.5rem; }
  .menu { gap: 0.1rem; font-size: 0.875rem; }
  .menu a { padding: 0.4rem 0.55rem; }
  .marca { font-size: 0; gap: 0; }
  .marca svg { width: 30px; height: 30px; }
}

/* ---------- Migas de pan ---------- */
.migas {
  font-size: 0.875rem; color: var(--tinta-suave);
  padding: 1.1rem 0 0; margin: 0;
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.migas li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--papel-borde); }
.migas a { color: var(--tinta-media); text-decoration: none; }
.migas a:hover { color: var(--sello); text-decoration: underline; }

/* ---------- El sello: la pieza de marca ----------
   Antes era un recuadro girado, como un sello de goma mal puesto. Ahora es una
   pastilla limpia con el fondo teñido de su color, que es el idioma del estilo
   nuevo. Lo que NO se tocó es lo que hace el trabajo: verde para lo transcrito de
   la institución, ámbar para lo que no se pudo confirmar, y punteado para el
   catálogo. Tienen que distinguirse de un vistazo y sin leer, porque de eso
   depende que alguien salga de su casa con los papeles correctos. */
.sello {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--letra-texto);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.34rem 0.75rem;
  border: 1.5px solid currentColor; border-radius: 999px;
  white-space: nowrap;
}
.sello--oficial     { color: var(--verde); background: var(--verde-tenue); }
.sello--referencial { color: var(--ambar); background: var(--ambar-tenue); }
.sello--catalogo    { color: var(--tinta-suave); background: transparent;
                      border-width: 1.5px; border-style: dashed; }

/* ---------- Portada del trámite ---------- */
.portada { padding: 0.5rem 0 1.5rem; }

/* ---------- La portada del inicio, con el degradado de marca ----------
   Solo la lleva la página de inicio. A las fichas de trámite se llega desde Google
   buscando "requisitos pasaporte", y ahí lo primero tiene que ser el requisito, no
   una banda de color. */
.portada--marca {
  position: relative;
  margin: 0 -1.15rem 1.8rem;
  padding: 2.8rem 1.15rem 2rem;
  background: var(--degradado);
  border-radius: 0 0 var(--radio) var(--radio);
  color: #fff;
  overflow: hidden;
}
/* Un círculo enorme y casi transparente rompe el degradado plano. Sin él, la banda
   se ve como un bloque de color de plantilla. */
.portada--marca::after {
  content: ""; position: absolute; right: -100px; top: -140px;
  width: 340px; height: 340px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); pointer-events: none;
}
.portada--marca > * { position: relative; }
.portada--marca h1 { color: #fff; margin-bottom: 0.3em; }
.portada--marca .portada__resumen { color: rgba(255, 255, 255, 0.88); }

/* El monito de «Servicios para RD» (28 de agosto de 2026). Antes había aquí un
   icono 3D de carpeta; ahora va el personaje de la familia, el mismo que en
   Cocuyo, la Guagua y Boticard.

   NO PUEDE IR DETRÁS DE LAS CIFRAS
   Las cifras son cristal: llevan `backdrop-filter: blur(6px)` y desenfocan lo que
   tengan detrás. En Boticard, con el monito en la esquina de abajo, la cara salía
   como una mancha gris — no dio ningún error, se vio mirando la captura. Por eso
   hay dos colocaciones: en el teléfono va arriba y centrado, donde no hay nada
   encima; en pantalla ancha se va a la derecha y la portada le reserva esa
   columna con `padding-right`.

   La sombra va con `drop-shadow` y no con `box-shadow`: el PNG es transparente y
   un box-shadow le dibujaría un rectángulo alrededor del aire. */
.portada__ilustracion {
  display: block; width: 6.5rem; height: auto;
  margin: 0 auto 0.8rem; pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
}
@media (min-width: 52rem) {
  .portada__ilustracion {
    position: absolute; right: 1.2rem; bottom: -1.2rem;
    width: 12.5rem; margin: 0;
  }
}

.portada__cifras {
  display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr);
  margin: 1.7rem 0 1.6rem; max-width: 34rem;
}
.cifra {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radio-chico); padding: 0.85rem 0.95rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cifra__numero {
  display: block; font-family: var(--letra-titulo); color: #fff;
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.cifra__etiqueta {
  display: block; margin-top: 0.35rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); line-height: 1.35;
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }

@media (min-width: 52rem) {
  /* El `padding-right` grande es la columna que se le reserva al monito. */
  .portada--marca { margin-left: 0; margin-right: 0; border-radius: var(--radio); padding: 3.4rem 15rem 2.4rem 2.6rem; }
}
@media (max-width: 30rem) {
  .portada__cifras { grid-template-columns: 1fr; }
  .cifra { display: flex; align-items: baseline; gap: 0.7rem; }
  .cifra__numero { font-size: 1.6rem; }
  .cifra__etiqueta { margin-top: 0; }
}
.portada__sellos { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.1rem; }
.portada h1 { margin-bottom: 0.35em; }
.portada__resumen {
  font-size: 1.2rem; line-height: 1.5; color: var(--tinta-media);
  max-width: var(--ancho-texto); margin-bottom: 1.4rem;
}

/* Tarjetas de dato duro: costo, tiempo, vigencia, dónde */
.datos-clave {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0 0 2rem;
}
.dato {
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 1.05rem 1.15rem;
  box-shadow: var(--sombra);
}
.dato__etiqueta {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-suave);
  margin: 0 0 0.35rem; display: block;
}
/* La cifra va grande y apretada: es el dato por el que la gente entró. `tabular-nums`
   evita que RD$1,650 y RD$650 bailen de ancho entre una tarjeta y otra. */
.dato__valor {
  font-family: var(--letra-titulo); font-size: 1.7rem; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.03em; margin: 0; display: block;
  font-variant-numeric: tabular-nums;
}
.dato__valor--sin { color: var(--ambar); font-size: 1.15rem; letter-spacing: 0; }
.dato__nota { font-size: 0.82rem; color: var(--tinta-suave); margin: 0.4rem 0 0; line-height: 1.45; }

/* ---------- Lista de chequeo ---------- */
.chequeo { margin: 0; padding: 0; list-style: none; }
.chequeo__pieza {
  background: var(--papel-alto);
  border-radius: var(--radio); margin-bottom: 0.7rem; overflow: hidden;
  box-shadow: var(--sombra);
  transition: border-color 0.15s, background 0.15s;
}
.chequeo__pieza:has(input:checked) { background: var(--verde-tenue); border-color: transparent; box-shadow: none; }

/* El área tocable entera es la etiqueta: esto se usa con una mano, caminando. */
.chequeo__marca {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.15rem; cursor: pointer; min-height: 48px;
}
.chequeo__marca input {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex-shrink: 0; margin: 0.15rem 0 0;
  border: 2px solid var(--tinta-suave); border-radius: 8px;
  background: var(--papel-alto); cursor: pointer;
  display: grid; place-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.chequeo__marca input::after {
  content: ""; width: 12px; height: 7px;
  border-left: 2.5px solid var(--papel-alto); border-bottom: 2.5px solid var(--papel-alto);
  transform: rotate(-45deg) translate(1px, -2px) scale(0);
  transition: transform 0.15s;
}
.chequeo__marca input:checked { background: var(--verde); border-color: var(--verde); }
.chequeo__marca input:checked::after { transform: rotate(-45deg) translate(1px, -2px) scale(1); }
.chequeo__pieza:has(input:checked) .chequeo__que { text-decoration: line-through; color: var(--tinta-suave); }

.chequeo__cuerpo { flex: 1; min-width: 0; }
.chequeo__que { font-weight: 600; display: block; }
.chequeo__detalle { font-size: 0.92rem; color: var(--tinta-media); margin: 0.3rem 0 0; }
.chequeo__marcas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }

.marquita {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  background: var(--papel-hondo); color: var(--tinta-media);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.marquita--opcional { background: var(--papel-hondo); color: var(--tinta-suave); }
.marquita--condicional { background: var(--ambar-tenue); color: var(--ambar); }
.marquita--previo { background: var(--sello-tenue); color: var(--sello-hondo); }
.marquita--previo a { color: inherit; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .marquita--previo { color: var(--sello); }
}

/* Barra de progreso: "te faltan 2 de 5" + el total a pagar */
.marcador {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--papel-alto);
  border: 1px solid var(--papel-borde); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 0.9rem 1.2rem; margin: 1.2rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem;
}
.marcador__texto { font-weight: 600; }
.marcador__total { margin-left: auto; font-family: var(--letra-titulo); font-size: 1.4rem;
                   font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.marcador__total small { font-family: var(--letra-texto); font-size: 0.7rem; font-weight: 600;
                         color: var(--tinta-suave); display: block; letter-spacing: 0.06em;
                         text-transform: uppercase; }
.marcador--completo { background: var(--verde-tenue); border-color: transparent; }
/* Cuando ya no falta ningún papel sale el monito con el pulgar arriba: es el único
   momento de la ficha en que hay algo que celebrar.

   VA AL LADO DEL TEXTO Y NO ENCIMA, Y ESO SE PROBÓ
   El marcador es una barra `sticky` pegada al borde de abajo. Con el monito como
   bloque encima, la barra crecía hacia arriba y el dibujo se comía el último papel
   de la lista — justo el que la persona acaba de marcar. En línea, la barra crece
   lo mismo que la altura del monito y no tapa nada. */
.marcador--completo::before {
  content: "";
  /* `inline-block` y no `inline` ni `block`.
     Con `inline` -que es lo que sale por defecto- el ancho y el alto se ignoran y no se
     pinta nada: se veia la barra vacia. Con `block` se pone ENCIMA del texto y la barra
     crece a lo alto, que en una barra pegada al borde de abajo tapa el ultimo papel de
     la lista. `inline-block` lo deja al lado, y la barra crece lo justo. */
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.55rem;
  width: 42px; height: 40px;
  background: url("/imagenes/monito/exito.png") no-repeat bottom center / contain;
}
.marcador[hidden] { display: none; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 1.5rem 3.1rem; margin: 0;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -1px;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--degradado); color: #fff;
  display: grid; place-content: center;
  font-family: var(--letra-titulo);
  font-size: 0.92rem; font-weight: 700;
  box-shadow: var(--sombra-marca);
}
/* La línea que une los pasos; el último no la lleva. */
.pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.05rem - 1px); top: 2.45rem; bottom: 0.3rem;
  width: 2px; background: var(--papel-borde);
}
.pasos__titulo { font-weight: 600; display: block; }
.pasos__detalle { color: var(--tinta-media); margin: 0.25rem 0 0; font-size: 0.96rem; }

/* ---------- Avisos ---------- */
.aviso {
  border-left: 3px solid var(--ambar); background: var(--ambar-tenue);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  padding: 0.9rem 1.15rem; margin: 0 0 0.7rem;
  font-size: 0.96rem;
}
.aviso--fuerte { border-color: var(--sello); background: var(--sello-tenue); }
.aviso--calmo  { border-color: var(--papel-borde); background: var(--papel-hondo); color: var(--tinta-media); }
.aviso p:last-child { margin-bottom: 0; }

/* ---------- Preguntas frecuentes ---------- */
.pregunta {
  border-bottom: 1px solid var(--papel-borde);
  padding: 0.2rem 0;
}
.pregunta summary {
  cursor: pointer; padding: 0.9rem 0; font-weight: 600;
  list-style: none; display: flex; gap: 0.75rem; align-items: flex-start;
  min-height: 48px; align-content: center;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::before {
  content: "+"; color: var(--sello); font-size: 1.3rem; line-height: 1.1;
  flex-shrink: 0; width: 1rem;
}
.pregunta[open] summary::before { content: "\2212"; }
.pregunta__respuesta { padding: 0 0 1rem 1.75rem; color: var(--tinta-media); }
.pregunta__respuesta p:last-child { margin-bottom: 0; }

/* ---------- Ficha de verificación ---------- */
/* Va HUNDIDA, no levantada: es la ficha de "de dónde salió esto", que se
   consulta, no se toca. La sombra hacia dentro la separa de las tarjetas de
   arriba sin competir con ellas. */
.verificacion {
  background: var(--papel-hondo);
  border-radius: var(--radio); padding: 1.2rem 1.35rem; margin: 2.5rem 0 0;
  font-size: 0.92rem;
  box-shadow: inset 0 2px 8px rgba(91, 75, 240, 0.10);
}
.verificacion h2 { font-size: 0.95rem; margin: 0 0 0.6rem; font-family: var(--letra-texto);
                   text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }
.verificacion ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.verificacion li { margin-bottom: 0.35rem; }

/* ---------- Tarjetas de trámite (índice) ---------- */
.rejilla {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.tarjeta {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 1.25rem 1.3rem;
  text-decoration: none; color: inherit; height: 100%;
  box-shadow: var(--sombra);
  transition: transform 0.16s, box-shadow 0.16s;
}
/* Al pasar por encima sube y la sombra crece. Antes tambien se le encendia el
   borde de violeta, pero la arcilla ya no lleva borde: lo que dice "esto se
   puede tocar" es que la pieza se levanta del papel. */
.tarjeta:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-alta); color: inherit;
}
.tarjeta:active { transform: translateY(1px) scale(0.99); box-shadow: var(--sombra-hundida); }
.tarjeta__nombre { font-family: var(--letra-titulo); font-size: 1.2rem; font-weight: 700;
                   line-height: 1.25; letter-spacing: -0.02em; }
.tarjeta__resumen { font-size: 0.92rem; color: var(--tinta-media); margin: 0; flex: 1; }
.tarjeta__pie {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding-top: 0.7rem; border-top: 1px solid var(--papel-borde); margin-top: 0.2rem;
}
.tarjeta__costo { font-family: var(--letra-titulo); font-size: 1.25rem; font-weight: 700;
                  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tarjeta__costo--sin { font-size: 0.85rem; color: var(--ambar); font-family: var(--letra-texto);
                       font-weight: 600; letter-spacing: 0; }
.tarjeta__institucion { font-size: 0.78rem; color: var(--tinta-suave); text-align: right; }

/* ---------- Buscador ---------- */
.buscador { margin: 1.5rem 0; position: relative; }
.buscador input {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: 0.9rem 1rem 0.9rem 3rem; min-height: 56px;
  background: var(--papel-alto); color: var(--tinta);
  border: 1.5px solid var(--papel-borde); border-radius: 999px;
  box-shadow: var(--sombra);
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:focus { border-color: var(--sello); outline: none;
                        box-shadow: 0 0 0 4px var(--sello-tenue); }
.buscador svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
                color: var(--sello); pointer-events: none; }
.buscador__conteo { font-size: 0.88rem; color: var(--tinta-suave); margin: 0.6rem 0 0; padding-left: 0.4rem; }

/* ---------- Tabla de servicios del catálogo ---------- */
.tabla-envoltura { overflow-x: auto; margin: 1.2rem 0; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 34rem; }
.tabla th, .tabla td { text-align: left; padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--papel-borde); }
.tabla th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
            color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }
.tabla tbody tr:hover { background: var(--papel-hondo); }
.tabla td:first-child { font-weight: 500; }
.tabla__costo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla__sin { color: var(--tinta-suave); font-size: 0.86rem; }

/* En el teléfono la tabla se apila.
   Con cuatro columnas en 390 px de ancho pasaba esto: el nombre larguísimo de la
   institución ("Instituto Nacional de Tránsito y Transporte Terrestre") se partía en
   cinco líneas y empujaba el COSTO y el TIEMPO fuera de la pantalla — justo los dos
   datos por los que la gente entra. Había scroll lateral para alcanzarlos, pero nadie
   lo descubre. Apilada, cada fila es un bloque y se lee todo de una. */
@media (max-width: 46rem) {
  .tabla { min-width: 0; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tr { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--papel-borde); }
  .tabla tbody tr:hover { background: transparent; }
  .tabla td { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem;
              border: 0; padding: 0.15rem 0.2rem; }
  .tabla td::before {
    content: attr(data-etiqueta);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tinta-suave); font-weight: 600; padding-top: 0.15rem;
  }
  .tabla td:first-child { font-family: var(--letra-titulo); font-size: 1.05rem;
                          font-weight: 700; display: block; padding-bottom: 0.4rem; }
  .tabla td:first-child::before { content: none; }
}

/* ---------- Lista de instituciones ---------- */
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { border-bottom: 1px solid var(--papel-borde); }
.lista-limpia a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.95rem 0.7rem; min-height: 48px; border-radius: var(--radio-chico);
  text-decoration: none; color: var(--tinta);
  transition: background 0.14s;
}
.lista-limpia a:hover { color: var(--sello-hondo); background: var(--papel-alto); }
.lista-limpia .conteo { color: var(--tinta-suave); font-size: 0.85rem; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .lista-limpia a:hover { color: var(--sello); } }

/* ---------- Mis papeles (vencimientos) ---------- */
.papel-mio {
  background: var(--papel-alto);
  border-radius: var(--radio); padding: 1.25rem 1.35rem; margin-bottom: 0.85rem;
  box-shadow: var(--sombra);
}
.papel-mio h3 { margin: 0 0 0.7rem; font-size: 1.1rem; }
.campo-fecha { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.campo-fecha label { font-size: 0.88rem; color: var(--tinta-media); }
.campo-fecha input {
  font: inherit; padding: 0.6rem 0.8rem; min-height: 46px;
  border: 1.5px solid var(--papel-borde); border-radius: var(--radio-chico);
  background: var(--papel); color: var(--tinta);
}
.campo-fecha input:focus { border-color: var(--sello); outline: none;
                           box-shadow: 0 0 0 3px var(--sello-tenue); }
.veredicto { margin: 0.8rem 0 0; font-weight: 600; }
.veredicto--bien   { color: var(--verde); }
.veredicto--pronto { color: var(--ambar); }
.veredicto--mal    { color: var(--sello); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--letra-texto); font-weight: 600; font-size: 0.98rem;
  padding: 0.75rem 1.5rem; min-height: 50px;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  background: var(--degradado); color: #fff;
  box-shadow: var(--sombra-marca);
  transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
}
.boton:hover { color: #fff; transform: translateY(-1px); filter: saturate(1.15); }
.boton:active { transform: translateY(2px) scale(0.98); box-shadow: var(--sombra-hundida); filter: none; }
.boton--linea { background: var(--papel-alto); color: var(--tinta);
                border-color: var(--papel-borde); box-shadow: var(--sombra); }
.boton--linea:hover { color: var(--tinta); border-color: var(--sello); filter: none; }
.boton--chico { min-height: 42px; padding: 0.5rem 1.05rem; font-size: 0.88rem; }

/* Los dos botones de la portada de marca. Sobre el degradado violeta, el botón
   normal —que ES el degradado— desaparecería, y el de línea tiene el borde del
   color del papel claro y tampoco se vería. */
.boton--claro {
  background: #fff; color: var(--sello-hondo);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5);
}
.boton--claro:hover { color: var(--sello-hondo); filter: none; }
.boton--fantasma {
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border-color: rgba(255, 255, 255, 0.45); box-shadow: none;
}
.boton--fantasma:hover { color: #fff; background: rgba(255, 255, 255, 0.22); filter: none; }
@media (prefers-color-scheme: dark) {
  .boton--claro { color: #2c1f8f; }
  .boton--claro:hover { color: #2c1f8f; }
}
/* El botón principal lleva su propio blanco encima del degradado: en modo oscuro
   el degradado sigue siendo violeta, así que el texto NO se invierte. */
@media (prefers-color-scheme: dark) { .boton { color: #fff; } .boton:hover { color: #fff; } }

/* ---------- Pie ---------- */
.pie {
  margin-top: 4rem; padding: 2.4rem 0 3rem;
  border-top: 1px solid var(--papel-borde); background: var(--papel-hondo);
  font-size: 0.9rem; color: var(--tinta-media);
}
.pie__aviso {
  border: 1.5px solid var(--papel-borde); border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 1.05rem 1.25rem; margin: 0 0 1.5rem;
  color: var(--tinta); font-weight: 500;
  box-shadow: var(--sombra);
}
.pie__aviso strong { color: var(--sello-hondo); }
@media (prefers-color-scheme: dark) { .pie__aviso strong { color: var(--sello); } }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.pie__enlaces a { color: var(--tinta-media); text-decoration: none; }
.pie__enlaces a:hover { color: var(--sello); text-decoration: underline; }
.pie p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--tinta-suave); }

/* ---------- Utilidades ---------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
main { padding-bottom: 1rem; }
section { margin-bottom: 0.5rem; }

/* Sin JavaScript la lista de chequeo no puede guardar nada, así que se avisa
   en vez de dejar casillas que se borran al recargar. */
.solo-con-js { display: none; }
.hay-js .solo-con-js { display: revert; }
.hay-js .solo-sin-js { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .cabecera, .pie__enlaces, .marcador, .buscador { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .chequeo__pieza, .dato { break-inside: avoid; }
  /* En papel, el degradado del botón y los números de paso salen como una mancha
     gris. Se imprimen en negro plano, que es lo que se puede leer fotocopiado. */
  .boton, .pasos li::before { background: #000 !important; color: #fff !important; box-shadow: none; }
  .marca svg { background: none !important; color: #000 !important; box-shadow: none; }
}


/* El contacto del pie. Va un punto mas grande que la letra chica de al lado: es lo
   unico de ahi abajo que la gente busca para escribirnos de verdad. */
.pie__contacto {
  margin: 0 0 0.7rem;
  font-size: 0.94rem;
}
.pie__contacto a { font-weight: 600; }