/* ═══════════════════════════════════════════════════════════════════════════
   mascota.la — hoja de estilos única del sitio ("La Mascota")

   Sistema visual: los artboards del canvas de Martín, guardados como
   referencia en sites/mascota.la/design/ (Inicio, Categoria, Raza, Ranking,
   Alimento, Articulo, Nav, Footer, Logo, Redes).

   OJO: el zip del canvas traía además un sistema "Broadsheet" en _ds/.
   NO SE USA. Ver sites/mascota.la/design/LEEME.md.

   Los tokens del bloque :root salen de los artboards: no se hardcodea ningún
   hex fuera de ahí. Lenguaje: Nunito, azul #2563EB, verde #22B573, tinta
   #14213D, fondos claros #EAF2FF / #E7F8EF, botones píldora, tarjetas con
   esquinas redondeadas, fotos normales.

   Cero JavaScript bloqueante. Fuente self-hosted (assets/fonts/). Una sola
   hoja para todo el sitio: ninguna página inyecta <style> propio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FUENTE ─────────────────────────────────────────────────────────────────
   Nunito variable (200-1000), self-hosted. Mismo criterio que antes: sale del
   mismo origen que la página (sin DNS + TLS + dos saltos a fonts.googleapis /
   fonts.gstatic en la ruta crítica), sin terceros mirando al lector, y el
   _headers del bake le pone `immutable` a /assets/*. El archivo variable cubre
   los cinco pesos que usan los artboards (400/600/700/800/900) en un request.
   latin-ext y las itálicas sólo bajan si el texto las pide: 39 KB para el
   grueso del sitio.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── TOKENS ─────────────────────────────────────────────────────────────────
   Paleta, radios y sombras leídos de los artboards (frecuencia real de uso).
   Los ratios de contraste están medidos y anotados: los que no llegaban a
   4,5:1 en texto chico se reemplazaron por un tono más oscuro de la MISMA
   familia, que los artboards ya usaban en otro lado.
   ------------------------------------------------------------------------- */
:root {
  /* Azul — el color de lo interactivo */
  --blue:        #2563EB;   /* 5,12:1 sobre blanco · 4,72:1 sobre --surface · 4,55:1 sobre --blue-50 */
  --blue-dark:   #1D4ED8;   /* 6,65:1 sobre blanco — hover y estado activo */
  --blue-50:     #EAF2FF;   /* fondo */
  --blue-100:    #DBEAFE;   /* fondo hover */
  --blue-200:    #BFDBFE;   /* decorativo (blobs del hero) */
  --blue-300:    #93C5FD;   /* 8,79:1 sobre --ink — texto y links sobre marino */

  /* Verde — el segundo color de la marca */
  --green:       #22B573;   /* 2,65:1 sobre blanco: SOLO relleno decorativo, nunca texto */
  --green-ink:   #15803D;   /* 5,02:1 sobre blanco · 4,56:1 sobre --green-50 — el verde que sí es texto */
  --green-light: #4ADE80;   /* 9,16:1 sobre --ink — volantas sobre marino */
  --green-50:    #E7F8EF;   /* fondo */
  --green-100:   #C9F4DC;   /* subrayado del titular */
  --green-200:   #A7F3D0;   /* decorativo */

  /* Tinta y grises */
  --ink:         #14213D;   /* 15,97:1 sobre blanco — titulares y cuerpo fuerte */
  --body:        #334155;   /* 10,35:1 — cuerpo de artículo */
  --muted:       #4B5566;   /* 7,55:1 sobre blanco · 6,96:1 sobre --surface */
  --muted-2:     #5B6472;   /* 5,91:1 sobre blanco · 5,45:1 sobre --surface · 5,25:1 sobre --blue-50 */
  --on-dark:     #C7D0E0;   /* 10,39:1 sobre --ink */
  --on-dark-soft:#B9C3D6;   /*  8,92:1 sobre --ink */

  /* Superficies y bordes */
  --white:        #ffffff;
  --surface:      #F3F6FA;
  --border:       #E8EDF4;
  --border-soft:  #EEF2F7;
  --border-strong:#DCE4F0;

  /* Radios — los artboards son redondeados de verdad */
  --r-pill: 999px;
  --r-xl:   28px;
  --r-lg:   24px;
  --r-md:   18px;
  --r-sm:   12px;
  --r-xs:   8px;
  /* La forma orgánica del hero y de la foto de raza */
  --r-organic:     36px 36px 36px 120px;
  --r-organic-alt: 120px 36px 36px 36px;

  /* Sombras */
  --sh-btn: 0 8px 24px rgba(37, 99, 235, .25);
  --sh-lg:  0 24px 60px rgba(20, 33, 61, .18);
  --sh-md:  0 10px 30px rgba(20, 33, 61, .15);
  --sh-sm:  0 2px 14px rgba(20, 33, 61, .08);

  /* Tipografía */
  --font: 'Nunito', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --fs-display: clamp(38px, 4.8vw, 58px);
  --fs-h1:      clamp(34px, 4vw, 50px);
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-lead:    18px;
  --fs-body:    17px;
  --fs-base:    15px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-xxs:     12px;

  /* Medidas */
  --maxw:  1200px;
  --readw: 720px;
  --gutter: 24px;
  --navh: 72px;

  /* ── Alias heredados ─────────────────────────────────────────────────
     Quedan por si algún HTML generado (cuerpos de nota, bloques viejos)
     todavía pide estos nombres. Apuntan a los tokens de arriba. */
  --ink-soft:   var(--body);
  --paper:      var(--white);
  --bg:         var(--white);
  --paper-soft: var(--surface);
  --cream:      var(--surface);
  --highlight:  var(--blue);
  --highlight2: var(--green-ink);
  --muted-soft: var(--on-dark-soft);
  --gold:       var(--green-light);
  --dark:       var(--ink);
  --cat:        var(--blue);
  --serif: var(--font);
  --sans:  var(--font);
  --mono:  var(--font);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto es obligatorio: las plantillas emiten width/height en el <img>
   para reservar el espacio (CLS), y ese `height` de atributo le gana a
   `aspect-ratio`. Sin esto el hero sale con el alto original de la foto. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

/* text-wrap: pretty por defecto, no balance. `balance` reparte el texto en
   líneas parejas y CORTAS: dentro de una columna angosta (las tarjetas) deja
   el titular partido en cuatro renglones con un hueco a la derecha. `pretty`
   sólo evita la línea huérfana y llena el ancho disponible, que es lo que
   hacen los artboards (todos sus h1/h3 declaran text-wrap:pretty).
   `balance` se aplica abajo, uno por uno, sólo a los titulares anchos. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: pretty;
}
/* Titulares que ocupan casi todo el ancho de la página y entran en 2-3 líneas:
   ahí sí conviene emparejarlas. */
.cat-hero h1,
.static-hero h1,
.author-hero h1,
.cat-empty-card h2,
.home-index h2,
.methodology-strip h3 { text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lead); }
h5 { font-size: var(--fs-body); }
h6 { font-size: var(--fs-sm); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection { background: var(--blue-100); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-sm);
  transition: top .15s ease;
}
.skip-link:focus-visible { top: 14px; color: var(--white); }

/* ── UTILIDADES ─────────────────────────────────────────────────────────── */
.wrap   { max-width: var(--maxw);  margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--readw); margin: 0 auto; padding: 0 var(--gutter); }

/* Volanta: versalita con tracking, azul o verde según el bloque. */
.eyebrow, .card-cat, .tp-label, .section-label, .cat-empty-eyebrow,
.post-toc h4, .citations h3, .post-related h3, .footer-col h4,
.sources-disclaimer h4 {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.4;
}
.eyebrow a { color: inherit; }
.eyebrow a:hover { text-decoration: underline; }
.eyebrow-muted, .tp-label, .section-label { color: var(--muted-2); }

/* Píldora de sección: la etiqueta con fondo tintado de los artboards. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  color: var(--blue-dark);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.pill--green { background: var(--green-50); color: var(--green-ink); }
.pill--plain { background: var(--surface); color: var(--muted-2); }

/* Botones píldora. El verde de marca (#22B573) da 2,65:1 con texto blanco:
   los botones verdes usan --green-ink (5,02:1), que los artboards ya usan
   como el verde "de texto". */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: var(--fs-base);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--sh-btn); }
.btn--primary:hover  { background: var(--blue-dark); color: var(--white); }
.btn--primary:active { background: var(--blue-dark); box-shadow: none; }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover  { border-color: var(--green); color: var(--green-ink); }
.btn--green { background: var(--green-ink); color: var(--white); }
.btn--green:hover { background: var(--ink); color: var(--white); }
.btn--sm { height: 40px; padding: 0 18px; font-size: var(--fs-sm); }

/* ── CABECERA ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--navh);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.03em;
  color: var(--ink);
  flex-shrink: 0;
}
.brand .mark { width: 36px; height: 36px; flex: none; }
.brand .dot { color: var(--green-ink); }
.brand:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  white-space: nowrap;
}
.nav a:hover, .nav a.active, .nav a[aria-current='page'] { background: var(--blue-50); color: var(--blue); }

/* Nav de dos niveles sin JS: submenú con :hover / :focus-within. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group > .nav-top::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: .55;
}
.nav-sub {
  position: absolute;
  top: 100%;
  left: -8px;
  min-width: 220px;
  padding: 8px;
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-sub a { padding: 9px 14px; border-radius: var(--r-sm); white-space: nowrap; }
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub { display: flex; }

.header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.header-glossary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.header-glossary:hover { background: var(--blue-50); color: var(--blue); }
.header-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.header-cta:hover { background: var(--blue-dark); color: var(--white); }
.nav-toggle-cb, .nav-toggle { display: none; }

/* ── MIGAS ──────────────────────────────────────────────────────────────── */
.breadcrumb { padding: 22px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--muted-2); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a { color: var(--blue); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current="page"] { color: var(--muted-2); }
.breadcrumb span[aria-hidden="true"] { color: var(--border-strong); margin: 0 8px; }

/* ── TARJETAS ───────────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover, .card:focus-visible { border-color: var(--blue); color: var(--ink); transform: translateY(-3px); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); flex: none; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card > .card-cat,
.card > h2, .card > h3, .card > h4, .card > p, .card > .card-meta { padding-inline: 22px; }
.card > .card-cat { padding-top: 20px; }
.card > :last-child { padding-bottom: 24px; }
.card-cat { display: block; margin-bottom: 10px; }
.card h2, .card h3, .card h4 { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.01em; margin-bottom: 10px; }
.card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-bottom: 10px; flex: 1; }
/* margin-top:auto clava la línea de metadatos al pie de la tarjeta: en una fila
   conviven tarjetas con bajada y sin bajada, y sin esto el "1 min · Vivienda"
   de unas queda a media altura y el de otras abajo. */
.card .card-meta { display: block; margin-top: auto; padding-top: 10px; font-size: var(--fs-xxs); font-weight: 700; color: var(--muted-2); }

/* ── Tarjeta destacada ("Lo último") ────────────────────────────────────────
   Artboard: grid de dos columnas con gap de 28px, fondo --surface, radio 28px
   y la foto sangrando a los bordes de su columna.

   Dos apartes respecto del artboard, para que el titular respire:
   · las columnas no van 1fr/1fr. La foto se lleva ~45% y el texto ~55%: con
     mitad y mitad, un titular de 70-110 caracteres a 26px entra en cuatro o
     cinco renglones cortos y sobra blanco a la derecha.
   · el titular tiene tamaño fluido, para que uno largo baje un escalón en vez
     de sumar otro renglón.
   El cuerpo queda centrado vertical como en el artboard: con un titular corto
   el aire se reparte arriba y abajo (lee como decisión, no como hueco) y con
   uno largo el texto llena los 300px de la foto igual.
   ------------------------------------------------------------------------- */
.card-featured {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 28px;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card-featured:hover { background: var(--blue-50); transform: none; }
/* La foto llena su columna sin estirar la fila: va absoluta, así el alto lo
   manda la columna de texto (mínimo 300px). */
.card-featured .card-img { aspect-ratio: auto; min-height: 300px; position: relative; }
.card-featured .card-img img { position: absolute; inset: 0; }
.card-featured .card-body {
  padding: 32px 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}
.card-featured h2, .card-featured h3 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 0;
}
.card-featured .card-cat { margin-bottom: 0; }
.card-featured p { font-size: var(--fs-base); line-height: 1.55; margin-bottom: 0; flex: none; }
/* La meta se ancla abajo: cualquier extra vertical queda entre la bajada y la
   meta, y no aparece como hueco muerto debajo del texto. */
.card-featured .card-meta { margin-top: auto; padding-top: 0; }

/* Los artboards pintan todas las secciones con el mismo azul: el hook queda
   por si vuelve el matiz por categoría. */
.cat-salud, .cat-nutricion, .cat-ejercicio, .cat-alimentos,
.cat-razas-perros, .cat-razas-gatos, .cat-rankings,
.cat-alimento-perro, .cat-alimento-gato, .cat-otras-mascotas { --cat: var(--blue); }
.cat-badge { color: var(--cat); }
.dot-cat { display: none; }

/* ── PORTADA ────────────────────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%); }
.hero-grid {
  padding-top: 72px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
.hero-lead .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-50);
  color: var(--green-ink);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  letter-spacing: .06em;
}
.hero-lead h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.hero-lead h1 em {
  font-style: normal;
  color: var(--blue);
  background: linear-gradient(transparent 62%, var(--green-100) 62%);
}
.hero-lead .dek {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  margin: 24px 0 0;
  max-width: 560px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
/* Renglón de confianza: puntito verde + texto, como en el artboard. */
.hero-lead .byline {
  display: flex;
  gap: 10px 22px;
  margin-top: 36px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.hero-lead .byline span { display: flex; align-items: center; gap: 8px; }
.hero-lead .byline span::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* Foto del hero con los dos blobs y la tarjeta flotante. */
.hero-art { position: relative; }
.hero-art::before, .hero-art::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.hero-art::before { inset: auto -20px -20px auto; width: 180px; height: 180px; background: var(--green-100); }
.hero-art::after  { top: -24px; left: -24px; width: 110px; height: 110px; background: var(--blue-200); }
.hero-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-organic);
  box-shadow: var(--sh-lg);
}
.hero-badge {
  position: absolute;
  z-index: 2;
  right: 24px;
  top: 24px;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--sh-md);
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-badge .mark { width: 28px; height: 28px; flex: none; }
.hero-badge strong { font-size: var(--fs-sm); display: block; line-height: 1.15; }
.hero-badge span { font-size: var(--fs-xxs); color: var(--muted-2); }

/* Banda "Lo último" + aside numerado */
.featured-band { padding: 40px 0 0; }
.featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}
.featured-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  gap: 16px;
}
.featured-head h2 { font-size: 28px; letter-spacing: -.02em; }
.featured-head a { font-weight: 800; font-size: var(--fs-sm); }

.hero-side {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
}
.hero-side h4 { font-size: var(--fs-lead); font-weight: 900; margin-bottom: 6px; }
.side-list { list-style: none; display: flex; flex-direction: column; }
.side-list li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
}
.side-list .num { font-size: var(--fs-sm); font-weight: 900; color: var(--green-ink); min-width: 24px; padding-top: 2px; }
.side-list a { color: var(--ink); font-weight: 700; font-size: var(--fs-base); line-height: 1.4; }
.side-list a:hover { color: var(--blue); }
.side-list .side-meta { display: block; font-size: var(--fs-xxs); color: var(--muted-2); font-weight: 700; margin-top: 4px; }

/* Fila de notas siguientes bajo la tarjeta de tapa */
.featured-sidecol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; grid-column: 1 / -1; }

/* Las seis puertas */
.home-index { padding: 80px 0 0; }
.home-index h2 { font-size: 32px; letter-spacing: -.02em; margin-bottom: 8px; }
.home-index .dek { color: var(--muted); margin-bottom: 28px; font-size: var(--fs-body); }
.home-index-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.home-index-list a {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--blue-50);
  color: var(--ink);
  min-height: 150px;
  transition: transform .18s ease;
}
.home-index-list li:nth-child(even) a { background: var(--green-50); }
.home-index-list a:hover { transform: translateY(-3px); color: var(--ink); }
.home-index-list .abbr {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 900;
  font-size: var(--fs-lead);
}
.home-index-list li:nth-child(even) .abbr { color: var(--green-ink); }
.home-index-list .t { font-size: var(--fs-body); font-weight: 800; display: block; }
.home-index-list .s { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; display: block; margin-top: 4px; }

/* Bandas por sección */
.cat-section { padding: 80px 0 0; }
.cat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.cat-header h2 { font-size: 30px; letter-spacing: -.02em; }
.cat-header h2 em { font-style: normal; color: var(--green-ink); font-weight: 700; }
.cat-header .see-all {
  font-weight: 800;
  font-size: var(--fs-sm);
  background: var(--blue-50);
  padding: 8px 14px;
  border-radius: var(--r-pill);
}
.cat-header .see-all:hover { background: var(--blue-100); }
.cat-header .see-all::after { content: ' →'; }
.cat-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.cat-list .card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  transform: none;
}
.cat-list .card:hover { background: var(--blue-50); transform: none; }
.cat-list .card-img, .cat-list .card p, .cat-list .card .card-cat { display: none; }
.cat-list .card h3 { font-size: var(--fs-sm); font-weight: 800; margin: 0; padding: 0; }
.cat-list .card .card-meta { display: none; }

/* ── CATEGORÍA / ÍNDICES ────────────────────────────────────────────────── */
/* Las migas se incluyen antes de la sección, así que se pintan del mismo azul
   para que la banda del hero arranque arriba de todo, como en el artboard. */
.page-category .breadcrumb, .page-index .breadcrumb { background: var(--blue-50); padding: 22px 0 4px; }
.page-index--rankings .breadcrumb { background: var(--green-50); }
.cat-hero { background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%); padding: 8px 0 40px; }
.page-index--rankings .cat-hero { background: linear-gradient(180deg, var(--green-50) 0%, var(--white) 100%); }
.cat-hero h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.03em; margin: 20px 0 0; }
.cat-hero .dek { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); margin: 16px 0 0; max-width: 640px; }
.cat-hero .cat-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted-2);
}

.cat-featured { padding: 32px 0 0; }
.cat-grid { padding: 32px 0 64px; }
.cat-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cat-grid-header h2 { font-size: 24px; }
.cluster-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.cluster-filters a {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.cluster-filters a:hover { border-color: var(--blue); color: var(--blue); }
.cluster-filters a.active { background: var(--blue); border-color: var(--blue); color: var(--white); }

.cat-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cat-grid-list .card-img { aspect-ratio: 4 / 3; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination a, .pagination-info {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.pagination a { color: var(--ink); border: 2px solid var(--border); }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination-info { background: var(--blue); color: var(--white); }

/* Estado vacío */
.cat-empty { padding: 60px 0 80px; }
.cat-empty .wrap { max-width: 760px; }
.cat-empty-card {
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 56px 40px;
  border: 0;
}
.cat-empty-eyebrow { margin-bottom: 16px; }
.cat-empty-card h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.cat-empty-dek { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 540px; margin: 0 auto 28px; }
.cat-empty-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cat-empty-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: var(--fs-base);
  border: 2px solid var(--blue);
}
.cat-empty-btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }
.cat-empty-btn--ghost { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
.cat-empty-btn--ghost:hover { background: var(--white); border-color: var(--green); color: var(--green-ink); }

/* Índices tipados A-Z */
.tpi-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.tpi-letters a {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.tpi-letters a:hover { border-color: var(--blue); color: var(--blue); }
.tpi-group { padding: 36px 0 0; }
.tpi-group h2 { font-size: 26px; margin-bottom: 18px; display: flex; align-items: baseline; gap: 12px; }
.tpi-group h2 em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--green-ink);
  background: var(--green-50);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.tpi-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tpi-list li { display: flex; }
.tpi-list a {
  flex: 1;
  display: block;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: background .18s ease;
}
.tpi-list a:hover { background: var(--blue-50); color: var(--ink); }
.tpi-list .t { display: block; font-size: var(--fs-body); font-weight: 800; line-height: 1.3; }
.tpi-list a:hover .t { color: var(--blue); }
.tpi-list .s { display: block; font-size: var(--fs-xs); color: var(--muted-2); margin: 4px 0 8px; }
.tpi-list .s.sci { font-style: italic; }
.tpi-list .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpi-chip {
  font-size: var(--fs-xxs);
  font-weight: 800;
  color: var(--muted-2);
  background: var(--white);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* ── ARTÍCULO Y FICHAS ──────────────────────────────────────────────────── */
.post { max-width: var(--readw); margin: 0 auto; padding: 32px var(--gutter) 64px; }
/* Las migas se alinean con la columna de lectura, no con el contenedor ancho. */
.page-article .breadcrumb .wrap { max-width: var(--readw); }
.post-hero { margin-bottom: 32px; }
/* inline-block, no inline-flex: la volanta lleva "<a>Vertical</a> · Cluster" y
   un contenedor flex se come el espacio en blanco antes del separador. */
.post-hero .eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  color: var(--blue-dark);
  letter-spacing: .04em;
}
.post-hero h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 18px 0 0;
  text-wrap: pretty;
}
.post-hero .dek { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; }
.post-hero .byline {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  font-size: var(--fs-sm);
  color: var(--muted-2);
  font-weight: 600;
  flex-wrap: wrap;
}
.post-hero .byline a { font-weight: 800; }
.post-hero .byline .reviewed { color: var(--green-ink); font-weight: 700; }

.hero-figure { margin: 24px 0 8px; }
.hero-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-xl); }
.hero-figure figcaption { padding-top: 10px; font-size: var(--fs-xs); color: var(--muted-2); }

.post-toc { border: 2px solid var(--border); border-radius: var(--r-lg); padding: 22px 26px; margin: 32px 0; }
.post-toc h4 { margin-bottom: 12px; }
.post-toc ol { padding-left: 20px; }
.post-toc li { font-size: var(--fs-base); font-weight: 700; line-height: 1.6; }
.post-toc a { color: var(--ink); }
.post-toc a:hover { color: var(--blue); }

.post-body { font-size: var(--fs-body); line-height: 1.7; color: var(--body); }
.post-body p { margin-bottom: 1.1em; }
.post-body h2 { font-size: var(--fs-h2); margin: 1.8em 0 .5em; letter-spacing: -.02em; }
.post-body h3 { font-size: var(--fs-h3); margin: 1.5em 0 .4em; }
.post-body ul, .post-body ol { margin: 0 0 1.2em 1.2em; }
.post-body li { margin-bottom: .5em; }
.post-body strong { font-weight: 800; color: var(--ink); }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote {
  margin: 1.4em 0;
  padding: 18px 24px;
  border-radius: var(--r-md);
  background: var(--surface);
  border-left: 4px solid var(--blue);
  color: var(--body);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { background: var(--surface); padding: 2px 7px; border-radius: var(--r-xs); font-size: .92em; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 1.4em 0; }
.post-body sup a, .tp-health sup a { color: var(--blue); font-size: var(--fs-xxs); font-weight: 800; text-decoration: none; }
.post-body h2 .h2-ic, .ficha-lab h2 .h2-ic, .ficha-verdict h2 .h2-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -3px;
  margin-right: 8px;
  color: var(--green-ink);
}
.post-body h2 .h2-ic svg { width: 1.05em; height: 1.05em; }
.ficha-verdict h2 .h2-ic { color: var(--green-light); }
.h2-banner { margin: 8px 0 22px; max-width: 560px; background: var(--surface); border: 0; border-radius: var(--r-md); padding: 16px 22px; }
.h2-banner svg { display: block; width: 100%; height: auto; }

.post-faq { margin-top: 3em; }
.post-faq h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.post-faq dl { display: grid; gap: 12px; }
.faq-item { background: var(--surface); border-radius: var(--r-md); padding: 20px 24px; border: 0; }
.faq-item dt { font-size: var(--fs-body); font-weight: 800; margin-bottom: 8px; line-height: 1.35; }
.faq-item dd { font-size: var(--fs-base); line-height: 1.6; color: var(--body); }

.citations { margin-top: 3em; }
.citations h3 { color: var(--muted-2); margin-bottom: 12px; }
.citations ol { padding-left: 22px; }
.citations li { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 6px; color: var(--muted); }
.cit-kind { font-size: var(--fs-xxs); color: var(--muted-2); }

/* Aviso legal: la caja marino de los artboards. */
.disclaimer {
  margin-top: 2em;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  font-size: var(--fs-base);
  line-height: 1.6;
  border: 0;
}
.disclaimer a { color: var(--blue-300); text-decoration: underline; }
.disclaimer a:hover { color: var(--white); }

.post-related { margin-top: 3em; }
.post-related h3 { color: var(--muted-2); margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.related-grid .card-img { aspect-ratio: 4 / 3; }
.related-grid .card h4 { font-size: var(--fs-base); }

.post-sidebar { display: none; }

.exercise-video { margin: 20px 0 28px; }
.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--ink); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-sm); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__meta { margin: 8px 2px 0; font-size: var(--fs-xs); color: var(--muted-2); line-height: 1.4; }
.video-embed__label { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xxs); margin-right: 4px; }
.video-embed__meta a { text-decoration: underline; }
.video-embed__dur { color: var(--muted-2); }

/* ── BLOQUES DE DATOS DE LOS TIPOS ──────────────────────────────────────── */
.tp-card { margin: 40px 0; }
.tp-card h2 { font-size: var(--fs-h2); margin-bottom: 8px; letter-spacing: -.02em; }
.tp-label { display: block; margin-bottom: 14px; }

/* Ficha técnica: contenedor redondeado con filas suaves, como los artboards. */
.tp-data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-base);
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tp-data th, .tp-data td { text-align: left; padding: 14px 20px; vertical-align: baseline; border-bottom: 1px solid var(--white); }
.tp-data th { width: 38%; font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.tp-data td { font-weight: 700; color: var(--ink); }
.tp-data tr:last-child th, .tp-data tr:last-child td { border-bottom: 0; }
.tp-sci { font-style: italic; }

/* Rasgos 1-5: nombre + cinco puntos, exactamente como el artboard de Raza. */
.traits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.trait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 700;
  font-size: var(--fs-base);
}
.trait-num { font-size: var(--fs-xs); font-weight: 800; color: var(--muted-2); margin-left: auto; }
.trait-bar { display: flex; gap: 5px; flex: none; }
.trait-bar i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--border-strong); }
.trait-bar i.on { background: var(--blue); }
.traits-note { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 14px; line-height: 1.55; }
.traits-note a { font-weight: 700; }

/* ¿Es para ti? / Recomendado si — dos cajas tintadas */
.tp-fit, .ficha-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.tp-fit > div, .proscons { padding: 22px; border-radius: var(--r-lg); border: 0; }
.tp-fit--yes, .proscons--pro { background: var(--green-50); }
.tp-fit--no,  .proscons--con { background: var(--surface); }
.tp-fit h3, .proscons h3 { font-size: var(--fs-body); font-weight: 800; margin-bottom: 10px; }
.tp-fit--yes h3, .proscons--pro h3 { color: var(--green-ink); }
.tp-fit--no h3,  .proscons--con h3 { color: var(--ink); }
.tp-fit ul, .proscons ul { padding-left: 18px; font-size: var(--fs-base); line-height: 1.7; color: var(--body); }
.tp-fit li, .proscons li { margin: 4px 0; }

.tp-health li { margin-bottom: 8px; }

.tp-links { list-style: none; display: grid; gap: 12px; }
.tp-links li {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
}
.tp-links a { font-weight: 800; font-size: var(--fs-body); color: var(--ink); }
.tp-links a:hover { color: var(--blue); }
.tp-links .traits-note { flex-basis: 100%; margin: 0; }
.tp-links > .traits-note { padding: 0; background: none; }

.tp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: var(--fs-xxs);
  font-weight: 800;
  color: var(--muted-2);
}
.tp-chip--hl { background: var(--blue-50); color: var(--blue-dark); }

.tp-method {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin: 28px 0;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--body);
}
.tp-method strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

/* Tabla comparativa del ranking */
.tp-table-wrap { overflow-x: auto; margin: 28px 0; border: 2px solid var(--border); border-radius: var(--r-lg); }
.tp-compare { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 520px; }
.tp-compare th, .tp-compare td { padding: 16px 20px; text-align: left; vertical-align: middle; border-top: 1px solid var(--border-soft); }
.tp-compare thead th {
  border-top: 0;
  background: var(--surface);
  font-size: var(--fs-xxs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tp-compare tbody th { font-weight: 800; }
.tp-compare tbody tr:hover { background: var(--blue-50); }
/* El puesto sale como la chapita azul del artboard. El número real sigue en el
   DOM dentro de .sr-only para lectores de pantalla; el ::before es decorativo. */
.tp-compare td.pos { width: 64px; }
.tp-compare td.pos::before {
  content: attr(data-pos);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 900;
}
.tp-compare a { font-weight: 800; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tp-items { list-style: none; display: grid; gap: 20px; margin: 28px 0; }
.tp-items li { background: var(--surface); border-radius: var(--r-lg); padding: 24px 26px; }
.tp-items h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.tp-items h3 span { color: var(--blue); margin-right: 8px; }
.tp-items p { font-size: var(--fs-base); line-height: 1.6; color: var(--body); margin-bottom: 10px; }
.tp-items .contra { color: var(--muted); font-size: var(--fs-sm); }
.tp-item-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }

.tp-legal {
  background: var(--green-50);
  border: 0;
  border-radius: var(--r-md);
  padding: 16px 22px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--body);
  margin-top: 16px;
}

/* ── FICHA DE ALIMENTO ──────────────────────────────────────────────────── */
.ficha-summary {
  background: linear-gradient(160deg, var(--blue-50), var(--green-50));
  border: 0;
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin: 32px 0;
}
.ficha-summary__head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.ficha-id { display: flex; flex-direction: column; gap: 2px; }
.ficha-brand { font-size: var(--fs-xxs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
.ficha-name { font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.ficha-subtype { font-size: var(--fs-sm); color: var(--muted); }
.ficha-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ficha-rating .stars { color: var(--blue); font-size: var(--fs-lead); letter-spacing: .05em; }
.ficha-rating__num { font-size: 32px; font-weight: 900; color: var(--blue); letter-spacing: -.02em; line-height: 1.1; }
.ficha-rating__num small { color: var(--muted-2); font-weight: 700; font-size: var(--fs-base); }
.ficha-rating__label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }

.ficha-specs { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: var(--fs-base); }
.ficha-specs th, .ficha-specs td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--white); vertical-align: baseline; }
.ficha-specs th { width: 42%; font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.ficha-specs td { font-weight: 700; }
.ficha-certs { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha-certs__label { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.badge {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  color: var(--green-ink);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.ficha-analysis { margin: 32px 0; }

/* Primeros ingredientes: la fila de píldoras numeradas del artboard. */
.ficha-analysis .tp-health {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 !important;
  counter-reset: ing;
}
.ficha-analysis .tp-health li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  font-weight: 700;
  font-size: var(--fs-base);
  margin: 0;
}
.ficha-analysis .tp-health li:nth-child(even) { background: var(--green-50); }
.ficha-analysis .tp-health li::before {
  counter-increment: ing;
  content: counter(ing);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 900;
  color: var(--blue);
  flex: none;
}
.ficha-analysis .tp-health li:nth-child(even)::before { color: var(--green-ink); }

.ficha-lab { margin: 32px 0; }
.ficha-lab h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.ficha-lab__table { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: var(--fs-base); }
.ficha-lab__table th, .ficha-lab__table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ficha-lab__table thead th {
  background: var(--surface);
  font-size: var(--fs-xxs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.ficha-verdict { background: var(--ink); color: var(--on-dark); border-radius: var(--r-lg); padding: 28px 32px; margin: 32px 0; }
.ficha-verdict h2 { margin-top: 0; color: var(--white); font-size: var(--fs-h3); margin-bottom: 12px; }
.ficha-verdict p { font-size: var(--fs-base); line-height: 1.7; margin-bottom: 10px; }
.ficha-verdict a { color: var(--blue-300); }
.ficha-availability, .ficha-bestfor { font-size: var(--fs-sm); }
.ficha-verdict strong { color: var(--white); }

/* ── MODO REVISIÓN ("A verificar") ──────────────────────────────────────────
   Nunca sale al público: sólo con SITE_REVIEW_MODE=1.
   ------------------------------------------------------------------------- */
.verif-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-xxs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.review-box { border: 3px dashed var(--blue); background: var(--blue-50); border-radius: var(--r-lg); padding: 22px 26px; margin: 32px 0; font-size: var(--fs-sm); }
.review-box h2 { font-size: var(--fs-base); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; color: var(--blue-dark); }
.review-box table { width: 100%; border-collapse: collapse; }
.review-box th, .review-box td { text-align: left; padding: 8px; border-bottom: 1px solid var(--blue-200); vertical-align: top; }
.review-box code { background: var(--white); padding: 1px 6px; border-radius: var(--r-xs); font-weight: 700; }

/* ── BLOQUE "CÓMO TRABAJAMOS" + PIE ─────────────────────────────────────────
   El bloque marino del artboard de Inicio: metodología a la izquierda, de
   dónde salen las fuentes a la derecha, y el descargo debajo, sobre blanco.
   ------------------------------------------------------------------------- */
.method-block { max-width: var(--maxw); margin: 96px auto 0; padding: 0 var(--gutter); }
.method-block__inner {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.method-block__mark { position: absolute; right: -60px; bottom: -80px; width: 360px; opacity: .08; pointer-events: none; }
.methodology-strip { position: relative; z-index: 1; margin: 0; padding: 0; background: none; border: 0; }
.methodology-strip .wrap { max-width: none; padding: 0; display: block; }
.methodology-strip .eyebrow { color: var(--green-light); display: block; margin-bottom: 14px; }
.methodology-strip h3 { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; color: var(--white); }
.methodology-strip h3 em { font-style: normal; color: var(--blue-300); }
.methodology-strip p { color: var(--on-dark); font-size: var(--fs-body); line-height: 1.65; margin: 20px 0 0; }
.methodology-strip .tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.methodology-strip .tag {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.sources-disclaimer { position: relative; z-index: 1; background: none; border: 0; padding: 0; }
.sources-disclaimer .wrap { max-width: none; padding: 0; }
.sources-disclaimer h4 { color: var(--white); font-size: var(--fs-lead); font-weight: 900; letter-spacing: -.01em; text-transform: none; margin-bottom: 20px; }
.sources-disclaimer p { color: var(--on-dark); font-size: var(--fs-base); line-height: 1.6; margin-bottom: 18px; }
.sources-disclaimer .sources-list { list-style: none; counter-reset: src; display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0 0 18px; }
/* La chapita numerada va absoluta, no como item de flex: cada <li> trae
   "<strong>Título</strong> descripción" y un contenedor flex partiría el
   título y el texto en dos columnas. */
.sources-disclaimer .sources-list li {
  position: relative;
  padding-left: 52px;
  min-height: 36px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--on-dark);
}
.sources-disclaimer .sources-list li::before {
  counter-increment: src;
  content: counter(src);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--green-ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.sources-disclaimer .sources-list strong { display: block; font-size: var(--fs-base); color: var(--white); font-weight: 800; }
.sources-disclaimer .sources-process { font-size: var(--fs-sm); }
.sources-disclaimer .sources-disclaimer-bottom { font-size: var(--fs-sm); margin-bottom: 0; }
.sources-disclaimer .sources-disclaimer-bottom strong { color: var(--white); }

/* Descargo bajo el bloque, sobre blanco */
.method-note {
  max-width: 860px;
  margin: 28px auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted-2);
  line-height: 1.6;
}
.method-note strong { color: var(--ink); }

footer.site-footer { background: var(--ink); color: var(--white); margin-top: 96px; padding: 64px var(--gutter) 32px; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border: 0;
}
.footer-brand .brand { color: var(--white); font-size: 22px; }
.footer-brand .brand .dot { color: var(--green-light); }
.footer-brand p { margin-top: 18px; max-width: 380px; color: var(--on-dark-soft); line-height: 1.6; font-size: var(--fs-base); }
.footer-col h4 { color: var(--green-light); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--white); font-size: var(--fs-base); }
.footer-col a:hover { color: var(--blue-300); }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--on-dark-soft);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ── PÁGINAS FIJAS (acerca, contacto, metodología, política, privacidad,
      autores) Y GLOSARIO — antes traían su propio <style>; ahora viven acá
      con el lenguaje de los artboards. ───────────────────────────────────── */
.static-hero, .author-hero {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
  padding: 48px 0 40px;
  border: 0;
}
.static-hero .eyebrow, .author-hero .eyebrow {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--blue-dark);
  margin-bottom: 16px;
}
.static-hero h1, .author-hero h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 18px; }
.static-hero .dek { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 740px; }
.static-hero .stamp, .static-hero .stats {
  margin-top: 18px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted-2);
}
.static-hero .stats strong { color: var(--ink); font-weight: 900; }

.static-body, .method-body, .pol-body, .legal-body, .author-body, .glosario-body { padding: 48px 0 64px; }
.static-body .wrap, .method-body .wrap, .pol-body .wrap, .legal-body .wrap, .author-body .wrap { max-width: 820px; }
/* El hero de las páginas fijas usa el mismo ancho que su cuerpo: si no, el
   titular arranca al filo del contenedor de 1200 y el texto aparece corrido. */
.static-hero .wrap, .author-hero .wrap { max-width: 820px; }
.page-static .breadcrumb .wrap { max-width: 820px; }
.glosario-body .wrap, .page-glosario .static-hero .wrap { max-width: 900px; }
.static-body h2, .pol-body h2, .author-body h2 { font-size: 26px; margin: 40px 0 14px; letter-spacing: -.02em; }
.method-body h2.section, .legal-body h2.section { font-size: 28px; margin: 44px 0 14px; letter-spacing: -.02em; scroll-margin-top: 90px; }
.method-body h2.section .num, .legal-body h2.section .num { color: var(--blue); margin-right: 10px; font-weight: 900; }
.static-body h2:first-of-type, .pol-body h2:first-of-type, .author-body h2:first-of-type { margin-top: 0; }
.method-body h3, .legal-body h3, .author-body h3 { font-size: var(--fs-lead); font-weight: 800; margin: 26px 0 8px; }
.static-body p, .static-body li,
.method-body p, .method-body li,
.pol-body p, .pol-body li,
.legal-body p, .legal-body li,
.author-body p, .author-body li { font-size: var(--fs-body); line-height: 1.7; color: var(--body); }
.static-body p, .method-body p, .pol-body p, .legal-body p, .author-body p { margin: 0 0 14px; }
.static-body ul, .static-body ol,
.method-body ul, .method-body ol,
.pol-body ul, .pol-body ol,
.legal-body ul, .legal-body ol,
.author-body ul, .author-body ol { padding-left: 22px; margin: 0 0 18px; }
.static-body li, .method-body li, .pol-body li, .legal-body li, .author-body li { margin-bottom: 8px; }
.static-body a, .method-body a, .pol-body a, .legal-body a, .author-body a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-body code { background: var(--surface); padding: 2px 7px; border-radius: var(--r-xs); font-size: .92em; }

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; }
.pillar { border: 0; background: var(--surface); border-radius: var(--r-lg); padding: 24px; }
.pillar:nth-child(even) { background: var(--green-50); }
.pillar h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 0 8px; }
.pillar:nth-child(even) h3 { color: var(--green-ink); }
.pillar p { font-size: var(--fs-base); line-height: 1.6; margin: 0; }

.contact-card {
  display: grid;
  gap: 14px;
  padding: 28px 32px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--blue-50);
  margin: 24px 0 32px;
}
.contact-card .label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); }
.contact-card .email { font-size: 28px; font-weight: 900; color: var(--ink); word-break: break-word; letter-spacing: -.02em; }
.contact-card .email a { color: var(--ink); }
.contact-card .email a:hover { color: var(--blue); }
.mailto-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.mailto-list li { padding: 16px 20px; border: 0; border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-base); }
.mailto-list strong { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }

.toc { border: 2px solid var(--border); border-radius: var(--r-lg); padding: 22px 26px; margin: 0 0 36px; background: var(--white); }
.toc h2 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 12px; }
.toc ol { font-size: var(--fs-base); font-weight: 700; line-height: 1.7; margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.toc ol li { margin-bottom: 4px; break-inside: avoid; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue); }

.sources-table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: var(--fs-base); border: 2px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.sources-table th, .sources-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.sources-table th { font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); background: var(--surface); }
.sources-table td:first-child { font-weight: 800; }
.sources-table .weight { display: inline-block; padding: 3px 12px; background: var(--blue-50); color: var(--blue-dark); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; }

.pipeline { display: grid; gap: 12px; margin: 18px 0 24px; counter-reset: step; }
.pipeline-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 24px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
}
.pipeline-step::before {
  counter-increment: step;
  content: counter(step);
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  font-weight: 900;
}
.pipeline-step h4 { font-size: var(--fs-body); font-weight: 800; margin: 0 0 4px; }
.pipeline-step p { font-size: var(--fs-base); line-height: 1.55; margin: 0; color: var(--muted); }

.callout { border: 0; border-left: 4px solid var(--blue); border-radius: var(--r-md); padding: 18px 24px; background: var(--surface); margin: 22px 0; font-size: var(--fs-base); line-height: 1.6; }
.callout strong { font-weight: 800; color: var(--ink); }

.hard-rules { border: 0; background: var(--green-50); border-radius: var(--r-lg); padding: 24px 28px; margin: 22px 0 26px; }
.hard-rules h3 { margin-top: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.hard-rules ul { margin: 10px 0 0; padding-left: 22px; }
.hard-rules li { font-size: var(--fs-base); line-height: 1.6; margin-bottom: 6px; }

.tier { border: 0; border-left: 4px solid var(--blue); border-radius: var(--r-md); background: var(--surface); padding: 18px 24px; margin: 12px 0 16px; }
.tier h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 0 6px; }
.tier p { font-size: var(--fs-base); line-height: 1.6; margin: 0; }
.tier.weak { border-left-color: var(--border-strong); }
.tier.weak h3 { color: var(--muted-2); }

.author-hero .wrap { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; }
.author-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 900;
  color: var(--blue);
  border: 0;
  box-shadow: var(--sh-md);
}
.author-hero .role { font-size: var(--fs-body); color: var(--muted); font-weight: 700; }

/* Glosario */
.gl-section { margin-top: 48px; }
.gl-section:first-child { margin-top: 0; }
.gl-section-head { border: 0; padding-bottom: 12px; margin-bottom: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gl-section-head h2 { font-size: 28px; letter-spacing: -.02em; margin: 0; }
.gl-section-head .count { font-size: var(--fs-xs); font-weight: 800; color: var(--muted-2); background: var(--surface); padding: 4px 12px; border-radius: var(--r-pill); }
.gl-entry { border: 0; background: var(--surface); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 12px; scroll-margin-top: 90px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
.gl-entry .gl-head h3 { font-size: 20px; font-weight: 900; margin: 0 0 4px; letter-spacing: -.02em; }
.gl-entry .gl-head .gl-cat { font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.gl-entry .gl-body p.def { font-size: var(--fs-base); line-height: 1.65; color: var(--body); margin: 0 0 12px; }
.gl-entry .exercise-video { margin: 4px 0 14px; }
.gl-entry .gl-related { margin-top: 4px; }
.gl-entry .gl-related .gl-related-label { font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.gl-entry .gl-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.gl-entry .gl-related a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
}
.gl-entry .gl-related a:hover { background: var(--blue-50); color: var(--blue); }
.gl-entry .gl-related .gl-meta { flex-shrink: 0; font-size: var(--fs-xxs); color: var(--muted-2); font-weight: 700; }
.gl-entry .gl-related .empty { font-size: var(--fs-sm); color: var(--muted-2); font-style: italic; }

.gl-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; margin: 0 0 8px; }
.gl-toc a { font-size: var(--fs-xs); font-weight: 800; color: var(--ink); padding: 7px 14px; border-radius: var(--r-pill); background: var(--surface); }
.gl-toc a:hover { background: var(--blue-50); color: var(--blue); }

.gl-filter { border: 2px solid var(--border); border-radius: var(--r-lg); background: var(--white); padding: 20px 24px; margin: 0 0 24px; }
.gl-search { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border: 2px solid var(--border); background: var(--surface); border-radius: var(--r-pill); }
.gl-search:focus-within { border-color: var(--blue); background: var(--white); }
.gl-search svg { flex-shrink: 0; opacity: .55; }
.gl-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font); font-size: var(--fs-body); font-weight: 700; color: var(--ink); min-width: 0; }
.gl-search input::placeholder { color: var(--muted-2); font-weight: 400; }
.gl-search .gl-count { flex-shrink: 0; font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.gl-search .gl-clear { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted-2); font-size: var(--fs-base); display: none; }
.gl-search.has-text .gl-clear { display: inline-flex; }
.gl-search.has-text .gl-count { display: none; }

.gl-az { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.gl-az button {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--r-pill);
}
.gl-az button:hover:not(:disabled):not(.active) { border-color: var(--blue); color: var(--blue); }
.gl-az button.active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.gl-az button:disabled { color: var(--border-strong); background: transparent; cursor: not-allowed; }
.gl-az .gl-az-all { width: auto; padding: 0 16px; font-size: var(--fs-xxs); letter-spacing: .06em; text-transform: uppercase; }

.gl-empty { display: none; padding: 40px 0; text-align: center; color: var(--muted-2); font-size: var(--fs-body); }
.gl-empty.visible { display: block; }
.gl-section.hidden, .gl-entry.hidden { display: none; }

/* ── ANUNCIOS ───────────────────────────────────────────────────────────── */
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; margin: 40px 0; min-height: 90px; }
.ads-on .ad-slot--sidebar_sticky { margin: 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   Hasta 360px de ancho real: una columna, sin scroll horizontal. Las tablas
   de datos son lo único que scrollea, cada una en su contenedor.
   ------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .featured-grid { grid-template-columns: 1fr; gap: 32px; }
  .featured-sidecol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-block__inner { padding: 48px; gap: 40px; }
  .methodology-strip h3 { font-size: 32px; }
}

@media (max-width: 900px) {
  /* Menú móvil: hamburguesa sin JS (checkbox + label), igual que bienestar.la. */
  .topbar-inner { flex-wrap: wrap; gap: 6px; padding: 12px var(--gutter); align-items: center; }
  .brand { order: 1; margin-right: auto; }
  .header-actions { order: 2; gap: 4px; }
  .header-cta { display: none; }
  .header-glossary { padding: 0; width: 40px; height: 40px; justify-content: center; background: transparent; border: 0; }
  .header-glossary span { display: none; }
  .header-glossary svg { width: 20px; height: 20px; }
  .nav-toggle {
    order: 3; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 40px; height: 40px; cursor: pointer; border-radius: var(--r-sm);
  }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease; }
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    order: 4; flex: 1 0 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 10px calc(-1 * var(--gutter)) -12px; padding: 4px var(--gutter) 14px;
    border-top: 1px solid var(--border); background: var(--white);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav-toggle-cb:checked ~ .nav { display: flex; }
  .nav > a, .nav-group > .nav-top {
    padding: 15px 2px; border-radius: 0; border-bottom: 1px solid var(--border);
    font-size: 17px; font-weight: 800; color: var(--ink); background: none;
  }
  .nav > a:last-child { border-bottom: 0; }
  /* Los grupos (Perros, Gatos, Guías) quedan como título con sus enlaces debajo. */
  .nav-group { display: flex; flex-direction: column; align-items: stretch; }
  .nav-group > .nav-top { border-bottom: 0; padding-bottom: 4px; }
  .nav-group > .nav-top::after { display: none; }
  .nav-sub {
    display: flex; flex-direction: column; position: static; border: 0; box-shadow: none;
    padding: 0 0 8px; margin: 0; background: none; min-width: 0; border-radius: 0; border-bottom: 1px solid var(--border);
  }
  .nav-sub::before { display: none; }
  .nav-sub a { padding: 10px 2px 10px 16px; border-radius: 0; font-size: 16px; font-weight: 600; color: var(--muted); }
  .nav a:hover, .nav a[aria-current='page'] { background: none; color: var(--blue); }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .hero-art { max-width: 520px; }
  /* Apilada: el gap de 28px lo reemplaza el padding del cuerpo. */
  .card-featured { grid-template-columns: 1fr; gap: 0; }
  /* min-height:0 a propósito: con aspect-ratio 16/9, un min-height de 220px le
     impone a la foto un ancho mínimo de 391px y la tarjeta desborda a 360. */
  .card-featured .card-img { min-height: 0; aspect-ratio: 16 / 9; }
  .card-featured .card-body { padding: 28px 24px; }
  .card-featured h2, .card-featured h3 { font-size: 22px; }
  .method-block__inner { grid-template-columns: 1fr; padding: 40px 32px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .gl-entry { grid-template-columns: 1fr; gap: 12px; }
  .gl-entry .gl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .cat-layout { grid-template-columns: 1fr; }
  .featured-sidecol { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .traits { grid-template-columns: 1fr; }
  .tp-fit, .ficha-proscons { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }

  .method-block { margin-top: 64px; }
  .method-block__inner { padding: 32px 24px; }
  .methodology-strip h3 { font-size: 28px; }
  .hero-lead h1 { letter-spacing: -.02em; }
  .hero-badge { right: 12px; top: 12px; padding: 10px 12px; }
  .hero-art img { border-radius: var(--r-xl); }
  /* Los blobs se meten dentro de la caja: si sobresalen a la derecha suman
     scroll horizontal en pantallas chicas (no los ve querySelectorAll porque
     son pseudo-elementos, así que esto se controla a mano). */
  .hero-art::before { inset: auto 0 -12px auto; width: 120px; height: 120px; }
  .hero-art::after  { top: -12px; left: 0; width: 80px; height: 80px; }
  .ficha-summary { padding: 24px 20px; }
  .ficha-summary__head { flex-direction: column; align-items: flex-start; }
  .ficha-rating { align-items: flex-start; }
  .author-hero .wrap { grid-template-columns: 1fr; gap: 20px; }
  .author-avatar { width: 88px; height: 88px; font-size: 34px; }
  .post-toc, .toc, .gl-filter { padding: 18px 20px; }
  .tp-links li { padding: 16px 18px; }

  /* Las tablas anchas scrollean solas, no arrastran la página. */
  .tp-data, .ficha-specs, .ficha-lab__table, .sources-table { display: block; overflow-x: auto; }
  .review-box { overflow-x: auto; }
}

/* ── IMPRESIÓN ──────────────────────────────────────────────────────────── */
@media print {
  .topbar, .nav, .breadcrumb, .ad-slot, .post-related, .header-actions, .method-block { display: none; }
  body { background: var(--white); }
  .disclaimer, .ficha-verdict, footer.site-footer { background: var(--white); color: var(--ink); border: 1px solid var(--border); }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: var(--muted-2); }
}

/* Datos clave de cada raza (Razas para ti): tarjetas con estrellas de color */
.tp-item-strip { gap: 10px; margin: 12px 0 20px; }
.tp-metric {
  display: inline-flex; flex-direction: column; gap: 4px;
  min-width: 132px; padding: 10px 16px 11px;
  border-radius: var(--r-md);
  background: var(--surface);
  border-top: 4px solid var(--m, var(--blue));
}
.tp-metric-l { font-size: var(--fs-xxs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.tp-metric-v { font-size: var(--fs-base); font-weight: 800; color: var(--ink); }
.tp-stars { font-size: 18px; line-height: 1; letter-spacing: 2px; color: var(--m, var(--blue)); }
.tp-stars .off { color: var(--border); }
.tp-metric--peso-adulto { --m: #2f7be5; background: #eaf2fd; }
.tp-metric--ejercicio { --m: #f08a24; background: #fdf1e3; }
.tp-metric--ladrido { --m: #8a5cd6; background: #f1eafb; }
.tp-metric--tolerancia-a-la-soledad { --m: #17a394; background: #e1f5f2; }
.tp-item-strip > a { flex-basis: 100%; font-weight: 800; }

/* Foto de cada raza bajo su subtítulo (Razas para ti) */
.inline-figure { margin: 14px 0 6px; }
.inline-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); display: block; }

/* ═════════════════════════════════════════════════════════════
   Diseño "mascota-la completo" (sep-2026): nota Razas para ti,
   ficha de raza e índice A-Z. Prefijo dz-. Mismas variables del sitio.
   ═════════════════════════════════════════════════════════════ */
.page-dz .breadcrumb { background: none; padding: 0; }
.page-dz .breadcrumb .wrap { max-width: none; padding: 0; }
.page-dz main { padding-bottom: 72px; }

.dz-hero { background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%); overflow-x: clip; }
.dz-hero > .wrap { padding-top: 32px; padding-bottom: 56px; }
.dz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; margin-top: 28px; }
.dz-hero-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dz-hero > .dz-hero-grid--cat { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); margin-top: 0; padding-top: 32px; padding-bottom: 40px; }
.dz-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-pills--meta { margin-top: 22px; }
.dz-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px; }
.dz-pill--white { background: var(--white); color: var(--blue-dark); }
.dz-pill--blue { background: var(--blue-50); color: var(--blue-dark); }
.dz-pill--green { background: var(--green-50); color: var(--green-ink); }
.dz-pill--muted { background: var(--white); color: var(--muted-2); font-weight: 700; }
.dz-pills--meta .dz-pill { padding: 8px 14px; font-size: 14px; }
.dz-h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 900; letter-spacing: -1.3px; line-height: 1.05; margin: 18px 0 0; color: var(--ink); text-wrap: pretty; }
.dz-h1--xl { font-size: clamp(38px, 5vw, 64px); letter-spacing: -1.5px; line-height: 1.02; margin-top: 22px; }
.dz-h1 span { color: var(--blue); }
.dz-dek { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 580px; text-wrap: pretty; }
.dz-byline { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 22px; font-size: 14px; color: var(--muted-2); font-weight: 600; }
.dz-author { display: inline-flex; align-items: center; gap: 8px; }
.dz-author a { font-weight: 800; }
.dz-reviewed { color: var(--green-ink); font-weight: 700; }
.dz-hero-media { position: relative; }
.dz-blob { position: absolute; right: -18px; bottom: -18px; width: 160px; height: 160px; border-radius: 50%; background: var(--green-100); }
.dz-hero-media img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 36px 36px 120px 36px; box-shadow: 0 24px 60px rgba(20, 33, 61, .16); display: block; }

.dz-kicker { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-2); }
.dz-kicker--green { color: var(--green-light); }
.dz-kicker--greenink { color: var(--green-ink); }
.dz-method { background: var(--ink); color: var(--white); border-radius: var(--r-xl); padding: 32px 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.dz-method p { margin: 12px 0 0; color: #C7D0E0; font-size: 15px; line-height: 1.65; }
.dz-weights { display: flex; height: 56px; border-radius: 16px; overflow: hidden; gap: 3px; }
.dz-w { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: var(--white); min-width: 0; }
.dz-w--0 { background: var(--blue); }
.dz-w--1 { background: #3B82F6; }
.dz-w--2 { background: #60A5FA; color: var(--ink); }
.dz-w--3 { background: var(--green); color: var(--ink); }
.dz-w--4 { background: var(--green-light); color: var(--ink); }
.dz-weights-l { display: flex; gap: 3px; margin-top: 10px; }
.dz-weights-l span { font-size: 12px; font-weight: 700; color: #C7D0E0; line-height: 1.3; text-align: center; min-width: 0; }

.dz-section { padding-top: 64px; }
.dz-h2 { font-size: 30px; font-weight: 900; letter-spacing: -.5px; margin: 0; color: var(--ink); }
.dz-sub { color: var(--muted); margin: 6px 0 0; font-size: 15px; }
.dz-compare-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dz-seg { display: flex; flex-wrap: wrap; gap: 6px; background: var(--surface); padding: 5px; border-radius: var(--r-pill); }
.dz-seg button { height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.dz-seg button:hover { color: var(--blue); }
.dz-seg button.on { background: var(--white); color: var(--blue); box-shadow: 0 1px 3px rgba(20, 33, 61, .08); }
.dz-table { margin-top: 20px; border: 2px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.dz-tr { display: grid; grid-template-columns: 56px minmax(150px, 1.6fr) minmax(0, 1fr) repeat(var(--dz-cols, 3), minmax(0, 1fr)) 110px; gap: 12px; padding: 14px 22px; align-items: center; font-size: 15px; color: var(--ink); border-top: 1px solid #EEF2F7; }
a.dz-tr:hover { background: #F8FAFD; color: var(--ink); }
.dz-th { border-top: 0; background: var(--surface); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); }
.dz-th .r { text-align: right; }
.dz-tr strong { font-size: 16px; }
.dz-td-strong { font-weight: 700; }
.dz-tr small { display: block; font-size: 12px; color: var(--muted-2); font-weight: 700; margin-top: 2px; }
.dz-score { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dz-score strong { font-size: 17px; color: var(--blue); }
.dz-score i { width: 80px; height: 6px; border-radius: 9px; background: #EEF2F7; overflow: hidden; }
.dz-score b { display: block; height: 100%; background: var(--blue); border-radius: 9px; }
.dz-note { margin: 12px 0 0; font-size: 13px; color: var(--muted-2); }

.dz-badge { width: 34px; height: 34px; border-radius: 11px; background: var(--blue-50); color: var(--blue-dark); display: grid; place-items: center; font-weight: 900; flex-shrink: 0; }
.dz-badge--top { background: var(--green); color: var(--ink); }
.dz-badge--first { background: var(--blue); color: var(--white); }
.dz-badge--lg { width: 56px; height: 56px; border-radius: 18px; font-size: 26px; }

.dz-dots { display: flex; gap: 3px; }
.dz-dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCE4F0; }
.dz-dots--blue i.on { background: var(--blue); }
.dz-dots--green i.on { background: var(--green); }
.dz-dots--md { gap: 5px; }
.dz-dots--md i { width: 14px; height: 14px; }

.dz-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 64px; }
.dz-layout--aside-right { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-top: 56px; }
.dz-toc { position: sticky; top: 96px; }
.dz-toc nav { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.dz-toc a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink); }
.dz-toc a:hover { background: var(--blue-50); color: var(--blue); }
.dz-toc a span { min-width: 22px; height: 22px; border-radius: 7px; background: var(--surface); color: var(--muted-2); font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.dz-toc a span.top { background: var(--green-50); color: var(--green-ink); }
.dz-toc a span.dot { background: var(--blue-50); color: var(--blue); }
.dz-article { max-width: 760px; min-width: 0; }
.dz-lead p { font-size: 18px; line-height: 1.75; color: #334155; margin: 0 0 14px; }
.dz-prose p { font-size: 17px; line-height: 1.75; color: #334155; margin: 16px 0 0; }
.dz-prose sup a { font-weight: 800; }
.dz-prose--h2 h2 { font-size: 30px; font-weight: 900; letter-spacing: -.5px; margin: 56px 0 0; color: var(--ink); scroll-margin-top: 96px; }
.dz-prose--h2 h3 { font-size: 21px; font-weight: 800; margin: 32px 0 0; }
.dz-prose--h2 ul, .dz-prose--h2 ol { margin: 14px 0 0 22px; font-size: 17px; line-height: 1.7; color: #334155; }
.dz-prose img { width: 100%; height: auto; border-radius: var(--r-lg); margin-top: 20px; display: block; }

.dz-breed { margin-top: 56px; scroll-margin-top: 96px; }
.dz-breed-head { display: flex; align-items: center; gap: 16px; }
.dz-breed-head h2 { font-size: 32px; font-weight: 900; letter-spacing: -.6px; margin: 0; flex: 1; color: var(--ink); }
.dz-breed-score { text-align: right; }
.dz-breed-score strong { display: block; font-size: 30px; font-weight: 900; color: var(--blue); letter-spacing: -.5px; line-height: 1; }
.dz-breed-score span { font-size: 12px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; }
.dz-breed-card { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.dz-breed-card.has-img { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.dz-breed-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.dz-breed-data { padding: 22px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-content: center; }
.dz-lbl { display: block; font-size: 12px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; }
.dz-big { display: block; font-size: 20px; margin-top: 4px; color: var(--ink); }
.dz-small { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.dz-breed-data .dz-dots { margin: 6px 0 2px; gap: 4px; }
.dz-breed-data .dz-dots i { width: 12px; height: 12px; }
.dz-btn-ghost { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: var(--white); border: 2px solid #DCE4F0; font-weight: 800; font-size: 14px; color: var(--ink); }
.dz-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.dz-callout { margin-top: 16px; padding: 18px 20px 18px 36px; border-radius: var(--r-md); background: var(--green-50); position: relative; }
.dz-callout::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 6px; border-radius: 6px; background: var(--green); }
.dz-callout p { font-size: 16px; line-height: 1.7; color: #1F3B2C; margin: 0; }

.dz-rest { margin-top: 64px; scroll-margin-top: 96px; }
.dz-rest--first { margin-top: 0; }
.dz-rest h2 { font-size: 32px; font-weight: 900; letter-spacing: -.6px; margin: 0; color: var(--ink); }
.dz-rest .dz-sub { margin: 8px 0 22px; }
.dz-rest--box { background: var(--blue-50); border-radius: var(--r-xl); padding: 32px 34px; }
.dz-rest--box h2 { font-size: 28px; }
.dz-rest--box .dz-prose p { font-size: 16px; }
.dz-rest-note { font-size: 14px; font-weight: 800; color: var(--blue-dark); margin: 16px 0 0; }
.dz-mentions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.dz-mention { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; border: 2px solid var(--border); color: var(--ink); }
a.dz-mention:hover { border-color: var(--blue); color: var(--ink); }
.dz-mention-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dz-mention-top strong { font-size: 18px; }
.dz-mention-top span { font-weight: 900; color: var(--muted-2); }
.dz-flag { align-self: flex-start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted-2); font-size: 12px; font-weight: 800; }
.dz-mention-txt { font-size: 14px; line-height: 1.55; color: var(--muted); }
.dz-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.dz-faq details { border-radius: 20px; background: var(--surface); }
.dz-faq details[open] { background: var(--blue-50); }
.dz-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-size: 17px; font-weight: 800; color: var(--ink); cursor: pointer; }
.dz-faq summary::-webkit-details-marker { display: none; }
.dz-faq summary span { width: 32px; height: 32px; border-radius: 50%; background: var(--white); flex-shrink: 0; position: relative; }
.dz-faq summary span::before, .dz-faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; border-radius: 2px; background: var(--blue); transform: translate(-50%, -50%); }
.dz-faq summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.dz-faq details[open] summary span::after { display: none; }
.dz-faq details p { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.7; color: #334155; }
.dz-sources { margin-top: 64px; scroll-margin-top: 96px; }
.dz-sources .citations h3 { font-size: 22px; font-weight: 900; margin: 0; color: var(--ink); }
.dz-sources .citations ol { margin: 14px 0 0; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.dz-sources .citations a { color: var(--blue-dark); }
.dz-disclaimer { margin: 24px 0 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--muted); }
.dz-disclaimer a { font-weight: 800; }

/* Ficha de raza */
.dz-raza-hero { padding-top: 32px; }
.dz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.dz-facts > div { background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; }
.dz-facts strong { display: block; font-size: 18px; margin-top: 4px; color: var(--ink); }
.dz-meta { margin: 20px 0 0; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.dz-meta a { font-weight: 800; }
.dz-raza-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 120px 36px 36px 36px; box-shadow: 0 24px 60px rgba(20, 33, 61, .15); display: block; }
.dz-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; }
.dz-trait { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EEF2F7; font-weight: 700; font-size: 15px; }
.dz-na { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.dz-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.dz-fit > div { border-radius: var(--r-lg); padding: 22px 24px; }
.dz-fit-yes { background: var(--green-50); }
.dz-fit-no { background: #FFF4E5; }
.dz-fit h3 { font-size: 17px; font-weight: 900; margin: 0 0 10px; }
.dz-fit ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #334155; }
.dz-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; }
.dz-spec > div { background: var(--surface); border-radius: 16px; padding: 14px 16px; }
.dz-spec dt { font-size: 12px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; }
.dz-spec dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.dz-health { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.dz-health > div { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface); }
.dz-health > div > span { width: 10px; align-self: stretch; border-radius: 6px; background: var(--blue); flex-shrink: 0; }
.dz-health > div.green > span { background: var(--green); }
.dz-health strong { font-size: 16px; }
.dz-linklist { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.dz-linklist a { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: var(--r-md); border: 2px solid var(--border); color: var(--ink); }
.dz-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.dz-side-card { border: 2px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.dz-side-card nav { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-weight: 700; font-size: 15px; }
.dz-side-card nav a { color: var(--ink); }
.dz-side-card nav a:hover { color: var(--blue); }
.dz-side-card--green { background: var(--green-50); border-color: transparent; }
.dz-side-card--blue { background: var(--blue-50); border-color: transparent; }
.dz-side-title { display: block; font-size: 17px; font-weight: 900; }
.dz-side-card p { margin: 8px 0 16px; font-size: 14px; color: #334155; line-height: 1.5; }
.dz-side-card--blue a { font-weight: 800; font-size: 14px; }
.dz-btn-green { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--r-pill); background: var(--green-ink); color: var(--white); font-weight: 800; font-size: 14px; white-space: nowrap; }
.dz-btn-green:hover { background: var(--ink); color: var(--white); }

/* Índice A-Z */
.dz-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; gap: 12px; }
.dz-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); display: block; }
.dz-collage img:first-child { grid-row: 1 / 3; border-radius: 28px 28px 28px 90px; }
.dz-collage img:last-child { border-radius: 28px 90px 28px 28px; }
.dz-toolbar { position: sticky; top: 72px; z-index: 10; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid #EEF2F7; }
.dz-toolbar .wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.dz-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--r-pill); background: var(--surface); flex: 1; min-width: 200px; max-width: 340px; color: var(--muted-2); }
.dz-search input { border: 0; background: transparent; outline: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.dz-toolbar .dz-seg { padding: 4px; }
.dz-toolbar .dz-seg button { height: 34px; }
.dz-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.dz-letters a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 14px; background: var(--blue-50); color: var(--blue-dark); }
.dz-letters a:hover { background: var(--blue); color: var(--white); }
.dz-az { padding-top: 16px; }
.dz-az-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding-top: 40px; scroll-margin-top: 150px; }
.dz-az-letter { position: sticky; top: 150px; align-self: start; display: flex; align-items: baseline; gap: 6px; }
.dz-az-letter span { font-size: 56px; font-weight: 900; color: var(--blue); letter-spacing: -2px; line-height: 1; }
.dz-az-letter em { font-style: normal; font-size: 15px; font-weight: 800; color: var(--green-ink); }
.dz-az-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dz-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--border); background: var(--white); color: var(--ink); transition: transform .15s, border-color .15s; }
.dz-card:hover { border-color: var(--blue); transform: translateY(-2px); color: var(--ink); }
.dz-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.dz-card-ph { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--blue); }
.dz-card-ph--green { background: var(--green-ink); }
.dz-card-ph span { font-size: 64px; font-weight: 900; color: var(--white); letter-spacing: -2px; }
.dz-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dz-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dz-card-top strong { font-size: 18px; letter-spacing: -.2px; }
.dz-card-body em { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.dz-size { padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; flex-shrink: 0; background: #FEF3C7; color: #92400E; }
.dz-size--grande, .dz-size--gigante { background: var(--blue-50); color: var(--blue-dark); }
.dz-size--mediano { background: var(--green-50); color: var(--green-ink); }
.dz-origin { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.dz-origin svg { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.dz-empty { padding: 64px 0; text-align: center; color: var(--muted-2); }
.dz-empty strong { display: block; font-size: 20px; color: var(--ink); }
.dz-empty button { margin-top: 14px; height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 0; background: var(--blue); color: var(--white); font: inherit; font-weight: 800; cursor: pointer; }
.dz-promo { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; border-radius: var(--r-xl); background: var(--green-50); color: var(--ink); }
.dz-promo + .dz-promo { margin-top: 14px; }
.dz-promo:hover { background: #D5F3E3; color: var(--ink); }
.dz-promo strong { display: block; font-size: 22px; margin-top: 6px; letter-spacing: -.3px; }
.page-dz [hidden] { display: none !important; }

@media (max-width: 980px) {
  .dz-hero-grid, .dz-hero-grid--even, .dz-hero > .dz-hero-grid--cat, .dz-method, .dz-layout, .dz-layout--aside-right { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dz-toc { position: static; }
  .dz-toc nav { flex-direction: row; flex-wrap: wrap; }
  .dz-side { position: static; }
  .dz-table { overflow-x: auto; }
  .dz-tr { min-width: 820px; }
  .dz-mentions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dz-hero > .wrap { padding-bottom: 36px; }
  .dz-method { padding: 24px; }
  .dz-w { font-size: 13px; }
  .dz-weights { height: 44px; }
  .dz-weights-l span { font-size: 10px; }
  .dz-blob { right: 0; }
  .dz-breed-card.has-img, .dz-breed-data, .dz-traits, .dz-fit, .dz-spec { grid-template-columns: minmax(0, 1fr); }
  .dz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-breed-head h2 { font-size: 26px; }
  .dz-badge--lg { width: 46px; height: 46px; font-size: 22px; }
  .dz-az-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dz-az-letter { position: static; }
  .dz-letters { margin-left: 0; }
  .dz-toolbar { position: static; }
  .dz-promo { grid-template-columns: minmax(0, 1fr); }
  .dz-rest--box { padding: 24px; }
  .dz-collage { display: none; }
}

/* Ficha de alimento (diseño "Alimento", sep-2026) */
.dz-food-hero { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 28px; }
.dz-food-pack { position: relative; aspect-ratio: 1 / 1; border-radius: 36px; overflow: hidden; background: linear-gradient(160deg, var(--blue-50), var(--green-50)); }
.dz-food-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-food-mark { position: absolute; width: 60%; right: -18%; bottom: -20%; opacity: .12; z-index: 1; pointer-events: none; }
.dz-h1--food { font-size: clamp(32px, 4vw, 50px); letter-spacing: -1px; line-height: 1.08; }
.dz-food-stats { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 28px; }
.dz-food-stats small { display: block; font-size: 12px; color: var(--muted-2); font-weight: 700; }
.dz-food-score { display: flex; align-items: baseline; gap: 6px; }
.dz-food-score strong { font-size: 44px; font-weight: 900; color: var(--blue); letter-spacing: -1px; line-height: 1.1; }
.dz-food-score span { color: var(--muted-2); font-weight: 700; }
.dz-food-stat { display: block; font-size: 17px; margin-top: 8px; color: var(--ink); }
.dz-food-note { margin: 24px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--surface); font-size: 13px; color: var(--muted-2); line-height: 1.5; }
.dz-food-note strong { color: var(--ink); }
.dz-atable { border: 2px solid var(--border); border-radius: 20px; overflow: hidden; }
.dz-arow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; padding: 13px 20px; border-top: 1px solid #EEF2F7; font-size: 15px; align-items: center; }
.dz-arow > span:first-child { font-weight: 700; }
.dz-arow strong { color: var(--blue); }
.dz-arow strong.ms { color: var(--ink); }
.dz-arow .min { color: var(--muted-2); }
.dz-ahead { border-top: 0; background: var(--surface); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); }
.dz-ahead > span:first-child { font-weight: 800; }
.dz-ingr { display: flex; flex-wrap: wrap; gap: 10px; }
.dz-ingr span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; }
.dz-ingr b { width: 28px; height: 28px; border-radius: 50%; background: var(--white); display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.dz-ingr-blue { background: var(--blue-50); }
.dz-ingr-blue b { color: var(--blue); }
.dz-ingr-green { background: var(--green-50); }
.dz-ingr-green b { color: var(--green-ink); }
.dz-fit p { margin: 0; font-size: 15px; line-height: 1.6; color: #334155; }
.dz-fit-no--grey { background: var(--surface); }
.dz-health > div > div p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.dz-li { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: var(--r-md); border: 2px solid var(--border); }
.dz-pills--links { margin-top: 18px; }
.dz-pc { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: #334155; }
.dz-pc li { position: relative; padding-left: 22px; }
.dz-pc li::before { position: absolute; left: 0; top: 0; font-weight: 900; }
.dz-pc--pro li::before { content: "+"; color: var(--green-ink); }
.dz-pc--con li::before { content: "−"; color: #B45309; }
.dz-btn-blue { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--r-pill); background: var(--blue); color: var(--white); font-weight: 800; font-size: 14px; }
.dz-side-card--blue a.dz-btn-blue { color: var(--white); }
.dz-btn-blue:hover { background: var(--blue-dark); color: var(--white); }
@media (max-width: 980px) {
  .dz-food-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dz-food-pack { max-width: 420px; }
}
@media (max-width: 640px) {
  .dz-arow { grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: 12px 14px; font-size: 13px; }
  .dz-ahead { font-size: 10px; letter-spacing: .5px; }
}

/* Tablas y llamadas a fuentes dentro de las notas (nota diaria, 30-sep-2026) */
.post-body .tp-table-wrap { overflow-x: auto; margin: 24px 0; border: 2px solid var(--border); border-radius: var(--r-lg); }
.post-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.post-table th, .post-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-table thead th { background: var(--surface, #f6f8fb); font-weight: 800; color: var(--ink); white-space: nowrap; }
.post-table tbody tr:last-child td { border-bottom: 0; }
.post-body sup.cita { font-size: .7em; line-height: 0; margin-left: 1px; }
.post-body sup.cita a { text-decoration: none; font-weight: 700; }