/* =======================================================================
   PAGINA.CSS - Carspro
   Cuerpo de las páginas interiores por debajo del pliegue.
   Las migas y la portada están en critico.css.
   ======================================================================= */

/* -----------------------------------------------------------------------
   4. CUERPO DE ARTÍCULO
   ----------------------------------------------------------------------- */
.prosa h2{margin-top:52px;margin-bottom:16px}
.prosa h2:first-child{margin-top:0}
.prosa h3{margin-top:32px;margin-bottom:10px;color:var(--cian)}
.prosa p{margin-bottom:16px}
.prosa strong{color:var(--blanco);font-weight:600}
.prosa a:not(.btn){color:var(--cian);border-bottom:1px solid rgba(0,229,255,.4)}
.prosa a:not(.btn):hover{border-color:var(--cian)}
/* La lista de chequeo es una rejilla a ancho completo: queda excluida de
   las reglas de lista en columna, que si no le recortan el ancho y le
   pisan el marcador. */
.prosa > ul:not(.chequeo),.prosa > ol{margin:0 0 20px;max-width:65ch;display:flex;flex-direction:column;gap:10px}
.prosa > ul:not(.chequeo) li{position:relative;padding-left:22px}
.prosa > ul:not(.chequeo) li::before{
  content:"";position:absolute;left:2px;top:.66em;
  width:9px;height:2px;background:var(--cian);
}
.prosa > ol{list-style:none;counter-reset:paso}
.prosa > ol li{counter-increment:paso;position:relative;padding-left:34px}
.prosa > ol li::before{
  content:counter(paso);position:absolute;left:0;top:.1em;
  font-family:var(--f-dato);font-size:.72rem;font-weight:700;color:var(--cian);
  border:1px solid rgba(0,229,255,.45);border-radius:50%;
  width:22px;height:22px;display:grid;place-items:center;
}
.prosa li strong{color:var(--blanco)}

/* -----------------------------------------------------------------------
   5. TABLAS DE DATOS (planes de mantenimiento, precios, intervalos)
   ----------------------------------------------------------------------- */
.tabla-datos{
  overflow-x:auto;margin:0 0 26px;
  border:1px solid var(--borde);background:var(--grafito);
}
.tabla-datos table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
.tabla-datos th,.tabla-datos td{
  text-align:left;padding:11px 15px;border-bottom:1px solid var(--borde);vertical-align:top;
}
.tabla-datos th{
  font-family:var(--f-dato);font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cian);background:rgba(0,229,255,.05);white-space:nowrap;
}
.tabla-datos tbody tr:last-child td{border-bottom:0}
.tabla-datos td:first-child{color:var(--blanco);font-weight:500}
.tabla-datos .km{font-family:var(--f-dato);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cian)}
.tabla-datos .precio{font-family:var(--f-dato);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-datos caption{
  caption-side:bottom;text-align:left;padding:11px 15px;
  font-size:.8rem;color:var(--gris);border-top:1px solid var(--borde);
}

/* -----------------------------------------------------------------------
   6. AVISOS Y CAJAS DESTACADAS
   ----------------------------------------------------------------------- */
.aviso{
  background:rgba(255,176,32,.07);border-left:3px solid var(--ambar);
  padding:16px 20px;margin:0 0 26px;
}
.aviso p{margin:0;max-width:62ch;color:var(--hueso);font-size:.96rem}
.aviso p+p{margin-top:10px}
.aviso b{color:var(--ambar)}

.dato-clave{
  background:var(--grafito);border:1px solid var(--borde);border-left:3px solid var(--cian);
  padding:16px 20px;margin:0 0 26px;
}
.dato-clave p{margin:0;max-width:62ch;font-size:.96rem}
.dato-clave p+p{margin-top:10px}
.dato-clave b{color:var(--cian)}

/* Bloque de síntomas: cuándo necesitas este servicio */
.sintomas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin:0 0 28px;
}
.sintoma{
  background:var(--grafito);border:1px solid var(--borde);padding:16px 18px;
  border-top:2px solid var(--ambar);
}
.sintoma h3{
  font-size:1rem;margin:0 0 7px;color:var(--blanco);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.01em;
}
.sintoma p{margin:0;font-size:.9rem;color:var(--gris);max-width:none}

/* -----------------------------------------------------------------------
   7. LISTA DE COMPROBACIÓN (qué incluye el servicio)
   ----------------------------------------------------------------------- */
.chequeo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px;background:var(--borde);border:1px solid var(--borde);margin:0 0 28px;
}
.chequeo li{
  background:var(--grafito);padding:13px 16px 13px 40px;position:relative;
  font-size:.93rem;color:var(--hueso);
}
.chequeo li::before{
  content:"";position:absolute;left:16px;top:1.22em;
  width:9px;height:5px;border-left:2px solid var(--cian);border-bottom:2px solid var(--cian);
  transform:rotate(-45deg);
}

/* -----------------------------------------------------------------------
   8. CIERRE Y ENLACES RELACIONADOS
   ----------------------------------------------------------------------- */
.cierre-cta{
  background:var(--grafito);border:1px solid var(--borde);
  padding:32px 26px;margin-top:52px;text-align:center;
}
.cierre-cta h2{margin:0 0 12px}
.cierre-cta p{margin:0 auto 22px;color:var(--gris);max-width:52ch}
.cierre-cta__botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cierre-cta__botones .btn{flex:1 1 250px;max-width:330px}

.relacionados{margin-top:14px}
.relacionados ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
}
.relacionados a{
  display:block;height:100%;
  background:var(--grafito);border:1px solid var(--borde);padding:15px 17px;
}
.relacionados a:hover{border-color:var(--cian);transform:translateY(-2px)}
.relacionados .r-rotulo{
  font-family:var(--f-dato);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cian);display:block;margin-bottom:6px;
}
.relacionados .r-titulo{
  font-family:var(--f-display);font-size:1.02rem;font-weight:700;text-transform:uppercase;
  color:var(--blanco);display:block;line-height:1.2;
}
.relacionados .r-nota{display:block;font-size:.85rem;color:var(--gris);margin-top:6px}

/* -----------------------------------------------------------------------
   9. REJILLA DE ENLACES DE HUB (/servicios/, /marcas/, /zonas/)
   ----------------------------------------------------------------------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.hub__item{
  background:var(--grafito);border:1px solid var(--borde);
  padding:22px 22px 24px;display:flex;flex-direction:column;
}
.hub__item:hover{border-color:var(--cian)}
.hub__item h3{margin:0 0 10px;font-size:1.18rem}
/* Prefijadas con .prosa para ganarle a la regla .prosa a:not(.btn), que si
   no deja el titulo del mismo cian que el enlace y borra la jerarquia. */
.prosa .hub__item h3 a{color:var(--blanco);border-bottom:0}
.prosa .hub__item h3 a:hover{color:var(--cian)}
.prosa .hub__item .hub__ver{border-bottom:0}
.hub__item p{font-size:.93rem;color:var(--gris);margin:0 0 16px;flex:1;max-width:none}
.hub__item .hub__ver{
  font-family:var(--f-dato);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cian);display:inline-flex;align-items:center;gap:7px;
}
.hub__item:hover .hub__ver{gap:11px}

/* -----------------------------------------------------------------------
   10. AJUSTES RESPONSIVE
   ----------------------------------------------------------------------- */
@media (min-width:720px){
  .portada{padding:62px 0 56px}
  .portada__ctas .btn{flex:0 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .hub__item,.relacionados a,.hub__item .hub__ver{transition:none}
  .relacionados a:hover{transform:none}
}