/* ═══════════════════════════════════════════════════════════════════════════
   KAJON® · sitio comercial
   Tipografía Geist, un solo azul de acento. Sin cuadrículas de fondo.

   ARRANCA EN CLARO, siempre. El oscuro existe, pero es una elección del
   visitante (el interruptor de la barra) y se recuerda; no se hereda del
   sistema operativo. La primera versión salía oscura para todo el mundo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Claro: el de fábrica */
  --fondo:    #FBFBFA;
  --fondo-2:  #F2F2EF;
  --panel:    #FFFFFF;
  --linea:    #E3E3DE;
  --linea-2:  #CFCFC8;
  --texto:    #14141A;
  --tenue:    #5B5B66;
  --apagado:  #86868F;
  --azul:     #2F55C4;
  --verde:    #15803D;
  --sombra:   18 18 24;
  --pantalla: #101013;         /* la pantalla del teléfono siempre es oscura */
  --ancho: 1180px;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="dark"] {
  --fondo:    #0A0A0B;
  --fondo-2:  #101013;
  --panel:    #16161A;
  --linea:    #26262A;
  --linea-2:  #34343A;
  --texto:    #F5F5F7;
  --tenue:    #9A9AA4;
  --apagado:  #6C6C76;
  --azul:     #5B87EE;
  --verde:    #35C77B;
  --sombra:   0 0 0;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

/* El logotipo de KAJON viene en blanco; sobre fondo claro se invierte a tinta. */
.logo-kajon { filter: invert(1); }
[data-theme="dark"] .logo-kajon { filter: none; }

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600;
}
.salto:focus { left: 0; }

.ancho { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.reg { font-size: .62em; vertical-align: super; font-weight: 600; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }

/* ── Barra ─────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.barra.posada {
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--linea);
}
.barra-in { display: flex; align-items: center; gap: 22px; height: 66px; }
.marca img { height: 24px; width: auto; }
.menu { display: flex; gap: 26px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--tenue); }
.menu a:hover { color: var(--texto); }
.tema {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--linea-2); border-radius: 999px; background: none; color: var(--tenue);
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.tema:hover { color: var(--texto); border-color: var(--tenue); }
.tema svg { width: 16px; height: 16px; }
.tema .luna { display: none; }
[data-theme="dark"] .tema .sol { display: none; }
[data-theme="dark"] .tema .luna { display: block; }
@media (max-width: 900px) { .menu { display: none; } .barra-in { justify-content: space-between; } }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { filter: brightness(1.12); }
.btn-claro { background: var(--texto); color: var(--fondo); height: 38px; padding: 0 18px; font-size: 13.5px; }
.btn-linea { border: 1px solid var(--linea-2); color: var(--texto); }
.btn-linea:hover { border-color: var(--tenue); background: color-mix(in srgb, var(--texto) 5%, transparent); }

/* ── Tipografía de sección ─────────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--apagado); margin: 0 0 14px;
}
h1 {
  font-size: clamp(50px, 7.8vw, 96px); line-height: .93; letter-spacing: -.045em;
  font-weight: 800; margin: 0 0 26px; text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.035em;
  font-weight: 800; margin: 0 0 20px; text-wrap: balance;
}
h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; margin: 0 0 10px; }
h4 { font-size: 15.5px; letter-spacing: -.015em; font-weight: 700; margin: 0 0 7px; }
.bajada { font-size: clamp(16px, 1.55vw, 18.5px); color: var(--tenue); max-width: 66ch; margin: 0 0 44px; }

.seccion { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid var(--linea); }
.seccion-alt { background: var(--fondo-2); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(60px, 8vw, 104px); }
.hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.entrada { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--tenue); max-width: 52ch; margin: 0 0 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-pie { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tenue); margin: 0; }
.hero-pie strong { color: var(--texto); font-weight: 600; }
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent); animation: latido 2.4s ease-out infinite;
}
@keyframes latido { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.hero-arte { display: flex; flex-direction: column; align-items: center; }

/* ── Teléfono ──────────────────────────────────────────────────────────────
   Proporción REAL: la pantalla es 9:19.5, la de un Nothing o un Pixel. La
   primera versión dejaba que el alto lo pusiera el contenido y salía un
   aparato achaparrado que no existe en ninguna tienda. */
.tel {
  width: 300px; border-radius: 44px; padding: 9px;
  background: linear-gradient(160deg, #2C2C33, #131316 46%, #26262D);
  box-shadow: 0 40px 90px -34px rgb(var(--sombra) / .55), 0 0 0 1px rgb(var(--sombra) / .08);
  flex: none;
}
.tel-pantalla {
  background: var(--pantalla); color: #F5F5F7;
  border-radius: 36px; overflow: hidden;
  aspect-ratio: 9 / 19.5;
  display: flex; flex-direction: column;
}
.app-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px 6px; font-size: 12px; font-weight: 600;
}
.app-iconos { display: flex; gap: 5px; color: #9A9AA4; }
.app-cuerpo { flex: 1; display: flex; flex-direction: column; padding: 16px 22px 26px; }
.app-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.app-top img { height: 16px; width: auto; }
.app-ciudad {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #9A9AA4;
  border: 1px solid #26262A; border-radius: 999px; padding: 3px 9px;
}
.app-rot { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6C6C76; margin: 0 0 7px; }
.app-placa {
  display: flex; align-items: center; gap: 9px; background: #F5F5F7; color: #121214;
  border-radius: 8px; padding: 9px 13px; margin-bottom: 22px;
}
.app-placa-mx { font-size: 8px; font-weight: 800; letter-spacing: .1em; color: #2F55C4; }
.app-placa-n { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: .02em; }
.app-vivo { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.app-reloj { font-family: var(--mono); font-size: 32px; font-weight: 500; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
.chip { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.chip-vivo { background: rgba(53,199,123,.14); color: #35C77B; }
.app-fila {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; padding: 11px 0; border-top: 1px solid #26262A;
}
.app-tarifa { font-family: var(--mono); color: #9A9AA4; font-size: 12.5px; }
.app-botones { display: flex; gap: 7px; margin: 16px 0 0; }
.app-bt {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600;
  border: 1px solid #26262A; border-radius: 9px; padding: 9px 0; color: #9A9AA4;
}
.app-bt-on { border-color: #3E6AE1; background: rgba(62,106,225,.16); color: #F5F5F7; }
/* Empuja el total y el botón al fondo de la pantalla, como en la app. */
.app-empuje { flex: 1; min-height: 14px; }
.app-total {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid #26262A; padding-top: 15px; margin-bottom: 14px; font-size: 13px; color: #9A9AA4;
}
.app-total strong { font-family: var(--mono); font-size: 27px; color: #F5F5F7; font-weight: 600; letter-spacing: -.02em; }
.app-cta {
  background: #3E6AE1; color: #fff; text-align: center; font-weight: 650; font-size: 14.5px;
  border-radius: 12px; padding: 14px 0;
}
.app-nota { font-size: 10px; color: #6C6C76; text-align: center; margin: 11px 0 0; }

.push {
  width: 300px; margin-top: 18px;
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--linea); border-radius: 16px; padding: 13px 15px;
  box-shadow: 0 18px 40px -26px rgb(var(--sombra) / .45);
}
.push img { width: 26px; height: 26px; flex: none; }
[data-theme="dark"] .push img { filter: none; }
.push-tit { font-size: 11.5px; font-weight: 700; margin: 0 0 2px; letter-spacing: .02em; }
.push-txt { font-size: 12.5px; color: var(--tenue); margin: 0; line-height: 1.4; }

@media (max-width: 940px) {
  .hero-in { grid-template-columns: 1fr; gap: 48px; }
  .hero-arte { align-items: flex-start; }
}
@media (max-width: 360px) { .tel, .push { width: 100%; } }

/* ── Tira de cifras ────────────────────────────────────────────────────── */
.tira { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--fondo-2); }
.tira-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 30px 26px 30px 0; }
.cifra + .cifra { border-left: 1px solid var(--linea); padding-left: 26px; }
.cifra-n { font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.045em; margin: 0; line-height: 1; }
.cifra-n span { font-size: .38em; font-weight: 600; letter-spacing: -.01em; color: var(--tenue); margin-left: 4px; }
.cifra-t { font-size: 13px; color: var(--tenue); margin: 9px 0 0; max-width: 22ch; }
@media (max-width: 780px) {
  .tira-in { grid-template-columns: 1fr 1fr; }
  .cifra { padding: 24px 20px; border-left: 1px solid var(--linea); border-top: 1px solid var(--linea); }
  .cifra + .cifra { padding-left: 20px; }
}

/* ── Modelo ────────────────────────────────────────────────────────────── */
.modelo-cajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.caja { border: 1px solid var(--linea); border-radius: 16px; padding: 26px 24px; background: var(--panel); }
.caja-fuerte { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 8%, var(--panel)); }
.caja-rot { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); margin: 0 0 12px; }
.caja-cifra { font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -.035em; margin: 0 0 12px; line-height: 1; }
.caja-cifra-tenue { color: var(--tenue); }
.caja-txt { font-size: 14px; color: var(--tenue); margin: 0; }
@media (max-width: 820px) { .modelo-cajas { grid-template-columns: 1fr; } }

.listado { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.listado li { position: relative; padding-left: 26px; font-size: 15px; color: var(--tenue); }
.listado li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px;
  background: var(--azul); border-radius: 2px;
}
.listado strong { color: var(--texto); font-weight: 650; }
@media (max-width: 780px) { .listado { grid-template-columns: 1fr; } }

/* ── Piezas ────────────────────────────────────────────────────────────── */
.piezas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pieza { border: 1px solid var(--linea); border-radius: 18px; padding: 30px 26px; background: var(--panel); }
.pieza-ico {
  width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--linea-2);
  display: grid; place-items: center; color: var(--azul); margin-bottom: 20px;
}
.pieza-ico svg { width: 21px; height: 21px; }
.pieza > p { font-size: 14.5px; color: var(--tenue); margin: 0 0 18px; }
.pieza strong { color: var(--texto); font-weight: 650; }
.pieza ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.pieza li { font-size: 13.5px; color: var(--tenue); padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--linea); }
.pieza li:last-child { border-bottom: 0; padding-bottom: 0; }
.pieza li::before { content: ""; position: absolute; left: 0; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--linea-2); }
@media (max-width: 900px) { .piezas { grid-template-columns: 1fr; } }

/* ── Navegador / tablero ────────────────────────────────────────────────
   El tablero se ve como se ve de verdad: oscuro. No sigue el tema del sitio
   porque es una captura del producto, no parte de la página. */
.navegador {
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; background: #101013; color: #F5F5F7;
  box-shadow: 0 50px 100px -46px rgb(var(--sombra) / .45);
}
.nav-barra {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  border-bottom: 1px solid #26262A; background: #16161A;
}
.nav-bolita { width: 10px; height: 10px; border-radius: 50%; background: #34343A; }
.nav-url {
  margin-left: 14px; font-family: var(--mono); font-size: 11.5px; color: #9A9AA4;
  background: #0A0A0B; border: 1px solid #26262A; border-radius: 7px; padding: 4px 12px;
}
.nav-ruta { color: #6C6C76; }

.tab-cab { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid #26262A; }
.tab-cab img { height: 20px; width: auto; }
.tab-sep { width: 1px; height: 20px; background: #26262A; }
.tab-escudo { width: 26px; height: 26px; object-fit: contain; padding: 3px; background: #F5F5F7; border-radius: 50%; }
.tab-tit p { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6C6C76; margin: 0; }
.tab-tit strong { font-size: 14.5px; letter-spacing: -.02em; }
.tab-vivo { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tab-reloj { font-family: var(--mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .tab-tit, .tab-reloj { display: none; } }

.tab-cuerpo { display: grid; grid-template-columns: 148px 1fr; }
.tab-menu { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid #26262A; }
.tab-menu span { font-size: 12.5px; color: #9A9AA4; padding: 7px 11px; border-radius: 8px; }
.tab-menu .on { background: rgba(255,255,255,.07); color: #F5F5F7; font-weight: 600; }
.tab-panel { padding: 18px 20px 22px; }
@media (max-width: 720px) { .tab-cuerpo { grid-template-columns: 1fr; } .tab-menu { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid #26262A; } }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { border: 1px solid #26262A; border-radius: 12px; padding: 14px 15px; background: #0A0A0B; }
.kpi p { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6C6C76; margin: 0 0 8px; }
.kpi strong { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.03em; display: block; }
.delta { font-size: 11px; color: #9A9AA4; }
@media (max-width: 720px) { .kpis { grid-template-columns: 1fr 1fr; } }

.tab-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mapa, .tabla { border: 1px solid #26262A; border-radius: 12px; padding: 13px 14px; background: #0A0A0B; }
.mapa-rot { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6C6C76; display: block; margin-bottom: 10px; }
.mapa-svg { width: 100%; height: auto; border-radius: 8px; display: block; }
.tabla table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla th { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6C6C76; text-align: left; padding-bottom: 8px; border-bottom: 1px solid #26262A; }
.tabla td { padding: 7px 0; border-bottom: 1px solid #26262A; color: #9A9AA4; }
.tabla tr:last-child td { border-bottom: 0; }
.der { text-align: right; }
.tabla td.mono { color: #F5F5F7; }
@media (max-width: 860px) { .tab-dos { grid-template-columns: 1fr; } }

.pies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 44px; }
.pies p { font-size: 14px; color: var(--tenue); margin: 0; }
@media (max-width: 820px) { .pies { grid-template-columns: 1fr; gap: 22px; } }

/* ── Operación en calle ────────────────────────────────────────────────── */
.op { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
/* El teléfono y el ticket como UNA composición, no dos cosas apiladas: el
   papel sale por debajo del aparato, como cuando el inspector lo acaba de
   arrancar de la impresora. Apilados, la sección medía 1,400 px de alto y el
   ticket parecía otro bloque. */
.op-arte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; overflow: hidden; }
/* El papel sale por debajo del aparato solo cuando hay sitio de sobra: en
   pantallas estrechas el desplazamiento lo empujaba fuera y aparecia scroll
   lateral, que es de las cosas que peor se ven en un movil. */
@media (min-width: 941px) {
  .op-arte { gap: 0; }
  .op-arte .ticket { margin: -54px 0 0 104px; z-index: 2; }
}
.op-cuerpo { padding-top: 24px; }
.op-rol { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E2A33C; }
.op-alerta {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: #E2A33C; background: rgba(226,163,60,.12); border: 1px solid rgba(226,163,60,.3);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 20px;
}
.op-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 20px; }
.op-fotos span {
  aspect-ratio: 4/3; border-radius: 7px; border: 1px solid #26262A;
  background: linear-gradient(150deg, #1D1D22, #121216);
}
.op-motivo { font-size: 11.5px; color: #9A9AA4; line-height: 1.5; margin: 0 0 14px; }
.op-cta { background: #E2A33C; color: #17130A; }

/* El ticket de multa, tal como sale de la impresora del cinturón: papel
   térmico, tipografía de matriz, código de BARRAS (no QR) y el corte dentado
   arriba. Se reproduce el folio CV-000148 de Ciudad Valles. */
.ticket {
  width: 268px; position: relative;
  background: #FAF9F4; color: #16161A; padding: 22px 20px 16px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.55;
  box-shadow: 0 24px 50px -26px rgb(var(--sombra) / .45);
  transform: rotate(-1.2deg);
}
.ticket::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: #FAF9F4;
  clip-path: polygon(0 100%, 0 0, 4% 100%, 8% 0, 12% 100%, 16% 0, 20% 100%, 24% 0, 28% 100%, 32% 0, 36% 100%, 40% 0, 44% 100%, 48% 0, 52% 100%, 56% 0, 60% 100%, 64% 0, 68% 100%, 72% 0, 76% 100%, 80% 0, 84% 100%, 88% 0, 92% 100%, 96% 0, 100% 100%);
  transform: translateY(-8px);
}
.tk-escudo { width: 62px; height: auto; margin: 0 auto 8px; filter: grayscale(1) contrast(1.5); }
.tk-ciudad { font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: -.02em; text-align: center; margin: 0; }
.tk-dep { font-size: 8.5px; text-align: center; color: #3C3C44; margin: 3px 0 12px; }
.tk-barras { width: 130px; height: 40px; display: block; margin: 0 auto 4px; }
.tk-folio { text-align: center; font-size: 9.5px; letter-spacing: .06em; margin: 0 0 12px; }
.tk-seccion {
  font-family: var(--sans); font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; text-align: center; margin: 12px 0 7px;
  padding-top: 9px; border-top: 1px solid #C9C8C0;
}
.tk-l { margin: 0 0 2px; display: flex; justify-content: space-between; gap: 12px; }
.tk-l b { font-weight: 600; text-align: right; }
.tk-cruce { margin: 0 0 6px; font-size: 9px; }
.tk-motivo { font-size: 8.5px; color: #24242B; margin: 6px 0 0; line-height: 1.5; }
.tk-total-rot {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; text-align: center; color: #3C3C44;
  margin: 12px 0 2px; padding-top: 9px; border-top: 1px solid #C9C8C0;
}
.tk-total { font-family: var(--sans); font-size: 30px; font-weight: 800; letter-spacing: -.03em; text-align: center; margin: 0 0 14px; }
.tk-firma {
  display: flex; justify-content: space-between; gap: 14px; font-size: 8.5px;
  padding-top: 10px; border-top: 1px solid #C9C8C0; line-height: 1.5;
}
.tk-firma .tk-raya { align-self: flex-start; border-bottom: 1px solid #16161A; padding-bottom: 22px; padding-right: 24px; }

@media (max-width: 940px) { .op { grid-template-columns: 1fr; gap: 44px; } .op-arte { align-items: flex-start; } }

/* ── Pasos ─────────────────────────────────────────────────────────────── */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pasos li { padding: 20px 24px 0 0; border-top: 2px solid var(--linea); }
.pasos li + li { padding-left: 24px; }
.pasos li:first-child { border-top-color: var(--azul); }
.paso-n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--apagado); letter-spacing: .1em; display: block; margin-bottom: 12px; }
.pasos p { font-size: 13.5px; color: var(--tenue); margin: 0; }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr 1fr; gap: 26px 0; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } .pasos li + li { padding-left: 0; } }

/* ── Preguntas ─────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--linea); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { font-size: 15px; color: var(--tenue); margin: 0 0 22px; max-width: 68ch; }

/* ── Cierre ────────────────────────────────────────────────────────────── */
.cierre { padding: clamp(80px, 11vw, 140px) 0; border-top: 1px solid var(--linea); text-align: center; }
.cierre-in { display: flex; flex-direction: column; align-items: center; }
.cierre-logo { height: 38px; width: auto; margin-bottom: 30px; }
.cierre p { font-size: 16.5px; color: var(--tenue); max-width: 56ch; margin: 0 0 32px; }
.cierre-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); padding: 26px 0; }
.pie-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--apagado); }
.pie p { margin: 0; }