/* Guia del traspaso vehicular.
 *
 * Carga despues de styles.css y solo en esta pagina. Reusa la paleta y las
 * tipografias de DataCar -el brief pedia adaptarlas a la marca, no traer
 * otras- y anade lo que esta guia necesita y el resto del sitio no: pasos con
 * riel de color, checklists, callouts en tres severidades, medidor de riesgo y
 * tablas de costos.
 *
 * Es la unica pagina del sitio con tema oscuro. Se hizo asi porque el brief lo
 * pedia y porque es una guia larga, de las que se leen de noche en el telefono;
 * el resto del sitio son paginas cortas de campana. Todo el color va por
 * variables para que el modo oscuro sea redefinir tokens y no reescribir
 * reglas.
 */

.tr {
  /* Tokens propios de la guia. En claro apuntan a los de la marca. */
  --tr-fondo: #fff;
  --tr-papel: var(--paper);
  --tr-superficie: #fff;
  --tr-tinta: var(--ink);
  --tr-tinta-suave: var(--ink-soft);
  --tr-apagado: var(--muted);
  --tr-linea: var(--border);
  --tr-linea-fuerte: #cfd6d2;

  --tr-verde: var(--brand-dark);
  --tr-verde-suave: var(--brand-soft);
  --tr-ambar: #a56200;
  --tr-ambar-suave: #fdf3e3;
  --tr-rojo: #98281b;
  --tr-rojo-suave: #fceeec;
  --tr-azul: #1c5a72;
  --tr-azul-suave: #eaf3f7;

  background: var(--tr-fondo);
  color: var(--tr-tinta);
}

@media (prefers-color-scheme: dark) {
  .tr {
    --tr-fondo: #0c1112;
    --tr-papel: #141b1c;
    --tr-superficie: #141b1c;
    --tr-tinta: #e7ebe7;
    --tr-tinta-suave: #c4cdc8;
    --tr-apagado: #91a09a;
    --tr-linea: #26302f;
    --tr-linea-fuerte: #38443f;

    --tr-verde: #57bcab;
    --tr-verde-suave: #102a28;
    --tr-ambar: #e0a54a;
    --tr-ambar-suave: #2a2113;
    --tr-rojo: #e5806f;
    --tr-rojo-suave: #2b1714;
    --tr-azul: #7ab6cd;
    --tr-azul-suave: #12242b;
  }
}

/* ── Encabezado ──────────────────────────────────────────── */
.tr-cab { padding: 34px 0 30px; background: var(--tr-papel); }
.tr-kicker {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tr-apagado);
  margin-bottom: 16px;
}
.tr-cab h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: var(--tr-tinta);
  max-width: 20ch;
}
.tr-bajada {
  margin-top: 16px; font-size: clamp(16px, 2vw, 19px);
  color: var(--tr-apagado); max-width: 62ch; line-height: 1.6;
}

/* ── Pestañas ────────────────────────────────────────────── */
.tr-barra {
  position: sticky; top: 96px; z-index: 40;
  background: var(--tr-fondo); border-bottom: 1px solid var(--tr-linea);
}
@media (min-width: 900px) { .tr-barra { top: 136px; } }

.tr-tabs {
  display: flex; gap: 6px;
  /* En el telefono no caben cuatro: se deslizan de lado en vez de apilarse
     y empujar el contenido media pantalla hacia abajo. */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tr-tabs::-webkit-scrollbar { display: none; }

.tr-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: 13px 18px; background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; text-align: left;
  color: var(--tr-apagado); font-family: var(--font-body);
  transition: color .15s, border-color .15s;
}
.tr-tab-n {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.tr-tab-txt {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
.tr-tab:hover { color: var(--tr-tinta-suave); }
.tr-tab.tr-on { color: var(--tr-verde); border-bottom-color: var(--tr-verde); }
.tr-tab:focus-visible { outline: 2px solid var(--tr-verde); outline-offset: -3px; }

/* ── Paneles ─────────────────────────────────────────────── */
.tr-cuerpo { padding: 34px 20px 70px; }
.tr-oculto { display: none; }
.tr-panel:focus { outline: none; }

.tr-panel > h2 {
  font-size: clamp(24px, 3.4vw, 33px); font-weight: 800; color: var(--tr-tinta);
  max-width: 24ch;
}
.tr-sub {
  margin-top: 12px; font-size: 17px; color: var(--tr-apagado);
  max-width: 64ch; line-height: 1.6;
}
.tr-h3 {
  margin-top: 44px; margin-bottom: 16px;
  font-size: 21px; font-weight: 700; color: var(--tr-tinta);
}
.tr-recalco {
  margin-top: 12px; font-weight: 600; color: var(--tr-tinta);
}

/* ── Pasos con riel ──────────────────────────────────────── */
.pasos-tr { list-style: none; padding: 0; margin: 30px 0 0; }
.paso-tr {
  position: relative; padding: 0 0 26px 26px;
  border-left: 2px solid var(--tr-linea);
}
.paso-tr:last-child { border-left-color: transparent; padding-bottom: 6px; }
.paso-tr-cab { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 10px; }
.paso-tr-n {
  position: absolute; left: -17px; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--tr-verde); background: var(--tr-verde-suave);
  border: 2px solid var(--tr-fondo);
}
.paso-tr-cab > div { margin-left: 22px; }
.paso-tr h3 { font-size: 18.5px; font-weight: 700; color: var(--tr-tinta); }
.paso-tr-quien {
  margin-top: 3px; font-family: var(--font-mono); font-size: 12px;
  color: var(--tr-apagado); letter-spacing: .02em;
}
.paso-tr > p, .paso-tr > ul { color: var(--tr-tinta-suave); line-height: 1.65; }
.paso-tr > p { margin-top: 10px; max-width: 68ch; }

.lista-tr { margin: 12px 0 0; padding-left: 20px; max-width: 68ch; }
.lista-tr li { margin-bottom: 7px; }

/* ── Checklist con casillas cuadradas ────────────────────── */
.checklist-tr { list-style: none; padding: 0; margin: 14px 0 0; }
.checklist-tr li {
  position: relative; padding-left: 28px; margin-bottom: 9px;
  color: var(--tr-tinta-suave); line-height: 1.55; max-width: 64ch;
}
.checklist-tr li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px; border-radius: 3px;
  border: 2px solid var(--tr-linea-fuerte);
}

/* ── Tarjetas de documentos ──────────────────────────────── */
.tr-dos { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 820px) { .tr-dos { grid-template-columns: 1fr 1fr; } }
.tarjeta-doc {
  padding: 22px; border-radius: var(--radius);
  background: var(--tr-superficie); border: 1px solid var(--tr-linea);
}
.tarjeta-doc h3 { font-size: 18px; font-weight: 700; color: var(--tr-tinta); }
.tarjeta-doc-quien {
  margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--tr-apagado); text-transform: uppercase; letter-spacing: .06em;
}

/* ── Medidor de riesgo ───────────────────────────────────── */
.riesgo {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin-top: 24px; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--tr-linea);
}
.riesgo-txt { display: flex; align-items: baseline; gap: 10px; }
.riesgo-nivel { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.riesgo-de { font-family: var(--font-mono); font-size: 13px; color: var(--tr-apagado); }
.riesgo-barras { display: flex; gap: 5px; }
.riesgo-barras i {
  display: block; width: 30px; height: 9px; border-radius: 3px;
  background: var(--tr-linea);
}
.riesgo-bajo { background: var(--tr-verde-suave); border-color: var(--tr-verde); }
.riesgo-bajo .riesgo-nivel { color: var(--tr-verde); }
.riesgo-bajo .riesgo-barras i.on { background: var(--tr-verde); }
.riesgo-alto { background: var(--tr-rojo-suave); border-color: var(--tr-rojo); }
.riesgo-alto .riesgo-nivel { color: var(--tr-rojo); }
.riesgo-alto .riesgo-barras i.on { background: var(--tr-rojo); }

/* ── Callouts, tres severidades ──────────────────────────── */
.callout {
  margin-top: 30px; padding: 20px 22px;
  border-radius: var(--radius); border: 1px solid; border-left-width: 4px;
}
.callout h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; }
.callout p, .callout li { color: var(--tr-tinta-suave); line-height: 1.6; max-width: 68ch; }
.callout ul { margin: 0; padding-left: 20px; }
.callout li { margin-bottom: 7px; }
.callout li:last-child { margin-bottom: 0; }

.callout-azul { background: var(--tr-azul-suave); border-color: var(--tr-azul); }
.callout-azul h3 { color: var(--tr-azul); }
.callout-ambar { background: var(--tr-ambar-suave); border-color: var(--tr-ambar); }
.callout-ambar h3 { color: var(--tr-ambar); }
.callout-rojo { background: var(--tr-rojo-suave); border-color: var(--tr-rojo); }
.callout-rojo h3 { color: var(--tr-rojo); }

.lista-riesgos { margin: 0; padding-left: 20px; max-width: 68ch; }
.lista-riesgos li { margin-bottom: 11px; color: var(--tr-tinta-suave); line-height: 1.6; }
.lista-riesgos b { color: var(--tr-tinta); }

/* ── Las tres salidas ────────────────────────────────────── */
.salida {
  margin-top: 18px; padding: 22px 24px;
  border-radius: var(--radius); border: 1px solid var(--tr-linea);
  border-left: 4px solid var(--tr-linea-fuerte);
  background: var(--tr-superficie);
}
.salida-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.salida-letra {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
}
.salida h4 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--tr-tinta); }
.salida-veredicto {
  margin-top: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.salida > p { color: var(--tr-tinta-suave); line-height: 1.65; max-width: 68ch; }

.salida-a { border-left-color: var(--tr-verde); }
.salida-a .salida-letra { background: var(--tr-verde-suave); color: var(--tr-verde); }
.salida-a .salida-veredicto { color: var(--tr-verde); }
.salida-b { border-left-color: var(--tr-ambar); }
.salida-b .salida-letra { background: var(--tr-ambar-suave); color: var(--tr-ambar); }
.salida-b .salida-veredicto { color: var(--tr-ambar); }
.salida-c { border-left-color: var(--tr-rojo); }
.salida-c .salida-letra { background: var(--tr-rojo-suave); color: var(--tr-rojo); }
.salida-c .salida-veredicto { color: var(--tr-rojo); }

/* ── Bloques CTA a DataCar ───────────────────────────────── */
.cta-dc {
  position: relative;
  margin-top: 16px; padding: 18px 20px 18px;
  border-radius: var(--radius);
  background: var(--tr-verde-suave); border: 1px solid var(--tr-verde);
}
.cta-dc-chip {
  display: inline-block; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--brand-dark);
  padding: 4px 10px; border-radius: 999px;
}
.cta-dc p {
  color: var(--tr-tinta); line-height: 1.6; max-width: 60ch; margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) {
  .cta-dc-chip { background: var(--tr-verde); color: #0c1112; }
  .cta-dc .boton-primario { background: var(--tr-verde); color: #0c1112; box-shadow: none; }
  .cta-dc .boton-primario:hover { background: #6fd0bf; }
}

/* ── Tablas ──────────────────────────────────────────────── */
.marco-tabla-tr {
  overflow-x: auto; border: 1px solid var(--tr-linea);
  border-radius: var(--radius); background: var(--tr-superficie);
}
.tabla-tr { width: 100%; border-collapse: collapse; min-width: 540px; }
.tabla-tr th, .tabla-tr td {
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--tr-linea);
  color: var(--tr-tinta-suave); font-size: 15px; vertical-align: top;
}
.tabla-tr thead th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tr-apagado);
  background: var(--tr-papel); white-space: nowrap;
}
.tabla-tr td:first-child { color: var(--tr-tinta); font-weight: 600; }
.tabla-tr tbody tr:last-child td { border-bottom: 0; }
.tr-num { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── Cierre con buscador ─────────────────────────────────── */
.tr-cierre {
  margin-top: 56px; padding: 34px; border-radius: var(--radius);
  background: var(--tr-papel); border: 1px solid var(--tr-linea);
  scroll-margin-top: 180px;
}
.tr-cierre h2 { font-size: clamp(21px, 3vw, 28px); font-weight: 800; color: var(--tr-tinta); max-width: 22ch; }
.tr-cierre > p { margin-top: 10px; color: var(--tr-apagado); }
.tr-cierre .buscador { margin-top: 22px; }
@media (prefers-color-scheme: dark) {
  .tr-cierre .buscador input { background: var(--tr-superficie); color: var(--tr-tinta); border-color: var(--tr-linea-fuerte); }
  .tr-cierre .buscador input::placeholder { color: var(--tr-apagado); }
}

/* ── Pie legal ───────────────────────────────────────────── */
.tr-legal {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--tr-linea);
  font-size: 14px; color: var(--tr-apagado); line-height: 1.65;
}
.tr-legal p { max-width: 76ch; }
.tr-legal h3 {
  margin-top: 20px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tr-apagado);
}
.tr-legal ul { margin: 0; padding-left: 20px; }
.tr-legal li { margin-bottom: 4px; }

/* ── Cabecera y pie en oscuro ────────────────────────────────
   Solo en esta pagina: traspaso.css no se carga en ninguna otra. Sin esto la
   guia quedaba como una isla oscura entre una cabecera y un pie blancos, que
   es peor que no tener modo oscuro.

   El logo es de trazo casi negro sobre fondo transparente, asi que sobre
   oscuro desaparece. En vez de inventar una version clara del arte -eso es
   decision de marca, no de esta pagina- se le pone una pastilla clara detras.
   Es un recurso normal y se lee como intencional. */
@media (prefers-color-scheme: dark) {
  body { background: #0c1112; }

  .cabecera { background: rgba(12, 17, 18, .9); }
  .cabecera.desplazada { border-bottom-color: #26302f; }
  .cabecera-logo {
    display: inline-flex; padding: 5px 12px; border-radius: 14px;
    background: #f2f4f1;
  }
  .menu { color: #c4cdc8; }
  .menu a:hover { color: #57bcab; }
  .menu-boton { color: #e7ebe7; border-color: #38443f; }
  @media (max-width: 899px) {
    .menu a { border-top-color: #26302f; }
  }

  .miga { color: #91a09a; }
  .miga a { color: #57bcab; }
  .miga [aria-current="page"] { color: #c4cdc8; }

  .pie { background: #0c1112; border-top: 1px solid #26302f; }
  .pie-desc, .pie-enlaces a, .pie-legal span { color: #91a09a; }
  .pie-enlaces a:hover { color: #57bcab; }
  .pie img {
    padding: 6px 12px; border-radius: 14px; background: #f2f4f1;
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-tab { transition: none; }
}

/* Rotulo de panel. Dice en que parte del recorrido estas -la pestana ya lo
   dice, pero se pierde al bajar- y en la Fase 0 aporta un dato que el titular
   no da: que esa fase aplica a los dos casos, no solo al primero. */
.tr-rotulo {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tr-verde); margin-bottom: 9px;
}