/* ============================================================================
   LA SEMANA DE ROQUETAS DE MAR — sistema visual
   ----------------------------------------------------------------------------
   Azul de fondo marino, papel color arena, y el amarillo sol usado con
   cuentagotas: sólo marca cosas (el filete de portada, el número de la semana,
   el subrayado del titular al pasar por encima). Nunca es fondo de una foto ni
   color de texto sobre blanco.

   Tipografía: Bricolage Grotesque para titulares (tiene eje de anchura, así que
   un titular largo se estrecha en vez de partirse) y Newsreader para el cuerpo,
   que está dibujada para leer en pantalla.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: light;

  /* Azules de marca */
  --rq-blue-50:#F0F7FC; --rq-blue-100:#DCEDF8; --rq-blue-200:#BCDDF2;
  --rq-blue-300:#8FC7E9; --rq-blue-400:#5CACDC; --rq-blue-500:#3389C7;
  --rq-blue-600:#1F6EAB; --rq-blue-700:#17568A; --rq-blue-800:#14446B;
  --rq-blue-900:#103454; --rq-blue-950:#0A2135;

  /* Neutros cálidos: cal y arena, nunca gris de oficina */
  --rq-sand-50:#FBFAF6; --rq-sand-100:#F4F1E9; --rq-sand-200:#E9E4D8;
  --rq-sand-300:#D8D1C1; --rq-sand-400:#B3AC9B; --rq-sand-500:#8B8474;
  --rq-sand-600:#6A6456; --rq-sand-700:#4F4A40; --rq-sand-900:#24211C;

  /* Tinta (base del modo oscuro) */
  --rq-ink-950:#08141F; --rq-ink-900:#0B1B29; --rq-ink-850:#0E1E2E;
  --rq-ink-800:#122437; --rq-ink-700:#1A3148; --rq-ink-600:#26445F;
  --rq-ink-450:#4A6E8C; --rq-ink-400:#6C8AA6; --rq-ink-300:#9AB3C8;
  --rq-ink-200:#C4D5E2; --rq-ink-100:#E2ECF3; --rq-ink-50:#F1F6FA;

  /* Sol */
  --rq-sun:#F5B72C; --rq-sun-strong:#E8A50F; --rq-sun-soft:#FDF0CE;
  --rq-sun-soft-2:#FBE4A6; --rq-sun-ink:#7A5106; --rq-sun-dark:#F7C948;
  --rq-sun-soft-dark:#3A2E0E;

  /* Colores de sección (los nombres son los que elige el cliente en el panel) */
  --rq-c-azul:#17568A;     --rq-c-turquesa:#0B7A80; --rq-c-verde:#1B7A5A;
  --rq-c-violeta:#57459B;  --rq-c-ambar:#8A5A00;    --rq-c-coral:#B0442C;
  --rq-c-indigo:#1E4FC4;   --rq-c-arena:#6A6456;

  /* Roles: los componentes usan SIEMPRE estos, nunca la escala cruda */
  --rq-bg:var(--rq-sand-50);
  --rq-bg-alt:var(--rq-sand-100);
  --rq-surface:#FFFFFF;
  --rq-surface-2:var(--rq-blue-50);
  --rq-invert:var(--rq-blue-900);
  --rq-text:var(--rq-sand-900);
  --rq-heading:var(--rq-blue-800);
  --rq-strong:var(--rq-blue-950);
  --rq-muted:var(--rq-sand-700);
  --rq-meta:var(--rq-sand-600);
  --rq-on-invert:#FFFFFF;
  --rq-on-accent:var(--rq-blue-950);
  --rq-link:var(--rq-blue-600);
  --rq-link-hover:var(--rq-blue-700);
  --rq-hairline:var(--rq-sand-200);
  --rq-border:var(--rq-sand-300);
  --rq-border-fuerte:var(--rq-sand-500);
  --rq-accent:var(--rq-sun);
  --rq-accent-bg:var(--rq-sun-soft);
  --rq-accent-text:var(--rq-sun-ink);
  --rq-foco:var(--rq-blue-600);

  --rq-sombra-sm:0 1px 2px rgba(10,33,53,.06), 0 1px 3px rgba(10,33,53,.05);
  --rq-sombra-md:0 4px 12px rgba(10,33,53,.08), 0 1px 3px rgba(10,33,53,.06);
  --rq-sombra-lg:0 12px 32px rgba(10,33,53,.12);
  --rq-mar:linear-gradient(157deg,#0A2135 0%,#103454 42%,#17568A 78%,#1F6EAB 100%);

  /* Tipografía */
  --rq-display:'Bricolage Grotesque', 'Archivo', system-ui, -apple-system, sans-serif;
  --rq-texto:'Newsreader', Georgia, 'Times New Roman', serif;
  --rq-ui:system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala: crece con la pantalla sin saltos bruscos */
  --rq-t-mega:clamp(2.35rem, 1.35rem + 4.6vw, 4.6rem);
  --rq-t-h1:clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
  --rq-t-h2:clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
  --rq-t-h3:clamp(1.32rem, 1.12rem + .8vw, 1.5rem);
  --rq-t-h4:clamp(1.12rem, 1rem + .4vw, 1.24rem);
  --rq-t-cuerpo:clamp(1.06rem, 1rem + .3vw, 1.19rem);
  /* La entradilla va por debajo del titular y por encima del cuerpo: si los
     tres miden casi lo mismo, en el móvil no se distingue la jerarquía. */
  --rq-t-entradilla:clamp(.97rem, .93rem + .45vw, 1.26rem);
  --rq-t-pie:.86rem;
  --rq-t-kicker:.76rem;

  /* Ritmo */
  --rq-esp-1:.35rem; --rq-esp-2:.7rem; --rq-esp-3:1.1rem; --rq-esp-4:1.7rem;
  --rq-esp-5:2.6rem; --rq-esp-6:4rem; --rq-esp-7:6rem;
  --rq-radio:14px; --rq-radio-sm:9px; --rq-radio-pill:999px;
  --rq-ancho:1240px; --rq-lectura:37rem;
  --rq-transicion:180ms cubic-bezier(.2,.6,.3,1);
}

/* Modo oscuro: sólo cambian los roles, la escala se queda igual */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --rq-bg:var(--rq-ink-900);
  --rq-bg-alt:var(--rq-ink-850);
  --rq-surface:var(--rq-ink-800);
  --rq-surface-2:var(--rq-ink-700);
  --rq-invert:var(--rq-ink-950);
  --rq-text:var(--rq-ink-100);
  --rq-heading:var(--rq-ink-50);
  --rq-strong:#FFFFFF;
  --rq-muted:var(--rq-ink-200);
  --rq-meta:var(--rq-ink-300);
  --rq-on-invert:var(--rq-ink-50);
  --rq-link:var(--rq-blue-300);
  --rq-link-hover:var(--rq-blue-200);
  --rq-hairline:var(--rq-ink-700);
  --rq-border:var(--rq-ink-600);
  --rq-border-fuerte:var(--rq-ink-450);
  --rq-accent:var(--rq-sun-dark);
  --rq-accent-bg:var(--rq-sun-soft-dark);
  --rq-accent-text:var(--rq-sun-dark);
  --rq-foco:var(--rq-blue-300);
  --rq-sombra-sm:0 1px 2px rgba(0,0,0,.4);
  --rq-sombra-md:0 4px 14px rgba(0,0,0,.45);
  --rq-sombra-lg:0 14px 36px rgba(0,0,0,.55);
  --rq-mar:linear-gradient(157deg,#08141F 0%,#0B1B29 45%,#14446B 100%);

  --rq-c-azul:#8FC7E9;    --rq-c-turquesa:#4FC9CE; --rq-c-verde:#4FD2A4;
  --rq-c-violeta:#B4A6F0; --rq-c-ambar:#F7C948;    --rq-c-coral:#F0997F;
  --rq-c-indigo:#8AA6FF;  --rq-c-arena:#C4D5E2;
}

/* ------------------------------------------------------------------ 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rq-bg);
  color: var(--rq-text);
  font-family: var(--rq-texto);
  font-size: var(--rq-t-cuerpo);
  line-height: 1.68;
 
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--rq-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rq-link-hover); }
button { font: inherit; color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--rq-foco);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--rq-display);
  color: var(--rq-heading);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  font-variation-settings: 'wdth' 100;
  text-wrap: balance;
}

.rq-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rq-blue-900); color: #fff; padding: .8rem 1.2rem;
  font-family: var(--rq-ui); font-size: .9rem; border-radius: 0 0 var(--rq-radio-sm) 0;
}
.rq-saltar:focus { left: 0; }

/* Texto que sólo leen los lectores de pantalla (anuncios de filtrado). */
.rq-solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- 3. CABECERA */
.rq-cabecera {
  position: sticky; top: 0; z-index: 40;
  /* Fondo opaco en vez de desenfoque: en un móvil de gama media el
     backdrop-filter repinta la cabecera en cada scroll y se nota. */
  background: var(--rq-bg);
  border-bottom: 1px solid var(--rq-hairline);
  transition: transform var(--rq-transicion), box-shadow var(--rq-transicion);
}
.rq-cabecera--compacta { box-shadow: var(--rq-sombra-sm); }
.rq-cabecera--oculta { transform: translateY(-101%); }
.rq-cabecera-interior {
  max-width: var(--rq-ancho); margin: 0 auto;
  padding: .75rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1rem;
}

.rq-marca {
  display: flex; align-items: baseline; gap: .45rem;
  text-decoration: none; color: var(--rq-strong); margin-right: auto;
  line-height: 1;
}
.rq-marca-1 {
  font-family: var(--rq-display); font-weight: 800;
  font-variation-settings: 'wdth' 82;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  letter-spacing: -.03em; text-transform: uppercase;
}
.rq-marca-2 {
  font-family: var(--rq-texto); font-style: italic; font-weight: 400;
  font-size: clamp(.82rem, .75rem + .35vw, 1rem); color: var(--rq-meta);
  white-space: nowrap;
}
.rq-cabecera--compacta .rq-marca-2 { display: none; }
@media (max-width: 420px) { .rq-marca-2 { display: none; } }

.rq-cabecera-acciones { display: flex; align-items: center; gap: .35rem; }
.rq-icono {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid transparent; background: none; border-radius: var(--rq-radio-pill);
  color: var(--rq-heading); cursor: pointer; transition: var(--rq-transicion);
}
.rq-icono:hover { background: var(--rq-surface-2); border-color: var(--rq-hairline); }
.rq-icono-luna { display: none; }
:root[data-tema="oscuro"] .rq-icono-sol { display: none; }
:root[data-tema="oscuro"] .rq-icono-luna { display: block; }

.rq-caja-buscador { display: flex; align-items: center; }
.rq-caja-buscador input {
  width: 0; padding: 0; border: 0; opacity: 0;
  background: var(--rq-surface); color: var(--rq-text);
  font-family: var(--rq-ui);
  /* 16px exactos: por debajo de eso Safari amplía la página al enfocar el
     campo y luego no la devuelve a su sitio. */
  font-size: 16px;
  border-radius: var(--rq-radio-pill);
  transition: width var(--rq-transicion), opacity var(--rq-transicion), padding var(--rq-transicion);
}
.rq-caja-buscador[data-abierto] input {
  width: min(46vw, 230px); opacity: 1; padding: .55rem .9rem;
  border: 1px solid var(--rq-border);
}

/* Barra de secciones: en móvil se desliza en horizontal, sin hamburguesa.
   Se ve lo que hay sin abrir nada, que es lo que hace que la gente pinche. */
.rq-secciones {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding: 0 clamp(1rem, 4vw, 2rem) .6rem;
  max-width: var(--rq-ancho); margin: 0 auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rq-secciones::-webkit-scrollbar { display: none; }
.rq-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  font-family: var(--rq-ui); font-size: .82rem; font-weight: 600;
  padding: .6rem .95rem; border-radius: var(--rq-radio-pill);
  border: 1px solid var(--rq-border); color: var(--rq-muted);
  text-decoration: none; white-space: nowrap; transition: var(--rq-transicion);
  min-height: 44px; display: inline-flex; align-items: center;
}
.rq-chip:hover { border-color: var(--rq-border-fuerte); color: var(--rq-heading); }
.rq-chip[aria-current="true"] {
  background: var(--rq-blue-900); border-color: var(--rq-blue-900); color: #fff;
}
:root[data-tema="oscuro"] .rq-chip[aria-current="true"] {
  background: var(--rq-ink-100); border-color: var(--rq-ink-100); color: var(--rq-ink-900);
}

/* ------------------------------------------------------------ 4. PORTADILLA */
.rq-portadilla {
  background: var(--rq-mar); color: #fff;
  background-image:
    radial-gradient(120% 80% at 88% -10%, rgba(247,201,72,.16) 0%, transparent 55%),
    var(--rq-mar);
}
.rq-portadilla-interior {
  max-width: var(--rq-ancho); margin: 0 auto;
  /* En el móvil la portadilla se aprieta: si ocupa media pantalla, el lector
     llega desde WhatsApp y no ve ni un titular sin hacer scroll. */
  padding: clamp(1.1rem, 4vw, 4.2rem) clamp(1rem, 4vw, 2rem) clamp(1.1rem, 4vw, 3.4rem);
}
.rq-edicion {
  font-family: var(--rq-ui); font-size: var(--rq-t-kicker); font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--rq-sun); margin: 0 0 var(--rq-esp-2);
}
.rq-lema {
  font-family: var(--rq-texto); font-weight: 300; font-style: italic;
  color: #fff; font-size: clamp(1.25rem, .95rem + 2.4vw, 2.9rem);
  line-height: 1.14; letter-spacing: -.015em; max-width: 22ch;
}
/* El filete: la única pieza donde el amarillo manda. */
.rq-filete {
  margin-top: clamp(.9rem, 3vw, 2.4rem); height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--rq-sun) 0 88px, rgba(255,255,255,.22) 88px 100%);
}

/* -------------------------------------------------------------- 5. AVISO */
.rq-aviso-demo { background: var(--rq-accent-bg); border-bottom: 1px solid var(--rq-sun-soft-2); }
:root[data-tema="oscuro"] .rq-aviso-demo { border-bottom-color: var(--rq-ink-700); }
.rq-aviso-demo-interior {
  max-width: var(--rq-ancho); margin: 0 auto;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  font-family: var(--rq-ui); font-size: .85rem; line-height: 1.5;
  color: var(--rq-accent-text);
}
:root[data-tema="oscuro"] .rq-aviso-demo-interior { color: var(--rq-sun-dark); }

/* ------------------------------------------------------------ 6. CONTENIDO */
.rq-contenido {
  max-width: var(--rq-ancho); margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1rem, 4vw, 2rem) var(--rq-esp-7);
}
.rq-bloque { margin-top: clamp(2.6rem, 6vw, 4.4rem); scroll-margin-top: 140px; }
.rq-contenido { scroll-margin-top: 140px; }
.rq-bloque-titulo {
  font-size: var(--rq-t-h2); font-variation-settings: 'wdth' 92;
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: var(--rq-esp-2); margin-bottom: var(--rq-esp-4);
  border-bottom: 2px solid var(--rq-strong);
}
:root[data-tema="oscuro"] .rq-bloque-titulo { border-bottom-color: var(--rq-ink-200); }
.rq-bloque-cuenta {
  font-family: var(--rq-ui); font-size: .78rem; font-weight: 700;
  color: var(--rq-on-accent); background: var(--rq-accent);
  padding: .12rem .5rem; border-radius: var(--rq-radio-pill);
}
.rq-bloque--destacado {
  background: var(--rq-accent-bg);
  border-radius: var(--rq-radio);
  padding: clamp(1.2rem, 3vw, 2rem);
}
/* En oscuro, el amarillo tenue se convertía en una mancha marrón con tarjetas
   azules flotando dentro. Ahí la agenda se marca con el filete, no con el fondo. */
:root[data-tema="oscuro"] .rq-bloque--destacado {
  background: var(--rq-bg-alt);
  border: 1px solid var(--rq-ink-700);
  border-top: 3px solid var(--rq-accent);
}
.rq-bloque--destacado .rq-bloque-titulo { border-bottom-color: var(--rq-sun-strong); }
.rq-bloque--destacado .rq-tarjeta { background: transparent; border-color: transparent; box-shadow: none; }

/* ------------------------------------------------------- 7. PIEZAS COMUNES */
.rq-enlace-total { text-decoration: none; color: inherit; display: block; height: 100%; }

.rq-kicker { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--rq-esp-2); }
.rq-pildora {
  font-family: var(--rq-ui); font-size: var(--rq-t-kicker); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  color: var(--rq-color, var(--rq-c-azul));
  display: inline-flex; align-items: center; gap: .38rem;
}
.rq-pildora::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: currentColor; transform: rotate(45deg);
}
.rq-pildora[data-color="azul"]{--rq-color:var(--rq-c-azul)}
.rq-pildora[data-color="turquesa"]{--rq-color:var(--rq-c-turquesa)}
.rq-pildora[data-color="verde"]{--rq-color:var(--rq-c-verde)}
.rq-pildora[data-color="violeta"]{--rq-color:var(--rq-c-violeta)}
.rq-pildora[data-color="ambar"]{--rq-color:var(--rq-c-ambar)}
.rq-pildora[data-color="coral"]{--rq-color:var(--rq-c-coral)}
.rq-pildora[data-color="indigo"]{--rq-color:var(--rq-c-indigo)}
.rq-pildora[data-color="arena"]{--rq-color:var(--rq-c-arena)}
.rq-antetitulo {
  font-family: var(--rq-ui); font-size: var(--rq-t-kicker); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--rq-meta);
}
.rq-entradilla {
  font-size: var(--rq-t-entradilla); color: var(--rq-muted);
  margin: var(--rq-esp-2) 0 0; line-height: 1.5;
  text-wrap: pretty;
}
.rq-firma {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--rq-esp-3);
  font-family: var(--rq-ui); font-size: .82rem; color: var(--rq-meta);
}
.rq-firma > span + span::before { content: "·"; margin-right: .75rem; color: var(--rq-border); }

/* Fotos: fondo arena mientras cargan, nunca gris. */
.rq-tarjeta-medio, .rq-destacada-medio { background: var(--rq-sand-200); overflow: hidden; }
:root[data-tema="oscuro"] .rq-tarjeta-medio,
:root[data-tema="oscuro"] .rq-destacada-medio { background: var(--rq-ink-700); }
.rq-tarjeta-medio img, .rq-destacada-medio img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform 420ms cubic-bezier(.2,.6,.3,1);
}

/* Portada generada para los artículos sin foto: curvas de mar, sol pequeño
   y la inicial del titular. Nunca un rectángulo gris. */
.rq-portada-generada { position: relative; width: 100%; height: 100%; overflow: hidden; }
.rq-portada-generada svg { width: 100%; height: 100%; display: block; }
.rq-gen-inicial {
  font-family: var(--rq-display); font-weight: 800; font-size: 132px;
  fill: #fff; fill-opacity: .13; letter-spacing: -.04em;
}
/* En modo oscuro las portadas generadas se atenúan: ocho rectángulos de cielo
   brillante sobre fondo tinta deslumbran y rompen la lectura nocturna. */
:root[data-tema="oscuro"] .rq-portada-generada { filter: brightness(.72) saturate(.9); }

/* Cinco ambientes de mar, no un color por sección: la portada tiene que
   parecer una revista, no una caja de rotuladores. */
.rq-portada-generada[data-ambiente="mar"]      {--rq-gen-1:#2E7FB8;--rq-gen-2:#0A2135;--rq-gen-sol:#F5B72C;--rq-gen-linea:#DCEDF8;--rq-gen-halo:#8FC7E9}
.rq-portada-generada[data-ambiente="levante"]  {--rq-gen-1:#128089;--rq-gen-2:#08222E;--rq-gen-sol:#F7C948;--rq-gen-linea:#D6F6F7;--rq-gen-halo:#4FC9CE}
.rq-portada-generada[data-ambiente="salinas"]  {--rq-gen-1:#5C8FA8;--rq-gen-2:#132A3A;--rq-gen-sol:#FBE4A6;--rq-gen-linea:#F4F1E9;--rq-gen-halo:#D8D1C1}
.rq-portada-generada[data-ambiente="poniente"] {--rq-gen-1:#2A4E96;--rq-gen-2:#0F1E3C;--rq-gen-sol:#F5B72C;--rq-gen-linea:#DDE5FF;--rq-gen-halo:#8AA6FF}
.rq-portada-generada[data-ambiente="noche"]    {--rq-gen-1:#14446B;--rq-gen-2:#06111C;--rq-gen-sol:#FDF0CE;--rq-gen-linea:#BCDDF2;--rq-gen-halo:#3389C7}

/* La agenda va sin foto: es una lista de planes, no una galería. */
.rq-tarjeta--agenda .rq-tarjeta-texto { padding: clamp(1rem, 2vw, 1.3rem); }
.rq-tarjeta--agenda { background: var(--rq-surface); border-color: var(--rq-hairline); }
.rq-bloque--destacado .rq-tarjeta--agenda {
  background: var(--rq-surface); border: 1px solid var(--rq-sun-soft-2); box-shadow: var(--rq-sombra-sm);
}
:root[data-tema="oscuro"] .rq-bloque--destacado .rq-tarjeta--agenda { border-color: var(--rq-ink-600); }

/* ---------------------------------------------------------- 8. LA APERTURA */
.rq-apertura { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 1000px) {
  .rq-apertura { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; }
  /* Con dos o tres artículos publicados no hay columna lateral: la pieza de
     apertura ocupa el ancho en vez de dejar un hueco vacío al lado. */
  .rq-apertura--sola { grid-template-columns: minmax(0, 1fr); }
  .rq-apertura--sola .rq-destacada { max-width: 62rem; margin: 0 auto; }
}

.rq-destacada {
  background: var(--rq-surface); border: 1px solid var(--rq-hairline);
  border-radius: var(--rq-radio); overflow: hidden; box-shadow: var(--rq-sombra-md);
  transition: box-shadow var(--rq-transicion), transform var(--rq-transicion);
}
.rq-destacada:hover { box-shadow: var(--rq-sombra-lg); }
.rq-destacada-medio { aspect-ratio: 16 / 10; }
.rq-destacada:hover .rq-destacada-medio img { transform: scale(1.03); }
.rq-destacada-texto { padding: clamp(1.2rem, 3vw, 2.1rem); }
.rq-titular-grande {
  font-size: var(--rq-t-mega); font-weight: 800;
  font-variation-settings: 'wdth' 88; letter-spacing: -.033em; line-height: .98;
  color: var(--rq-strong);
}
/* El subrayado de sol aparece al pasar por encima: es el guiño de la marca. */
.rq-destacada:hover .rq-titular-grande,
.rq-tarjeta:hover .rq-titular {
  background-image: linear-gradient(var(--rq-accent), var(--rq-accent));
  background-size: 100% .16em; background-position: 0 92%; background-repeat: no-repeat;
}
.rq-apertura-lateral { display: grid; gap: clamp(1rem, 2vw, 1.4rem); align-content: start; }

/* ----------------------------------------------------------- 9. TARJETAS */
.rq-rejilla { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
@media (min-width: 620px) { .rq-rejilla--2, .rq-rejilla--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .rq-rejilla--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rq-tarjeta {
  background: var(--rq-surface); border: 1px solid var(--rq-hairline);
  border-radius: var(--rq-radio); overflow: hidden;
  box-shadow: var(--rq-sombra-sm);
  transition: box-shadow var(--rq-transicion), transform var(--rq-transicion), border-color var(--rq-transicion);
}
.rq-tarjeta:hover { box-shadow: var(--rq-sombra-md); transform: translateY(-2px); border-color: var(--rq-border); }
.rq-tarjeta-medio { aspect-ratio: 3 / 2; }
.rq-tarjeta:hover .rq-tarjeta-medio img { transform: scale(1.04); }
.rq-tarjeta-texto { padding: clamp(.95rem, 2vw, 1.25rem); }
.rq-titular {
  font-size: var(--rq-t-h3); font-weight: 700; line-height: 1.14;
  font-variation-settings: 'wdth' 94; color: var(--rq-strong);
}
.rq-tarjeta--compacta .rq-tarjeta-medio { aspect-ratio: 16 / 9; }
.rq-tarjeta--compacta .rq-titular { font-size: var(--rq-t-h4); }

/* La tarjeta lateral va horizontal: en la columna estrecha cunde más. */
@media (min-width: 1000px) {
  .rq-tarjeta--lateral .rq-enlace-total { display: grid; grid-template-columns: 108px minmax(0,1fr); }
  .rq-tarjeta--lateral .rq-tarjeta-medio { aspect-ratio: auto; height: 100%; min-height: 108px; }
  .rq-tarjeta--lateral .rq-entradilla { display: none; }
}
@media (max-width: 619px) {
  .rq-tarjeta--lateral .rq-enlace-total { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: stretch; }
  .rq-tarjeta--lateral .rq-tarjeta-medio { aspect-ratio: auto; height: 100%; }
  .rq-tarjeta--lateral .rq-entradilla { display: none; }
}

/* --------------------------------------------------- 10. LISTADO NUMERADO */
.rq-listado { border-top: 1px solid var(--rq-hairline); }
.rq-fila { border-bottom: 1px solid var(--rq-hairline); }
.rq-fila .rq-enlace-total {
  display: grid; grid-template-columns: 2.6rem minmax(0,1fr) auto;
  gap: 1rem; align-items: baseline; padding: var(--rq-esp-3) .2rem;
  transition: background var(--rq-transicion), padding-left var(--rq-transicion);
}
.rq-fila:hover .rq-enlace-total { background: var(--rq-surface-2); padding-left: .7rem; }
.rq-fila-numero {
  font-family: var(--rq-display); font-weight: 700; font-size: 1rem;
  color: var(--rq-accent-text); font-variant-numeric: tabular-nums;
}
:root[data-tema="oscuro"] .rq-fila-numero { color: var(--rq-sun-dark); }
.rq-fila-texto { display: grid; gap: .2rem; }
.rq-fila-seccion {
  font-family: var(--rq-ui); font-size: var(--rq-t-kicker); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--rq-meta);
}
.rq-titular-pequeno {
  font-family: var(--rq-display); font-weight: 600; font-size: var(--rq-t-h4);
  line-height: 1.22; color: var(--rq-strong); font-variation-settings: 'wdth' 96;
}
.rq-fila-fecha { font-family: var(--rq-ui); font-size: .78rem; color: var(--rq-meta); white-space: nowrap; }

/* ------------------------------------------------------------- 11. VACÍO */
.rq-vacio {
  text-align: center; padding: clamp(3rem, 10vw, 6rem) 1.5rem;
  border: 1px dashed var(--rq-border); border-radius: var(--rq-radio);
  background: var(--rq-surface);
}
.rq-vacio-kicker {
  font-family: var(--rq-ui); font-size: var(--rq-t-kicker); font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--rq-accent-text); margin: 0 0 var(--rq-esp-2);
}
.rq-vacio h2 { font-size: var(--rq-t-h2); margin-bottom: var(--rq-esp-2); }
.rq-vacio p { color: var(--rq-muted); max-width: 44ch; margin: 0 auto; }
.rq-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; margin-top: var(--rq-esp-3);
  font-family: var(--rq-ui); font-size: .9rem; font-weight: 600;
  background: var(--rq-blue-700); color: #fff; border: 0; cursor: pointer;
  padding: .7rem 1.2rem; border-radius: var(--rq-radio-pill);
  text-decoration: none; transition: var(--rq-transicion);
}
.rq-boton:hover { background: var(--rq-blue-800); color: #fff; }
:root[data-tema="oscuro"] .rq-boton { background: var(--rq-blue-300); color: var(--rq-blue-950); }

/* ---------------------------------------------------------- 12. ARTÍCULO */
.rq-progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50;
  background: var(--rq-accent); transform-origin: 0 50%; transform: scaleX(0);
}
.rq-cabecera--articulo .rq-cabecera-interior { justify-content: space-between; }
.rq-cabecera--articulo .rq-marca { margin-right: 0; }
.rq-cabecera--articulo .rq-marca-2 { display: none; }
.rq-volver {
  display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
  font-family: var(--rq-ui); font-size: .88rem; font-weight: 600; color: var(--rq-heading);
  padding: .5rem .7rem .5rem .4rem; border-radius: var(--rq-radio-pill);
}
.rq-volver:hover { background: var(--rq-surface-2); }

.rq-articulo {
  max-width: var(--rq-lectura); margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.1rem, 5vw, 2rem) var(--rq-esp-5);
}
/* Aviso de contenido de ejemplo dentro del artículo: quien llega desde un
   enlace no ha visto el aviso de la portada. */
.rq-marca-demo {
  font-family: var(--rq-ui); font-size: .82rem; line-height: 1.5;
  background: var(--rq-accent-bg); color: var(--rq-accent-text);
  border-left: 3px solid var(--rq-accent);
  padding: .7rem .9rem; border-radius: 0 var(--rq-radio-sm) var(--rq-radio-sm) 0;
  margin: 0 0 var(--rq-esp-4);
}

.rq-art-cabecera { margin-bottom: var(--rq-esp-4); }
.rq-art-titular {
  font-size: var(--rq-t-h1); font-weight: 800; letter-spacing: -.032em; line-height: 1.02;
  font-variation-settings: 'wdth' 90; color: var(--rq-strong); margin-bottom: var(--rq-esp-3);
}
.rq-art-entradilla {
  font-size: var(--rq-t-entradilla); color: var(--rq-muted); line-height: 1.5;
  font-style: italic; margin: 0 0 var(--rq-esp-3);
  text-wrap: pretty;
}
.rq-art-firma {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  font-family: var(--rq-ui); font-size: .82rem; color: var(--rq-meta);
  padding-top: var(--rq-esp-3); border-top: 1px solid var(--rq-hairline);
}
.rq-art-autor { font-weight: 700; color: var(--rq-heading); }
.rq-art-firma > span + span::before { content: "·"; margin-right: .8rem; color: var(--rq-border); }

/* La foto de portada se sale del ancho de lectura: respira. */
.rq-art-portada {
  margin: 0 0 var(--rq-esp-4);
  width: min(100vw - 2rem, 62rem);
  margin-left: calc(50% - min(50vw - 1rem, 31rem));
}
.rq-art-portada > img, .rq-art-portada .rq-portada-generada {
  width: 100%; border-radius: var(--rq-radio); background: var(--rq-sand-200);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.rq-art-portada figcaption {
  font-family: var(--rq-ui); font-size: var(--rq-t-pie); color: var(--rq-meta);
  margin-top: .6rem; padding-left: .8rem; border-left: 3px solid var(--rq-accent);
  max-width: var(--rq-lectura); line-height: 1.45;
}

.rq-art-cuerpo { font-size: var(--rq-t-cuerpo); }
.rq-art-cuerpo p { margin: 0 0 1.35em; text-wrap: pretty; overflow-wrap: anywhere; }
.rq-art-cuerpo a { overflow-wrap: anywhere; }
/* Capitular: sólo en el primer párrafo y sólo si hay sitio. */
@media (min-width: 480px) {
  .rq-art-cuerpo > p:first-of-type::first-letter {
    float: left; font-family: var(--rq-display); font-weight: 700;
    font-size: 3.4em; line-height: .78; padding: .06em .09em 0 0;
    color: var(--rq-heading);
  }
}
.rq-art-cuerpo h2, .rq-art-cuerpo h3 {
  font-size: var(--rq-t-h3); margin: 2.2em 0 .6em; font-variation-settings: 'wdth' 96;
}
.rq-art-cuerpo h4 { font-size: var(--rq-t-h4); margin: 1.8em 0 .5em; }
.rq-art-cuerpo ul, .rq-art-cuerpo ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.rq-art-cuerpo li { margin-bottom: .5em; }
.rq-art-cuerpo li::marker { color: var(--rq-accent-text); font-weight: 700; }
:root[data-tema="oscuro"] .rq-art-cuerpo li::marker { color: var(--rq-sun-dark); }
.rq-art-cuerpo blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--rq-accent);
  color: var(--rq-muted); font-style: italic;
}
.rq-art-cuerpo hr { border: 0; border-top: 1px solid var(--rq-hairline); margin: 2.4em 0; }
.rq-art-cuerpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--rq-surface-2); padding: .12em .35em; border-radius: 4px;
}
.rq-cuerpo-figura { margin: 2em 0; }
.rq-cuerpo-figura img { width: 100%; border-radius: var(--rq-radio-sm); background: var(--rq-sand-200); }
.rq-cuerpo-figura figcaption {
  font-family: var(--rq-ui); font-size: var(--rq-t-pie); color: var(--rq-meta); margin-top: .5rem;
}

.rq-despiece {
  margin: 2.4em 0; padding: var(--rq-esp-4) 0; border-top: 2px solid var(--rq-accent);
  border-bottom: 1px solid var(--rq-hairline);
}
.rq-despiece blockquote {
  margin: 0; padding: 0; border: 0; font-family: var(--rq-display);
  font-weight: 600; font-style: normal; font-size: var(--rq-t-h2); line-height: 1.16;
  letter-spacing: -.02em; color: var(--rq-heading); font-variation-settings: 'wdth' 92;
}
.rq-despiece cite {
  display: block; margin-top: var(--rq-esp-2); font-style: normal;
  font-family: var(--rq-ui); font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--rq-meta);
}

.rq-etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; margin: var(--rq-esp-4) 0; }
.rq-etiquetas span {
  font-family: var(--rq-ui); font-size: .78rem; color: var(--rq-meta);
  background: var(--rq-bg-alt); border: 1px solid var(--rq-hairline);
  padding: .25rem .6rem; border-radius: var(--rq-radio-pill);
}

.rq-compartir {
  margin-top: var(--rq-esp-5); padding: var(--rq-esp-4);
  background: var(--rq-surface-2); border-radius: var(--rq-radio);
  display: grid; gap: var(--rq-esp-3); justify-items: center; text-align: center;
}
.rq-compartir-texto { font-family: var(--rq-display); font-weight: 600; font-size: var(--rq-t-h3); color: var(--rq-heading); }
.rq-compartir-botones { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.rq-compartir .rq-boton { margin: 0; }
.rq-boton--wa, :root[data-tema="oscuro"] .rq-boton--wa { background: #1FA855; color: #fff; }
.rq-boton--wa:hover, :root[data-tema="oscuro"] .rq-boton--wa:hover { background: #17853F; color: #fff; }
#rq-copiar { background: transparent; color: var(--rq-heading); border: 1px solid var(--rq-border-fuerte); }
#rq-copiar:hover { background: var(--rq-surface); color: var(--rq-heading); }

.rq-relacionados {
  max-width: var(--rq-ancho); margin: 0 auto;
  padding: var(--rq-esp-5) clamp(1rem, 4vw, 2rem) var(--rq-esp-7);
  border-top: 1px solid var(--rq-hairline);
}

/* --------------------------------------------------------------- 13. PIE */
.rq-pie { background: var(--rq-invert); color: var(--rq-on-invert); margin-top: auto; }
.rq-pie-interior {
  max-width: var(--rq-ancho); margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
  display: grid; gap: var(--rq-esp-3); justify-items: center; text-align: center;
}
.rq-pie-marca { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.rq-pie-nombre {
  font-family: var(--rq-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: -.03em; font-variation-settings: 'wdth' 82;
}
.rq-pie-ciudad { font-family: var(--rq-texto); font-style: italic; color: var(--rq-blue-200); }
.rq-pie-enlaces { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.rq-pie-enlaces a { color: #fff; font-family: var(--rq-ui); font-size: .9rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.rq-pie-enlaces a:hover { color: var(--rq-sun); border-bottom-color: var(--rq-sun); }
.rq-pie-legal { font-family: var(--rq-ui); font-size: .78rem; color: var(--rq-blue-200); margin: var(--rq-esp-2) 0 0; }
:root[data-tema="oscuro"] .rq-pie-ciudad,
:root[data-tema="oscuro"] .rq-pie-legal { color: var(--rq-ink-300); }

/* ---------------------------------------------------- 14. ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rq-cabecera--oculta { transform: none; }
}

@media print {
  .rq-cabecera, .rq-compartir, .rq-relacionados, .rq-pie, .rq-progreso, .rq-secciones { display: none; }
  body { background: #fff; color: #000; }
  .rq-articulo { max-width: 100%; }
}