/* Guías prácticas nuevas: tablas, pasos, tarjetas de modelos y tarjetas de portada.
   Usa la misma paleta que el resto de la web (azul #06172d, dorado #d99a22, crema #fff6e3). */

.apv-standalone-article .apv-article-meta {
  margin: 0 0 18px;
  color: #6a5a3a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.apv-standalone-article .apv-table-wrap {
  width: 100%;
  margin: 22px 0 26px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(217, 154, 34, 0.34);
  border-radius: 6px;
}

.apv-standalone-article .apv-article-table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border-collapse: collapse;
  color: #26384e;
  font-size: 15px;
  line-height: 1.45;
}

.apv-standalone-article .apv-article-table caption {
  padding: 12px 16px 6px;
  color: #06172d;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
  caption-side: top;
}

.apv-standalone-article .apv-article-table th {
  padding: 11px 14px;
  color: #fff;
  background: #06172d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
}

.apv-standalone-article .apv-article-table td {
  padding: 10px 14px;
  border-top: 1px solid #efe3c9;
  vertical-align: top;
}

.apv-standalone-article .apv-article-table tbody tr:nth-child(even) td {
  background: #fbf6ea;
}

.apv-standalone-article .apv-article-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.apv-standalone-article .apv-article-table tr.apv-total td {
  color: #06172d;
  background: #fff6e3;
  border-top: 2px solid #d99a22;
  font-weight: 900;
}

.apv-standalone-article .apv-table-source {
  margin: -14px 0 24px;
  color: #5a6a7d;
  font-size: 13px;
  line-height: 1.5;
}

.apv-standalone-article ol.apv-steps {
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: apv-step;
}

.apv-standalone-article ol.apv-steps li {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px 14px 60px;
  color: #26384e;
  background: #fff;
  border: 1px solid #efe3c9;
  border-left: 5px solid #d99a22;
  border-radius: 5px;
  counter-increment: apv-step;
  line-height: 1.5;
}

.apv-standalone-article ol.apv-steps li::before {
  position: absolute;
  top: 13px;
  left: 16px;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #f2c35d;
  background: #06172d;
  border-radius: 50%;
  content: counter(apv-step);
  font-size: 14px;
  font-weight: 900;
}

.apv-standalone-article ol.apv-steps li strong {
  display: block;
  margin-bottom: 2px;
  color: #06172d;
}

.apv-standalone-article .apv-model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 26px;
}

.apv-standalone-article .apv-model-card {
  position: relative;
  overflow: hidden;
  padding: 24px 20px 20px;
  background: linear-gradient(165deg, #ffffff 0%, #fffbf1 60%, #fff6e3 100%);
  border: 1px solid #ecdcb2;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(7, 24, 47, 0.10), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: transform .15s ease, box-shadow .15s ease;
}

.apv-standalone-article .apv-model-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #d99a22, #f2c35d 55%, #d99a22);
}

.apv-standalone-article .apv-model-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(217, 154, 34, 0.16) 0%, rgba(217, 154, 34, 0) 70%);
  border-radius: 50%;
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n+2)::before {
  background: linear-gradient(90deg, #1f5c9e, #4a8fd1 55%, #1f5c9e);
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n+2)::after {
  background: radial-gradient(circle, rgba(31, 92, 158, 0.14) 0%, rgba(31, 92, 158, 0) 70%);
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n+2) > span {
  color: #1f5c9e;
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n)::before {
  background: linear-gradient(90deg, #1f6e57, #3fa085 55%, #1f6e57);
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n)::after {
  background: radial-gradient(circle, rgba(31, 110, 87, 0.14) 0%, rgba(31, 110, 87, 0) 70%);
}

.apv-standalone-article .apv-model-grid > .apv-model-card:nth-child(3n) > span {
  color: #1f6e57;
}

.apv-standalone-article .apv-model-card > span {
  position: relative;
  display: block;
  color: #9a6100;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.apv-standalone-article .apv-model-card h4 {
  position: relative;
  margin: 6px 0 10px;
  color: #06172d;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
}

.apv-standalone-article .apv-model-card p {
  position: relative;
}

.apv-standalone-article .apv-model-card p {
  margin: 0 0 8px;
  color: #35465a;
  font-size: 14.5px;
  line-height: 1.5;
}

.apv-standalone-article .apv-model-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .apv-standalone-article .apv-model-grid {
    grid-template-columns: 1fr;
  }
}

/* Imágenes de las tarjetas de la portada (guías nuevas). */
.card-irregulares {
  background-image: url('assets/apv-ingresos-irregulares-card.webp') !important;
}

.card-pareja {
  background-image: url('assets/apv-presupuesto-pareja-card.webp') !important;
}

.card-estafas {
  background-image: url('assets/apv-estafas-financieras-card.webp') !important;
}

.card-tarjetas {
  background-image: url('assets/apv-tarjetas-card.webp') !important;
  background-position: center 55% !important;
}

/* Corrección: en pantallas estrechas (móvil o paneles pequeños) las tablas no deben ensanchar la tarjeta del artículo. */
.news-main.apv-news-article > * {
  min-width: 0;
  max-width: 100%;
}

.apv-guide-article,
.apv-guide-article .news-card-body {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.apv-standalone-article .apv-table-wrap {
  max-width: 100%;
  contain: inline-size;
  -webkit-overflow-scrolling: touch;
}

.apv-standalone-article .apv-model-grid,
.apv-standalone-article ol.apv-steps {
  min-width: 0;
  max-width: 100%;
}

.apv-guide-article .news-card-body {
  overflow-wrap: anywhere;
}

.apv-guide-article .news-card-body .apv-table-wrap,
.apv-guide-article .news-card-body .apv-table-wrap * {
  overflow-wrap: normal;
}

/* Tipografía de lectura para las guías largas (solo las páginas con la clase apv-guide-article). */
#actualidad-screen .apv-guide-article .news-card-body > p,
#actualidad-screen .apv-guide-article .news-card-body > ul > li,
#actualidad-screen .apv-guide-article .news-card-body > ol:not(.apv-steps) > li {
  color: #1c2f45;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

#actualidad-screen .apv-guide-article .news-card-body > p.apv-article-meta {
  color: #6a5a3a;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.4 !important;
}

#actualidad-screen .apv-guide-article .news-card-body > p.apv-table-source {
  color: #5a6a7d;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.5 !important;
}

#actualidad-screen .apv-guide-article .news-card-body > ul > li {
  margin: 8px 0;
}

#actualidad-screen .apv-guide-article .news-card-body a {
  color: #855400;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#actualidad-screen .apv-guide-article ol.apv-steps li {
  font-size: 15.5px !important;
  font-weight: 500;
  line-height: 1.55 !important;
}

#actualidad-screen .apv-guide-article ol.apv-steps li strong {
  font-weight: 900;
}

#actualidad-screen .apv-guide-article .apv-model-card p {
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.55 !important;
}

#actualidad-screen .apv-guide-article .news-card-body h3 {
  margin: 36px 0 12px;
  color: #06172d;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

#actualidad-screen .apv-guide-article .news-card-body h3:first-of-type {
  margin-top: 26px;
}

#actualidad-screen .apv-guide-article .news-card-body h4.apv-q {
  margin: 20px 0 6px;
  color: #031224;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}

@media (max-width: 560px) {
  #actualidad-screen .apv-guide-article .news-card-body > p,
  #actualidad-screen .apv-guide-article .news-card-body > ul > li,
  #actualidad-screen .apv-guide-article .news-card-body > ol:not(.apv-steps) > li {
    font-size: 16px !important;
  }

  #actualidad-screen .apv-guide-article .news-card-body h3 {
    font-size: 23px;
  }
}

/* Figuras dentro de los artículos (infografías y fotos con la paleta de la web). */
.apv-standalone-article .apv-figure {
  margin: 26px 0 30px;
}

#actualidad-screen .apv-guide-article .apv-figure img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  border: 1px solid rgba(217, 154, 34, 0.35);
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(7, 24, 47, 0.16);
}

/* Las fotos y las infografías dentro del texto tienen que quedar más
   PEQUEÑAS que la foto de cabecera (390px de alto fijo), nunca igual ni más
   grandes, para que la cabecera siga siendo la imagen principal de la página. */
#actualidad-screen .apv-guide-article .apv-figure img[src$=".webp"] {
  max-height: 300px !important;
  object-fit: cover !important;
}

#actualidad-screen .apv-guide-article .apv-figure img[src$=".svg"] {
  max-width: 620px !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

#actualidad-screen .apv-guide-article .apv-figure:has(img[src$=".svg"]) {
  text-align: center;
}

.apv-standalone-article .apv-figure figcaption {
  margin-top: 9px;
  color: #5a6a7d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* Navegación anterior / siguiente al final de las guías (igual que en el resto de guías). */
.apv-guide-nav {
  display: flex;
  max-width: 1122px;
  margin: 34px auto 42px;
  padding: 0 4px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.apv-guide-nav a {
  display: inline-flex;
  min-height: 48px;
  padding: 14px 22px;
  align-items: center;
  justify-content: center;
  color: #9b6500;
  background: #fffaf2;
  border: 1px solid #d99a22;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(4, 20, 40, 0.06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.apv-guide-nav a:hover {
  background: #fff3d9;
}

@media (max-width: 700px) {
  .apv-guide-nav {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Recuadros de "libro recomendado" sin portada (pendiente de Amazon Afiliados).
   Estos recuadros eran una rejilla de 2 (o 3) columnas: una fija y estrecha para la
   portada y otra para el texto. Al quitar la imagen, forzamos una sola columna a
   ancho completo para que el texto no se comprima en el hueco donde iba la portada. */
.guide1-book-feature.no-cover-fix,
.kids-reading-layout.no-cover-fix,
.book-card.no-cover-fix,
.apv-featured-book.no-cover-fix,
.g5-book-recommendation.no-cover-fix,
.g6-book-card.no-cover-fix,
.budget2-book-feature.no-cover-fix,
.debt-book-panel.no-cover-fix,
.no-cover-fix,
body.como-ahorrar-dinero #guide1-screen .guide1-book-feature.no-cover-fix,
body.index #home-screen .apv-featured-book.no-cover-fix,
#guide6-screen .g6-book-card.no-cover-fix,
body.presupuesto-mensual #guide2-screen .budget2-book-feature.no-cover-fix {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.guide1-book-feature.no-cover-fix > *,
.kids-reading-layout.no-cover-fix > *,
.book-card.no-cover-fix > *,
.apv-featured-book.no-cover-fix > *,
.g5-book-recommendation.no-cover-fix > *,
.g6-book-card.no-cover-fix > *,
.budget2-book-feature.no-cover-fix > *,
.debt-book-panel.no-cover-fix > *,
.no-cover-fix > *,
body.como-ahorrar-dinero #guide1-screen .guide1-book-feature.no-cover-fix > *,
body.index #home-screen .apv-featured-book.no-cover-fix > *,
#guide6-screen .g6-book-card.no-cover-fix > *,
body.presupuesto-mensual #guide2-screen .budget2-book-feature.no-cover-fix > * {
  max-width: 100% !important;
}

/* Cabecera con foto solo para "Quiénes somos" (no afecta al resto de páginas legales,
   que comparten la misma clase .legal-hero pero sin foto). */
body.sobre #legal-screen .legal-hero {
  position: relative;
  min-height: 340px;
  color: #ffffff;
  background: linear-gradient(90deg, rgba(3, 18, 36, 0.95) 0%, rgba(3, 18, 36, 0.82) 42%, rgba(3, 18, 36, 0.38) 78%, rgba(3, 18, 36, 0.08) 100%), url('assets/apv-quienes-somos-hero.webp') center right / cover no-repeat;
}

body.sobre #legal-screen .legal-hero h1 {
  color: #ffffff;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
}

body.sobre #legal-screen .legal-hero p {
  max-width: 620px;
  color: #f2f6fb !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 680px) {
  body.sobre #legal-screen .legal-hero {
    min-height: 300px;
    background-position: center right;
  }
}

.card-reto52 {
  background-image: url('assets/apv-reto52-card.webp') !important;
  background-position: center 40% !important;
}

/* Etiqueta de periodo (mes/año/5 años) junto a cada cifra de la tabla de suscripciones,
   para que la información no dependa de la cabecera de columna, que se oculta en pantallas
   estrechas (.subscription-bars-head{display:none}). */
.subs-period {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #7a8aa0;
  letter-spacing: 0.02em;
}

@media (min-width: 721px) {
  .subs-period {
    display: none;
  }
}

/* La sección "Casos prácticos" de presupuesto-mensual.html llevaba una imagen
   decorativa de fondo muy pequeña (230px) que quedaba borrosa y fuera de lugar.
   Se quita, dejando solo el fondo claro. */
body.presupuesto-mensual #guide2-screen .budget2-scenarios {
  background-image: none !important;
}

/* El recuadro oscuro del "ejemplo con cifras" (news-data-copy) tenía un peso de
   letra muy alto (650, casi negrita) que hacía que su texto normal se confundiera
   con las negritas reales y que esas páginas se sintieran más "pesadas" que el
   resto. Se baja a un peso intermedio, coherente con el resto de la web. */
body.actualidad #actualidad-screen .apv-guide-article .news-data-copy p {
  font-weight: 500 !important;
}

/* Las 5 páginas de tipo "legal" (aviso legal, cookies, privacidad, contacto y
   quiénes somos) tenían TODO el texto en negrita (peso 700), mucho más pesado
   que el resto de la web (peso 400). Se iguala al resto. */
#legal-screen .legal-card p,
#legal-screen .legal-card li {
  font-weight: 400 !important;
}

/* "Quiénes somos" es más una guía narrativa que un texto legal denso, así que
   su tamaño de letra se acerca un poco más al del resto de artículos. */
body.sobre #legal-screen .legal-card p,
body.sobre #legal-screen .legal-card li {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Índice de todas las guías: lista con título y descripción corta por guía,
   agrupada en bloques por tema (h2 dentro de la misma tarjeta legal-card). */
#legal-screen .legal-card h2 {
  margin: 30px 0 12px;
  color: #06172d;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
}

#legal-screen .legal-card h2:first-child {
  margin-top: 0;
}

.apv-index-list {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.apv-index-list li {
  padding: 14px 0;
  border-top: 1px solid #eee0c4;
}

.apv-index-list li:first-child {
  border-top: none;
}

.apv-index-list a {
  display: block;
  margin-bottom: 3px;
  color: #855400;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apv-index-list span {
  display: block;
  color: #4a5a6d;
  font-size: 14px;
  line-height: 1.5;
}

/* Portada: las tarjetas de guías se agrupan por tema (Ahorro, Presupuesto,
   Deudas y tarjetas, Inversión, Seguridad), en vez de una única lista plana. */
.apv-home-category {
  margin: 0 0 26px;
}

.apv-home-category:last-child {
  margin-bottom: 0;
}

.apv-home-cat-title {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, #0a2647 0%, #06172d 100%);
  border-left: 4px solid #d99a22;
  border-radius: 6px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .apv-home-cat-title {
    font-size: 16px;
    padding: 10px 14px;
  }
}

/* El menú superior está pensado para quedarse fijo al bajar (position: sticky),
   pero varias reglas antiguas usaban "overflow-x: hidden" en el body para evitar
   el scroll lateral. Ese "hidden" tiene un efecto secundario: convierte también
   el overflow vertical en "auto", y eso rompe el menú fijo en casi toda la web.
   Se cambia por "clip", que evita el scroll lateral igual mejor, pero sin ese
   efecto secundario. No se toca ninguna otra propiedad de esas reglas. */
body {
  overflow-x: clip !important;
}

body.apv-page {
  overflow-x: clip !important;
}

body.actualidad {
  overflow-x: clip !important;
}

body.legal,
body.cookies,
body.sobre,
body.finanzas-ninos,
body.como-ahorrar-dinero,
body.presupuesto-mensual,
body.fondo-emergencia,
body.salir-de-deudas,
body.interes-compuesto,
body.invertir-poco-dinero {
  overflow-x: clip !important;
}

/* El menú desplegable "Guías" ahora tiene 11 enlaces (antes 6) y no cabía
   entero en pantallas normales, sin ninguna forma de bajar hasta el final
   (Estafas financieras quedaba fuera de la vista). Se le da una altura
   máxima con desplazamiento propio. */
.apv-guides-panel {
  max-height: min(70vh, 520px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .apv-guides-panel {
    max-height: min(60vh, 460px) !important;
  }
}

/* tablas: cabeceras que se parten */
.apv-standalone-article .apv-article-table th,
.apv-standalone-article .apv-article-table th.num,
.apv-guide-article .news-card-body .apv-article-table th {
  white-space: normal !important;
  vertical-align: bottom;
  line-height: 1.25;
}

/* tablas en móvil */
@media (max-width: 600px) {
  .apv-standalone-article .apv-article-table,
  .apv-guide-article .news-card-body .apv-article-table {
    min-width: 0 !important;
    font-size: 13px !important;
  }
  .apv-standalone-article .apv-article-table th,
  .apv-standalone-article .apv-article-table td {
    padding: 8px 6px !important;
  }
  .apv-standalone-article .apv-article-table th { font-size: 11.5px !important; }
  .apv-standalone-article .apv-article-table caption { font-size: 13.5px !important; padding: 10px 8px 6px !important; }
}

/* tablas a todo el ancho */
.apv-standalone-article .apv-table-wrap > .apv-article-table,
.apv-guide-article .news-card-body .apv-table-wrap > .apv-article-table {
  width: 100% !important;
  display: table !important;
}

/* rejilla de cuatro tarjetas: dos filas de dos */
.apv-standalone-article .apv-model-grid.apv-model-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .apv-standalone-article .apv-model-grid.apv-model-grid-4 { grid-template-columns: 1fr; } }