/* ============ Reset mínimo ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-texto);
  font-family: var(--fuente-base);
  font-size: calc(var(--texto-base) * var(--escala-texto));
  line-height: var(--interlineado);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-enlace); }
a:visited { color: var(--color-enlace-visitado); }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: var(--interlineado-titulos);
  color: var(--color-azul);
  margin-top: 0;
}
h1 { font-size: calc(var(--texto-h1) * var(--escala-texto)); }
h2 { font-size: calc(var(--texto-h2) * var(--escala-texto)); }
h3 { font-size: calc(var(--texto-h3) * var(--escala-texto)); }
button { font-family: inherit; }

/* ============ Utilidades ============ */
/* Contenedor exterior global (~1200px, ver --ancho-contenedor): lo usan la
   cabecera, el logotipo, el buscador, la navegación principal, las migas de
   pan, el contenido de la portada, las páginas de categoría y las entradas.
   Mismo margin-inline:auto y mismo padding lateral responsive en todos, así
   que el logotipo, las migas de pan y el contenido general quedan siempre en
   la misma línea vertical. */
.contenedor { max-width: var(--ancho-contenedor); margin-inline: auto; padding-inline: var(--contenedor-espacio-lateral); }
/* Columna de lectura (~860px, ver --ancho-lectura): se combina con
   `.contenedor` (misma clase en el mismo elemento, p. ej. `<div
   class="contenedor lectura">` en single.php) para quedar centrada dentro
   del contenedor global con su mismo padding lateral. No fija ninguna
   anchura rígida: por debajo de ~860px + padding simplemente ocupa el 100%
   del ancho disponible dentro del contenedor, con el mismo margen izquierdo
   y derecho que el resto del sitio. */
.lectura { max-width: var(--ancho-lectura); margin-inline: auto; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ Enlace para saltar al contenido ============ */
.saltar-al-contenido {
  position: absolute;
  left: var(--espacio-sm);
  top: -60px;
  background: var(--color-azul);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radio-borde-sm);
  z-index: 1000;
  transition: top var(--transicion-rapida);
}
.saltar-al-contenido:focus { top: var(--espacio-sm); }

/* ============ Foco visible en todo elemento interactivo ============ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--anillo-foco);
  outline-offset: var(--anillo-foco-offset);
  border-radius: var(--radio-borde-sm);
}

/* ============ Cabecera ============ */
.cabecera {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-borde);
}

/* Deja un pequeño margen superior al desplazarse a esta sección con el
   botón "Empieza aquí ↓" del header, para que el título no quede pegado
   al borde de la pantalla. La cabecera ya no es fija (no usa position:
   sticky), así que no hace falta reservar espacio para ella. */
#guias-recomendadas { scroll-margin-top: 24px; }
.cabecera .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
  padding-top: var(--espacio-sm);
  padding-bottom: var(--espacio-sm);
}
.logotipo {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-azul);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logotipo .punto { color: var(--color-coral); }
.boton-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--area-pulsable-min);
  padding: 8px 18px;
  background: var(--color-azul);
  color: #fff;
  border: none;
  border-radius: var(--radio-borde-sm);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.boton-menu:hover { background: #0A2147; }

/* Botón "Empieza aquí ↓" del header: solo aparece en la portada, en el
   lugar donde antes iba el buscador de la cabecera (el buscador principal,
   más grande, ya vive en el hero). Reutiliza el sistema de botones
   (.boton .boton-primario, fondo --color-coral-boton con 5.2:1 de
   contraste) para no introducir un color ni un componente nuevos. */
.boton-empieza-aqui { flex: 0 0 auto; white-space: nowrap; }

.buscador-cabecera { flex: 1 1 260px; max-width: 420px; }
.buscador-cabecera form { display: flex; }
.buscador-cabecera input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: var(--area-pulsable-min);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-borde-sm) 0 0 var(--radio-borde-sm);
  padding: 0 14px;
  font-size: 17px;
}
.buscador-cabecera button {
  min-height: var(--area-pulsable-min);
  min-width: var(--area-pulsable-min);
  background: var(--color-verde);
  color: #fff;
  border: none;
  border-radius: 0 var(--radio-borde-sm) var(--radio-borde-sm) 0;
  cursor: pointer;
  font-size: 15px;
  padding: 0 14px;
}
.buscador-cabecera button:hover { background: #0F4388; }

/* ============ Navegación principal ============ */
.nav-principal {
  /* Debe coincidir con el padding horizontal de .nav-principal a, más abajo:
     es lo que compensa el margin-left negativo del <ul> para que el TEXTO del
     primer enlace (no el borde de su fondo hover/foco) quede en la misma
     línea vertical que el logotipo. */
  --nav-enlace-pad-x: 16px;
  background: var(--color-azul-suave);
  border-bottom: 1px solid var(--color-borde);
}
.nav-principal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  /* Desplaza TODO el <ul> (no solo el primer enlace) hacia la izquierda por
     el mismo ancho que el padding-left de cada enlace. Al mover el
     contenedor flex completo, en vez de un solo <li>, la segunda fila (si el
     menú se envuelve) arranca en el mismo punto que la primera: ambas filas
     son parte del mismo <ul> desplazado, así que el primer enlace de
     cualquier fila cae siempre en la misma guía. El fondo hover/foco del
     primer enlace queda "de más" hacia la izquierda, dentro del padding
     lateral vacío del contenedor — no se recorta ni desborda. */
  margin-left: calc(-1 * var(--nav-enlace-pad-x));
}
.nav-principal a {
  display: flex;
  align-items: center;
  padding: 12px var(--nav-enlace-pad-x);
  color: var(--color-azul);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--area-pulsable-min);
}
.nav-principal a:hover, .nav-principal a[aria-current="page"] {
  background: var(--color-bg-alt);
  text-decoration: underline;
}
/* "Inicio" no usa el fondo blanco de hover/página activa que sí llevan los
   demás enlaces: mismo fondo azul claro del menú en todos sus estados
   (normal, hover, foco y página actual). El subrayado como indicador de
   página activa se conserva igual, ya que solo se anula `background` aquí,
   no `text-decoration` (esa propiedad la sigue aportando la regla de
   arriba). Mismo padding/tamaño: no se toca nada más de `.nav-principal a`. */
.nav-principal li.enlace-inicio a,
.nav-principal li.enlace-inicio a:hover,
.nav-principal li.enlace-inicio a:focus-visible,
.nav-principal li.enlace-inicio a[aria-current="page"] {
  background: transparent;
}
.nav-principal[hidden] { display: none; }

/* Móvil/tablet (menores de 1024px): la navegación empieza cerrada y el botón
   "☰ Menú" la abre/cierra. Esta regla NO va en un @media para que aplique de
   inmediato en el primer pintado, sin depender de que el JS llegue a
   ejecutarse (evita el parpadeo del menú móvil al cargar en escritorio). */
.nav-principal[data-abierto="false"] { display: none; }
.nav-principal[data-abierto="true"] { display: block; }

/* Escritorio (1024px o más): navegación horizontal siempre visible y botón
   "☰ Menú" completamente oculto, sin importar el estado de data-abierto. */
@media (min-width: 1024px) {
  .boton-menu { display: none; }
  .nav-principal { display: block !important; }
}

/* ============ Migas de pan ============ */
/* Bug corregido: este `padding` en shorthand (vertical horizontal) anulaba
   sin querer el `padding-inline` que ya aplica `.contenedor` (misma clase en
   el mismo <nav>), dejando las migas de pan pegadas al borde de la pantalla
   en vez de alineadas con el logotipo. Ahora solo toca el espaciado
   vertical. */
.migas-de-pan { padding-block: var(--espacio-sm); font-size: 15px; }
.migas-de-pan ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.migas-de-pan li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--color-texto-suave); }
.migas-de-pan a { color: var(--color-texto-suave); }
.migas-de-pan [aria-current="page"] { color: var(--color-texto); font-weight: 600; }

/* ============ Hero ============ */
.hero {
  background: var(--color-azul);
  color: #fff;
  padding: var(--espacio-xl) 0;
}
.hero h1 { color: #fff; font-size: calc(2.5rem * var(--escala-texto)); }
.hero p { font-size: calc(var(--texto-grande) * var(--escala-texto)); max-width: 640px; color: #DCE6F4; }
.hero-buscador { margin-top: var(--espacio-md); max-width: 560px; }
.hero-buscador form { display: flex; }
.hero-buscador input[type="search"] {
  flex: 1; min-width: 0; min-height: 56px; border: none; border-radius: var(--radio-borde-sm) 0 0 var(--radio-borde-sm);
  padding: 0 18px; font-size: 19px;
}
.hero-buscador button {
  min-height: 56px; padding: 0 24px; background: var(--color-coral-boton); color: #FFFFFF; border: none;
  border-radius: 0 var(--radio-borde-sm) var(--radio-borde-sm) 0; font-size: 19px; font-weight: 700; cursor: pointer;
}
.hero-buscador button:hover { background: var(--color-coral-boton-hover); }

/* ============ Secciones generales ============ */
section { padding: var(--espacio-xl) 0; }
section.fondo-alterno { background: var(--color-bg-alt); }
.titulo-seccion { text-align: center; margin-bottom: var(--espacio-lg); }
.titulo-seccion p { color: var(--color-texto-suave); font-size: calc(18px * var(--escala-texto)); }

/* ============ Tarjetas de categoría ============ */
.rejilla-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-lg);
}
.tarjeta-categoria {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-texto);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion-media), box-shadow var(--transicion-media);
}
.tarjeta-categoria:hover, .tarjeta-categoria:focus-visible {
  box-shadow: var(--sombra-media);
  transform: translateY(-2px);
}
.tarjeta-categoria img { aspect-ratio: 16/9; object-fit: cover; }
.tarjeta-categoria .cuerpo { padding: var(--espacio-md); flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-categoria h3 { margin: 0; font-size: calc(1.25rem * var(--escala-texto)); }
.tarjeta-categoria p { margin: 0; color: var(--color-texto-suave); font-size: calc(16px * var(--escala-texto)); }
.tarjeta-categoria .cantidad { font-size: 14px; color: var(--color-verde); font-weight: 600; }

/* Cuadrícula de la sección de categorías de la portada (8 categorías): 4
   columnas × 2 filas en escritorio amplio. Clase adicional aparte de
   `.rejilla-categorias` (que sigue en 3 columnas) para no afectar a "Guías
   recomendadas para ti", que reutiliza la misma `.rejilla-categorias` con
   otro número de tarjetas. Las reglas responsive ya existentes de
   `.rejilla-categorias` (2 columnas ≤1024px, 1 columna ≤480px) se siguen
   aplicando igual, porque este elemento conserva ambas clases. */
.rejilla-categorias-principal { grid-template-columns: repeat(4, 1fr); }

/* Enlace "Leer la guía" dentro de .tarjeta-recomendada (misma tarjeta que
   .tarjeta-categoria, ver arriba). Texto coral en negrita: --color-coral-boton
   da 5.2:1 sobre el fondo blanco de la tarjeta, cumple AA en cualquier
   tamaño. margin-top: auto lo empuja al final de la tarjeta aunque el
   resumen tenga distinta longitud entre tarjetas. */
.tarjeta-recomendada .enlace-cta {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  font-size: calc(16px * var(--escala-texto));
  color: var(--color-coral-boton);
}
.tarjeta-recomendada:hover .enlace-cta,
.tarjeta-recomendada:focus-visible .enlace-cta {
  color: var(--color-coral-boton-hover);
  text-decoration: underline;
}

/* ============ Ruta empieza por aquí ============ */
.ruta-inicio { display: flex; flex-direction: column; gap: var(--espacio-sm); max-width: var(--ancho-lectura); margin: 0 auto; }
.paso-ruta {
  display: flex; gap: var(--espacio-md); align-items: flex-start; background: var(--color-bg-alt);
  border: 1px solid var(--color-borde); border-radius: var(--radio-borde); padding: var(--espacio-md);
}
.paso-ruta .numero {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-verde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.paso-ruta a { font-weight: 600; }

/* ============ Tarjetas de artículo (listas) ============ */
.rejilla-articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-lg); }
.tarjeta-articulo {
  background: var(--color-bg-alt); border: 1px solid var(--color-borde); border-radius: var(--radio-borde);
  overflow: hidden; text-decoration: none; color: var(--color-texto); display: flex; flex-direction: column;
  box-shadow: var(--sombra-suave);
}
.tarjeta-articulo img { aspect-ratio: 16/9; object-fit: cover; }
.tarjeta-articulo .cuerpo { padding: var(--espacio-md); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta-articulo .categoria-etiqueta { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-verde); }
.tarjeta-articulo h3 { margin: 0; font-size: calc(1.15rem * var(--escala-texto)); }
.tarjeta-articulo .meta { font-size: 14px; color: var(--color-texto-suave); margin-top: auto; }

/* ============ Bloque de prevención de estafas ============ */
.bloque-alerta {
  background: var(--color-coral-suave);
  border: 1px solid #C9DBF3;
  border-radius: var(--radio-borde);
  padding: var(--espacio-lg);
  display: flex;
  gap: var(--espacio-md);
  align-items: flex-start;
}
.bloque-alerta .icono { flex: none; font-size: 34px; }
.bloque-alerta h2 { margin-top: 0; }
.bloque-alerta a.boton { margin-top: var(--espacio-sm); }

/* ============ Botones ============ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--area-pulsable-min); padding: 10px 22px; border-radius: var(--radio-borde-sm);
  font-size: 19px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
/* Fondo coral oscurecido (--color-coral-boton, no el --color-coral decorativo):
   5.2:1 con texto blanco puro, cumple AA (4.5:1) en cualquier tamaño de texto,
   sin depender de negrita ni de un tamaño mínimo de fuente. */
.boton-primario { background: var(--color-coral-boton); color: #FFFFFF; font-weight: 700; }
.boton-primario:hover { background: var(--color-coral-boton-hover); }
.boton-secundario { background: transparent; color: var(--color-azul); border-color: var(--color-azul); }
.boton-secundario:hover { background: var(--color-azul-suave); }

/* ============ Footer ============ */
.pie {
  background: var(--color-azul);
  color: #DCE6F4;
  padding: var(--espacio-xl) 0 var(--espacio-lg);
  margin-top: var(--espacio-xl);
}
.pie a { color: #fff; }
.pie .columnas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-lg);
}
.pie h2 { color: #fff; font-size: 18px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pie .aviso {
  margin-top: var(--espacio-lg);
  padding-block: var(--espacio-md);
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 14px;
  color: #C3D0E4;
  text-align: center;
}

/* ============ Botón volver arriba ============ */
.volver-arriba {
  position: fixed; right: 20px; bottom: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-azul); color: #fff; border: none; cursor: pointer;
  font-size: 22px; box-shadow: var(--sombra-media);
  display: none;
  z-index: 400;
}
.volver-arriba.visible { display: block; }

/* ============ Banner de cookies ============ */
.banner-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--color-bg-alt); border-top: 2px solid var(--color-azul);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  padding: var(--espacio-md);
}
.banner-cookies[hidden] { display: none; }
.banner-cookies .caja { max-width: var(--ancho-contenedor); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--espacio-md); align-items: center; justify-content: space-between; }
.banner-cookies p { margin: 0; max-width: 640px; font-size: 16px; }
.banner-cookies .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-cookies {
  position: fixed; inset: 0; background: rgba(15,46,92,0.5); z-index: 950;
  display: flex; align-items: center; justify-content: center; padding: var(--espacio-md);
}
.panel-cookies[hidden] { display: none; }
.panel-cookies .caja {
  background: #fff; border-radius: var(--radio-borde); padding: var(--espacio-lg); max-width: 560px; width: 100%;
  max-height: 85vh; overflow: auto;
}
.categoria-cookie { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-sm); padding: var(--espacio-sm) 0; border-bottom: 1px solid var(--color-borde); }
.categoria-cookie:last-of-type { border-bottom: none; }

/* ============ Plantilla de artículo ============ */
.cabecera-articulo { background: var(--color-bg-alt); padding: var(--espacio-lg) 0; border-bottom: 1px solid var(--color-borde); }
.etiqueta-categoria { display: inline-block; background: var(--color-verde-suave); color: var(--color-verde); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; text-decoration: none; }
.meta-articulo { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--color-texto-suave); font-size: 15px; margin-top: var(--espacio-sm); }
.resumen-articulo { background: var(--color-verde-suave); border-left: 5px solid var(--color-verde); border-radius: 0 var(--radio-borde) var(--radio-borde) 0; padding: var(--espacio-md); margin: var(--espacio-lg) 0; }
.resumen-articulo h2 { font-size: 18px; margin-top: 0; }

.imagen-articulo { border-radius: var(--radio-borde); overflow: hidden; margin: var(--espacio-lg) 0; }
.imagen-articulo figcaption { font-size: 14px; color: var(--color-texto-suave); padding-top: 8px; }

.indice-contenidos { background: var(--color-bg-alt); border: 1px solid var(--color-borde); border-radius: var(--radio-borde); padding: var(--espacio-md) var(--espacio-lg); margin: var(--espacio-lg) 0; }
.indice-contenidos h2 { font-size: 18px; }
.indice-contenidos ol { padding-left: 22px; margin: 0; }
.indice-contenidos li { margin-bottom: 6px; }

.necesitas { background: var(--color-bg-alt); border: 1px solid var(--color-borde); border-radius: var(--radio-borde); padding: var(--espacio-md) var(--espacio-lg); margin: var(--espacio-lg) 0; }

.pasos { list-style: none; margin: var(--espacio-md) 0; padding: 0; counter-reset: paso; }
.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: var(--espacio-md) var(--espacio-md) var(--espacio-md) 64px;
  margin-bottom: var(--espacio-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
}
.pasos > li::before {
  content: counter(paso);
  position: absolute; left: 16px; top: var(--espacio-md);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-azul); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.pasos h3 { margin: 0 0 6px; font-size: calc(1.1rem * var(--escala-texto)); }
.pasos p:last-child { margin-bottom: 0; }

.caja { border-radius: var(--radio-borde); padding: var(--espacio-md); margin: var(--espacio-lg) 0; border: 1px solid; }
.caja h3 { margin-top: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.caja-consejo { background: var(--color-verde-suave); border-color: #C9DBF3; }
.caja-consejo h3 { color: var(--color-verde); }
.caja-precaucion { background: var(--color-aviso-bg); border-color: #F2D19B; }
.caja-precaucion h3 { color: var(--color-aviso); }
.caja-error-comun { background: #EFF1F4; border-color: var(--color-borde); }
.caja-error-comun h3 { color: var(--color-azul); }

.si-no-funciona { background: var(--color-coral-suave); border: 1px solid #C9DBF3; border-radius: var(--radio-borde); padding: var(--espacio-lg); margin: var(--espacio-lg) 0; }

.lista-verificacion { background: #fff; border: 1px dashed var(--color-borde); border-radius: var(--radio-borde); padding: var(--espacio-md) var(--espacio-lg); }

.faq { margin: var(--espacio-lg) 0; }
.faq details {
  border: 1px solid var(--color-borde); border-radius: var(--radio-borde);
  padding: var(--espacio-sm) var(--espacio-md); margin-bottom: 10px; background: var(--color-bg-alt);
}
.faq summary { cursor: pointer; font-weight: 700; font-size: calc(1.02rem * var(--escala-texto)); min-height: var(--area-pulsable-min); display: flex; align-items: center; }
.faq p { margin-bottom: 0; }

.controles-articulo { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--espacio-lg) 0; }

.fuentes-articulo { font-size: 15px; }
.fuentes-articulo li { margin-bottom: 6px; }

.relacionados-articulo { margin: var(--espacio-lg) 0; }
.tarjeta-relacionados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espacio-md); }

.aviso-verificacion {
  background: var(--color-aviso-bg); border: 1px solid #F2D19B; border-radius: var(--radio-borde-sm);
  padding: 10px 14px; font-size: 14px; color: #7A4A0C; margin: var(--espacio-md) 0;
}

.hueco-anuncio {
  border: 2px dashed var(--color-borde);
  border-radius: var(--radio-borde);
  padding: var(--espacio-lg);
  text-align: center;
  color: var(--color-texto-suave);
  font-size: 14px;
  margin: var(--espacio-lg) 0;
}

.informar-error { background: var(--color-bg-alt); border: 1px solid var(--color-borde); border-radius: var(--radio-borde); padding: var(--espacio-lg); margin: var(--espacio-lg) 0; }
.informar-error label { display: block; font-weight: 600; margin-bottom: 4px; }
.informar-error textarea, .informar-error input {
  width: 100%; border: 2px solid var(--color-borde); border-radius: var(--radio-borde-sm);
  padding: 10px; font-size: 16px; font-family: inherit; margin-bottom: var(--espacio-sm);
  min-height: var(--area-pulsable-min);
}
.informar-error textarea { min-height: 100px; }
.campo-trampa { position: absolute; left: -9999px; }

/* ============ Página 404 ============ */
.pagina-404 { text-align: center; padding: var(--espacio-xxl) 0; }
.pagina-404 .codigo { font-size: 90px; font-weight: 800; color: var(--color-azul-suave); margin: 0; }

/* ============ Formulario de contacto genérico ============ */
.campo { margin-bottom: var(--espacio-md); }
.campo label { display: block; font-weight: 600; margin-bottom: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 2px solid var(--color-borde); border-radius: var(--radio-borde-sm);
  padding: 10px 12px; font-size: 17px; font-family: inherit; min-height: var(--area-pulsable-min);
}
.campo textarea { min-height: 140px; }
.campo .error { color: var(--color-peligro); font-size: 14px; margin-top: 4px; }
.campo.con-error input, .campo.con-error textarea { border-color: var(--color-peligro); }

/* ============ Impresión ============ */
@media print {
  .cabecera, .nav-principal, .banner-cookies, .panel-cookies,
  .volver-arriba, .controles-articulo, .hueco-anuncio, .informar-error, .pie,
  .boton-menu { display: none !important; }
  body { font-size: 13pt; color: #000; }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .rejilla-categorias, .rejilla-articulos, .tarjeta-relacionados { grid-template-columns: repeat(2, 1fr); }
  .pie .columnas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .nav-principal ul { flex-direction: column; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: calc(1.9rem * var(--escala-texto)); }
  section { padding: var(--espacio-lg) 0; }
}
@media (max-width: 480px) {
  .rejilla-categorias, .rejilla-articulos, .tarjeta-relacionados { grid-template-columns: 1fr; }
  .pie .columnas { grid-template-columns: 1fr; }
  .cabecera .contenedor { flex-wrap: wrap; }
  .buscador-cabecera { order: 3; flex-basis: 100%; max-width: none; }
  .boton-empieza-aqui { order: 3; flex-basis: 100%; justify-content: center; }
}

/* ============ Reducción de movimiento ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============ Tipografía genérica del contenido (párrafos, listas, citas) ============ */
.cuerpo-articulo p, .cuerpo-articulo > ul, .cuerpo-articulo > ol {
  margin: 0 0 var(--espacio-md);
}
/* Ancho de LECTURA del texto (no del contenedor): el contenedor de la
   entrada usa el ancho global completo (~1200px), pero una línea de texto
   demasiado larga es difícil de leer. Por eso solo el texto de los párrafos
   se limita a 80ch (75–85ch); las cajas (.necesitas, .caja, .indice-contenidos,
   .faq, .si-no-funciona, etc.), las imágenes y la estructura exterior del
   artículo siguen usando todo el ancho disponible del contenedor. */
.cuerpo-articulo p,
.resumen-articulo p {
  max-width: 80ch;
}
.cuerpo-articulo ul:not(.pasos):not(.lista-verificacion), .cuerpo-articulo ol:not(.pasos):not(.indice-contenidos ol) {
  padding-left: 26px;
}
.cuerpo-articulo blockquote {
  margin: var(--espacio-lg) 0;
  padding: var(--espacio-md) var(--espacio-lg);
  border-left: 4px solid var(--color-verde);
  background: var(--color-verde-suave);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
}
/* Envoltorio para tablas anchas (más columnas de las que caben en pantallas
   pequeñas, como la tabla de cookies): permite deslizar horizontalmente en
   vez de desbordar el ancho de la página. */
.tabla-desplazable {
  overflow-x: auto;
  margin: var(--espacio-lg) 0;
}
.cuerpo-articulo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--espacio-lg) 0;
}
.tabla-desplazable table {
  margin: 0;
  min-width: 640px;
}
.cuerpo-articulo th, .cuerpo-articulo td {
  border: 1px solid var(--color-borde);
  padding: 10px 12px;
  text-align: left;
}
.cuerpo-articulo figure.wp-caption, .cuerpo-articulo .wp-block-image {
  margin: var(--espacio-lg) 0;
}
.cuerpo-articulo figcaption {
  font-size: 14px;
  color: var(--color-texto-suave);
  margin-top: 6px;
}
.cuerpo-articulo img {
  border-radius: var(--radio-borde);
}

/* ============ Editor de páginas legales (sin plantilla de artículo) ============ */
main .contenedor.lectura > h1 {
  margin-bottom: var(--espacio-md);
}

/* ============ Bloques de texto de la portada: subtítulos y dos columnas ============ */
/* Cada bloque ocupa todo el ancho del contenedor (igual que el aviso y las
   tarjetas). Dos columnas mantienen la línea en ~65 caracteres, que se lee
   mejor que una línea de ancho completo; en pantallas estrechas pasa a una. */
.bloque-texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-lg) var(--espacio-xl);
  margin-top: var(--espacio-md);
}
.bloque-texto-item {
  border-top: 3px solid var(--color-verde);
  padding-top: var(--espacio-sm);
}
.bloque-texto-item h3 {
  margin: 0 0 var(--espacio-xs);
  font-size: calc(1.4rem * var(--escala-texto));
  color: var(--color-azul);
}
.bloque-texto-item p {
  margin: 0 0 var(--espacio-sm);
  font-size: calc(var(--texto-grande) * var(--escala-texto));
}
.bloque-texto-item p:last-child { margin-bottom: 0; }
.bloque-texto-item strong { color: var(--color-azul); font-weight: 700; }
@media (max-width: 768px) {
  .bloque-texto { grid-template-columns: 1fr; }
}

/* ============ Texto más grande para bloques de confianza de la portada
   (editorial y preguntas frecuentes): mismo tamaño que .bloque-texto-item,
   reutilizando el token --texto-grande en vez de inventar uno nuevo. ============ */
.texto-grande { font-size: calc(var(--texto-grande) * var(--escala-texto)); }
.faq.texto-grande summary,
.faq.texto-grande p {
  font-size: calc(var(--texto-grande) * var(--escala-texto));
}

/* ============================================================
   Pulido visual: tipografia, tarjetas, botones, pasos y FAQ.
   Este bloque se carga DESPUES de la hoja de estilos base para
   que sus reglas (mismos selectores) prevalezcan en cascada.
   No se anaden clases nuevas ni se toca HTML/PHP.
   ============================================================ */

/* --- Tipografia: jerarquia editorial en titulos --- */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--espacio-sm);
}

h1 {
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: var(--espacio-md);
}

h2 {
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-bottom: var(--espacio-md);
}

h3 {
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

h1, h2, h3 {
  text-wrap: balance;
}

/* --- Tarjetas: categoria y articulo (hover mas cuidado + linea de acento) --- */
.tarjeta-categoria,
.tarjeta-articulo,
.tarjeta-recomendada {
  position: relative;
  transition: transform var(--transicion-media), box-shadow var(--transicion-media), border-color var(--transicion-media);
}

.tarjeta-categoria::before,
.tarjeta-articulo::before,
.tarjeta-recomendada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-verde);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transicion-media);
}

.tarjeta-categoria:hover,
.tarjeta-categoria:focus-visible,
.tarjeta-articulo:hover,
.tarjeta-articulo:focus-visible,
.tarjeta-recomendada:hover,
.tarjeta-recomendada:focus-visible {
  border-color: var(--color-coral);
  box-shadow: var(--sombra-media);
  transform: translateY(-2px);
}

.tarjeta-categoria:hover::before, .tarjeta-categoria:focus-visible::before,
.tarjeta-articulo:hover::before, .tarjeta-articulo:focus-visible::before,
.tarjeta-recomendada:hover::before, .tarjeta-recomendada:focus-visible::before {
  transform: scaleX(1);
}

.tarjeta-categoria .cuerpo {
  padding: var(--espacio-md) var(--espacio-md) var(--espacio-lg);
  gap: var(--espacio-xs);
}

.tarjeta-categoria h3 {
  letter-spacing: -0.006em;
}

.tarjeta-articulo .categoria-etiqueta {
  display: inline-block;
  margin-bottom: 2px;
}

/* --- Botones: transicion suave y profundidad sutil en hover/foco --- */
.boton {
  transition: background-color var(--transicion-media), border-color var(--transicion-media), box-shadow var(--transicion-media), transform var(--transicion-rapida);
}

.boton-primario:hover {
  box-shadow: var(--sombra-suave);
}

.boton-primario:active {
  transform: translateY(1px);
}

.boton-secundario:hover {
  border-color: var(--color-coral);
}

.boton:focus-visible {
  box-shadow: var(--sombra-suave);
}

/* --- Numeracion de pasos: anillo suave alrededor del numero --- */
.pasos > li {
  transition: box-shadow var(--transicion-media), border-color var(--transicion-media);
}

.pasos > li::before {
  box-shadow: 0 0 0 4px var(--color-verde-suave), var(--sombra-suave);
}

/* --- FAQ: espaciado e indicador de apertura/cierre con transicion --- */
.faq details {
  transition: border-color var(--transicion-media), box-shadow var(--transicion-media);
}

.faq details[open] {
  border-color: var(--color-verde);
  box-shadow: var(--sombra-suave);
}

.faq summary {
  list-style: none;
  gap: var(--espacio-sm);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-verde);
  transition: transform var(--transicion-media);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details[open] summary {
  margin-bottom: var(--espacio-xs);
}

/* --- Separador de bloque de texto: degradado sutil en vez de linea solida --- */
.bloque-texto-item {
  border-top: 3px solid transparent;
  border-image: linear-gradient(to right, var(--color-verde), var(--color-coral-suave) 70%, transparent) 1;
}

/* ============================================================
   Pulido visual: cabecera, navegacion, hero y footer.
   Este bloque se carga DESPUES de la hoja de estilos base para
   que sus reglas (mismos selectores) prevalezcan en cascada.
   No se anaden clases nuevas ni se toca HTML/PHP; solo se ajustan
   propiedades y se suman pseudo-elementos/pseudo-clases sobre los
   selectores que ya existen.
   ============================================================ */

/* --- Cabecera: mas aire y logotipo con mas peso visual --- */
.cabecera .contenedor {
  padding-top: var(--espacio-md);
  padding-bottom: var(--espacio-md);
}

.logotipo {
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: color var(--transicion-rapida);
}

.logotipo:hover {
  color: var(--color-coral);
}

.logotipo:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: var(--radio-borde-sm);
}

.boton-menu {
  transition: background-color var(--transicion-rapida), transform var(--transicion-rapida);
}

.boton-menu:hover {
  background: color-mix(in srgb, var(--color-azul) 82%, black);
}

.boton-menu:active {
  transform: scale(0.97);
}

.boton-menu:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}

/* --- Buscador de cabecera (paginas interiores): foco y hover cuidados --- */
.buscador-cabecera input[type="search"] {
  transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.buscador-cabecera input[type="search"]:focus,
.buscador-cabecera input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-coral) 22%, transparent);
}

.buscador-cabecera button {
  transition: background-color var(--transicion-rapida);
}

.buscador-cabecera button:hover {
  background: color-mix(in srgb, var(--color-verde) 80%, black);
}

.buscador-cabecera button:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}

/* --- Navegacion principal: acento inferior en vez de solo fondo/subrayado ---
   Se reutiliza la variable --nav-enlace-pad-x (definida en la hoja base) para
   ampliar el espaciado horizontal: al tocar solo esa variable, el padding de
   los enlaces y el margen negativo del <ul> que alinea el primer enlace con
   el logotipo se actualizan juntos y la alineacion no se rompe. */
.nav-principal {
  --nav-enlace-pad-x: 20px;
}

.nav-principal a {
  position: relative;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: background-color var(--transicion-media), color var(--transicion-rapida);
}

.nav-principal a::after {
  content: "";
  position: absolute;
  left: var(--nav-enlace-pad-x);
  right: var(--nav-enlace-pad-x);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transicion-media);
}

.nav-principal a:hover,
.nav-principal a[aria-current="page"] {
  text-decoration: none;
}

.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-principal a[aria-current="page"] {
  color: var(--color-verde);
  font-weight: 700;
}

.nav-principal a:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: -2px;
}

/* --- Hero: degradado muy sutil entre dos tonos del mismo azul + buscador refinado --- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--color-azul) 0%, color-mix(in srgb, var(--color-azul) 82%, black) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--color-azul) 55%, white) 0%, transparent 60%);
  opacity: 0.25;
  pointer-events: none;
}

.hero .contenedor {
  position: relative;
  z-index: 1;
}

.hero h1 {
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.hero p {
  line-height: 1.6;
}

.hero-buscador {
  position: relative;
  border-radius: var(--radio-borde-sm);
  box-shadow: var(--sombra-media);
}

.hero-buscador::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-texto-suave);
  border-radius: 50%;
  transform: translateY(-65%);
  pointer-events: none;
  z-index: 1;
}

.hero-buscador::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 50%;
  width: 7px;
  height: 2px;
  background: var(--color-texto-suave);
  transform: translateY(2px) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.hero-buscador input[type="search"] {
  padding-left: 52px;
  transition: box-shadow var(--transicion-rapida);
}

.hero-buscador input[type="search"]:focus,
.hero-buscador input[type="search"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--color-coral) 30%, transparent);
}

.hero-buscador button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --- Footer: jerarquia en titulos de columna + espaciado de listas --- */
.pie h2 {
  position: relative;
  letter-spacing: 0.02em;
  margin-bottom: var(--espacio-sm);
}

.pie h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-coral);
  margin-bottom: var(--espacio-xs);
}

.pie ul {
  gap: var(--espacio-sm);
}

.pie ul a {
  opacity: 0.88;
  transition: opacity var(--transicion-rapida), color var(--transicion-rapida);
}

.pie ul a:hover,
.pie ul a:focus-visible {
  opacity: 1;
  color: var(--color-coral);
  text-decoration: underline;
}

.pie .aviso {
  line-height: 1.6;
}

/* --- Volver arriba: hover/foco con leve escala y sombra --- */
.volver-arriba {
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), background-color var(--transicion-media);
}

.volver-arriba:hover,
.volver-arriba:focus-visible {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--color-azul) 85%, black);
  box-shadow: var(--sombra-media), 0 0 0 4px color-mix(in srgb, var(--color-coral) 22%, transparent);
}

.volver-arriba:active {
  transform: scale(0.95);
}

.volver-arriba:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Bloque de alerta: icono en circulo en vez de emoji suelto --- */
.bloque-alerta {
  box-shadow: var(--sombra-suave);
}

.bloque-alerta .icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  box-shadow: var(--sombra-suave);
  line-height: 1;
}

/* ============================================================
   Rediseno estructural de la portada (2026-09-22): hero partido
   con tarjeta de cifras, categoria destacada tipo bento y los
   bloques de texto ("Sobre esta web", "Aprender a tu ritmo") en
   linea de tiempo numerada en vez de cuadricula de tarjetas.
   ============================================================ */

/* --- Hero partido: texto + tarjeta de cifras flotante --- */
.hero .contenedor {
  display: flex;
  align-items: center;
  gap: var(--espacio-xl);
  flex-wrap: wrap;
}
.hero-texto { flex: 1 1 420px; }
.hero-cifras {
  flex: 0 1 280px;
  background: var(--color-bg-alt);
  color: var(--color-texto);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-media);
  padding: var(--espacio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}
.hero-cifras .cifra { display: flex; align-items: baseline; gap: 10px; }
.hero-cifras .cifra strong { font-size: 2rem; color: var(--color-azul); font-weight: 800; line-height: 1; white-space: nowrap; }
.hero-cifras .cifra span { color: var(--color-texto-suave); font-size: 15px; }
.hero-cifras hr { border: none; border-top: 1px solid var(--color-borde); margin: 2px 0; }
@media (max-width: 900px) {
  .hero-cifras { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .hero-cifras hr { display: none; }
}

/* --- Categoria destacada (bento): la primera tarjeta ocupa el doble de ancho --- */
@media (min-width: 900px) {
  .rejilla-categorias-principal .tarjeta-categoria:first-child {
    grid-column: span 2;
  }
  .rejilla-categorias-principal .tarjeta-categoria:first-child img {
    aspect-ratio: 32 / 9;
  }
}

/* --- Bloques de texto: linea de tiempo numerada vertical en vez de
   cuadricula de dos columnas. Mismo HTML (.bloque-texto /
   .bloque-texto-item), solo cambia la disposicion. --- */
.bloque-texto {
  display: block;
  max-width: var(--ancho-lectura);
  margin: var(--espacio-lg) auto 0;
  counter-reset: bloque-num;
}
.bloque-texto-item {
  position: relative;
  counter-increment: bloque-num;
  border-top: none;
  padding: 0 0 var(--espacio-lg) 64px;
  margin-bottom: 0;
}
.bloque-texto-item::before {
  content: counter(bloque-num);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-verde);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--color-verde-suave);
}
.bloque-texto-item::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: -4px;
  width: 2px;
  background: var(--color-borde);
}
.bloque-texto-item:last-child::after { display: none; }
.bloque-texto-item:last-child { padding-bottom: 0; }
.bloque-texto-item h3 { margin-top: 2px; }
@media (max-width: 768px) {
  .bloque-texto-item { padding-left: 56px; }
  .bloque-texto-item::before { width: 36px; height: 36px; font-size: 1rem; }
  .bloque-texto-item::after { left: 17px; top: 36px; }
}

/* ============================================================
   Franja de confianza (bajo el hero) e iconos de categoria por
   slug del enlace (CSS puro, sin tocar el HTML de cada tarjeta).
   ============================================================ */
.franja-confianza { padding: var(--espacio-lg) 0; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-borde); }
.franja-confianza .contenedor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-lg);
}
.item-confianza { display: flex; align-items: flex-start; gap: 12px; }
.item-confianza .icono { flex: none; font-size: 28px; line-height: 1; }
.item-confianza h3 { margin: 0 0 2px; font-size: 1.02rem; color: var(--color-azul); }
.item-confianza p { margin: 0; color: var(--color-texto-suave); font-size: 14px; }
@media (max-width: 900px) {
  .franja-confianza .contenedor { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .franja-confianza .contenedor { grid-template-columns: 1fr; }
}

/* Icono de tema en la esquina de cada tarjeta de categoria, segun el slug
   del enlace. Redondel con el mismo fondo que el resto de insignias del
   sitio (.cantidad), asi no se inventa ningun color nuevo. */
.tarjeta-categoria { position: relative; }
.tarjeta-categoria::after {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  box-shadow: var(--sombra-media);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.tarjeta-categoria[href*="celular-desde-cero"]::after { content: "\1F4F1"; }
.tarjeta-categoria[href*="whatsapp-y-comunicacion"]::after { content: "\1F4AC"; }
.tarjeta-categoria[href*="fotos-videos-y-recuerdos"]::after { content: "\1F4F8"; }
.tarjeta-categoria[href*="accesibilidad-y-comodidad"]::after { content: "\267F"; }
.tarjeta-categoria[href*="television-y-dispositivos"]::after { content: "\1F4FA"; }
.tarjeta-categoria[href*="internet-seguro-y-privacidad"]::after { content: "\1F512"; }
.tarjeta-categoria[href*="computadora-y-documentos"]::after { content: "\1F4BB"; }
.tarjeta-categoria[href*="tramites-y-soluciones-en-linea"]::after { content: "\1F4C4"; }

/* La cuadricula de "Guias recomendadas para ti" reutiliza .tarjeta-categoria
   (via .tarjeta-recomendada), asi que tambien le saldria el icono de tema; ahi
   no aporta (el icono es para elegir TEMA, no para una guia individual), asi
   que se oculta solo en esa seccion. */
.tarjeta-recomendada::after { display: none; }

/* Variar el ritmo visual: alternar el fondo tambien en la franja de
   confianza y quitarlo de "Que quieres aprender hoy" para que no queden dos
   fondos blancos seguidos (franja blanca + categorias) sin nada entre medio. */
/* ============ Artículos: texto al mismo ancho que cajas e imágenes (2026-09-25) ============ */
/* Antes los párrafos se limitaban a 80ch (~820px) mientras las cajas, los
   pasos y el contenedor usaban 1136px, y las imágenes se quedaban en su
   ancho natural (1024px). Ahora todo el cuerpo del artículo ocupa el mismo
   ancho y el texto sube a --texto-grande (22px) para leerse mejor. */
.cuerpo-articulo { font-size: calc(var(--texto-grande) * var(--escala-texto)); }
.cuerpo-articulo p,
.resumen-articulo p { max-width: none; }
.cuerpo-articulo figure,
.cuerpo-articulo .wp-block-image { width: 100%; }
.cuerpo-articulo figure img,
.cuerpo-articulo .wp-block-image img { width: 100%; height: auto; }
.cuerpo-articulo .pasos h3,
.cuerpo-articulo .caja h3 { font-size: calc(1.4rem * var(--escala-texto)); }
.cuerpo-articulo .faq summary { font-size: calc(var(--texto-grande) * var(--escala-texto)); }
.cuerpo-articulo figcaption,
.cuerpo-articulo .aviso-verificacion,
.cuerpo-articulo .aviso-verificacion p { font-size: calc(var(--texto-pequeno) * var(--escala-texto)); }
@media (max-width: 480px) {
  .cuerpo-articulo { font-size: calc(20px * var(--escala-texto)); }
}