/* ==========================================================================
   VH Content Styles — capa visual del cuerpo de los artículos
   vehiculoseguros.com · v1.0.0 · 2026-08-04

   Carga después de 'newslive-default-css' (última hoja del tema), así que gana
   por orden de cascada. Sin !important salvo donde se indica y se justifica.

   Contexto del DOM (medido en producción):
     div.mg-blog-post-box
       └─ article.page-content-single.small.single      <- el contenedor real
   El tema NO usa .entry-content: esa clase no existe aquí.

   Regla del tema a batir en títulos:
     .mg-blog-post-box .small :is(h1,...,h6) { margin-top:0; margin-bottom:12px }
   Se replica la cadena añadiendo .page-content-single para igualar especificidad
   y ganar por orden.
   ========================================================================== */

:root {
  --vh-azul: #008ec2;          /* azul de enlaces del tema, ya establecido como color de marca */
  --vh-azul-oscuro: #056d94;
  --vh-tinta: #222222;         /* color de cuerpo del tema */
  --vh-tinta-suave: #55606a;
  --vh-linea: #e2e6ea;
  --vh-fondo-suave: #f5f8fa;
  --vh-ambar: #b06d00;
  --vh-ambar-fondo: #fdf6e8;
  --vh-medida: 68ch;           /* ancho de lectura objetivo (~68 caracteres) */
}

/* --------------------------------------------------------------------------
   1. Ancho de lectura
   El tema no pone max-width en ninguna parte de la cadena de contenedores:
   127 caracteres por línea a 1440px, 177 a 1920px. Se constriñe el flujo de
   texto y se deja que las figuras respiren a todo el ancho de la columna.
   -------------------------------------------------------------------------- */

.page-content-single > p,
.page-content-single > ul,
.page-content-single > ol,
.page-content-single > h2,
.page-content-single > h3,
.page-content-single > h4,
.page-content-single > blockquote,
.page-content-single > .vh-resumen,
.page-content-single > .vh-callout,
.page-content-single > .vh-ejemplo,
.page-content-single > .vh-cta,
.page-content-single > .vh-actualizado,
.page-content-single > .vh-metodo,
.page-content-single > .vh-fuentes {
  max-width: var(--vh-medida);
  margin-right: auto;
}

/* Las figuras y tablas sí pueden ser más anchas que la columna de texto:
   es lo que crea el contraste visual que rompe el muro. */
.page-content-single > figure,
.page-content-single > .vh-dato {
  max-width: min(100%, 860px);
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   2. Ritmo vertical y escala de títulos
   El tema fija margin-top:0 en todos los encabezados, así que un título queda
   pegado al párrafo anterior. Y los tamaños son fijos: 32px de h2 también en
   una pantalla de 320px.
   -------------------------------------------------------------------------- */

.mg-blog-post-box .page-content-single.small :is(h2, h3, h4) {
  margin-top: 2.2em;
  margin-bottom: 0.55em;
  line-height: 1.25;
  text-wrap: balance;
}

.mg-blog-post-box .page-content-single.small h2 {
  font-size: clamp(22px, 1.35rem + 0.7vw, 30px);
}

.mg-blog-post-box .page-content-single.small h3 {
  font-size: clamp(19px, 1.15rem + 0.45vw, 24px);
}

.mg-blog-post-box .page-content-single.small h4 {
  font-size: clamp(17px, 1.05rem + 0.25vw, 20px);
}

/* Un poco de aire en el cuerpo: 27px de interlineado sobre 16px se queda corto
   en líneas largas. */
.page-content-single > p {
  line-height: 1.72;
  margin-bottom: 1.15em;
}

/* El primer párrafo hace de entradilla. */
.page-content-single > .vh-resumen + p {
  font-size: 1.075em;
  color: #1a1f24;
}

/* --------------------------------------------------------------------------
   3. Tablas
   Sin contenedor de scroll, una tabla de 370px en una columna de 300px empujaba
   25px de scroll horizontal a toda la página (medido a 320/360/390/414px).

   display:block + overflow-x:auto es el rescate para el archivo histórico, que
   trae <table> pelada. El contenido nuevo emite figure.wp-block-table, que ya
   trae overflow-x de WordPress core; ahí se restaura display:table.
   -------------------------------------------------------------------------- */

.page-content-single table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 0.94em;
}

.page-content-single figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  margin: 2em auto;
}

.page-content-single figure.wp-block-table > table {
  display: table;
  overflow: visible;
  min-width: 34rem; /* fuerza el scroll del contenedor en vez de aplastar columnas */
}

.page-content-single table th {
  background: #eef3f6;
  color: #10222c;
  font-weight: 700;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--vh-linea);
  white-space: nowrap;
}

.page-content-single table td {
  padding: 11px 14px;
  border: 1px solid var(--vh-linea);
  vertical-align: top;
}

.page-content-single table tbody tr:nth-child(even) td {
  background: #fafcfd;
}

/* WordPress solo inyecta el CSS "theme" de un bloque si ese bloque está en la
   página; el de tabla no se carga nunca aquí, así que el pie sale como párrafo. */
.page-content-single figure.wp-block-table > figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: #5a666e;
  text-align: left;
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   4. Componentes editoriales
   -------------------------------------------------------------------------- */

/* 4.1 Caja de resumen — abre todos los artículos */
.page-content-single .vh-resumen {
  background: var(--vh-fondo-suave);
  border: 1px solid var(--vh-linea);
  border-left: 4px solid var(--vh-azul);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 0 0 2em;
}

.page-content-single .vh-resumen__titulo {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vh-azul-oscuro);
  margin: 0 0 0.7em;
}

.page-content-single .vh-resumen ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: none;
}

.page-content-single .vh-resumen li {
  position: relative;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.page-content-single .vh-resumen li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vh-azul);
}

.page-content-single .vh-resumen li:last-child {
  margin-bottom: 0;
}

/* 4.2 Ficha del dato central */
.page-content-single .vh-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #0d2b38;
  color: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 2.2em auto;
}

.page-content-single .vh-dato__cifra {
  font-family: Montserrat, sans-serif;
  font-size: clamp(30px, 2rem + 1.6vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.page-content-single .vh-dato__unidad {
  font-size: 15px;
  color: #b9d3de;
  line-height: 1.4;
}

.page-content-single .vh-dato__fuente {
  font-size: 12.5px;
  color: #7fa3b2;
  margin-top: 8px;
}

/* 4.3 Aviso / advertencia */
.page-content-single .vh-callout {
  border: 1px solid #e8dcc0;
  border-left: 4px solid var(--vh-ambar);
  background: var(--vh-ambar-fondo);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 2em auto;
}

.page-content-single .vh-callout p {
  margin: 0;
  line-height: 1.62;
}

.page-content-single .vh-callout--aviso strong {
  color: #8a5600;
}

/* 4.4 Escenario ilustrativo — único lugar donde pueden ir cifras estimadas */
.page-content-single .vh-ejemplo {
  border: 1px dashed #c3ced6;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 2em auto;
  background: #fbfcfd;
}

.page-content-single .vh-ejemplo__etiqueta {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--vh-tinta-suave);
  margin: 0 0 0.6em;
}

.page-content-single .vh-ejemplo p:last-child {
  margin-bottom: 0;
}

/* 4.5 Recomendación (vh-cta) — tres variantes, porque el lector tiene derecho a saber
   cuál de los enlaces le reporta dinero al sitio y cuál no:
     --seguro   enlace de afiliado a /cotizar        (hay comisión)
     --consulta herramienta propia consultaplaca.co  (no hay comisión, pero sí interés)
     --lectura  otro artículo del blog               (sin interés comercial)
   El bloque es el ÚNICO lugar donde puede vivir un enlace comercial: en la prosa quedan
   prohibidos para que el lector distinga el reporte de la recomendación.

   Nota de marcado: el botón se estiliza con `> a` (hijo directo), NO con `a` a secas. El
   bloque contiene otro enlace dentro de .vh-cta__nota (la divulgación hacia /aviso-afiliados)
   y con el selector amplio ese enlace de texto se convertía también en botón. */
.page-content-single .vh-cta {
  border-radius: 8px;
  padding: 20px 24px;
  margin: 2.4em auto;
  border: 1px solid #b9dcec;
  background: linear-gradient(180deg, #e8f4fa 0%, #dceef7 100%);
}

/* Explícita aunque coincida con la base: si mañana cambia el estilo base, la variante de
   afiliado no debe cambiar por accidente. Las tres variantes se leen juntas en el archivo. */
.page-content-single .vh-cta--seguro {
  border-color: #b9dcec;
  background: linear-gradient(180deg, #e8f4fa 0%, #dceef7 100%);
}

.page-content-single .vh-cta--consulta {
  border-color: #cfe0d4;
  background: linear-gradient(180deg, #edf6f0 0%, #e2f0e7 100%);
}

.page-content-single .vh-cta--lectura {
  border-color: var(--vh-linea);
  background: var(--vh-fondo-suave);
}

.page-content-single .vh-cta p {
  margin: 0 0 0.75em;
  line-height: 1.6;
}

/* Etiqueta que nombra la naturaleza del enlace. Va siempre visible y antes del botón. */
.page-content-single .vh-cta__etiqueta {
  font-family: Montserrat, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0b5c78;
  margin-bottom: 0.6em;
}

.page-content-single .vh-cta--consulta .vh-cta__etiqueta {
  color: #1f6b45;
}

.page-content-single .vh-cta--lectura .vh-cta__etiqueta {
  color: var(--vh-tinta-suave);
}

.page-content-single .vh-cta__texto {
  font-size: 15.5px;
  color: #17323d;
}

/* Divulgación: legible de verdad, no letra pequeña escondida. */
.page-content-single .vh-cta__nota {
  font-size: 13.5px;
  line-height: 1.55;
  color: #40525c;
}

.page-content-single .vh-cta > a {
  display: inline-block;
  background: var(--vh-azul);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 5px;
  margin-top: 0.3em;
  transition: background 0.15s ease;
}

.page-content-single .vh-cta--consulta > a {
  background: #1f6b45;
}

.page-content-single .vh-cta--lectura > a {
  background: transparent;
  color: var(--vh-azul-oscuro);
  border: 1px solid var(--vh-azul);
  padding: 9px 18px;
}

.page-content-single .vh-cta > a:hover,
.page-content-single .vh-cta > a:focus-visible {
  background: var(--vh-azul-oscuro);
  color: #fff;
  text-decoration: none;
}

.page-content-single .vh-cta--consulta > a:hover,
.page-content-single .vh-cta--consulta > a:focus-visible {
  background: #175436;
}

.page-content-single .vh-cta > a:focus-visible {
  outline: 3px solid #0d2b38;
  outline-offset: 2px;
}

/* 4.5b Hecho fechado — aísla lo que caduca para que refrescar sea reemplazar esta caja
   y no reescribir el artículo. Hoy ningún post del pipeline se ha editado nunca:
   dateModified == datePublished en los 114 publicados. */
.page-content-single .vh-actualizado {
  border: 1px solid #d3dde2;
  border-left: 4px solid var(--vh-tinta-suave);
  border-radius: 6px;
  background: #fbfcfd;
  padding: 16px 20px;
  margin: 2em auto;
}

.page-content-single .vh-actualizado__fecha {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vh-tinta-suave);
  margin: 0 0 0.6em;
}

.page-content-single .vh-actualizado p:last-child {
  margin-bottom: 0;
}

/* 4.5c Método — divulgación de automatización. Google pregunta expresamente en su guía de
   contenido útil si el uso de automatización es evidente para el visitante. */
.page-content-single .vh-metodo {
  margin: 1.6em auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--vh-line-soft, #e4e8ea);
}

.page-content-single .vh-metodo p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--vh-tinta-suave);
  margin: 0;
}

/* 4.6 Fuentes */
.page-content-single .vh-fuentes {
  border-top: 2px solid var(--vh-linea);
  padding-top: 16px;
  margin: 2.8em auto 0;
}

.page-content-single .vh-fuentes__titulo {
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--vh-tinta-suave);
  margin: 0 0 0.6em;
}

.page-content-single .vh-fuentes ul {
  margin: 0;
  padding-left: 1.1em;
}

.page-content-single .vh-fuentes li {
  font-size: 14px;
  color: var(--vh-tinta-suave);
  line-height: 1.55;
  margin-bottom: 0.3em;
}

/* --------------------------------------------------------------------------
   5. Imágenes en el cuerpo
   El tema fuerza height:auto en toda img y figure con especificidad (0,2,1),
   así que nunca se fija height aquí: solo aspect-ratio si hiciera falta.
   -------------------------------------------------------------------------- */

.page-content-single figure.wp-block-image {
  margin: 2.4em auto;
}

.page-content-single figure.wp-block-image img {
  border-radius: 6px;
  width: 100%;
}

.page-content-single figure.wp-block-image figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: #5a666e;
  text-align: left;
  margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   6. Móvil
   El tema baja el padding del artículo a 30px en ≤768px pero no toca los
   títulos. Con clamp() ya se resuelve el tamaño; aquí solo se ajusta el
   respiro de los componentes.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .page-content-single .vh-resumen,
  .page-content-single .vh-cta,
  .page-content-single .vh-dato {
    padding-left: 18px;
    padding-right: 18px;
  }

  .page-content-single .vh-callout,
  .page-content-single .vh-ejemplo,
  .page-content-single .vh-actualizado {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* El botón a ancho completo en móvil: un enlace de 11px de padding es difícil de acertar. */
  .page-content-single .vh-cta > a {
    display: block;
    text-align: center;
  }

  .page-content-single figure.wp-block-table > table {
    min-width: 30rem;
  }
}

/* --------------------------------------------------------------------------
   7. Accesibilidad
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .page-content-single .vh-cta a {
    transition: none;
  }
}

.page-content-single a:focus-visible {
  outline: 2px solid var(--vh-azul-oscuro);
  outline-offset: 2px;
}

/* Impresión: los componentes de color no aportan en papel. */
@media print {
  .page-content-single .vh-cta {
    display: none;
  }

  .page-content-single .vh-dato {
    background: none;
    color: #000;
    border: 1px solid #000;
  }
}