/* ==========================================================================
   nopulsesesteboton.com — hoja de estilos (propuesta oscura)
   Noche azulada de fondo, texto claro, rojo señal solo para el botón y las
   alertas, verde para lo que sí hay que hacer. Serif fina para titulares,
   Atkinson Hyperlegible para leer y su versión mono para etiquetas.
   Todas las fuentes se sirven desde el propio dominio.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff") format("woff");
  font-weight: 250 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-var.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-italic-var.woff") format("woff");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-mono-var.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --noche: #0a0e13;
  --noche-2: #10161e;
  --noche-3: #161e28;
  --linea: #1f2a36;
  --linea-fuerte: #36434f;
  --texto: #eef1f4;
  --gris: #8d99a6;
  --rojo: #ff4d3d;
  --rojo-boton: #d21f1a;
  --verde: #3dd68c;
  --marcador: #ffe14d;

  --f-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho: 76rem;
  --ancho-texto: 40rem;
  --hueco: clamp(1rem, 4vw, 2.5rem);
  --puntos: radial-gradient(circle, #233040 1px, transparent 1.3px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; display: block; }

h1, h2 {
  font-family: var(--f-titulo);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.4vw, 6rem); line-height: 0.98; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.04; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.35em; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }

a { color: var(--texto); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--gris); }
a:hover { text-decoration-color: var(--texto); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.salto { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--texto); color: var(--noche); padding: 0.6rem 1rem; border-radius: 999px; }
.salto:focus { top: 1rem; }

.contenedor { width: min(100% - 2 * var(--hueco), var(--ancho)); margin-inline: auto; }

/* Etiqueta mono y botones en píldora */
.etiqueta {
  font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 0.9rem;
}
.pildora {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-mono); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  color: var(--texto); background: transparent;
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 0.72rem 1.2rem; cursor: pointer; white-space: nowrap;
}
.pildora:hover { border-color: var(--texto); }
.pildora--clara { background: var(--texto); color: var(--noche); border-color: var(--texto); }
.pildora--clara:hover { background: #fff; }
.pildora .flecha { transition: transform 150ms ease; }
.pildora:hover .flecha { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pildora .flecha { transition: none; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgb(10 14 19 / 0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 2rem; min-height: 4.25rem; }
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem; flex: none;
  color: var(--texto); text-decoration: none;
  font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 400; letter-spacing: -0.015em;
}
.marca img { width: 1.9rem; height: 1.9rem; }
.menu { display: flex; gap: 1.75rem; margin-left: auto; }
.menu a {
  font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gris); text-decoration: none; padding: 0.4rem 0;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--texto); }
.menu-boton { display: none; }
.menu .menu__urgente { display: none; }
@media (max-width: 1120px) {
  .cabecera .contenedor { flex-wrap: wrap; gap: 0.75rem 1rem; padding-block: 0.7rem; }
  .menu-boton { display: inline-flex; margin-left: auto; padding: 0.55rem 0.95rem; }
  .cabecera__accion { display: none; }
  .menu { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; margin: 0; }
  .menu.abierto { display: flex; }
  .menu a { padding: 0.85rem 0; border-top: 1px solid var(--linea); font-size: 0.9rem; }
  .menu .menu__urgente { display: block; color: var(--verde); }
}

/* ---------- Estructura de secciones ---------- */
.seccion { border-top: 1px solid var(--linea); padding-block: clamp(3.5rem, 9vw, 7rem); }
.entradilla { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; max-width: 36rem; }
.entradilla .apagado { color: var(--gris); }
.dos-columnas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-top: 1px solid var(--linea);
}
.dos-columnas > * { padding-block: clamp(3.5rem, 9vw, 7rem); }
.dos-columnas > :first-child { padding-right: clamp(1.5rem, 4vw, 4rem); }
.dos-columnas > :last-child { border-left: 1px solid var(--linea); padding-left: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .dos-columnas > :first-child { padding-right: 0; padding-bottom: 2rem; }
  .dos-columnas > :last-child { border-left: 0; padding-left: 0; padding-top: 0; }
}

/* ---------- Portada ----------
   El lienzo ocupa toda la portada; el script deja en blanco la zona del texto. */
.portada {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: min(50rem, calc(100svh - 4.25rem)); padding-block: clamp(4rem, 10vw, 7rem);
  border-bottom: 1px solid var(--linea);
}
.portada canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada .contenedor { position: relative; z-index: 1; }
.portada__texto { max-width: 40rem; }
.portada h1 { max-width: 12ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.campo__pie { position: absolute; right: var(--hueco); bottom: 0.4rem; z-index: 1; background: var(--noche); padding: 0.25rem 0.5rem; }
@media (max-width: 1023px) {
  .portada { align-items: flex-start; padding-top: 3rem; padding-bottom: clamp(19rem, 45vw, 24rem); min-height: 0; }
}
@media (max-width: 700px) { .campo__pie { display: none; } }

/* Fuentes oficiales: rejilla con bordes discontinuos */
.fuentes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-left: 1px dashed var(--linea-fuerte); margin-block: 0; padding: 0; list-style: none; }
.fuentes li {
  border-right: 1px dashed var(--linea-fuerte); border-bottom: 1px dashed var(--linea-fuerte);
  min-height: 5.25rem; display: grid; place-items: center; text-align: center; padding: 0.75rem;
  font-size: 1rem; color: var(--gris);
}
.fuentes li:first-child { color: var(--texto); }
.fuentes li:first-child .etiqueta { margin: 0; color: var(--texto); }
.fuentes a { color: inherit; text-decoration: none; }
.fuentes a:hover { color: var(--texto); }
@media (max-width: 1000px) { .fuentes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fuentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuentes li:first-child { grid-column: 1 / -1; } }

/* ---------- Anatomía de una estafa (pestañas) ---------- */
.pestanas { list-style: none; padding: 0; margin: 2.25rem 0 0; border-top: 1px solid var(--linea); }
.pestana {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--gris);
  font-family: var(--f-titulo); font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 300;
  font-variation-settings: "opsz" 48; letter-spacing: -0.01em;
  text-align: left; padding: 0.85rem 0; cursor: pointer;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { color: var(--texto); border-bottom-color: transparent; }
.pestana .indicador { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1px solid var(--linea-fuerte); flex: none; }
.pestana[aria-selected="true"] .indicador { background: var(--rojo); border-color: var(--rojo); box-shadow: 0 0 0 4px rgb(255 77 61 / 0.18); }
.resumen { border-bottom: 1px solid var(--linea); padding: 0 0 1.25rem; }
.resumen[hidden] { display: none; }
.resumen p { color: var(--gris); margin-bottom: 0.75rem; }
.resumen .nunca { color: var(--texto); margin: 0; display: flex; gap: 0.6rem; }
.resumen .nunca::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.55em; border-radius: 50%; background: var(--verde); }

.escena {
  background-color: var(--noche-2); background-image: var(--puntos); background-size: 22px 22px;
  border: 1px solid var(--linea); border-radius: 14px;
  padding: clamp(1.25rem, 4vw, 3rem); display: grid; gap: 1rem; align-content: center; min-height: 100%;
}
.escena[hidden] { display: none; }
.tarjeta { background: var(--noche); border: 1px solid var(--linea-fuerte); border-radius: 12px; padding: 1.1rem 1.25rem 1.25rem; }
.tarjeta__cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.85rem; }
.tarjeta__cabeza .etiqueta { margin: 0; }
.tarjeta__cabeza .alerta { color: var(--rojo); }
.tarjeta__cabeza .bien { color: var(--verde); }
.mensaje { font-size: 1.1rem; line-height: 1.55; margin: 0; background: var(--noche-3); border-radius: 14px 14px 14px 4px; padding: 0.95rem 1.1rem; }
.mensaje mark { background: none; color: inherit; border-bottom: 2px solid var(--marcador); padding-bottom: 1px; }
.mensaje .falso { color: #9cc4ff; word-break: break-all; }
.analisis { font-family: var(--f-mono); font-size: 0.92rem; margin: 0; }
.analisis div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0.25rem 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--linea-fuerte); align-items: baseline; }
.analisis dt { color: var(--gris); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.analisis dd { margin: 0; overflow-wrap: anywhere; }
.analisis .ref { color: var(--rojo); font-size: 0.78rem; letter-spacing: 0.06em; white-space: nowrap; }
.analisis .ref::before { content: "● "; }
.analisis .ref:empty::before { content: none; }
.analisis .veredicto dd { color: var(--rojo); font-weight: 700; letter-spacing: 0.08em; }
@media (max-width: 520px) { .analisis div { grid-template-columns: 1fr auto; } .analisis dt { grid-column: 1 / -1; } }

/* ---------- Señales ---------- */
.rejilla { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  border-top: 1px dashed var(--linea-fuerte); border-left: 1px dashed var(--linea-fuerte); }
.rejilla li { border-right: 1px dashed var(--linea-fuerte); border-bottom: 1px dashed var(--linea-fuerte); padding: 1.5rem 1.4rem 1.75rem; }
.rejilla .etiqueta { color: var(--verde); }
.rejilla--senales .etiqueta { color: var(--rojo); }
.rejilla p { color: var(--gris); margin: 0; font-size: 1.05rem; }

/* ---------- Si ya has pulsado ---------- */
.ayuda { margin-top: 2.25rem; border: 1px solid var(--linea-fuerte); border-radius: 12px; padding: 1.25rem 1.4rem; max-width: 24rem; }
.ayuda .etiqueta { margin-bottom: 0.25rem; color: var(--verde); }
.ayuda a.telefono { font-family: var(--f-titulo); font-weight: 300; font-size: 4.5rem; line-height: 1; letter-spacing: -0.03em; text-decoration: none; }
.ayuda p { margin: 0.4rem 0 0; color: var(--gris); font-size: 1rem; }

.pasos { list-style: none; padding: 0; margin: 0; position: relative; }
.pasos::before { content: ""; position: absolute; left: 0.45rem; top: 0.7rem; bottom: 0.7rem; width: 1px; background: var(--linea-fuerte); }
.pasos li { position: relative; padding: 0 0 2.25rem 2.5rem; }
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--noche); border: 1px solid var(--linea-fuerte);
}
.pasos li:first-child::before { border-color: var(--verde); background: var(--verde); box-shadow: 0 0 0 5px rgb(61 214 140 / 0.18); }
.pasos .etiqueta { margin-bottom: 0.35rem; color: var(--texto); }
.pasos .etiqueta span { color: var(--gris); margin-right: 0.6em; }
.pasos p { margin: 0; color: var(--gris); max-width: 36rem; }

/* ---------- El botón ---------- */
.zona-boton { background-image: var(--puntos); background-size: 22px 22px; text-align: center; }
.zona-boton h2, .zona-boton .entradilla { margin-inline: auto; }
.zona-boton .entradilla { color: var(--gris); }
.pulsador {
  --tam: clamp(10.5rem, 30vw, 14rem);
  width: var(--tam); height: var(--tam); margin: 2.75rem auto 1.25rem; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; position: relative; display: block;
  background: #06090d;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte), inset 0 0 0 calc(var(--tam) * 0.06) #18212c, 0 24px 60px rgb(0 0 0 / 0.55), 0 0 80px rgb(255 77 61 / 0.12);
}
.pulsador__cupula {
  position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff7a6b 0%, var(--rojo-boton) 45%, #8f120d 100%);
  box-shadow: 0 calc(var(--tam) * 0.05) 0 #5e0b08;
  display: grid; place-items: center; transition: transform 120ms ease, box-shadow 120ms ease;
}
.pulsador__barra { width: 52%; height: 15%; border-radius: 999px; background: #fff; }
.pulsador:hover .pulsador__cupula { transform: translateY(-2px); }
.pulsador:active .pulsador__cupula, .pulsador[aria-pressed="true"] .pulsador__cupula {
  transform: translateY(calc(var(--tam) * 0.045)); box-shadow: 0 calc(var(--tam) * 0.005) 0 #5e0b08;
}
.pulsador:focus-visible { outline-offset: 8px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .pulsador__cupula { transition: none; } }
.zona-boton .aviso { margin: 0; }

.informe { text-align: left; max-width: 52rem; margin: 3rem auto 0; }
.informe[hidden] { display: none; }
.informe .tarjeta { padding: clamp(1.25rem, 3.5vw, 2rem); }
.informe .cifra { font-family: var(--f-mono); font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.02em; margin: 0.2rem 0 0.35rem; }
.informe .explica { color: var(--gris); margin-bottom: 1.25rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1.5rem; margin: 0 0 1.5rem; }
.dato { padding: 0.65rem 0; border-top: 1px dashed var(--linea-fuerte); }
.dato dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris); }
.dato dd { margin: 0.15rem 0 0; font-family: var(--f-mono); font-size: 0.95rem; overflow-wrap: anywhere; }
.informe h3 { margin-top: 0.5rem; }
.informe ul { color: var(--gris); padding-left: 1.2rem; margin: 0; }
.informe li { margin-bottom: 0.35rem; }

/* ---------- Páginas de texto ---------- */
.pagina { padding-block: clamp(3rem, 8vw, 5.5rem); }
.pagina .contenedor { max-width: var(--ancho-texto); }
.pagina h1 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; }
.pagina h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-top: 2.4rem; }
.pagina p, .pagina li { color: #c9d1d9; }
.pagina .entradilla { color: var(--texto); }
.pagina .actualizado { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.pagina .boton-enlace { display: inline-flex; font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; background: var(--texto); color: var(--noche); border-radius: 999px; padding: 0.72rem 1.2rem; }
.pendiente { background: var(--marcador); color: var(--noche); padding: 0 0.25em; font-weight: 700; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; margin-bottom: 1.5rem; }
th, td { text-align: left; padding: 0.7rem 0.6rem 0.7rem 0; border-bottom: 1px dashed var(--linea-fuerte); vertical-align: top; color: #c9d1d9; }
th { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--linea-fuerte); }
.tabla-scroll { overflow-x: auto; }
.boton-texto { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--noche); background: var(--texto); border: 0; border-radius: 999px; padding: 0.72rem 1.2rem; cursor: pointer; }

/* ---------- Huecos de publicidad ----------
   Separados del menú, de las pestañas y del botón (políticas de AdSense).
   Sin anuncio, el hueco no ocupa espacio. */
.anuncio { width: min(100% - 2 * var(--hueco), var(--ancho)); margin: 2.5rem auto; text-align: center; }
.anuncio:not(:has(ins)) { display: none; }
.anuncio .etiqueta { margin-bottom: 0.4rem; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: 4rem 2rem; font-size: 1rem; }
.pie .contenedor { display: grid; gap: 2.5rem 2rem; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.pie .descripcion { color: var(--gris); max-width: 24rem; margin-top: 1rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.pie ul a { color: #c9d1d9; text-decoration: none; }
.pie ul a:hover { color: var(--texto); text-decoration: underline; }
.pie .etiqueta { color: var(--texto); }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-top: 1.5rem; margin: 0; color: var(--gris); font-size: 0.92rem; }
@media (max-width: 820px) { .pie .contenedor { grid-template-columns: 1fr 1fr; } .pie .contenedor > :first-child { grid-column: 1 / -1; } }

/* ---------- Enlaces internos destacados ---------- */
a.enlace-interno { color: var(--verde); font-weight: 600; text-decoration-color: var(--verde); text-decoration-thickness: 1px; }
a.enlace-interno:hover { text-decoration-thickness: 2px; }
.etiqueta a.enlace-interno { font-weight: 500; }

/* ---------- Cabecera de sección ---------- */
.cabeza-seccion { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--linea);
  background-image: var(--puntos); background-size: 22px 22px; background-position: right top; }
.cabeza-seccion h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); max-width: 16ch; }
.migas { display: flex; flex-wrap: wrap; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.5rem; }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--texto); }
.migas [aria-current] { color: var(--texto); }

/* ---------- Tarjetas de secciones ---------- */
.tarjetas-secciones { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  border-top: 1px dashed var(--linea-fuerte); border-left: 1px dashed var(--linea-fuerte); }
.tarjetas-secciones li { border-right: 1px dashed var(--linea-fuerte); border-bottom: 1px dashed var(--linea-fuerte); }
.tarjeta-seccion { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; min-height: 15rem;
  padding: 1.75rem 1.6rem; text-decoration: none; color: var(--texto); transition: background-color 150ms ease; }
.tarjeta-seccion:hover { background: var(--noche-2); }
.tarjeta-seccion__titulo { font-family: var(--f-titulo); font-weight: 300; font-variation-settings: "opsz" 60;
  font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: -0.015em; }
.tarjeta-seccion__texto { color: var(--gris); font-size: 1.02rem; }
.tarjeta-seccion__ir { margin: auto 0 0; padding-top: 1rem; color: var(--texto); }
.tarjeta-seccion--urgente { background: rgb(61 214 140 / 0.06); }
.tarjeta-seccion--urgente:hover { background: rgb(61 214 140 / 0.11); }
.tarjeta-seccion--urgente .tarjeta-seccion__ir { color: var(--verde); }
@media (prefers-reduced-motion: reduce) { .tarjeta-seccion { transition: none; } }

.rejilla--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* ---------- Listas y bloques de texto ---------- */
.lista { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lista li { position: relative; padding: 0.85rem 0 0.85rem 1.4rem; border-top: 1px dashed var(--linea-fuerte); color: var(--gris); }
.lista li:last-child { border-bottom: 1px dashed var(--linea-fuerte); }
.lista li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--linea-fuerte); }
.lista strong { color: var(--texto); }
.dos-columnas h3 { margin-top: 0.5rem; }
.dos-columnas > :last-child > p { color: #c9d1d9; max-width: 40rem; }
.nota { color: var(--gris); font-size: 1rem; margin: 1.5rem 0 0; max-width: 40rem; }

.aviso-urgente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  border: 1px solid var(--linea-fuerte); border-radius: 14px; padding: 1.4rem 1.6rem; margin-block: clamp(2.5rem, 6vw, 4rem); }
.aviso-urgente p { margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; }

.fuentes-pagina { border-top: 1px solid var(--linea); padding-block: 2.5rem; }
.fuentes-pagina ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.fuentes-pagina li a { color: #c9d1d9; font-size: 1rem; }

.tabla-casos { margin-top: 2rem; }
.tabla-casos th[scope="row"] { font-family: var(--f-texto); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--texto); border-bottom: 1px dashed var(--linea-fuerte); width: 34%; padding-right: 1.5rem; }
.tabla-casos td { font-size: 1.05rem; }
@media (max-width: 640px) {
  .tabla-casos, .tabla-casos tbody, .tabla-casos tr, .tabla-casos th, .tabla-casos td { display: block; width: 100%; }
  .tabla-casos thead { display: none; }
  .tabla-casos th[scope="row"] { border-bottom: 0; padding-bottom: 0.2rem; }
}

/* Lista de comprobación */
.revision { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 900px) { .revision { grid-template-columns: 1fr; } }
.revision .completo { color: var(--verde); }
.lista-control { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--linea-fuerte); }
.lista-control li { border-bottom: 1px dashed var(--linea-fuerte); }
.lista-control label { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.95rem 0; cursor: pointer; color: #c9d1d9; }
.lista-control input { appearance: none; flex: none; width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; border: 1px solid var(--linea-fuerte);
  border-radius: 6px; background: var(--noche); display: grid; place-items: center; cursor: pointer; }
.lista-control input::after { content: ""; width: 0.65rem; height: 0.35rem; border-left: 2px solid var(--noche); border-bottom: 2px solid var(--noche);
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.lista-control input:checked { background: var(--verde); border-color: var(--verde); }
.lista-control input:checked::after { opacity: 1; }
.lista-control input:checked + * , .lista-control label:has(input:checked) { color: var(--texto); }

a.pulsador { text-decoration: none; }
.zona-boton .aviso a.enlace-interno { text-transform: uppercase; }

/* ---------- Recomendaciones con enlace de afiliado ---------- */
.recomendacion { margin-top: 1.75rem; border: 1px dashed var(--linea-fuerte); border-radius: 14px; padding: 1.25rem 1.4rem 1.1rem; max-width: 40rem; }
.recomendacion .etiqueta { margin-bottom: 0.5rem; }
.recomendacion h3 { margin-bottom: 0.4rem; }
.recomendacion p { color: var(--gris); }
.recomendacion .pildora { margin: 0.25rem 0 0.9rem; }
.recomendacion__aviso { font-size: 0.85rem; margin: 0; }
.rejilla + .recomendacion { margin-top: 2rem; }
.recomendacion .pildora { white-space: normal; max-width: 100%; }