/* web-n — estilos del sitio público. Fase de diseño: exploración 3a.
   Tipografía: Inter variable autoalojada (v4.1, rsms.is/inter) en /fonts/inter/.
   rev: 2026-07-10a  (marcador para forzar nueva versión de caché cuando haga falta) */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Tema de marca. Por defecto Bekia Mascotas (verde); cada sitio activo puede
   redefinir estos tokens vía la clase del body (sitio-<slug>). El color SÓLIDO se
   usa donde un degradado no encaja (bordes, texto, iconos); el degradado, en
   superficies grandes (p. ej. el pie). Los nombres son neutros a propósito. ---- */
:root {
  --acento: #95c11c;
  --acento-osc: #608208;
  --acento-mosc: #405703;
  --acento-claro: #f2f5ea;
  --acento-tenue: #fafcf4;
  --acento-borde: #dfe5d2;
  --acento-borde2: #cddab0;
  --acento-avatar: #dcebb4;
  --hero-bg: #F8FFE4;
}
/* Bekia Psicología: marca en degradado azul→magenta; el sólido es su punto medio. */
body.sitio-psicologia {
  --acento: #6425b5;
  --acento-osc: #4c1a90;
  --acento-mosc: #3a1268;
  --acento-claro: #f1eaf9;
  --acento-tenue: #faf7fe;
  --acento-borde: #e0d4f2;
  --acento-borde2: #c3a9e6;
  --acento-avatar: #e5d9f5;
  --hero-bg: #f5f0fc;
  --degradado: linear-gradient(113deg, #254cbf 0%, #860598 92%);
}
/* Bekia Hogar: marca en degradado teal (verde-azulado oscuro→claro). */
body.sitio-hogar {
  --acento: #00b794;
  --acento-osc: #009177;
  --acento-mosc: #006956;
  --acento-claro: #e3f7f2;
  --acento-tenue: #f2fbf9;
  --acento-borde: #c7eee5;
  --acento-borde2: #9fe0d2;
  --acento-avatar: #cbeee6;
  --hero-bg: #ecf9f5;
  --degradado: linear-gradient(140deg, #006956 0%, #00b794 100%);
}

/* ---- Base: sin relleno de página; el contenido ocupa hasta 1230px centrado ---- */
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
header, main {
  width: 100%;
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
main { flex: 1; }

/* ---- Barra superior de la red (3a): tira negra con los sitios ---- */
.barra-red {
  background: #141414;
  display: flex;
  align-items: center;
  gap: 18px;
  /* fondo a todo el ancho; contenido alineado con el contenedor de 1230px */
  padding: 6px max(16px, calc((100% - 1230px) / 2));
  font: 500 12.5px 'Inter', system-ui, sans-serif;
  color: #8a8a8a;
}
.barra-red a {
  color: inherit;
  text-decoration: none;
  transition: color .12s ease;
}
.barra-red a:hover { color: #fff; }
/* Logo fijo a la izquierda: flor + marca bekia en blanco */
.barra-red .red-logo { display: flex; align-items: center; gap: 5px; flex: none; }
.barra-red .red-logo img { display: block; height: 22px; width: auto; }
.barra-red .red-logo .red-marca { height: 18px; }
/* Los sitios se desplazan en horizontal cuando no caben (el logo no) */
.barra-red .red-sitios {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.barra-red .red-sitios::-webkit-scrollbar { display: none; }
.barra-red .red-actual {
  font-weight: 700;
  /* aclarado del color de marca para que se lea sobre la tira negra
     (el sólido, p. ej. el morado de Psicología, quedaba muy oscuro) */
  color: color-mix(in srgb, var(--acento) 55%, #fff);
}
@media (max-width: 900px) {
  /* Degradado de corte SOLO cuando de verdad hay scroll (pantallas estrechas);
     en escritorio la barra entera es visible, sin desvanecer nada. */
  .barra-red .red-sitios {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
}
@media (max-width: 600px) {
  .barra-red { gap: 12px; }
  .barra-red .red-sitios { gap: 13px; }
}

/* ---- Pie (1e): banda del color de marca con borde superior oscuro ---- */
.pie {
  background: var(--degradado, var(--c));
  border-top: 6px solid color-mix(in srgb, var(--c) 62%, #000);
  padding: 38px max(16px, calc((100% - 1230px) / 2)) 111px;
  font: 500 14px 'Inter', system-ui, sans-serif;
  color: #fff;
  margin-top: 48px;
}
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Logo del pie: el logotipo real en blanco con el hueso interior transparente */
.pie-logo { display: block; }
.pie-logo img { height: 36px; width: auto; display: block; }
.pie-secciones { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.pie-red {
  margin-top: 18px;
  font-size: 14px;
  color: color-mix(in srgb, var(--c) 18%, #fff);
}
.pie-legal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  color: color-mix(in srgb, var(--c) 18%, #fff);
}
.pie-legal nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Portada 2f: hero «hub» ---- */
.hero-hub {
  position: relative;
  background: var(--hero-bg);
  overflow: hidden;
}
.hero-motivo { position: absolute; opacity: .35; pointer-events: none; }
.hero-motivo.m1 { right: -60px; top: -60px; width: 320px; height: 320px; }
.hero-motivo.m2 { left: -80px; bottom: -90px; width: 260px; height: 260px; opacity: .22; }
.hero-cnt {
  position: relative;
  max-width: 1230px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 44px 16px 40px;
}
.hero-logo { margin: 0; }
.hero-logo img { height: 46px; width: auto; display: block; }
.hero-lema { margin: 0; font: 500 18px 'Inter', system-ui, sans-serif; color: var(--acento-mosc); text-align: center; }
.hero-buscador {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--acento);
  border-radius: 100px;
  padding: 12px 24px;
  width: min(560px, 100%);
  /* sin reset global de box-sizing: sin esto el padding+borde se suman al 100%
     y en móvil el buscador se sale de la pantalla. */
  box-sizing: border-box;
  box-shadow: 0 8px 30px rgba(148, 193, 29, .18);
}
.hero-buscador .lupa { width: 24px; height: 24px; color: var(--acento); flex: none; }
.hero-buscador input {
  flex: 1;
  border: 0;
  font: 400 16px 'Inter', system-ui, sans-serif;
  color: #333;
  background: transparent;
  min-width: 0;
}
.hero-buscador input::placeholder { color: #999; }
.hero-buscador input:focus { outline: none; }
.hero-fichas { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.ficha {
  background: #fff;
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  min-width: 110px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ficha:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
.ficha img { width: 34px; height: 34px; }
.ficha-nombre { font: 700 15px 'Inter', system-ui, sans-serif; color: #111; }
.ficha-total { font: 400 11.5px 'Inter', system-ui, sans-serif; color: #999; }

/* Hero en degradado (sitios con hero_oscuro, p. ej. Psicología): banda de marca,
   logo en blanco, lema y secciones como píldoras translúcidas sobre el degradado. */
.hero-hub.oscuro { background: var(--degradado); }
.hero-hub.oscuro .hero-cnt { padding: 54px 16px 96px; gap: 22px; }
/* La flor "_wm" ya es blanca con la mariposa recortada: solo opacidad de marca de agua. */
.hero-hub.oscuro .hero-motivo { opacity: .2; }
.hero-hub.oscuro .hero-motivo.m1 { width: 320px; height: 320px; right: -30px; top: -60px; }
.hero-hub.oscuro .hero-motivo.m2 { display: none; }
.hero-hub.oscuro .hero-logo img { height: 58px; }
.hero-hub.oscuro .hero-lema { color: rgba(255, 255, 255, .92); font-weight: 600; }
.hero-hub.oscuro .hero-buscador { border-color: #fff; box-shadow: 0 14px 44px rgba(0, 0, 0, .24); }
.hero-hub.oscuro .hero-fichas { gap: 12px; }
/* Por defecto el hero oscuro muestra las secciones como píldoras translúcidas. */
.hero-hub.oscuro:not(.con-iconos) .ficha {
  flex-direction: row; min-width: 0; gap: 0; padding: 10px 22px;
  border-radius: 100px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: none;
}
.hero-hub.oscuro:not(.con-iconos) .ficha:hover { background: rgba(255, 255, 255, .28); transform: none; box-shadow: none; }
.hero-hub.oscuro:not(.con-iconos) .ficha img, .hero-hub.oscuro:not(.con-iconos) .ficha-total { display: none; }
.hero-hub.oscuro:not(.con-iconos) .ficha-nombre { color: #fff; font-size: 15px; }

/* Con .con-iconos (p. ej. Hogar): tarjetas blancas con icono, como Mascotas, sobre
   el degradado; sin tarjetas de artículo, así que el hero no necesita relleno extra. */
.hero-hub.oscuro.con-iconos .hero-cnt { padding-bottom: 52px; }
.hero-hub.oscuro.con-iconos .hero-fichas { gap: 16px; }
.hero-hub.oscuro.con-iconos .ficha { padding: 18px 20px; min-width: 132px; }
.hero-hub.oscuro.con-iconos .ficha img { width: 44px; height: 44px; }

/* Tres últimos artículos como tarjetas, solapando el borde inferior del hero oscuro */
.hero-destacados {
  max-width: 1230px;
  margin: -72px auto 38px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.hd-card {
  display: block; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16); text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.hd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 0, 0, .2); }
.hd-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.hd-txt { display: block; padding: 15px 18px 20px; }
.hd-cat { display: block; font: 800 12px 'Inter', sans-serif; letter-spacing: .04em; color: var(--acento); margin-bottom: 6px; }
.hd-tit { font: 800 20px/1.25 'Inter', sans-serif; color: #111; }
@media (max-width: 900px) {
  .hero-hub.oscuro .hero-cnt { padding-bottom: 68px; }
  .hero-destacados { grid-template-columns: 1fr; margin-top: -46px; gap: 16px; }
  .hd-card img { height: 190px; }
}

/* ---- Portada: lo último + lateral ---- */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 30px;
  padding: 34px 12px 10px;
}
.sec-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sec-cab h2 { margin: 0; font: 900 26px 'Inter', system-ui, sans-serif; color: #111; letter-spacing: -.01em; }
.sec-linea { flex: 1; height: 3px; background: var(--acento); }
.ultimos { display: flex; flex-direction: column; }
.fila-art { display: flex; gap: 16px; align-items: center; padding: 16px 0; }
.fila-art + .fila-art { border-top: 1px solid #f0f0f0; }
.fila-thumb { flex: 0 0 180px; }
.fila-thumb img { width: 180px; height: 110px; object-fit: cover; border-radius: 12px; display: block; }
.fila-txt { min-width: 0; }
.fila-cat { display: inline-block; font: 800 11.5px 'Inter', system-ui, sans-serif; color: var(--acento-osc); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; margin-bottom: 5px; }
.fila-txt h3 { margin: 0; font: 700 20px/1.25 'Inter', system-ui, sans-serif; }
.fila-txt h3 a { color: #111; text-decoration: none; }
.fila-txt h3 a:hover { color: var(--acento-osc); }
.fila-hace { display: block; font: 400 12.5px 'Inter', system-ui, sans-serif; color: #999; margin-top: 5px; }
/* Lateral 300×600 de la portada: altura fija y anuncio centrado */
.home-lat .pub-lat {
  position: sticky;
  top: 16px;
  width: 300px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 12px;
  overflow: hidden;
}

/* ---- Portada: guías imprescindibles ---- */
.guias { padding: 20px 12px 44px; }
.guias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.guia {
  background: var(--hero-bg);
  border-radius: 14px;
  padding: 18px;
  font: 700 16px/1.35 'Inter', system-ui, sans-serif;
  color: #111;
  text-decoration: none;
  transition: transform .12s ease;
}
.guia:hover { transform: translateY(-2px); color: var(--acento-mosc); }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
  .guias-grid { grid-template-columns: repeat(2, 1fr); }
  .fila-thumb { flex-basis: 130px; }
  .fila-thumb img { width: 130px; height: 80px; }
  .fila-txt h3 { font-size: 16px; }
}
@media (max-width: 560px) {
  .guias-grid { grid-template-columns: 1fr; }
}

/* Icono de la ficha crece un poco al pasar el ratón */
.ficha img { transition: transform .15s ease; }
.ficha:hover img { transform: scale(1.15); }

/* ---- Huecos de publicidad con altura FIJA (sin CLS), anuncio centrado ---- */
/* Billboard bajo el hero (top escritorio 970×250 + x01 responsive) */
.pub-billboard {
  width: min(970px, calc(100% - 32px));
  height: 250px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.pub-billboard > div { display: flex; align-items: center; justify-content: center; max-width: 100%; }

/* Slot superior del resto de páginas y los de bajo el artículo (right1/right2/right3) */
.pub-text {
  width: min(970px, calc(100% - 32px));
  height: 250px;
  margin: 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.pub-text > div { display: flex; align-items: center; justify-content: center; max-width: 100%; }

/* Hueco in-text dentro del cuerpo del artículo */
.pub-box-intext {
  height: 300px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.pub-box-intext > div { display: flex; align-items: center; justify-content: center; }
/* Huecos in-text extra: solo en móvil (el scroll largo del teléfono da más sitio). */
.pub-box-intext.solo-movil { display: none; }
@media (max-width: 700px) {
  .pub-box-intext { height: 600px; }
  .pub-box-intext.solo-movil { display: flex; }
}

/* ================= 1c: páginas interiores ================= */
body.pagina { background: #f4f5f1; font-family: 'Inter', system-ui, sans-serif; }

/* Cabecera interior (1e): logo grande + secciones + buscador completo */
.cab-sitio {
  max-width: none;
  width: 100%;
  background: #fff;
  border-bottom: 3px solid var(--acento);
}
.cab-cnt {
  max-width: 1230px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 16px;
}
.cab-logo { flex: none; }
.cab-logo img { height: 44px; width: auto; display: block; }
.cab-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 700 14.5px 'Inter', system-ui, sans-serif;
  color: #222;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.cab-nav::-webkit-scrollbar { display: none; }
.cab-nav a { color: inherit; text-decoration: none; }
.cab-nav a:hover, .cab-nav a.activa { color: var(--acento); }
/* Buscador completo (solo escritorio) */
.cab-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 250px;
  background: #fff;
  border: 2px solid var(--acento);
  border-radius: 100px;
  padding: 7px 14px;
}
.cab-buscador svg { width: 16px; height: 16px; color: var(--acento); flex: none; }
.cab-buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 13.5px 'Inter', sans-serif; color: #333; }
.cab-buscador input::placeholder { color: #999; }
.cab-buscador input:focus { outline: none; }
.cab-lupa { display: none; color: var(--acento); }
.cab-lupa svg { width: 20px; height: 20px; display: block; }
@media (max-width: 900px) {
  .cab-cnt { gap: 12px; padding: 12px 12px; position: relative; }
  .cab-logo { margin-right: auto; }
  .cab-logo img { height: 28px; }
  /* menú y buscador se abren con sus iconos, con transición */
  .cab-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 3px solid var(--acento);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
    z-index: 40;
    max-width: none;
    overflow: visible;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .cab-cnt.menu-abierto .cab-nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .cab-cnt.menu-abierto .cab-nav a {
    animation: menu-entra .3s ease both;
  }
  .cab-cnt.menu-abierto .cab-nav a:nth-child(2) { animation-delay: .04s; }
  .cab-cnt.menu-abierto .cab-nav a:nth-child(3) { animation-delay: .08s; }
  .cab-cnt.menu-abierto .cab-nav a:nth-child(4) { animation-delay: .12s; }
  .cab-cnt.menu-abierto .cab-nav a:nth-child(5) { animation-delay: .16s; }
  .cab-cnt.menu-abierto .cab-nav a:nth-child(6) { animation-delay: .2s; }
  .cab-menu-btn svg { transition: transform .25s ease; }
  .cab-cnt.menu-abierto .cab-menu-btn svg { transform: rotate(90deg); }
  .cab-cnt.menu-abierto .cab-nav a { padding: 13px 16px; border-top: 1px solid #f0f0f0; font-size: 15px; }
  .cab-buscador {
    display: flex;
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    margin-top: 8px;
    width: auto;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
    z-index: 40;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .cab-cnt.buscar-abierto .cab-buscador {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* iOS hace zoom (y descuadra la cabecera) al enfocar un input de <16px; con
     16px no amplía, así que ni el input "crece" ni los iconos se salen. */
  .cab-buscador input { font-size: 16px; }
  .cab-lupa { display: block; flex: none; background: none; border: 0; padding: 4px; cursor: pointer; }
  .cab-menu-btn { display: block; flex: none; background: none; border: 0; padding: 4px; color: #333; cursor: pointer; }
  .cab-menu-btn svg { width: 22px; height: 22px; display: block; }
}
/* Rejilla de contenido: carta principal + lateral 316px */
.cuerpo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 20px;
  padding: 20px 12px 10px;
  align-items: start;
}
.carta { background: #fff; border-radius: 8px; padding: 28px 34px; }
.migas { font: 600 12px 'Inter', system-ui, sans-serif; color: #888; margin-bottom: 10px; }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--acento-osc); }

/* Artículo */
.arti-ante { margin: 0 0 4px; font: 700 13px 'Inter', sans-serif; color: var(--acento-osc); text-transform: uppercase; letter-spacing: .05em; }
.arti-tit { margin: 0 0 10px; font: 800 38px/1.12 'Inter', system-ui, sans-serif; color: #111; letter-spacing: -.01em; text-wrap: pretty; }
.arti-entra { margin: 0 0 14px; font: 500 18px/1.55 'Inter', system-ui, sans-serif; color: #555; }
.arti-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font: 500 12px 'Inter', system-ui, sans-serif;
  color: #777;
  padding: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}
.arti-autor { color: var(--acento-osc); font-weight: 700; text-decoration: none; }
.arti-chip {
  background: var(--acento-claro);
  border: 0;
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--acento-mosc);
  font: 700 12px 'Inter', sans-serif;
  cursor: default;
}
.arti-chip.empuja { margin-left: auto; }
.arti-compartir { cursor: pointer; }
.arti-compartir:hover { background: #e6edd6; }
.arti-portada { margin: 0 0 18px; }
.arti-portada img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* Índice plegable */
.arti-indice {
  border: 1px solid var(--acento-borde);
  background: var(--acento-tenue);
  border-radius: 8px;
  margin: 0 0 18px;
}
.arti-indice summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font: 600 13px 'Inter', sans-serif;
  color: var(--acento-mosc);
  display: flex;
  justify-content: space-between;
}
.arti-indice summary::-webkit-details-marker { display: none; }
.arti-indice summary span { transition: transform .25s ease; }
.arti-indice[open] summary span { transform: rotate(180deg); }
.arti-indice ol { margin: 0; padding: 0 16px 12px 34px; font: 500 14px/1.9 'Inter', sans-serif; min-height: 0; overflow: hidden; }
.arti-indice a { color: var(--acento-mosc); text-decoration: none; }
.arti-indice a:hover { text-decoration: underline; }
/* Despliegue suave al abrir/cerrar (mejora progresiva vía ::details-content: los
   navegadores que no lo soportan siguen abriendo/cerrando al instante, sin romperse).
   El truco grid-template-rows 0fr→1fr anima la altura sin necesidad de fijar un max-height. */
.arti-indice::details-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  content-visibility: hidden;
  transition: grid-template-rows .3s ease, content-visibility .3s allow-discrete;
}
.arti-indice[open]::details-content { grid-template-rows: 1fr; content-visibility: visible; }

/* Cuerpo del artículo: tipografía 1c con h2 numerados en verde */
.arti-cuerpo { font: 400 17px/1.75 'Inter', system-ui, sans-serif; color: #2b2b2b; counter-reset: apartado; }
.arti-cuerpo p { margin: 0 0 19px; }
.arti-cuerpo a { color: var(--acento-osc); }
.arti-cuerpo h2 {
  font: 800 24px/1.2 'Inter', system-ui, sans-serif;
  color: #111;
  margin: 26px 0 10px;
  counter-increment: apartado;
  scroll-margin-top: 16px;
}
.arti-cuerpo h2::before {
  content: counter(apartado, decimal-leading-zero) ". ";
  color: var(--acento);
}
.arti-cuerpo h3 { font: 800 20px/1.25 'Inter', sans-serif; color: #111; margin: 20px 0 8px; }
.arti-cuerpo figure { margin: 18px 0; }
.arti-cuerpo figure img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.arti-cuerpo figcaption { font: 500 13px/1.5 'Inter', sans-serif; color: #888; padding-top: 6px; text-align: center; }
.arti-cuerpo blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--acento); font-style: italic; color: #555; }
.arti-cuerpo table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: 15.5px; }
.arti-cuerpo th, .arti-cuerpo td { border: 1px solid #e6e6e6; padding: 10px 12px; text-align: left; vertical-align: top; }
.arti-cuerpo thead th { background: var(--acento-claro); font-weight: 700; }
.arti-cuerpo tbody tr:nth-child(even) { background: #fafafa; }
.arti-cuerpo table + * { margin-top: 4px; }
.arti-cuerpo ul, .arti-cuerpo ol { margin: 0 0 14px; padding-left: 24px; }
.arti-fuente { font: 500 12px 'Inter', sans-serif; color: #999; margin: 18px 0 0; }

/* Lateral informativo */
.lat { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.lat-pub {
  width: 300px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 8px;
  overflow: hidden;
}
.lat-modulo { padding: 18px; }
.lat-tit {
  margin: 0 0 4px;
  font: 800 13px 'Inter', system-ui, sans-serif;
  color: #111;
  text-transform: uppercase;
  border-bottom: 2px solid var(--acento);
  padding-bottom: 8px;
}
.lat-lista { list-style: none; margin: 0; padding: 0; }
.lat-lista li { padding: 9px 0; font: 600 14px/1.4 'Inter', system-ui, sans-serif; }
.lat-lista li + li { border-top: 1px solid #f0f0f0; }
.lat-lista a { color: #222; text-decoration: none; }
.lat-lista a:hover { color: var(--acento-osc); }

/* Listados (sección, autor, buscador) */
.listado .sec-cab h1, .listado .sec-cab h2 { margin: 0; font: 900 26px 'Inter', system-ui, sans-serif; color: #111; letter-spacing: -.01em; }
.sec-total { font: 700 13px 'Inter', sans-serif; color: var(--acento-osc); white-space: nowrap; }
.sec-intro { margin: -4px 0 22px; max-width: 72ch; font: 400 15px/1.65 'Inter', system-ui, sans-serif; color: #555; }
.listado-filas { display: flex; flex-direction: column; }
.fila-entra { margin: 4px 0 0; font: 400 13.5px/1.5 'Inter', sans-serif; color: #777;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sin-resultados { color: #888; font-size: 14px; }
.buscador-pagina { margin: 4px 0 18px; box-shadow: none; }
.buscar-total { font: 700 14px 'Inter', sans-serif; color: var(--acento-mosc); margin: 0 0 6px; }

/* Ficha de autor */
.autor-ficha { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.autor-avatar {
  width: 64px; height: 64px; flex: none; border-radius: 50%;
  background: var(--acento-avatar); color: var(--acento-osc);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 22px 'Inter', sans-serif;
}
.autor-nombre { margin: 0; font: 800 26px 'Inter', sans-serif; color: #111; }
.autor-bio { margin: 4px 0 0; font: 400 14px/1.5 'Inter', sans-serif; color: #555; }
.autor-redes { margin: 6px 0 0; display: flex; gap: 12px; font: 700 12px 'Inter', sans-serif; }
.autor-redes a { color: var(--acento-osc); text-decoration: none; }

/* Paginación */


/* Relacionados bajo el artículo */
.relacionados { padding: 10px 12px 0; }
.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; background: #fff; border-radius: 8px; padding: 10px 24px; }

/* Páginas legales y de error */
/* Páginas legales (aviso legal, privacidad, cookies). El fondo/relleno los aporta
   .carta y el ancho lo limita .cuerpo-grid; aquí solo la tipografía y las tablas. */
.legal { font: 400 15px/1.7 'Inter', sans-serif; color: #2b2b2b; }
.legal h1 { font: 800 30px/1.15 'Inter', sans-serif; color: #111; margin: 0 0 4px; }
.legal h2 { font: 800 20px/1.25 'Inter', sans-serif; color: #111; margin: 26px 0 8px; }
.legal h3 { font: 700 17px/1.3 'Inter', sans-serif; color: #111; margin: 20px 0 6px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--acento-osc); }
.legal b { color: #111; }
.legal-updated { color: #888; font-size: 13px; margin: 0 0 20px; }
.legal .tabla-cookies { overflow-x: auto; margin: 0 0 16px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.5; }
.legal th, .legal td { border: 1px solid #e4e7dc; padding: 8px 10px; vertical-align: top; text-align: left; }
.legal th { background: var(--acento-claro); color: var(--acento-mosc); font-weight: 700; }
.legal .th1 { width: 34%; }
.lat-lista a.activa { color: var(--acento-osc); font-weight: 800; }
.pagina-error { margin: 40px auto; max-width: 560px; text-align: center; }
.pagina-error h1 { font: 800 28px 'Inter', sans-serif; color: #111; margin: 14px 0 6px; }
.pagina-error p { color: #666; }
.boton-verde {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font: 700 14px 'Inter', sans-serif;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 8px;
}
.boton-verde:hover { filter: brightness(1.06); }

/* Galería de fotos */
.galeria-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galeria-grid figure { margin: 0; }
.galeria-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }
.galeria-grid figcaption { font: 600 12.5px/1.4 'Inter', sans-serif; padding-top: 6px; }
.galeria-grid figcaption a { color: #222; text-decoration: none; }
.foto-pagina figure img { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; }

@media (max-width: 900px) {
  .cuerpo-grid { grid-template-columns: 1fr; }
  .lat { position: static; }
  .carta { padding: 20px 18px; }
  .arti-tit { font-size: 28px; }
  .rel-grid { grid-template-columns: 1fr; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Home al lenguaje 1c: secciones como cartas blancas sobre #f4f5f1 */
.home-grid { align-items: start; }
.home-grid > .carta { padding: 24px 28px; }
.guias.carta { margin: 0 16px 10px; padding: 24px 28px; }
@media (max-width: 900px) {
  .home-grid > .carta, .guias.carta { padding: 18px 16px; }
}

/* ================= Home 4a: portada + bloques por sección ================= */
.home-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-grid > .carta { padding: 22px; }
.home-col .carta { padding: 22px; }

/* Bloque de portada: destacado con velo + «Lo último» */
.portada-bloque { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.port-dest { position: relative; display: block; border-radius: 8px; overflow: hidden; min-height: 340px; }
.port-dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.port-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 0, .85), transparent 55%); }
.port-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.port-badge {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font: 800 10.5px 'Inter', sans-serif;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 3px;
}
.port-tit { display: block; font: 800 28px/1.12 'Inter', system-ui, sans-serif; color: #fff; margin-top: 10px; text-wrap: pretty; }
.port-ultimo { display: flex; flex-direction: column; min-width: 0; }
.port-ultimo-tit {
  margin: 0 0 2px;
  font: 800 11px 'Inter', sans-serif;
  color: var(--acento-osc);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--acento);
  padding-bottom: 7px;
}
.port-item { display: block; padding: 11px 0; text-decoration: none; }
.port-item + .port-item { border-top: 1px solid #f0f0f0; }
.port-kicker { display: block; font: 700 10.5px 'Inter', sans-serif; color: var(--acento-osc); letter-spacing: .06em; }
.port-item-tit { display: block; font: 700 15.5px/1.3 'Inter', system-ui, sans-serif; color: #111; margin-top: 2px; }
.port-item:hover .port-item-tit { color: var(--acento-osc); }
.port-hace { display: block; font: 400 11.5px 'Inter', sans-serif; color: #999; margin-top: 3px; }

/* Bloques por sección (formato Perros): cabecera numerada + parrilla de 4 */
.bloq-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bloq-cab h2 { margin: 0; font: 800 20px 'Inter', system-ui, sans-serif; color: #111; }
.bloq-num { color: var(--acento); }
.bloq-linea { flex: 1; height: 2px; background: #eef2e2; }
.bloq-ver { font: 700 12px 'Inter', sans-serif; color: var(--acento-osc); text-decoration: none; letter-spacing: .03em; white-space: nowrap; }
.bloq-ver:hover { text-decoration: underline; }
.bloq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bloq-art { display: block; text-decoration: none; min-width: 0; }
.bloq-art img { width: 100%; aspect-ratio: 5/3; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 10px; }
.bloq-tit { font: 700 14.5px/1.3 'Inter', system-ui, sans-serif; color: #111; }
.bloq-art:hover .bloq-tit { color: var(--acento-osc); }

/* Temas (píldoras) */
.temas { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tema {
  background: var(--acento-claro);
  color: var(--acento-mosc);
  border-radius: 100px;
  padding: 7px 14px;
  font: 600 12.5px 'Inter', sans-serif;
  text-decoration: none;
}
.tema:hover { background: #e6edd6; }

/* Lateral: 300×600 inferior */
.lat .pub-lat {
  width: 300px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .portada-bloque { grid-template-columns: 1fr; }
  .port-dest { min-height: 240px; }
  .port-tit { font-size: 22px; }
  .bloq-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Icono de sección en la cabecera de cada bloque de la portada */
.bloq-icono { width: 30px; height: 30px; flex: none; display: block; }

/* ---- Schibsted Grotesk (titulares, con ink traps) — autoalojada, OFL ---- */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted/SchibstedGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Héroe del artículo (1e): imagen + velo + antetítulo badge + titular ---- */
.arti-heroe {
  position: relative;
  margin: 0 0 18px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 300px;
}
.arti-heroe img { width: 100%; height: auto; display: block; aspect-ratio: 1050/650; object-fit: cover; }
.arti-heroe.sin-foto img { display: none; }
.arti-heroe.sin-foto { background: linear-gradient(135deg, var(--acento-claro), var(--acento-avatar)); }
.heroe-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 0, .85), transparent 60%); }
.heroe-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; }
.heroe-badge {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font: 800 11px 'Inter', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}
.heroe-tit {
  margin: 12px 0 0;
  font: 900 38px/1.1 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  color: #fff;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.arti-cab { max-width: 1050px; }
.arti-entradilla { font: 500 18px/1.55 'Inter', system-ui, sans-serif; color: #555; margin: 0 0 8px; }
.arti-firma { font: 500 13px 'Inter', sans-serif; color: #777; margin: 0 0 6px; }
.arti-firma a { color: var(--acento-osc); font-weight: 700; text-decoration: none; }
@media (max-width: 700px) {
  .arti-heroe { border-radius: 10px; min-height: 220px; }
  .heroe-txt { padding: 16px; }
  .heroe-tit { font-size: 25px; }
}

/* Apertura del artículo: antetítulo + titular Schibsted + imagen (en este orden) */
.arti-titular {
  margin: 12px 0 16px;
  font: 900 48px/1.08 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  color: #111;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.arti-foto { margin: 0 0 18px; }
.arti-foto img { width: 100%; height: auto; border-radius: 16px; display: block; }
@media (max-width: 700px) {
  .arti-titular { font-size: 31px; line-height: 1.03; }
  .arti-foto img { border-radius: 10px; }
}

/* Desplazamiento suave (índice y anclas del interior) */
/* clip (no hidden) evita el scroll horizontal por desbordes de terceros (anuncios
   sticky, diálogo del CMP) sin crear contenedor de scroll ni romper position:sticky. */
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Apertura del artículo: una columna grande centrada */
.apertura {
  max-width: 1230px;
  margin: 0 auto;
  padding: 22px 12px 0;
  text-align: center;
}
.apertura .migas { margin-bottom: 14px; }
.apertura .arti-titular { margin: 14px auto 20px; max-width: 880px; }
.apertura .arti-foto { margin: 0; }

/* Hueco de megabanner suelto (right3 bajo el artículo): forma 300×600, no billboard */
.pub-mega {
  width: 300px;
  height: 600px;
  margin: 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  border-radius: 12px;
  overflow: hidden;
}

/* Héroe del artículo «enmarcado» (2e): panel tintado verde alrededor de la imagen */
.apertura .arti-foto {
  background: var(--hero-bg);
  border-radius: 24px;
  padding: 34px;
}
.apertura .arti-foto img { width: 100%; height: auto; display: block; border-radius: 14px; }
@media (max-width: 700px) {
  .apertura .arti-foto { padding: 14px; border-radius: 16px; }
}

/* Antetítulo 2px más grande */
.heroe-badge { font-size: 13px; }

/* Imágenes dentro del cuerpo a todo el ancho de la columna */
.arti-cuerpo figure img, .arti-cuerpo .img-bloque img { width: 100%; height: auto; }

/* «También te puede interesar»: sin fecha */
.rel-grid .fila-hace { display: none; }

/* ---- Familjen Grotesk (titulares, ink traps) — autoalojada, OFL ---- */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('/fonts/familjen/FamiljenGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
.arti-titular, .heroe-tit { font-family: 'Clash Grotesk', 'Space Grotesk', 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; font-weight: 600; }

/* ---- Firma de autor en la barra del artículo ---- */
.autor-chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.autor-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.autor-ini {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acento-avatar); color: var(--acento-osc);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px 'Inter', sans-serif;
}
.autor-datos { display: flex; flex-direction: column; line-height: 1.25; }
.autor-datos b { font: 700 13px 'Inter', sans-serif; color: var(--acento-mosc); }
.autor-datos small { font: 500 11.5px 'Inter', sans-serif; color: #999; }
a.autor-chip:hover .autor-datos b { text-decoration: underline; }

/* ---- AdDoor contextual al pie del artículo ---- */
.recomendados { padding: 10px 12px 0; }
.arecwrap { background: #fff; border-radius: 8px; padding: 16px 24px; min-height: 250px; }

/* ---- Lateral con segmentos pegajosos: banner (600) con 300px extra de recorrido,
       módulos, y el último segmento absorbe el resto de la altura ---- */
.lat {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
.lat-seg { height: 900px; flex: none; }
.lat-seg.resto { height: auto; flex: 1; min-height: 900px; }
.lat-seg .pub-lat { position: sticky; top: 16px; }
@media (max-width: 900px) {
  .lat-seg, .lat-seg.resto { height: auto; min-height: 0; }
  .lat-seg .pub-lat { position: static; }
}

/* ---- Bricolage Grotesque (titulares, ink traps — la de la exploración 3a) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage/BricolageGrotesque-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Fechas del artículo en dos líneas, separadas del autor por una línea punteada */
.meta-fechas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  border-left: 1px dotted #bbb;
  padding-left: 12px;
}

/* AdDoor dentro del bloque central, al final */
.arecwrap { background: transparent; border-radius: 0; padding: 0; margin-top: 22px; min-height: 250px; }

/* ---- Space Grotesk (titulares, ink traps — 4ª prueba) ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/spacegrotesk/SpaceGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Más aire entre elementos de lista del cuerpo */
.arti-cuerpo li { margin-bottom: 9px; }

/* ---- Fraunces 144pt Black (titulares, serif display con ink traps — 5ª prueba) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces/Fraunces144pt-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Clash Grotesk (titulares — 6ª prueba, la más cercana a Space Grotesk) ---- */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('/fonts/clash/ClashGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Buscador en vivo: crece con transición y reemplaza al menú */
.cab-nav { transition: opacity .25s ease, max-width .3s ease; max-width: 100%; }
.cab-cnt.buscando .cab-nav { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; }
/* Solo en escritorio: position:relative ancla las sugerencias y la transición
   anima el crecimiento. En móvil el buscador es position:absolute (dropdown fuera
   de flujo); sin acotar esto a escritorio, esta regla —posterior en el archivo—
   lo devolvía al flujo y su ancho (250px, invisible) desbordaba la cabecera. */
@media (min-width: 901px) {
  .cab-buscador { position: relative; transition: width .3s ease, flex-grow .3s ease; }
}
/* Solo crece por flex-grow: la base (flex-basis 250px vía width) se conserva, así
   el buscador se expande desde su ancho de reposo en vez de encogerse a 0 primero
   (flex:1 reseteaba flex-basis a 0% y provocaba el "encoge y luego crece"). */
.cab-cnt.buscando .cab-buscador { flex-grow: 1; }
.cab-sugerencias {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e4e7dc;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
  overflow: hidden;
  z-index: 30;
}
.cab-sugerencias .sug {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
}
.cab-sugerencias .sug:hover { background: #f7faf0; }
.cab-sugerencias .sug + .sug { border-top: 1px solid #f2f2f2; }
.cab-sugerencias .sug img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.cab-sugerencias .sug-txt { min-width: 0; display: flex; flex-direction: column; }
.cab-sugerencias .sug-txt small { font: 700 10.5px 'Inter', sans-serif; color: var(--acento-osc); text-transform: uppercase; letter-spacing: .05em; }
.cab-sugerencias .sug-txt b { font: 600 13.5px/1.3 'Inter', sans-serif; color: #111; }
.cab-sugerencias .sug-todos {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font: 700 12.5px 'Inter', sans-serif;
  color: var(--acento-osc);
  text-decoration: none;
  background: var(--acento-tenue);
  border-top: 1px solid #eef2e2;
}

/* Botón hamburguesa oculto solo en escritorio */
@media (min-width: 901px) {
  .cab-menu-btn { display: none; }
}

/* ---- Publicidad en móvil ---- */
@media (max-width: 900px) {
  /* el superior compacto: máximo 100px de alto */
  .pub-billboard, .pub-text { height: 100px; }
  /* huecos del carril recolocados dentro del texto: caja completa (al moverse
     fuera de .lat perdían fondo y centrado) */
  .pub-movil { margin: 24px 0; }
  .pub-movil .pub-lat {
    position: static;
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
  }
  /* el carril lateral deja de reservar aire en móvil */
  .lat .lat-seg:empty { display: none; }
}

/* «También te puede interesar» en móvil: sin entradilla */
@media (max-width: 900px) {
  .rel-grid .fila-entra { display: none; }
}

/* Barra de autor y fechas en móvil: autor + chips en una fila, fechas debajo */
@media (max-width: 700px) {
  .arti-meta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 9px;
  }
  .autor-chip { grid-column: 1; min-width: 0; }
  .autor-datos b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .arti-chip.empuja { margin-left: 0; grid-column: 2; }
  .arti-compartir { grid-column: 3; }
  .meta-fechas {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
    border-left: 0;
    padding-left: 0;
    border-top: 1px dotted #ccc;
    padding-top: 9px;
  }
}

@keyframes menu-entra {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cab-nav, .cab-buscador, .cab-menu-btn svg { transition: none; }
  .cab-cnt.menu-abierto .cab-nav a { animation: none; }
}

/* Paginación numerada */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.pag-num, .pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 9px; text-decoration: none;
  font: 700 14px 'Inter', system-ui, sans-serif;
  color: var(--acento-mosc); background: #fff; border: 1px solid #e4e7dc;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pag-num:hover, .pag-btn:hover { background: var(--acento-claro); border-color: var(--acento-borde2); }
.pag-num.actual { background: var(--acento); border-color: var(--acento); color: #fff; cursor: default; }
.pag-btn { font-size: 18px; }
.pag-btn.dis { color: #c7ccbf; background: #f7f8f4; cursor: default; }
.pag-puntos { display: inline-flex; align-items: center; height: 38px; padding: 0 4px; color: #a8afa0; font-weight: 700; }
@media (max-width: 560px) {
  .pag-num, .pag-btn { min-width: 34px; height: 34px; font-size: 13px; }
}