/* ============================================================================
   CharlaMotor · no-te-cuentan.css
   LA HOJA DE «LO QUE NO TE CUENTAN»: el índice y sus páginas.

   José, 22 sep 2026: «hay páginas y apartados. ¿Puedes rehacer el esquema para
   que todo sea uniforme y se vea todo de la misma manera? Unifica todo con el
   aspecto del resto de la web». Y, sobre si pasarlo todo a páginas: «mejor
   todo páginas, para el SEO».

   Hasta ese día, nueve de los diecisiete temas eran apartados que se abrían
   DENTRO del índice, cada uno con sus estilos escritos a mano —dos de ellos
   enteros en línea, con sus colores propios—, y los otros ocho eran páginas.
   Ahora todo son páginas, y las que salen del catálogo se escriben con esta hoja
   y nada más: la superficie la pone `.tarjeta`, de `telemetria.css`, y aquí va
   solo lo que tiene dentro.

   El título de cada apartado es el de la casa —el `.ga-tit` de la gama:
   cuerpo grande, redonda y peso 800 en azul marino—, no las versalitas.
   ============================================================================ */

/* EL ANCHO DE LECTURA, el mismo de los artículos */
.nc-wrap{max-width:880px;margin:0 auto;padding:18px 20px 60px;}

/* LA ENTRADA, bajo la cabecera */
.nc-entrada{color:var(--text);font-size:var(--fs-cuerpo);line-height:1.6;margin:0 0 22px;}

/* CADA APARTADO: una tarjeta de la casa con su título */
.nc-bloque{padding:24px 22px;margin-bottom:20px;}
.nc-bloque h2{font-family:var(--disp);font-size:var(--letra-4);font-weight:800;
  text-transform:none;letter-spacing:normal;color:var(--navy);line-height:1.2;margin:0 0 8px;}
.nc-bloque h2 em{color:var(--azul-texto);font-style:normal;}
.nc-bloque .nc-sub{color:var(--text-muted);font-size:var(--letra-2);line-height:1.5;margin:0 0 16px;}

/* LA NOTA DE PIE: de dónde sale la cifra y con qué mínimo */
.nc-nota{color:var(--text-muted);font-size:var(--letra-2);line-height:1.6;margin:6px 0 20px;}

.nc-cargando{text-align:center;padding:40px;color:var(--text-muted);font-size:var(--letra-2);}

/* LAS TRES CIFRAS DE ARRIBA */
.nc-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.nc-cifra{padding:20px 16px;text-align:center;}
.nc-cifra .n{font-family:var(--disp);font-size:var(--letra-5);font-weight:800;color:var(--azul-texto);line-height:1;}
.nc-cifra .l{font-size:var(--letra-1);color:var(--text);margin-top:8px;line-height:1.4;}
.nc-cifra .l b{color:var(--navy);}
@media(max-width:600px){ .nc-cifras{grid-template-columns:1fr;} }

/* UNA FILA DE BARRA: nombre (con su apunte), barra y cifra */
/* El nombre se parte en dos líneas si hace falta, nunca se corta con «…»: el
   apunte de debajo es la mitad de la información. */
.nc-fila{display:grid;grid-template-columns:minmax(190px,36%) 1fr 124px;gap:12px;align-items:center;margin-bottom:10px;}
.nc-fila .nom{font-size:var(--letra-2);font-weight:700;color:var(--text);text-align:right;line-height:1.3;}
.nc-fila .nom span{display:block;font-weight:500;color:var(--text-muted);font-size:var(--letra-1);
  white-space:normal;}
.nc-fila .pista{height:20px;background:var(--barra-fondo);border-radius:4px;overflow:hidden;}
.nc-fila .rell{height:100%;border-radius:4px;background:var(--navy);transition:width .7s cubic-bezier(.4,0,.2,1);}
.nc-fila .rell.mal{background:var(--rojo);}
.nc-fila .rell.bien{background:var(--verde);}
.nc-fila .rell.medio{background:var(--martini);}
.nc-fila .rell.oro{background:var(--amarillo);}
.nc-fila .val{font-family:var(--mono);font-size:var(--letra-2);font-weight:700;color:var(--text);white-space:nowrap;}
.nc-fila .val span{font-size:var(--letra-1);font-weight:500;opacity:.7;}
.nc-fila .val.mal{color:var(--rojo);}
/* En el móvil, el nombre encima y la barra con su cifra debajo. */
@media(max-width:600px){
  .nc-fila{grid-template-columns:1fr 96px;row-gap:4px;margin-bottom:14px;}
  .nc-fila .nom{grid-column:1 / -1;text-align:left;}
}

/* LOS HÁBITOS AL CONDUCIR: número, título, por qué y qué hacer */
.nc-habito{border-top:1px solid var(--line);padding:16px 0 4px;}
.nc-habito:first-of-type{border-top:0;padding-top:4px;}
.nc-habito .cab{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.nc-habito .num{font-family:var(--mono);font-weight:700;color:var(--azul-texto);font-size:var(--letra-3);flex:none;}
.nc-habito .t{font-family:var(--disp);font-weight:700;color:var(--text);font-size:var(--letra-3);line-height:1.25;}
.nc-habito .mal{font-size:var(--letra-2);color:var(--text);line-height:1.6;margin:0 0 10px;}
.nc-habito .bien{font-size:var(--letra-2);color:var(--text);line-height:1.5;background:rgba(51,217,138,.10);
  border-left:4px solid var(--verde);border-radius:var(--r1);padding:8px 12px;margin-bottom:10px;}
.nc-habito .bien b{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:var(--letra-1);color:#0A7A50;margin-bottom:2px;}

/* ── EL ÍNDICE ─────────────────────────────────────────────────────────── */
.lq-container{max-width:1100px;margin:0 auto;padding:28px 16px 0;position:relative;z-index:2;}
.nc-grupo{margin:0 0 36px;}
.nc-grupo > h2{font-family:var(--disp);font-size:var(--letra-4);font-weight:800;color:var(--navy);margin:0 0 6px;}
.nc-grupo > p{color:var(--text-muted);font-size:var(--letra-2);line-height:1.5;margin:0 0 16px;}
.lq-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.lq-sec-card{padding:26px 24px;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;}
.lq-sec-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.lq-sec-card .lq-sec-num{font-family:var(--mono);font-size:var(--letra-6);font-weight:700;
  color:rgba(27,53,104,.08);position:absolute;top:8px;right:16px;}
.lq-sec-card h3{font-family:var(--disp);font-size:var(--letra-3);font-weight:700;color:var(--navy);margin:0 0 6px;
  padding-right:48px;}
.lq-sec-card h3 em{font-style:normal;color:var(--azul-texto);}
.nc-rel > h2 em, .nc-grupo > h2 em{font-style:normal;color:var(--azul-texto);}
.lq-sec-card p{font-size:var(--letra-2);color:var(--text);line-height:1.5;margin:0;}
@media(max-width:600px){ .lq-sections{grid-template-columns:1fr;} }

/* La guía de compra, al pie del índice: bloque oscuro de la casa */
.lq-guia{background:var(--navy);border-radius:var(--radius);padding:24px 26px;margin:4px 0 30px;box-shadow:var(--shadow-lg);}
.lq-guia .t{font-family:var(--mono);font-size:var(--letra-1);letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo);}
.lq-guia h3{font-family:var(--disp);font-weight:700;font-size:var(--letra-4);color:#FFFFFF;margin:8px 0 6px;line-height:1.15;}
.lq-guia p{font-size:var(--letra-2);color:rgba(255,255,255,.82);line-height:1.5;margin:0 0 16px;max-width:52em;}

/* «SIGUE EN LO QUE NO TE CUENTAN»: los otros temas del mismo grupo, al pie de
   cada página. Lo pinta `articulos.js` en `[data-cm-relacionados]`. */
/* Por encima del fondo cuadriculado aunque la página lo ponga fuera de su capa. */
.nc-rel{max-width:880px;margin:10px auto 0;padding:0 20px 40px;position:relative;z-index:2;}
.nc-rel > h2{font-family:var(--disp);font-size:var(--letra-4);font-weight:800;color:var(--navy);margin:0 0 14px;}
.nc-rel .lq-sections{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

/* UNA TABLA DE CIFRAS: el coste por kilómetro y el peso, por tipo de coche.
   En el móvil se desliza de lado dentro de su caja; la página no. */
.nc-tabla-caja{overflow-x:auto;margin:4px 0 6px;}
.nc-tabla{width:100%;border-collapse:collapse;font-size:var(--letra-2);}
.nc-tabla th{font-family:var(--mono);font-size:var(--letra-1);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--azul-texto);text-align:right;vertical-align:bottom;padding:8px 8px;border-bottom:1px solid var(--line-strong);line-height:1.3;}
.nc-tabla td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--text);
  font-family:var(--mono);white-space:nowrap;}
.nc-tabla th:first-child,.nc-tabla td:first-child{text-align:left;font-family:var(--body);font-weight:700;}
.nc-nota a,.nc-entrada a{color:var(--azul-texto);font-weight:600;}

/* ── LOS ARTÍCULOS ESCRITOS A MANO ─────────────────────────────────────────
   El pulso, el chasis, la realidad china, el PHEV, los raritos y el diésel
   tienen su propia hoja dentro de la página, y cada uno escribía los títulos de
   apartado en versalitas azules. Esta hoja se carga DESPUÉS de la suya, así que
   estas reglas ganan, y sus títulos quedan como los del resto de la web. La
   pancarta oscura del PHEV (`.sp-bigcta`) no entra: es otro elemento. */
.pu-block h2, .eco-block h2, .rc-block h2, .dz-block h2,
.sp-sec h2, .sp-data h2, .rar-arch h2{
  font-family:var(--disp);font-size:var(--letra-4);font-weight:800;text-transform:none;
  letter-spacing:normal;line-height:1.2;color:var(--navy);}
.pu-block h2 em, .eco-block h2 em, .rc-block h2 em, .dz-block h2 em,
.sp-sec h2 em, .sp-data h2 em, .rar-arch h2 em{color:var(--azul-texto);font-style:normal;}
.sp-block h3{text-transform:none;font-weight:800;color:var(--navy);}
.sp-sec p a{color:var(--azul-texto);font-weight:600;}