/* ============================================================================
   TRACKIFY · web
   Paleta de marca, tomada del codigo de la app:
     #FEC001 amarillo (primaryColor)   #0a4349 petroleo (MAPS_IMAGES_COLOR)
     #23212B carbon                    #252525 negro de texto
   La pagina se compromete con un solo aspecto —claro, de documento— como
   corresponde a un sitio de marca: pinta todos sus colores explicitamente y
   no cambia con el tema del visitante.
   ============================================================================ */
:root {
  --papel:    #FBFAF7;
  --papel-2:  #F2EDE3;
  --blanco:   #FFFFFF;
  --tinta:    #252525;
  --tinta-2:  #4E4A42;
  --tinta-3:  #7C766B;
  --linea:    #E4DED2;
  --linea-2:  #F0ECE3;
  --petroleo: #0a4349;
  --petro-2:  #0E5158;
  --petro-3:  #E2EDED;
  --amarillo: #FEC001;
  --ambar:    #E0A800;
  --carbon:   #23212B;
  --oro-osc:  #5C4900;
  --oro-suave:#FEEFC4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; }
a { color: inherit; }

.env { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------------- el logo real de la app ---------------- */
.logo-img { height: 34px; width: auto; display: block; }
@media (max-width: 600px) { .logo-img { height: 28px; } }

/* ---------------- huecos para las capturas que faltan ----------------
   No son un error ni un roto: son sitios reservados, con la medida que
   hace falta. Cuando lleguen las capturas se sustituyen por un <img>. */
.hueco {
  border: 2px dashed #CFC6B4; border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(254,192,1,.055) 0 12px, transparent 12px 24px),
    var(--papel);
  display: grid; place-items: center; text-align: center;
  padding: 30px 22px; color: var(--tinta-3);
}
.hueco .qué {
  font-family: "Source Serif 4", serif; font-weight: 700;
  font-size: 1.02rem; color: var(--tinta-2); margin: 0 0 5px;
}
.hueco .medida {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .06em; color: var(--tinta-3); margin: 0;
}
.hueco .marco {
  width: 34px; height: 34px; border: 2px solid #CFC6B4; border-radius: 4px;
  margin: 0 auto 12px; position: relative;
}
.hueco .marco::after {
  content: ""; position: absolute; left: 5px; right: 5px; bottom: 6px; height: 9px;
  border-radius: 2px; background: #CFC6B4;
}
.hueco .marco::before {
  content: ""; position: absolute; right: 6px; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--amarillo);
}
.hueco.panel { min-height: 330px; }
.hueco.movil { aspect-ratio: 9/17; min-height: 300px; border-radius: 20px; padding: 20px 14px; }

/* ---------------- captura del panel, en la portada ---------------- */
.port-texto { max-width: 720px; }
.captura {
  margin: 40px 0 0; border: 1px solid var(--linea); border-radius: 8px;
  overflow: hidden; background: var(--blanco);
  box-shadow: 0 18px 50px rgba(10,67,73,.16), 0 2px 6px rgba(0,0,0,.05);
}
.captura img { display: block; width: 100%; height: auto; }

/* ---------------- mantenimiento y documentación ----------------
   Diseño que trajo Carlos (10-09-2026), en los colores de marca. */
.tres-formas {
  list-style: none; margin: 0 0 30px; padding: 0; display: grid;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
@media (min-width: 760px) { .tres-formas { grid-template-columns: repeat(3, 1fr); } }
.tres-formas li { padding: 14px 18px 14px 0; font-size: .92rem; color: var(--tinta-2); }
@media (min-width: 760px) { .tres-formas li + li { border-left: 1px solid var(--linea); padding-left: 18px; } }
.tres-formas b { display: block; color: var(--tinta); font-weight: 600; }
.mant-pie { font-size: .88rem; color: var(--tinta-3); margin: 6px 0 0; }

/* la tabla es ancha: en pantallas estrechas se desliza dentro de su marco */
.desliza { padding: 4px 4px 18px; margin: 0 -4px; }

.mant-app {
  margin: 0; min-width: 740px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(10,67,73,.10);
}
.ma-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px;
}
.ma-top b { display: block; font-family: "Source Serif 4", serif; font-size: 1.12rem; color: var(--tinta); }
.ma-top .sub { font-size: .8rem; color: var(--tinta-3); }
.ma-herr { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.ma-buscar {
  display: inline-flex; align-items: center; gap: 7px; min-width: 200px;
  border: 1px solid #D6CFC2; border-radius: 5px; padding: 7px 12px;
  font-size: .8rem; color: var(--tinta-3); background: var(--blanco);
}
.ma-buscar svg { width: 15px; height: 15px; fill: currentColor; }
.ma-nuevo {
  background: var(--amarillo); color: var(--carbon); font-weight: 700;
  font-size: .8rem; padding: 8px 14px; border-radius: 5px; white-space: nowrap;
}
.mant-app table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mant-app th {
  text-align: left; background: #F7F5F0; color: var(--tinta-3); font-weight: 500;
  font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .09em;
  text-transform: uppercase; padding: 11px 16px;
  border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea);
}
.mant-app td { padding: 13px 16px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; color: var(--tinta); }
.mant-app tr:last-child td { border-bottom: none; }
.mant-app td:nth-child(2) { font-weight: 600; }
.mant-app td.num { font-family: "IBM Plex Mono", monospace; font-size: .8rem; white-space: nowrap; }
.placa-b {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .74rem;
  background: var(--carbon); color: #FFFFFF; padding: 4px 8px; border-radius: 3px;
  letter-spacing: .03em; white-space: nowrap;
}
.ma-prog { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.ma-prog .pista { flex: 1 1 auto; height: 7px; background: #EEE9DF; border-radius: 4px; overflow: hidden; }
.ma-prog .pista i { display: block; height: 100%; border-radius: 4px; min-width: 5px; }
.ma-prog em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .74rem; width: 34px; text-align: right; }
/* los mismos tres colores que la tabla de mantenimiento de la plataforma */
.ma-prog.verde .pista i { background: #2E9E5B; }
.ma-prog.ambar .pista i { background: var(--ambar); }
.ma-prog.rojo  .pista i { background: #C8452F; }
.ma-prog.verde em { color: var(--tinta); }
.ma-prog.ambar em { color: #8A6400; }
.ma-prog.rojo  em { color: #A8361F; font-weight: 600; }
.estado { display: inline-block; font-size: .74rem; font-weight: 600; padding: 3px 11px; border-radius: 20px; white-space: nowrap; }
.estado.verde { background: #E2F2E8; color: #1F7A45; }
.estado.ambar { background: var(--oro-suave); color: var(--oro-osc); }
.estado.rojo  { background: #F8E1DC; color: #A8361F; }
.ma-acc { text-align: right; white-space: nowrap; color: #B5AEA2; }
.ma-acc svg { width: 16px; height: 16px; fill: currentColor; margin-left: 10px; vertical-align: middle; }

/* ---------------- navegación ---------------- */
.nav {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky; top: 0; z-index: 40;
}
.nav .env { display: flex; align-items: center; gap: 22px; padding-block: 14px; }
.marca {
  font-family: "Source Serif 4", serif; font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.01em; display: flex; align-items: center; gap: 9px;
}
.marca .sig {
  width: 26px; height: 26px; border-radius: 6px; background: var(--carbon);
  color: var(--amarillo); display: grid; place-items: center;
  font-size: .95rem; font-weight: 700; flex: 0 0 auto;
}
.nav ul {
  list-style: none; display: flex; gap: 20px; margin: 0 0 0 auto; padding: 0;
  font-size: .88rem; color: var(--tinta-2); flex-wrap: wrap;
}
.nav ul a { text-decoration: none; }
.nav ul a:hover { color: var(--petroleo); }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  border-radius: 3px; padding: 11px 20px; font-size: .92rem; line-height: 1.2;
}
.btn-p { background: var(--petroleo); color: #fff; }
.btn-p:hover { background: var(--petro-2); }
.btn-s { border: 1px solid #C9C1B2; color: var(--tinta); }
.btn-s:hover { border-color: var(--petroleo); color: var(--petroleo); }
.btn-a { background: var(--amarillo); color: var(--carbon); }
.nav .btn { padding: 8px 16px; font-size: .85rem; }
/* En celular el menu pasa a una segunda fila bajo el logo. Antes se ocultaba,
   y con cuatro paginas no habia forma de llegar a las otras tres. */
@media (max-width: 900px) {
  .nav .env { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .nav .env > a:first-child { order: 1; }
  .nav .btn { order: 2; margin-left: auto; }
  .nav ul {
    order: 3; width: 100%; margin: 0; gap: 20px; font-size: .86rem;
    overflow-x: auto; white-space: nowrap; padding: 2px 0 4px;
  }
}

/* ---------------- portada ---------------- */
.portada { padding: 56px 0 66px; }
.port-arriba { display: grid; gap: 36px; }
@media (min-width: 860px) { .port-arriba { grid-template-columns: 1.1fr .9fr; align-items: center; } }

/* la cifra grande: ocupa el sitio del antiguo tablero */
.gran-cifra {
  background: var(--petroleo); color: #EAF2F2; border-radius: 4px;
  padding: 34px 32px; display: flex; flex-direction: column;
}
.gran-cifra .mas {
  font-family: "IBM Plex Mono", monospace; font-size: .74rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--amarillo);
}
.gran-cifra b {
  font-family: "Source Serif 4", serif; font-weight: 700;
  font-size: clamp(4.2rem, 11vw, 6.4rem); line-height: .95;
  color: var(--amarillo); font-variant-numeric: tabular-nums; margin-top: 4px;
}
.gran-cifra .que {
  font-family: "Source Serif 4", serif; font-size: 1.3rem; line-height: 1.3;
  margin-top: 10px; max-width: 19ch; color: #F4F8F8;
}
.gran-cifra .entes {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .06em;
  color: #8FB4B8; margin-top: 20px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.sub-bloque { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--linea); }
.sub-bloque .entrada { margin-bottom: 18px; }
.aparte {
  margin: 0 0 28px; max-width: 58ch;
  border-left: 3px solid var(--amarillo); background: var(--papel);
  padding: 12px 16px; font-size: .95rem; color: var(--tinta-2);
  border-radius: 0 3px 3px 0;
}
.aparte b { color: var(--tinta); font-weight: 700; }
.sello {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amarillo); color: var(--petroleo);
  border: 1px solid var(--petroleo); border-radius: 3px;
  padding: 6px 13px; font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 20px;
}
.portada h1 {
  font-size: clamp(2.1rem, 5vw, 3.15rem); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance;
}
.portada .bajada { font-size: 1.1rem; color: var(--tinta-2); margin: 0 0 26px; max-width: 46ch; }
.acciones { display: flex; gap: 11px; flex-wrap: wrap; }
.bajo-acciones { margin: 16px 0 0; font-size: .84rem; color: var(--tinta-3); }

.tablero { border: 1px solid var(--linea); border-radius: 4px; background: var(--blanco); overflow: hidden; }
.tablero .cab {
  background: var(--petroleo); color: var(--amarillo); padding: 10px 16px;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
}
.fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--linea-2); font-size: .93rem;
}
.fila:last-child { border-bottom: none; }
.fila b { font-weight: 600; }
.fila b i {
  font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3);
  margin-left: 8px; border: 1px solid var(--linea); border-radius: 2px; padding: 1px 5px;
}
.chip {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 2px; white-space: nowrap;
  color: var(--petroleo); background: var(--petro-3);
}
.chip.oro { color: var(--oro-osc); background: var(--oro-suave); }
.fila.pie {
  display: block; font-size: .78rem; color: var(--tinta-3);
  background: #FCFAF5; font-style: italic;
}

/* ---------------- franja de cifras ---------------- */
.cifras { border-block: 1px solid var(--linea); background: var(--papel-2); }
.cifras .env { display: grid; gap: 0; }
@media (min-width: 700px) { .cifras .env { grid-template-columns: repeat(4, 1fr); } }
.cifra { padding: 22px 20px 22px 0; }
@media (min-width: 700px) {
  .cifra { border-right: 1px solid var(--linea); padding: 22px 22px; }
  .cifra:first-child { padding-left: 0; }
  .cifra:last-child { border-right: none; }
}
.cifra b { display: block; font-family: "Source Serif 4", serif; font-size: 1.85rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { font-size: .82rem; color: var(--tinta-2); }

/* ---------------- secciones ---------------- */
section { padding: 66px 0; }
section.blanca { background: var(--blanco); border-block: 1px solid var(--linea); }
section.oscura { background: var(--carbon); color: #F0EEF3; }
section.petrolea { background: var(--petroleo); color: #EAF2F2; }

.rotulo {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambar); margin: 0 0 14px;
}
section.oscura .rotulo, section.petrolea .rotulo { color: var(--amarillo); }
h2.titulo {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.14;
  letter-spacing: -.015em; margin: 0 0 14px; max-width: 20ch; text-wrap: balance;
}
p.entrada { font-size: 1.04rem; color: var(--tinta-2); max-width: 58ch; margin: 0 0 30px; }
section.oscura p.entrada { color: #ADA7B8; }
section.petrolea p.entrada { color: #A7C6C9; }

h1 .rotulo, h2 .rotulo {
  display: block; font-weight: 400; line-height: 1.5; margin: 0 0 14px;
}

/* ---------------- retransmisión ---------------- */
.dos-vias { display: grid; gap: 18px; margin-top: 6px; }
@media (min-width: 780px) { .dos-vias { grid-template-columns: 1fr 1fr; } }
.via { border: 1px solid var(--linea); border-radius: 4px; background: var(--papel); overflow: hidden; }
.via .cab {
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.via .cab h3 { margin: 0; font-size: 1.15rem; }
.via .cab em {
  font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.via.publica .cab { background: var(--petro-3); }
.via.privada .cab { background: var(--oro-suave); }
.via ul { list-style: none; margin: 0; padding: 6px 18px 16px; }
.via li { padding: 10px 0; border-bottom: 1px dotted var(--linea); font-size: .93rem; }
.via li:last-child { border-bottom: none; }
.via li b { display: block; font-weight: 600; }
.via li span { color: var(--tinta-2); font-size: .87rem; }
.via .estado {
  font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 2px; margin-left: 8px; white-space: nowrap;
  color: var(--petroleo); background: var(--petro-3);
}
.via .estado.espera { color: var(--oro-osc); background: var(--oro-suave); }

.esquema {
  margin-top: 26px; border: 1px solid var(--linea); border-radius: 4px;
  background: var(--papel); padding: 24px 20px;
}
.flujo { display: grid; gap: 16px; align-items: center; }
@media (min-width: 760px) { .flujo { grid-template-columns: 150px 26px 1fr; } }
.nodo {
  border: 1px solid var(--petroleo); border-radius: 4px; background: var(--blanco);
  padding: 14px; text-align: center;
}
.nodo b { display: block; font-family: "Source Serif 4", serif; font-size: 1rem; }
.nodo span { font-size: .78rem; color: var(--tinta-2); }
.rama { display: grid; gap: 9px; }
.destino {
  border: 1px solid var(--linea); border-left: 3px solid var(--petroleo);
  border-radius: 3px; background: var(--blanco); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .89rem;
}
.destino.priv { border-left-color: var(--amarillo); }
.destino .et {
  font-family: "IBM Plex Mono", monospace; font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.brazo { display: none; }
@media (min-width: 760px) {
  .brazo {
    display: block; height: 100%; min-height: 120px; position: relative;
  }
  .brazo::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 1px; background: var(--tinta-3);
  }
  .brazo::after {
    content: ""; position: absolute; left: 13px; top: 12%; bottom: 12%; width: 1px; background: var(--tinta-3);
  }
}
.nota-fina {
  margin: 22px 0 0; padding: 13px 16px; background: var(--oro-suave);
  border-radius: 3px; font-size: .9rem; color: var(--oro-osc);
}
.nota-fina b { font-weight: 700; }

/* ---------------- rejillas de capacidades ---------------- */
.rejilla { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
@media (min-width: 640px) { .rejilla.c2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .rejilla.c3 { grid-template-columns: repeat(3,1fr); } }
.celda { background: var(--blanco); padding: 22px 20px; }
section.blanca .celda { background: var(--papel); }
.celda h3 { margin: 0 0 7px; font-size: 1.08rem; }
.celda p { margin: 0; font-size: .91rem; color: var(--tinta-2); }

/* ---------------- seguridad ---------------- */
.seguridad .env { display: grid; gap: 40px; align-items: center; }
@media (min-width: 820px) { .seguridad .env { grid-template-columns: 1.05fr .95fr; } }
.tira-aviso {
  background: repeating-linear-gradient(45deg, var(--amarillo) 0 18px, var(--carbon) 18px 36px);
  padding: 5px 0; margin: 26px 0 0;
}
.tira-aviso .dentro {
  background: var(--amarillo); color: var(--carbon); padding: 10px 18px;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  font-weight: 700; font-size: .88rem; letter-spacing: .03em; text-transform: uppercase;
}
.telefono {
  max-width: 236px; margin: 0 auto; border: 9px solid #16151B; border-radius: 26px;
  background: #000; overflow: hidden; box-shadow: 0 0 0 1px #45414F, 0 22px 50px rgba(0,0,0,.45);
}
.pantalla {
  background: linear-gradient(var(--amarillo), var(--ambar));
  color: var(--carbon); padding: 30px 16px; text-align: center;
}
.pantalla .icono { font-size: 2.6rem; line-height: 1; }
.pantalla .que {
  font-family: "Source Serif 4", serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: .03em; margin: 10px 0 4px;
}
.pantalla .placa { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .9rem; color: #4A3A00; }
.pantalla .donde { font-size: .78rem; color: #5C4900; margin-top: 3px; }
.pantalla .callar {
  margin-top: 18px; background: var(--carbon); color: var(--amarillo);
  border-radius: 3px; padding: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

/* ---------------- dashcam ---------------- */
.camaras { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.camara {
  aspect-ratio: 16/10; border-radius: 4px; border: 1px solid var(--petro-2);
  background: linear-gradient(150deg, #0E5158, #062B2F); position: relative;
}
.camara::after {
  content: attr(data-et); position: absolute; bottom: 7px; left: 9px;
  font-family: "IBM Plex Mono", monospace; font-size: .6rem; color: #8FB4B8;
  letter-spacing: .08em;
}
.avisos-cam { margin-top: 14px; display: grid; gap: 7px; }
.aviso-cam { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: #C8DEDE; }
.aviso-cam i { width: 7px; height: 7px; border-radius: 50%; background: var(--amarillo); flex: 0 0 auto; }

/* ---------------- para quién ---------------- */
.perfiles { display: grid; gap: 18px; }
@media (min-width: 820px) { .perfiles { grid-template-columns: repeat(3,1fr); } }
.perfil { border: 1px solid var(--linea); border-top: 3px solid var(--petroleo); border-radius: 4px; padding: 22px 20px; background: var(--papel); }
.perfil.medio { border-top-color: var(--amarillo); }
.perfil .tam { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.perfil h3 { margin: 6px 0 8px; font-size: 1.15rem; }
.perfil p { margin: 0 0 12px; font-size: .91rem; color: var(--tinta-2); }
.perfil ul { margin: 0; padding-left: 17px; font-size: .88rem; color: var(--tinta-2); }
.perfil li { margin-bottom: 5px; }

/* ---------------- preguntas ---------------- */
.preguntas { border-top: 1px solid var(--linea); }
details { border-bottom: 1px solid var(--linea); }
summary {
  cursor: pointer; padding: 18px 0; font-family: "Source Serif 4", serif;
  font-weight: 700; font-size: 1.05rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: "IBM Plex Mono", monospace; color: var(--ambar); font-size: 1.25rem; flex: 0 0 auto; }
details[open] summary::after { content: "–"; }
summary:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }
details p { margin: 0 0 18px; color: var(--tinta-2); font-size: .95rem; max-width: 66ch; }

/* ---------------- cotización ---------------- */
.cotizar .env { display: grid; gap: 40px; }
@media (min-width: 820px) { .cotizar .env { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.form { background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px; padding: 24px; }
.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid #D6CFC2; border-radius: 3px; padding: 10px 12px;
  font-family: inherit; font-size: .93rem; background: var(--papel); color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--petroleo); outline-offset: 1px; border-color: var(--petroleo);
}
.dos-campos { display: grid; gap: 15px; }
@media (min-width: 560px) { .dos-campos { grid-template-columns: 1fr 1fr; } }
.form .btn { width: 100%; text-align: center; border: none; cursor: pointer; font-family: inherit; }
.contacto-lista { list-style: none; margin: 22px 0 0; padding: 0; }
.contacto-lista li { padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: .93rem; }
.contacto-lista li:last-child { border-bottom: none; }
.contacto-lista b { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }

/* ---------------- pie ---------------- */
footer.pie { background: var(--carbon); color: #C9C5D2; padding: 46px 0 30px; font-size: .89rem; }
footer.pie .env { display: grid; gap: 30px; }
@media (min-width: 780px) { footer.pie .env { grid-template-columns: 1.3fr 1fr 1fr; } }
footer.pie .marca { color: #F0EEF3; margin-bottom: 12px; }
footer.pie h4 { color: #F0EEF3; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; font-family: "Source Sans 3", sans-serif; font-weight: 700; }
footer.pie ul { list-style: none; margin: 0; padding: 0; }
footer.pie li { margin-bottom: 8px; }
footer.pie a { text-decoration: none; }
footer.pie a:hover { color: var(--amarillo); }
.legal { border-top: 1px solid #35323F; margin-top: 34px; padding-top: 20px; font-size: .8rem; color: #8B8796; }

/* ---------------- marcas de "falta tu dato" ---------------- */
.pendiente {
  background: var(--oro-suave); color: var(--oro-osc); border-radius: 2px;
  padding: 0 5px; font-weight: 600; box-decoration-break: clone;
}
footer.pie .pendiente { background: #4A3A00; color: var(--amarillo); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (min-width: 700px) { .appgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .dashgrid { grid-template-columns: 1.05fr .95fr; align-items: center; } }

/* ============================================================================
   PÁGINAS (10-09-2026): la web pasa de una sola página a cuatro.
   ============================================================================ */

/* la página en la que estás, marcada en el menú */
.nav ul a[aria-current="page"] {
  color: var(--petroleo); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--amarillo); padding-bottom: 3px;
}

/* rejilla de cuatro: dos en tableta, cuatro en pantalla ancha */
@media (min-width: 640px) { .rejilla.c4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rejilla.c4 { grid-template-columns: repeat(4, 1fr); } }

/* dos columnas genéricas: texto a un lado, ilustración al otro */
.par { display: grid; gap: 38px; }
@media (min-width: 860px) { .par { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ---------------- reportería automática: el correo que llega solo ---------------- */
.correo {
  border: 1px solid var(--linea); border-radius: 6px; background: var(--blanco);
  overflow: hidden; box-shadow: 0 10px 30px rgba(10,67,73,.10);
}
.correo .de {
  padding: 12px 16px; border-bottom: 1px solid var(--linea-2);
  display: grid; gap: 2px; font-size: .8rem; color: var(--tinta-3);
}
.correo .de b { color: var(--tinta); font-size: .92rem; }
.correo .adjunto {
  margin: 14px 16px 0; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); border-radius: 4px; padding: 6px 10px;
  font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--tinta-2);
}
.correo .adjunto i {
  width: 18px; height: 22px; border-radius: 2px; background: var(--petroleo);
  display: block; position: relative;
}
.correo .adjunto i::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 2px;
  background: var(--amarillo); box-shadow: 0 4px 0 var(--amarillo), 0 8px 0 var(--amarillo);
}
.correo .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea-2); margin: 14px 0 0; }
.correo .dato { background: var(--blanco); padding: 12px 14px; }
.correo .dato b { display: block; font-family: "Source Serif 4", serif; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.correo .dato span { font-size: .72rem; color: var(--tinta-3); }

/* ---------------- papeletas: el aviso que llega por correo ---------------- */
.aviso-papeleta {
  border: 1px solid var(--linea); border-left: 4px solid #C8452F; border-radius: 4px;
  background: var(--blanco); padding: 18px 20px; box-shadow: 0 10px 30px rgba(10,67,73,.08);
}
.aviso-papeleta .tipo {
  font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #A8361F;
}
.aviso-papeleta h3 { margin: 6px 0 12px; font-size: 1.15rem; }
.aviso-papeleta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .88rem; }
.aviso-papeleta dt { color: var(--tinta-3); }
.aviso-papeleta dd { margin: 0; font-weight: 600; }
.aviso-papeleta .plazo {
  margin-top: 14px; padding: 9px 12px; background: var(--oro-suave);
  border-radius: 3px; font-size: .84rem; color: var(--oro-osc);
}

/* ---------------- dashcam: qué llega primero y qué después ---------------- */
.fases { display: grid; gap: 16px; }
@media (min-width: 760px) { .fases { grid-template-columns: 1fr 1fr; } }
.fase { border: 1px solid var(--linea); border-radius: 4px; padding: 20px; background: var(--papel); }
.fase .cuando {
  font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--petroleo);
}
.fase.despues .cuando { color: var(--tinta-3); }
.fase h3 { margin: 6px 0 10px; font-size: 1.1rem; }
.fase ul { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: .92rem; }
.fase li { margin-bottom: 5px; }

/* ---------------- enlace a otra página, al pie de una sección ---------------- */
.ir {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-weight: 600; color: var(--petroleo); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.ir::after { content: "→"; }
section.oscura .ir, section.petrolea .ir { color: var(--amarillo); }

/* al saltar a una seccion, que no quede debajo del menu fijo */
[id] { scroll-margin-top: 84px; }

/* formulario: la alternativa de mandarlo por correo, discreta bajo el boton */
.por-correo {
  display: block; width: 100%; margin-top: 10px; padding: 6px; border: none;
  background: none; cursor: pointer; font: inherit; font-size: .86rem;
  color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px;
}
.por-correo:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.contacto-lista a { color: var(--petroleo); font-weight: 600; text-decoration: none; }
.contacto-lista a:hover { text-decoration: underline; }

/* pie: la linea legal ocupa todo el ancho, no solo la primera columna */
footer.pie .env:last-child { display: block; }
/* pie: el distintivo del logo en amarillo, como el icono de la app (sobre el
   fondo carbon, el recuadro carbon desaparecia y la T quedaba flotando) */
footer.pie .marca .sig { background: var(--amarillo); color: var(--carbon); }

/* ---------------- capturas del celular, en su marco de telefono ---------------- */
.movil-marco {
  border: 7px solid #16151B; border-radius: 30px; overflow: hidden; background: #16151B;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 20px 44px rgba(10,67,73,.18);
}
section.oscura .movil-marco { box-shadow: 0 0 0 1px #45414F, 0 22px 50px rgba(0,0,0,.5); }
.movil-marco img { display: block; width: 100%; height: auto; }
.telefonos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 920px; }
.tel { margin: 0; }
.tel figcaption { margin-top: 16px; font-size: .9rem; color: var(--tinta-2); }
.tel figcaption b {
  display: block; margin-bottom: 3px; color: var(--tinta);
  font-family: "Source Serif 4", serif; font-size: 1.06rem;
}

/* ---------------- documentos legales ---------------- */
.doc-cabecera { padding-bottom: 38px; }
.doc-cabecera .env { max-width: 760px; }     /* el titulo, en la misma columna que el texto */
.doc-cabecera .bajada { max-width: 60ch; margin-bottom: 0; }
.documento { max-width: 760px; }
.documento h2 { font-size: 1.22rem; margin: 36px 0 10px; letter-spacing: -.005em; }
.documento h2:first-child { margin-top: 0; }
.documento p, .documento li { color: var(--tinta-2); font-size: .98rem; }
.documento p { margin: 0 0 12px; }
.documento ul { margin: 0 0 14px; padding-left: 20px; }
.documento li { margin-bottom: 7px; }
.documento strong { color: var(--tinta); }
.documento a, .consentimiento a { color: var(--petroleo); }
.consentimiento { font-size: .78rem; color: var(--tinta-3); margin: 12px 0 0; text-align: center; }
footer.pie .legal a { color: #C9C5D2; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   CELULAR. Va al final a proposito: estas reglas tienen la misma fuerza que
   las generales, y en CSS a igualdad gana la que va despues.
   ============================================================================ */
/* En pantallas estrechas la tabla no cabe: en vez de deslizarla de lado (casi
   nadie se da cuenta de que se puede), cada fila pasa a ser una tarjeta de dos
   lineas. Arriba placa, servicio y estado; abajo la barra y lo que falta. */
@media (max-width: 820px) {
  .mant-app { min-width: 0; }
  .ma-top { flex-direction: column; align-items: stretch; }
  .ma-herr { width: 100%; }
  .ma-buscar { flex: 1 1 auto; min-width: 0; }
  .mant-app thead { display: none; }
  .mant-app table, .mant-app tbody { display: block; }
  .mant-app tr {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px;
    align-items: center; padding: 14px 16px; border-top: 1px solid var(--linea-2);
  }
  .mant-app td { padding: 0; border: none; }
  .mant-app td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mant-app td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .mant-app td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .mant-app td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .mant-app td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; }
  .mant-app td.ma-acc { display: none; }
  .ma-prog { min-width: 0; }
}
@media (max-width: 900px) {
  /* el menu ocupa dos filas: al saltar a una seccion hay que dejarle mas sitio */
  [id] { scroll-margin-top: 118px; }
}

/* capturas del celular en celular: se deslizan de lado, una por pantalla, en
   vez de apilar tres telefonos de alto y obligar a bajar sin fin */
@media (max-width: 700px) {
  .telefonos {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -24px; padding: 0 24px 14px;
  }
  .tel { flex: 0 0 74%; scroll-snap-align: center; }
}