/* DaiTrack · sitio público. Tema claro. Sin fuentes externas: la pila del sistema. */

:root {
  --fondo: #ffffff;
  --fondo-suave: #f5f8fc;
  --papel: #ffffff;
  --linea: #e1e7ef;
  --linea-fuerte: #cfd8e4;
  --texto: #142030;
  --suave: #475467;
  --tenue: #5b6676;

  --azul: #1d5fd1;          /* botones y enlaces (blanco encima: AA) */
  --azul-oscuro: #174ea9;
  --azul-t: #1a56c0;        /* texto azul sobre blanco */
  --azul-fondo: #eaf1fd;
  --verde-t: #0b6e61;
  --verde-fondo: #e3f4f1;
  --violeta: #6d28d9;
  --violeta-fondo: #f1eafd;
  --rojo: #d92d20;
  --rojo-t: #b42318;
  --rojo-fondo: #fdecea;
  --ambar: #b7791f;
  --ambar-t: #7a5000;
  --ambar-fondo: #fdf3e1;
  --ok-t: #157a3b;
  --ok-fondo: #e5f5ea;

  --letra: #3b82f6;         /* silueta: tramo de letras */
  --cifra: #14b8a6;         /* silueta: tramo de cifras */

  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --sombra-fuerte: 0 2px 4px rgba(16, 24, 40, .06), 0 24px 48px -20px rgba(16, 24, 40, .28);
  --ancho: 1160px;
  --margen: 24px;
  --cabecera-alto: 68px;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.6 var(--fuente);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--azul-t); text-underline-offset: 3px; }
a:hover { color: var(--azul-oscuro); }

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

.saltar {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--texto);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; color: #fff; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}
.contenedor-estrecho { max-width: calc(820px + 2 * var(--margen)); }

section[id] { scroll-margin-top: calc(var(--cabecera-alto) + 8px); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font: 600 16px/1.2 var(--fuente);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.boton-primario { background: var(--azul); color: #fff; }
.boton-primario:hover { background: var(--azul-oscuro); color: #fff; }
.boton-secundario { background: #fff; color: var(--texto); border-color: #848fa1; }
.boton-secundario:hover { border-color: var(--azul); color: var(--azul-t); }
.boton-claro { background: #fff; color: var(--azul-oscuro); }
.boton-claro:hover { background: #eef4ff; color: var(--azul-oscuro); }
.boton-claro:focus-visible { outline-color: #fff; }
.boton-chico { min-height: 42px; padding: 9px 16px; font-size: 15px; }
.boton-grande { min-height: 56px; padding: 16px 30px; font-size: 18px; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(8px)) {
  .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(10px); }
}
.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--cabecera-alto);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
}
.marca:hover { color: var(--texto); }
.marca-icono { display: block; flex-shrink: 0; }
.marca-texto { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #0f1f3a; }
.marca-texto span { color: var(--azul); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--suave);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav a:hover { color: var(--texto); background: var(--fondo-suave); }

/* ---------- Portada ---------- */

.portada {
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(37, 99, 235, .09), transparent 70%),
    radial-gradient(700px 380px at 0% 100%, rgba(15, 118, 110, .07), transparent 70%),
    var(--fondo);
  padding: 72px 0 88px;
}
.portada-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px;
  align-items: center;
}
.antetitulo {
  color: var(--verde-t);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.portada h1 {
  font-size: clamp(36px, 3.6vw + 12px, 58px);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.entrada {
  margin-top: 22px;
  font-size: 19px;
  color: var(--suave);
  max-width: 34em;
}
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.garantias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}
.garantias li { display: inline-flex; align-items: center; gap: 6px; }
.garantias svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--verde-t);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--verde-fondo);
  border-radius: 50%;
  flex-shrink: 0;
}

/* La maqueta del panel */
.maqueta { margin: 0; min-width: 0; }
.ventana {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: var(--sombra-fuerte);
  overflow: hidden;
}
.ventana-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: #f3f6fa;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
  font-weight: 600;
  color: var(--suave);
}
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: #d0d7e1; flex-shrink: 0; }
.ventana-barra span { margin-left: 8px; }
.ventana-cuerpo { padding: 16px; display: grid; gap: 12px; font-size: 14px; }
.banda-inventada {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  color: var(--ambar-t);
  background: var(--ambar-fondo);
  border: 1px dashed #e4b45c;
  border-radius: 999px;
  padding: 2px 10px;
}
.m-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-cifras div {
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 1px;
}
.m-cifras b { font-size: 22px; letter-spacing: -.02em; }
.m-cifras span { font-size: 12.5px; color: var(--suave); line-height: 1.3; }
.m-hallazgo {
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.m-hallazgo b { font-size: 15px; line-height: 1.35; }
.m-hallazgo-corto { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.m-paso {
  justify-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--fondo-suave);
}
.m-hora, .vh-paso .m-hora { font-family: var(--mono); font-size: 12px; color: var(--tenue); }
.m-sis { font-weight: 600; color: var(--azul-t); }
.m-marca {
  font-size: 12px;
  font-weight: 600;
  color: var(--azul-t);
  background: var(--azul-fondo);
  border-radius: 999px;
  padding: 1px 8px;
}
.m-marca-violeta { color: var(--violeta); background: var(--violeta-fondo); }
.maqueta figcaption { margin-top: 12px; font-size: 14px; color: var(--tenue); text-align: center; }

/* La silueta del dato: un bloque azul por tramo de letras, uno verde azulado por tramo de cifras */
.silueta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 700 12px/1 var(--mono);
  color: var(--suave);
  vertical-align: middle;
}
.silueta i { display: inline-block; height: 12px; width: calc(var(--n) * 7px); border-radius: 3px; }
.silueta .l { background: var(--letra); }
.silueta .d { background: var(--cifra); }
.silueta-grande { font-size: 18px; gap: 4px; }
.silueta-grande i { height: 20px; width: calc(var(--n) * 12px); border-radius: 4px; }

/* Etiquetas */
.etq {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 1px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.etq-medio { background: var(--ambar-fondo); color: var(--ambar-t); }
.etq-bajo { background: var(--azul-fondo); color: var(--azul-t); }
.etq-azul { background: var(--azul-fondo); color: var(--azul-t); }
.etq-error { background: var(--rojo-fondo); color: var(--rojo-t); }
.etq-ok { background: var(--ok-fondo); color: var(--ok-t); }

/* ---------- Secciones ---------- */

.seccion { padding: 96px 0; }
.seccion-suave { background: var(--fondo-suave); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion-cabeza { max-width: 760px; margin-bottom: 44px; }
.seccion h2 { font-size: clamp(30px, 2.2vw + 14px, 42px); letter-spacing: -.025em; }
.seccion-entrada { margin-top: 16px; font-size: 19px; color: var(--suave); }
.remate { margin-top: 36px; font-size: 19px; font-weight: 600; max-width: 760px; }

.rejilla { list-style: none; display: grid; gap: 20px; }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla > li { min-width: 0; }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.tarjeta > h3 { font-size: 20px; margin-bottom: 8px; }
.tarjeta > p { color: var(--suave); font-size: 16px; }

.icono {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icono-azul { background: var(--azul-fondo); color: var(--azul-t); }
.icono-verde { background: var(--verde-fondo); color: var(--verde-t); }
.icono-violeta { background: var(--violeta-fondo); color: var(--violeta); }
.icono-rojo { background: var(--rojo-fondo); color: var(--rojo-t); }
.icono-ambar { background: var(--ambar-fondo); color: var(--ambar-t); }

/* Cómo funciona */
.pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--fondo-suave), #fff 70%);
  border: 1px solid var(--linea);
  min-width: 0;
}
.paso-numero {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 18px;
}
.paso h3 { font-size: 21px; margin-bottom: 8px; }
.paso p { color: var(--suave); }

/* Qué vas a ver: todas las tarjetas con el mismo peso (mismo alto de dibujo) */
.capacidad { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.capacidad > h3 { padding: 22px 24px 0; }
.capacidad > p { padding: 0 24px 24px; }
.vista {
  min-height: 190px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f7f9fd, #f1f5fb);
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--texto);
}
/* Las tres partes de cada tarjeta (dibujo, título, texto) alineadas con las de su fila: mismo peso para todas */
@supports (grid-template-rows: subgrid) {
  .capacidad { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
}
.nota-ilustracion { margin-top: 20px; font-size: 14px; color: var(--tenue); }

.vh { display: grid; gap: 4px; justify-items: start; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; line-height: 1.35; }
.vh span:last-child { font-weight: 600; }
.vh-paso { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 0 2px; }

.op { display: grid; gap: 5px; }
.op-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; line-height: 1.3; }
.op-cab span:first-child { min-width: 0; }
.op-barra { height: 12px; }
.op-barra i { display: block; height: 100%; background: #c9daf8; border-radius: 6px; overflow: hidden; }
.op-barra b { display: block; height: 100%; background: var(--azul); border-radius: 6px; }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--suave); margin-top: 2px; }
.leyenda i { display: inline-block; width: 12px; height: 10px; border-radius: 3px; }
.leyenda i + i, .leyenda .ley-rec { margin-left: 8px; }
.ley-hoy { background: #c9daf8; }
.ley-rec { background: var(--azul); }

.dibujo { width: 100%; height: auto; display: block; font-family: var(--fuente); }
.carriles rect { fill: #e9eff8; }
.nombres text { font-size: 12px; font-weight: 700; fill: var(--suave); }
.estacion rect { fill: #fff; stroke: #93b4ec; stroke-width: 1.2; }
.estacion text { font-size: 11.5px; font-weight: 600; fill: var(--texto); text-anchor: middle; }
.espera { fill: none; stroke: var(--ambar); stroke-width: 1.8; stroke-dasharray: 4 3; }
.rotulo-espera rect { fill: #fff; stroke: #ecd3a5; }
.rotulo-espera text { font-size: 10.5px; font-weight: 700; fill: var(--ambar-t); text-anchor: middle; }
.punto-error { fill: var(--rojo); stroke: #fff; stroke-width: 1.5; }
.salida rect { fill: var(--rojo-fondo); stroke: var(--rojo); stroke-width: 1.2; }
.salida text { font-size: 10px; font-weight: 700; fill: var(--rojo-t); text-anchor: middle; }

.flecha { fill: none; stroke: #98a2b3; stroke-width: 1.8; }
.flecha-mano { stroke: var(--violeta); stroke-dasharray: 5 3; }
.sistema { stroke-width: 1.4; }
.sistema-web { fill: #e5eefc; stroke: #93b4ec; }
.sistema-prog { fill: #def3ef; stroke: #7fcdbf; }
.sistema-nombre { font-size: 12px; font-weight: 700; fill: var(--texto); text-anchor: middle; }
.rotulo-mano { font-size: 11px; font-weight: 700; fill: var(--violeta); text-anchor: middle; }

.vista-vivo { justify-content: flex-start; }
.vivo-etq { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; color: var(--ok-t); text-transform: uppercase; letter-spacing: .05em; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: #22a35a; box-shadow: 0 0 0 0 rgba(34, 163, 90, .5); }
@media (prefers-reduced-motion: no-preference) {
  .punto-vivo { animation: latido 2s ease-out infinite; }
}
@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(34, 163, 90, .45); }
  70% { box-shadow: 0 0 0 8px rgba(34, 163, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 163, 90, 0); }
}
.vivo-lista { list-style: none; display: grid; gap: 8px; }
.vivo-lista li { display: flex; gap: 9px; align-items: flex-start; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 6px 9px; line-height: 1.35; }
.avatar { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.av-1 { background: #6d28d9; }
.av-2 { background: #0b6e61; }
.av-3 { background: #1d5fd1; }

.pausa { display: grid; gap: 4px; }
.pausa-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pausa-pista { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--linea); }
.pausa-pista i { display: block; height: 100%; }
.pausa-pista .tr { background: #9cbcf2; }
.pausa-pista .tr-otro { background: #b9a3ef; }
.pausa-pista .hueco {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #fbe9c6 0 6px, #fdf5e4 6px 12px);
}
.pausa-pista em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ambar-t); white-space: nowrap; }

/* Anchos y largos de las ilustraciones (clases, no estilos en línea: así el servidor puede prohibir los estilos en línea) */
.silueta .n3 { --n: 3; }
.silueta .n4 { --n: 4; }
.a26 { width: 26%; }
.a30 { width: 30%; }
.a32 { width: 32%; }
.a34 { width: 34%; }
.a38 { width: 38%; }
.a44 { width: 44%; }
.a48 { width: 48%; }
.a52 { width: 52%; }
.a62 { width: 62%; }
.a70 { width: 70%; }
.a76 { width: 76%; }
.a94 { width: 94%; }

/* ---------- Privacidad ---------- */

.privacidad-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.promesas { list-style: none; display: grid; gap: 22px; }
.promesas li {
  padding-left: 40px;
  position: relative;
}
.promesas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--verde-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3L15 6.5' fill='none' stroke='%230b6e61' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.promesas h3 { font-size: 19px; margin-bottom: 4px; }
.promesas p { color: var(--suave); }

.privacidad-lado { display: grid; gap: 20px; min-width: 0; }
.viaje {
  margin: 0;
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px;
}
.viaje-titulo { font-size: 14px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.viaje-cajas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.viaje-caja {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 14px;
  min-width: 0;
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.viaje-etq { font-size: 13px; font-weight: 700; color: var(--tenue); }
.viaje-sale { border-color: #9fd6cc; box-shadow: 0 0 0 3px var(--verde-fondo); }
.viaje-sale .viaje-etq { color: var(--verde-t); }
.campo-falso { display: grid; gap: 4px; }
.campo-nombre { font-size: 13px; font-weight: 600; }
.campo-valor {
  font: 600 16px/1 var(--mono);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--texto);
}
.viaje-nota { font-size: 13px; color: var(--suave); }
.viaje-linea { font-size: 14px; font-weight: 600; }
.viaje-huella { font-weight: 500; color: var(--suave); }
.viaje-huella code { font-family: var(--mono); color: var(--texto); background: var(--fondo-suave); border-radius: 4px; padding: 1px 5px; }
.viaje-flecha svg { width: 28px; height: 28px; fill: none; stroke: var(--verde-t); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.viaje-pie { margin-top: 14px; font-size: 14px; color: var(--suave); }
.ley-l, .ley-d { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.ley-l { background: var(--letra); }
.ley-d { background: var(--cifra); margin-left: 6px; }

.sale-tabla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.sale-col {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px;
  min-width: 0;
}
.sale-col h3 { font-size: 16px; margin-bottom: 10px; color: var(--verde-t); }
.sale-col-no h3 { color: var(--rojo-t); }
.sale-col ul { list-style: none; display: grid; gap: 8px; }
.sale-col li { font-size: 14.5px; color: var(--suave); padding-left: 18px; position: relative; line-height: 1.45; }
.sale-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #7fcdbf; }
.sale-col-no li::before { background: transparent; border: 2px solid #f19a93; width: 9px; height: 9px; top: .5em; border-radius: 2px; transform: rotate(45deg); }

/* ---------- Procesos ---------- */

.proceso { display: flex; flex-direction: column; }
.proceso h3 { font-size: 19px; margin-bottom: 12px; }
.proceso .ejemplo, .proceso .verias { font-size: 15.5px; }
.proceso .ejemplo { margin-bottom: 12px; }
.proceso .ejemplo span, .proceso .verias span { font-weight: 700; color: var(--texto); }
.proceso .verias { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linea-fuerte); }

/* ---------- Preguntas ---------- */

.preguntas { display: grid; gap: 10px; }
.preguntas details {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
}
.preguntas details[open] { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
.preguntas summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 20px;
  font-weight: 650;
  font-size: 18px;
  position: relative;
  border-radius: 12px;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--azul-fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%231a56c0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.preguntas details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%231a56c0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.preguntas summary:hover { color: var(--azul-t); }
.preguntas details p { padding: 0 20px 20px; color: var(--suave); }

/* ---------- Llamada final ---------- */

.final { padding: 0 0 96px; }
.final-caja {
  text-align: center;
  color: #fff;
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(135deg, #0b5e57, #1a4fb8);
  border-radius: 24px;
  padding: 72px 32px;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.final h2 { color: #fff; max-width: 18em; }
.final-caja > p { font-size: 19px; color: #e8f0ff; max-width: 36em; }
.correo-visible { font-size: 16px; }
.correo-visible[hidden] { display: none; }
.correo-visible a { color: #fff; font-weight: 700; text-decoration: underline; }
.correo-visible a:focus-visible { outline-color: #fff; }

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--linea); padding: 44px 0 36px; background: var(--fondo); }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; align-items: flex-start; }
.pie-marca { display: grid; gap: 10px; }
.pie-marca .marca-texto { font-size: 22px; }
.pie-marca p { color: var(--suave); font-size: 15px; }
.pie-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie-nav a { color: var(--suave); text-decoration: none; font-size: 15px; padding: 4px 0; }
.pie-nav a:hover { color: var(--azul-t); text-decoration: underline; }
.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--tenue);
}

/* ---------- Anchos ---------- */

@media (max-width: 1100px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { padding: 8px 9px; }
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .cabecera-fila { justify-content: space-between; }
  .portada { padding: 52px 0 64px; }
  .portada-rejilla { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .portada-texto { max-width: 680px; }
  .maqueta { max-width: 600px; }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .privacidad-rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .privacidad-lado { max-width: 680px; }
}

@media (max-width: 680px) {
  :root { --margen: 16px; --cabecera-alto: 60px; }
  body { font-size: 16px; }
  .marca-texto { font-size: 21px; }
  .cabecera .marca-icono { width: 34px; height: 34px; }
  .boton-chico { padding: 8px 12px; font-size: 14px; min-height: 40px; }
  .seccion { padding: 64px 0; }
  .seccion-cabeza { margin-bottom: 32px; }
  .entrada, .seccion-entrada, .remate { font-size: 17px; }
  .acciones .boton { flex: 1 1 100%; }
  .rejilla-3, .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
  .tarjeta { padding: 20px; }
  .capacidad { padding: 0; }
  .capacidad > h3 { padding: 20px 20px 0; }
  .capacidad > p { padding: 0 20px 20px; }
  .vista { padding: 16px; }
  .ventana-cuerpo { padding: 12px; }
  .m-cifras { gap: 6px; }
  .m-cifras div { padding: 8px; }
  .m-cifras b { font-size: 18px; }
  .m-hallazgo-corto { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .viaje { padding: 16px; }
  .viaje-cajas { grid-template-columns: minmax(0, 1fr); }
  .viaje-caja { min-height: 0; }
  .viaje-flecha { justify-self: center; transform: rotate(90deg); }
  .sale-tabla { grid-template-columns: minmax(0, 1fr); }
  .preguntas summary { font-size: 17px; padding: 16px 52px 16px 16px; }
  .preguntas details p { padding: 0 16px 16px; }
  .final { padding-bottom: 64px; }
  .final-caja { padding: 52px 20px; border-radius: 18px; }
  .boton-grande { width: 100%; }
}

@media (max-width: 380px) {
  .boton-chico { font-size: 13px; padding: 8px 10px; }
  .marca-texto { font-size: 19px; }
  .cabecera .marca-icono { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}