/* 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%);
}
/* Bekia Fit: marca en degradado naranja (oscuro→claro). */
body.sitio-fit {
  --acento: #e28030;
  --acento-osc: #bd6206;
  --acento-mosc: #8c3902;
  --acento-claro: #fbeee2;
  --acento-tenue: #fdf7f1;
  --acento-borde: #f3ddc6;
  --acento-borde2: #e8c199;
  --acento-avatar: #f6e2cd;
  --hero-bg: #fdf3ea;
  --degradado: linear-gradient(120deg, #d24e02 0%, #f2921e 100%);
}
/* Bekia Salud: marca azul en degradado (teal→cian); el sólido es el azul de marca. */
body.sitio-salud {
  --acento: #019ed2;
  --acento-osc: #0d8bb5;
  --acento-mosc: #0e5b75;
  --acento-claro: #e6f6fc;
  --acento-tenue: #f4fbfe;
  --acento-borde: #cbeaf5;
  --acento-borde2: #9ed7ea;
  --acento-avatar: #d4eef8;
  --hero-bg: #edfaff;
  --degradado: linear-gradient(129deg, #0b4052 0%, #019ed2 100%);
}
/* Bekia Pareja: rojo de marca PLANO (decisión: sin degradado); los dos tonos del
   «degradado» son el mismo rojo para que las superficies grandes salgan sólidas. */
body.sitio-pareja {
  --acento: #e3222c;
  --acento-osc: #ab020a;
  --acento-mosc: #700005;
  --acento-claro: #fdeaeb;
  --acento-tenue: #fef6f6;
  --acento-borde: #f7d2d4;
  --acento-borde2: #efa6aa;
  --acento-avatar: #f9dbdd;
  --hero-bg: #fff2f3;
  --degradado: linear-gradient(0deg, #e3222c 0%, #e3222c 100%);
}
/* Bekia Cocina: naranja de marca PLANO (decisión: sin degradado, como Pareja). */
body.sitio-cocina {
  --acento: #e84c0c;
  --acento-osc: #c4400c;
  --acento-mosc: #963008;
  --acento-claro: #fdeee5;
  --acento-tenue: #fef7f2;
  --acento-borde: #f8d9c8;
  --acento-borde2: #f0b294;
  --acento-avatar: #fadfd0;
  --hero-bg: #ffede6;
  --degradado: linear-gradient(0deg, #e84c0c 0%, #e84c0c 100%);
}
/* Bekia Viajes: azul de marca PLANO (decisión: sin degradado, como Pareja). */
body.sitio-padres {
  --acento: #00b1eb;
  --acento-osc: #0090c4;
  --acento-mosc: #006e96;
  --acento-claro: #e2f6fd;
  --acento-tenue: #f1fbfe;
  --acento-borde: #c4ecfa;
  --acento-borde2: #8edcf5;
  --acento-avatar: #d4f1fb;
  --hero-bg: #ecf9fe;
  --degradado: linear-gradient(0deg, #00b1eb 0%, #00b1eb 100%);
}

body.sitio-viajes {
  --acento: #347af5;
  --acento-osc: #1563eb;
  --acento-mosc: #0b47b0;
  --acento-claro: #e8f0fe;
  --acento-tenue: #f5f9ff;
  --acento-borde: #d4e2fb;
  --acento-borde2: #a9c6f7;
  --acento-avatar: #dbe7fc;
  --hero-bg: #eef4ff;
  --degradado: linear-gradient(0deg, #347af5 0%, #347af5 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;
  /* min-width 0: sin él, como hijo flex no encoge y ESTIRA la barra (y el body
     entero, a ~485px en móvil), descolocando todo lo alineado a la derecha. */
  min-width: 0;
  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;
}
/* Con 4 tarjetas (recetas en Cocina), la fila del hero va a 4 columnas. */
.hero-destacados.hd-4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hd-4 .hd-tit { font-size: 16px; }
.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; transition: background .12s ease, border-color .12s ease, color .12s ease; }
/* El hover toma el tono del sitio (naranja en Cocina, azul en Viajes…). */
.arti-compartir:hover { background: var(--acento-claro); border-color: var(--acento); color: var(--acento-mosc); }
.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;
}
/* La numeración «01. » solo tiene sentido con 2+ apartados: un h2 solitario
   (p. ej. «Elaboración» en una receta) va sin número. */
.arti-cuerpo:has(h2 ~ h2) 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); }
/* Módulo «Otros temas»: enlaces de tema en color de acento, como menú temático. */
.lat-temas a { color: var(--acento-osc); font-weight: 700; }
.lat-temas a:hover { text-decoration: underline; }

/* 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-avatar-foto { object-fit: cover; background: none; }
.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; }
/* La bio puede traer párrafos y listas (HTML del editor). */
.autor-bio p { margin: 0 0 6px; }
.autor-bio p:last-child { margin-bottom: 0; }
.autor-bio ul, .autor-bio ol { margin: 4px 0 6px; padding-left: 20px; }
.autor-bio li { margin: 2px 0; }
.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; }
/* Cada fila del grid de relacionados es una tarjeta con borde y elevación al pasar. */
.rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-grid .fila-art { padding: 12px; gap: 14px; align-items: flex-start;
  border: 1px solid #ececec; border-radius: 14px; background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.rel-grid .fila-art + .fila-art { border-top: 1px solid #ececec; }
.rel-grid .fila-art:hover { border-color: #dcdcdc; box-shadow: 0 10px 24px rgba(0,0,0,.09); transform: translateY(-2px); }
.rel-grid .fila-thumb { flex: 0 0 132px; }
.rel-grid .fila-thumb img { width: 132px; height: 99px; border-radius: 10px; }
.rel-grid .fila-txt h3 { font-size: 16.5px; line-height: 1.3; }
.rel-grid .fila-txt h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rel-grid .fila-entra { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; }

/* 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; }
@media (max-width: 900px) {
  /* Móvil: 2px menos de padding lateral en el contenedor principal y en las
     cartas, para ganar un poco de ancho de contenido. */
  .cuerpo-grid, .home-grid { padding-left: 10px; padding-right: 10px; }
  .carta { padding-left: 16px; padding-right: 16px; }
  .home-grid > .carta, .home-col .carta { padding-left: 20px; padding-right: 20px; }
  .guias.carta { padding-left: 14px; padding-right: 14px; }
}

/* 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;
}
/* El hover toma el acento del sitio (naranja en Cocina). */
.tema:hover { background: var(--acento); color: #fff; }

/* 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; }
/* AdDoor de las páginas /sobre/: debajo del grid, sin altura reservada (no deja
   hueco si el anuncio no se llena). Mayor especificidad que .arecwrap. */
.arti .arecwrap-sobre { min-height: 0; margin-top: 26px; }

/* ---- 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;
}
/* Hover con el tono del sitio (naranja en Cocina, azul en Viajes…). */
.cab-sugerencias .sug:hover { background: var(--acento-claro); }
.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; }
}

/* En móvil las tarjetas de relacionados mantienen la entradilla recortada (2 líneas). */

/* 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; }
  /* En las recetas no hay chip de minutos: barra en flex simple (autor a lo
     ancho, fecha + compartir en la fila de abajo). */
  .receta-ficha .arti-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 8px; }
  .receta-ficha .arti-meta .autor-chip { flex: 1 1 100%; }
  .receta-ficha .arti-meta .meta-fechas { flex: 1 1 auto; }
  .receta-ficha .arti-meta .arti-compartir { margin-left: auto; }
  .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; }
}

/* ---- Calculadoras ---- */
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--acento-borde); border-radius: 12px; padding: 15px 18px; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.calc-card:hover { border-color: var(--acento); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.calc-card-ico { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--acento-claro) center / 30px 30px no-repeat; transition: background-size .16s ease; }
/* El icono SVG crece un poco al pasar el ratón por la tarjeta. */
.calc-card:hover .calc-card-ico { background-size: 36px 36px; }
/* Icono por calculadora: el ancestro lleva data-calc-icon (tarjeta, cabecera de
   detalle o item del lateral), así el mismo SVG sirve en los tres sitios. */
[data-calc-icon="gasto-calorico"] .calc-card-ico { background-image: url('/images/i-calories.svg'); }
[data-calc-icon="predisposicion-enfermedades"] .calc-card-ico { background-image: url('/images/i-disease.svg'); }
[data-calc-icon="frecuencia-cardiaca-reposo"] .calc-card-ico { background-image: url('/images/i-oximeter.svg'); }
[data-calc-icon="frecuencia-cardiaca-maxima"] .calc-card-ico { background-image: url('/images/i-heartrate.svg'); }
[data-calc-icon="frecuencias-entrenamiento"] .calc-card-ico { background-image: url('/images/i-exercise.svg'); }
[data-calc-icon="peso-ideal"] .calc-card-ico { background-image: url('/images/i-scale.svg'); }
[data-calc-icon="grado-alcoholemia"] .calc-card-ico { background-image: url('/images/i-alcohol.svg'); }
[data-calc-icon="rejilla-amsler"] .calc-card-ico { background-image: url('/images/i-eyes.svg'); }
/* Icono grande en la cabecera del detalle y mini-icono en los enlaces del lateral. */
.calc-detalle-hd { display: flex; align-items: center; gap: 16px; margin: 4px 0 2px; }
.calc-detalle-hd .arti-titular { margin: 0; }
.calc-ico-xl { width: 60px; height: 60px; border-radius: 14px; background-size: 38px 38px; }
.lat-lista-calc li { display: flex; align-items: center; gap: 10px; }
.calc-mini-ico { width: 30px; height: 30px; border-radius: 8px; background-size: 19px 19px; flex: none; }
.calc-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calc-card-tit { font: 800 15.5px 'Inter', system-ui, sans-serif; color: #111; line-height: 1.2; }
.calc-card-ent { font: 400 12.5px/1.4 'Inter', system-ui, sans-serif; color: #666; }
/* Selector de sexo: dos botones con icono (♂/♀) en vez de radios. Los <input>
   radio siguen ahí (ocultos) para que calc.js lea el valor sin cambios. */
.calc-genre-campo { display: flex; flex-direction: column; gap: 8px; }
.calc-genre { display: flex; gap: 12px; }
.calc-genre-op { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 10px; border: 2px solid var(--acento-borde); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.calc-genre-op input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.calc-genre-op svg { width: 32px; height: 32px; color: #adb5bd; transition: color .15s ease; }
.calc-genre-op > span { font: 700 14px 'Inter', system-ui, sans-serif; color: #555; }
.calc-genre-op:hover { border-color: var(--acento); }
.calc-genre-op:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.calc-genre-op:has(input:checked) svg { color: var(--acento); }
.calc-genre-op:has(input:checked) > span { color: var(--acento-osc); }
.calc-genre-op:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

.calc-detalle .arti-titular { font-size: 34px; }
.calc-intro { margin: 4px 0 20px; }
.calc-caja { background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 14px; padding: 22px 22px 24px; margin: 4px 0 22px; }
.calc-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.calc-campo { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.calc-campo > label, .calc-lab { font: 700 13px 'Inter', system-ui, sans-serif; color: var(--acento-mosc); }
.calc-campo input[type="number"], .calc-campo select { font: 400 16px 'Inter', system-ui, sans-serif; padding: 10px 12px; border: 1px solid var(--acento-borde2); border-radius: 9px; background: #fff; color: #222; box-sizing: border-box; width: 100%; }
.calc-campo input:focus, .calc-campo select:focus { outline: none; border-color: var(--acento); }
.calc-radios { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
.calc-radios label { display: inline-flex; align-items: center; gap: 6px; font: 500 15px 'Inter', system-ui, sans-serif; color: #333; }
.calc-envia { margin: 4px 0 0; }
.calc-envia .boton { display: inline-flex; align-items: center; justify-content: center; background: var(--acento); color: #fff; border: 0; border-radius: 100px; padding: 11px 28px; font: 700 15px 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .12s ease; }
.calc-envia .boton:hover { background: var(--acento-osc); }
.calc-res { margin: 18px 0 0; padding: 16px 18px; background: #fff; border: 1px solid var(--acento-borde); border-radius: 10px; }
.calc-ok { margin: 0; font: 500 17px/1.4 'Inter', system-ui, sans-serif; color: #1c1c1c; }
.calc-ok b { color: var(--acento-osc); }
.calc-err { margin: 0; font: 600 15px 'Inter', system-ui, sans-serif; color: #c0392b; }
.calc-tabla { width: 100%; border-collapse: collapse; margin-top: 8px; }
.calc-tabla td { padding: 8px 6px; border-top: 1px solid var(--acento-borde); font: 400 15px 'Inter', system-ui, sans-serif; }
.calc-tabla td:last-child { text-align: right; }
.calc-post { margin: 0 0 18px; }
.calc-aviso { font: 400 13px/1.5 'Inter', system-ui, sans-serif; color: #888; border-top: 1px solid #eee; padding-top: 14px; }
.calc-amsler { text-align: center; }
.amsler-grid { width: min(300px, 88%); aspect-ratio: 1; margin: 14px auto; position: relative; border: 1px solid #111;
  background-image: linear-gradient(#111 1px, transparent 1px), linear-gradient(90deg, #111 1px, transparent 1px);
  background-size: 20px 20px; }
.amsler-dot { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; background: #111; border-radius: 50%; transform: translate(-50%, -50%); }
.calc-nota { font-size: 14px; color: #444; }
@media (max-width: 560px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-detalle .arti-titular { font-size: 27px; }
}

/* ---- Relatos eróticos (solo Pareja) ---- */
.relatos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.relato-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--acento-borde); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.relato-card:hover { border-color: var(--acento); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.relato-card img { width: 100%; height: auto; aspect-ratio: 400 / 222; object-fit: cover; }
.relato-txt { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 15px; }
.relato-ante { font: 800 11.5px 'Inter', system-ui, sans-serif; letter-spacing: .04em; color: var(--acento-osc); }
.relato-tit { font: 800 17px/1.25 'Inter', system-ui, sans-serif; color: #111; }
.relato-ent { font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: #666; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .relatos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .relatos-grid { grid-template-columns: 1fr; } }

/* ---- Guías de ciudades (solo Viajes; las tarjetas reusan .relato-card) ---- */
.ciudades-pais { font: 800 19px 'Inter', system-ui, sans-serif; color: var(--acento-mosc); margin: 22px 0 12px; }
.ciudad-foto img { aspect-ratio: 21 / 13; object-fit: cover; }
.ciudad-galeria { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 4px 0 0;
  scrollbar-width: none; anchor-name: --galeria; scroll-marker-group: after; scroll-behavior: smooth; }
.ciudad-galeria::-webkit-scrollbar { display: none; }
.ciudad-galeria a { flex: none; scroll-snap-align: start; }
.ciudad-galeria img { height: 170px; width: auto; display: block; border-radius: 10px; }
/* Flechas y puntos NATIVOS del carrusel (CSS scroll buttons/markers). En los
   navegadores sin soporte la tira sigue siendo desplazable (táctil/rueda). */
.ciudad-galeria::scroll-button(*) { position: fixed; position-anchor: --galeria; top: calc(anchor(center) - 22px);
  width: 38px; height: 38px; border: 1px solid var(--acento-borde); border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: var(--acento-osc); cursor: pointer;
  font: 400 24px/34px 'Inter', system-ui, sans-serif; text-align: center; z-index: 2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.ciudad-galeria::scroll-button(*):disabled { opacity: 0; }
.ciudad-galeria::scroll-button(left) { content: '‹' / 'Fotos anteriores'; left: calc(anchor(left) + 8px); }
.ciudad-galeria::scroll-button(right) { content: '›' / 'Fotos siguientes'; left: calc(anchor(right) - 46px); }
.ciudad-galeria::scroll-marker-group { display: flex; gap: 4px; justify-content: center; align-items: center; margin: 12px 0 22px; height: 10px; }
.ciudad-galeria a::scroll-marker { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acento-borde2); transition: background .15s ease, scale .15s ease; }
.ciudad-galeria a::scroll-marker:target-current { background: var(--acento); scale: 1.3; }
/* Modal de foto (dialog nativo) con navegación y transiciones. */
.galeria-modal { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1500px); overflow: visible; }
.galeria-modal::backdrop { background: rgba(9, 15, 27, .84); }
/* Apertura/cierre con fundido y escala (transición nativa del dialog). */
.galeria-modal[open] { opacity: 1; scale: 1; }
.galeria-modal { opacity: 0; scale: .96;
  transition: opacity .22s ease, scale .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete; }
@starting-style { .galeria-modal[open] { opacity: 0; scale: .96; } }
.galeria-modal[open]::backdrop { opacity: 1; }
.galeria-modal::backdrop { opacity: 0; transition: opacity .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete; }
@starting-style { .galeria-modal[open]::backdrop { opacity: 0; } }
.gm-figura { margin: 0; }
.gm-figura img { display: block; margin: 0 auto; max-width: 100%; max-height: 86vh; border-radius: 12px;
  transition: opacity .17s ease, translate .17s ease; }
.gm-figura img.gm-anima { opacity: 0; translate: var(--gm-dx, 0) 0; }
@media (prefers-reduced-motion: reduce) {
  .ciudad-galeria { scroll-behavior: auto; }
  .galeria-modal, .galeria-modal::backdrop, .gm-figura img, .ciudad-galeria a::scroll-marker { transition: none; }
}
/* ---- Recetas e ingredientes (solo Cocina; tarjetas reusan .relato-card) ---- */
.receta-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 12px; }
.rs-lab { font: 800 14px 'Inter', system-ui, sans-serif; color: var(--acento-mosc); margin-right: 2px; }
/* Selects con estilo propio: icono SVG del grupo a la izquierda y chevron
   propio a la derecha (sin flecha nativa). */
.receta-selector select { flex: 1 1 170px; min-width: 0; padding: 9px 32px 9px 40px; border: 1px solid var(--acento-borde2);
  border-radius: 100px; font: 600 13.5px 'Inter', system-ui, sans-serif; color: #222; cursor: pointer;
  appearance: none; -webkit-appearance: none; background-color: #fff; background-repeat: no-repeat;
  background-image: var(--rs-ico), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4400c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: left 10px center, right 12px center; background-size: 22px 22px, 14px 14px;
  transition: border-color .12s ease, box-shadow .12s ease; }
.receta-selector select:hover { border-color: var(--acento); box-shadow: 0 3px 10px rgba(0, 0, 0, .06); }
.receta-selector select:focus { outline: none; border-color: var(--acento); }
.rs-menus { --rs-ico: url('/images/ci-principales.svg'); }
.rs-pais { --rs-ico: url('/images/ci-espanola.svg'); }
.rs-metodo { --rs-ico: url('/images/ci-horno.svg'); }
/* Desplegable personalizable (appearance: base-select): las opciones muestran
   su icono; donde no hay soporte queda el desplegable nativo solo con texto. */
.receta-selector select, .receta-selector select::picker(select) { appearance: base-select; }
@supports (appearance: base-select) {
  /* El botón del select ya trae su flecha (::picker-icon): fuera nuestro chevron. */
  .receta-selector select { background-image: var(--rs-ico); background-position: left 10px center;
    background-size: 22px 22px; padding-right: 14px; }
  .receta-selector select::picker-icon { color: var(--acento-osc); }
}
.receta-selector select::picker(select) { border: 1px solid var(--acento-borde2); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 6px; margin-top: 4px; background: #fff; }
.receta-selector option { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 8px;
  font: 500 13.5px 'Inter', system-ui, sans-serif; color: #222; cursor: pointer; }
.receta-selector option:hover, .receta-selector option:focus { background: var(--acento-claro); }
.receta-selector option::checkmark { color: var(--acento); }
.receta-selector option img { width: 22px; height: 22px; flex: none; }
.rs-ingr { font: 700 13px 'Inter', system-ui, sans-serif; color: var(--acento-osc); text-decoration: none; white-space: nowrap; }
.rs-ingr:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .rs-lab { flex-basis: 100%; }
  .receta-selector select { flex-basis: 100%; max-width: 100%; }
  .rs-ingr { flex-basis: 100%; }
}
/* Ficha de la receta: datos en una tira compacta (sin rejilla con huecos),
   clasificación como píldoras uniformes y lista de ingredientes limpia. */
.receta-datos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.receta-datos li { display: inline-flex; align-items: baseline; gap: 6px; background: var(--acento-tenue);
  border: 1px solid var(--acento-borde); border-radius: 100px; padding: 6px 14px;
  font: 500 14px 'Inter', system-ui, sans-serif; color: #222; }
.receta-datos strong { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--acento-mosc); }
.receta-tax { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.receta-tax li { display: contents; }
.receta-tax a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 100px;
  background: #fff; border: 1px solid var(--acento-borde2); text-decoration: none;
  font: 700 15px 'Inter', system-ui, sans-serif; color: var(--acento-mosc);
  transition: border-color .12s ease, background .12s ease, transform .16s ease, box-shadow .16s ease; }
.receta-tax a:hover { border-color: var(--acento); background: var(--acento-claro);
  transform: scale(1.06); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.receta-tax img { width: 34px; height: 34px; flex: none; transition: transform .16s ease; }
.receta-tax a:hover img { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .receta-tax a, .receta-tax img { transition: none; }
  .receta-tax a:hover, .receta-tax a:hover img { transform: none; }
}
.receta-ingr { columns: 2; column-gap: 34px; margin: 0; padding: 0; list-style: none; }
.receta-ingr li { margin: 0; padding: 7px 0 7px 16px; position: relative; font: 400 15.5px/1.5 'Inter', system-ui, sans-serif;
  border-bottom: 1px solid var(--acento-claro); break-inside: avoid; }
.receta-ingr li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acento); }
.receta-ingr a { color: var(--acento-osc); text-decoration: none; border-bottom: 1px dotted var(--acento-borde2); }
.receta-ingr a:hover { border-bottom-color: var(--acento-osc); }
.receta-ingr b { color: var(--acento-mosc); }
.receta-ingr .ingr-grupo { padding-left: 0; margin-top: 10px; font-weight: 800; color: #111; border-bottom: 0; }
.receta-ingr .ingr-grupo::before { content: none; }
/* Selector de raciones: grupo compacto pegado al título. */
.ingr-personas { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding: 5px 10px;
  background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 100px;
  font: 500 13.5px 'Inter', system-ui, sans-serif; color: #444; white-space: nowrap; vertical-align: middle; }
.ingr-personas button { width: 24px; height: 24px; border: 1px solid var(--acento-borde2); border-radius: 50%;
  background: #fff; color: var(--acento-osc); font: 700 15px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.ingr-personas button:hover { border-color: var(--acento); background: var(--acento-claro); }
.ingr-personas b { display: inline-block; min-width: 20px; text-align: center; font-size: 15px; color: var(--acento-mosc); }
.ingr-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.ingr-lista a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-radius: 9px;
  background: var(--acento-tenue); border: 1px solid var(--acento-borde); text-decoration: none;
  font: 600 14px 'Inter', system-ui, sans-serif; color: #222; }
.ingr-lista a:hover { border-color: var(--acento); }
.ingr-lista small { font-weight: 500; color: var(--acento-osc); }
@media (max-width: 700px) {
  .receta-ingr { columns: 1; }
  .ingr-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Directorio de categorías de recetas (el homebox del legacy, en tokens web-n). */
.receta-dir { margin: 26px 0 8px; padding: 20px 18px; background: var(--acento-tenue);
  border: 1px solid var(--acento-borde); border-radius: 14px; }
.receta-dir .rd-tit { display: table; margin: 20px auto 14px; background: var(--acento); color: #fff;
  border-radius: 100px; padding: 4px 18px; font: 700 13px 'Inter', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.receta-dir .rd-tit:first-child { margin-top: 0; }
.rd-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; }
.rd-grid a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px;
  border-radius: 12px; text-decoration: none; font: 700 12.5px/1.2 'Inter', system-ui, sans-serif;
  color: #222; text-align: center; transition: background .15s ease, color .15s ease, transform .15s ease; }
.rd-grid a:hover { background: var(--acento); color: #fff; transform: scale(1.05); }
.rd-grid img { width: 48px; height: 48px; transition: transform .15s ease; }
.rd-grid a:hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .rd-grid a, .rd-grid img { transition: none; }
  .rd-grid a:hover, .rd-grid a:hover img { transform: none; }
}

/* Promo de la guía de ciudad al pie de los artículos curados (enlace inverso). */
.guia-promo { display: flex; gap: 14px; align-items: center; margin: 22px 0 4px; padding: 14px 16px;
  background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 14px; text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease; }
.guia-promo:hover { border-color: var(--acento); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.guia-promo img { flex: none; width: 150px; height: 83px; object-fit: cover; border-radius: 10px; }
.gp-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gp-kicker { font: 700 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .1em; color: var(--acento-osc); }
.gp-tit { font: 800 17px/1.25 'Inter', system-ui, sans-serif; color: #111; }
.gp-mas { font: 700 13px 'Inter', system-ui, sans-serif; color: var(--acento-osc); margin-top: 2px; }
@media (max-width: 560px) { .guia-promo img { width: 96px; height: 60px; } .gp-tit { font-size: 15px; } }
.gm-pie { margin-top: 10px; text-align: center; font: 400 13.5px/1.5 'Inter', system-ui, sans-serif; color: #dfe6f2; }
.gm-pie b { color: #fff; }
.gm-btn { position: absolute; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #16233c; font: 400 26px/40px 'Inter', system-ui, sans-serif; z-index: 2; }
.gm-btn:hover { background: #fff; }
.gm-cerrar { top: -14px; right: -14px; font-size: 22px; }
.gm-ant { left: -16px; top: 50%; translate: 0 -50%; }
.gm-sig { right: -16px; top: 50%; translate: 0 -50%; }
@media (max-width: 700px) {
  .gm-ant { left: 6px; }
  .gm-sig { right: 6px; }
  .gm-cerrar { top: 6px; right: 6px; }
}
.ciudad-sub { font: 800 22px 'Inter', system-ui, sans-serif; color: #111; margin: 26px 0 12px; }
.ciudad-cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ciudad-cifras li { background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 10px; padding: 12px 14px; font: 400 15px 'Inter', system-ui, sans-serif; color: #222; }
.ciudad-cifras strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--acento-mosc); margin-bottom: 3px; }
.clima-scroll { overflow-x: auto; }
.clima-tabla { border-collapse: collapse; width: 100%; min-width: 640px; }
.clima-tabla th, .clima-tabla td { padding: 7px 6px; text-align: center; font: 400 13.5px 'Inter', system-ui, sans-serif; border-top: 1px solid var(--acento-borde); }
.clima-tabla thead th { font-weight: 700; color: var(--acento-mosc); border-top: 0; }
.clima-tabla td:first-child { text-align: left; font-weight: 700; color: #444; white-space: nowrap; }
.ciudad-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; }
.ciudad-datos li { font: 400 14px/1.4 'Inter', system-ui, sans-serif; color: #333; }
/* Mismo filter del legacy: tiñe los SVG negros de /images/icons/ del azul de marca. */
.ciudad-datos img { display: block; height: 40px; width: auto; margin: 0 auto 8px; filter: invert(39%) sepia(45%) saturate(1958%) hue-rotate(197deg) brightness(98%) contrast(95%); }
.ciudad-datos strong { display: block; color: var(--acento-mosc); margin-bottom: 2px; }
@media (max-width: 700px) {
  .ciudad-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ciudad-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Postales de ciudades en portada: mosaico con foto a sangre, velo inferior,
   país como antefirma, nombre encima y chip con la máxima del mes actual. */
.postales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; }
.postal { position: relative; display: block; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--acento-mosc); }
.postal-xl { grid-column: span 2; grid-row: span 2; }
.postal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.postal:hover img { transform: scale(1.05); }
.postal-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 48, 0) 42%, rgba(7, 20, 48, .78) 100%); }
.postal-txt { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.postal-pais { font: 700 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .12em; color: #cfe0ff; text-shadow: 0 1px 4px rgba(9, 15, 27, .6); }
/* Sombra oscura para que el título se lea sobre fotos claras. */
.postal-ciudad { font: 800 19px/1.15 'Inter', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 6px rgba(9, 15, 27, .65); }
.postal-xl .postal-ciudad { font-size: 30px; }
.postal-ent { font: 400 13px/1.4 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, .85); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.postal-temp { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .92); color: #16233c;
  border-radius: 100px; padding: 3px 9px; font: 700 12px 'Inter', system-ui, sans-serif; }
.postal-temp small { font: 500 11px 'Inter', system-ui, sans-serif; color: #51617f; }
@media (prefers-reduced-motion: reduce) { .postal img, .postal:hover img { transition: none; transform: none; } }
/* Variante grande (portada de Cocina): el módulo de recetas manda en la página. */
.postales-xl { grid-auto-rows: 225px; }
.postales-xl .postal-ciudad { font-size: 22px; }
.postales-xl .postal-xl .postal-ciudad { font-size: 34px; }
.postales-xl .postal-temp { font-size: 13.5px; padding: 4px 11px; }
@media (max-width: 700px) { .postales { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
  .postales-xl { grid-auto-rows: 160px; }
  .postales-xl .postal-ciudad { font-size: 17px; }
  .postales-xl .postal-xl .postal-ciudad { font-size: 22px; } }

/* ---- Sobre (hubs de temática) ---- */
.sobre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sobre-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--acento-borde); border-left: 4px solid var(--acento); border-radius: 10px; padding: 16px 18px; text-decoration: none; transition: box-shadow .12s ease, transform .12s ease; }
.sobre-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.sobre-card-tit { font: 800 16px/1.2 'Inter', system-ui, sans-serif; color: #111; }
.sobre-card-desc { font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: #666;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sobre-apertura { padding-bottom: 6px; }
.sobre-rel { margin-top: 26px; }
/* El grid de relacionados de /sobre/ con menos padding lateral: quita el interno
   y, en escritorio, se ensancha rompiendo parte del padding de la tarjeta. */
.sobre-rel { padding-left: 0; padding-right: 0; }
@media (min-width: 901px) {
  .sobre-rel { margin-left: -18px; margin-right: -18px; }
}
@media (max-width: 560px) {
  .sobre-grid { grid-template-columns: 1fr; }
}

/* ---- Módulo de calculadoras en la portada (a todo el ancho, centrado) ---- */
/* En la portada el módulo va dentro de la columna principal, bajo «Lo último»:
   sin márgenes propios (la columna ya separa con gap), contenido centrado. */
.home-calc { margin: 0; text-align: center; }
.home-calc-cab h2 { margin: 0 0 6px; font: 900 27px 'Inter', system-ui, sans-serif; color: #111; letter-spacing: -.01em; }
.home-calc-cab p { margin: 0 auto 22px; max-width: 640px; font: 400 15px/1.5 'Inter', system-ui, sans-serif; color: #666; }
.home-calc .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.home-calc .calc-card { align-items: center; }
.home-calc-mas { margin: 22px 0 0; }
.home-calc-mas a { font: 700 15px 'Inter', system-ui, sans-serif; color: var(--acento-osc); text-decoration: none; }
.home-calc-mas a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .home-calc .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .home-calc .calc-grid { grid-template-columns: 1fr; }
}

/* assets_ver bump: refresca la flor de Salud (corazón) en el hero cacheado por CDN. */

/* ---- Padres: fila de etapas (navegación por edades) bajo la cabecera ---- */
.cab-etapas { background: #fff; border-bottom: 1px solid var(--acento-borde); }
.cab-etapas-cnt { max-width: 1230px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px;
  overflow-x: auto; scrollbar-width: none; }
.cab-etapas-cnt::-webkit-scrollbar { display: none; }
.cab-etapas a { display: flex; align-items: center; gap: 7px; padding: 9px 10px; white-space: nowrap;
  text-decoration: none; color: #333; font-size: 13px; border-bottom: 3px solid transparent; }
.cab-etapas a b { font-weight: 600; }
.cab-etapas a small { color: #8b939e; font-size: 11.5px; }
.cab-etapas .et-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--et, var(--acento)); flex: none; }
.cab-etapas a:hover, .cab-etapas a.activa { border-bottom-color: var(--et, var(--acento)); }
.cab-etapas a.activa b { color: var(--et, var(--acento)); }
.pie-edades { margin-top: 4px; }

/* Título de etapa con su rango de edad + fila de temas de la sección */
.sec-edad { font-size: .55em; font-weight: 600; color: #8b939e; white-space: nowrap; }
.sec-submenu { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.sec-submenu a { padding: 5px 12px; border: 1px solid var(--acento-borde2); border-radius: 999px;
  font-size: 13px; text-decoration: none; color: var(--acento-mosc); background: var(--acento-tenue); }
.sec-submenu a:hover { background: var(--acento-claro); }
.sec-submenu a.herramienta { border-style: dashed; }
.sec-submenu a.herramienta::before { content: '⚙ '; }

/* ---- Padres: nombres de bebé, diccionario, dibujos y canciones ---- */
.abecedario { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; }
.abecedario a { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px;
  border: 1px solid var(--acento-borde); border-radius: 7px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--acento-mosc); background: #fff; }
.abecedario a:hover { background: var(--acento-tenue); border-color: var(--acento-borde2); }
.abecedario a.activa { background: var(--acento); border-color: var(--acento); color: #fff; }

.nombres-accesos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.boton-suave { padding: 7px 14px; border: 1px solid var(--acento-borde2); border-radius: 999px;
  background: var(--acento-tenue); color: var(--acento-mosc); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.boton-suave:hover { background: var(--acento-claro); }

.nombres-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nombres-tit { font-size: 1.05rem; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--acento-borde); }
.nombres-tit.gen0 { border-color: #7db8e8; }
.nombres-tit.gen1 { border-color: #eda0c2; }
.nombres-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nombres-lista a { display: inline-block; padding: 5px 11px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; background: #f2f4f7; color: #333; border: 1px solid #e6e9ee; }
.nombres-lista a:hover { background: var(--acento-claro); border-color: var(--acento-borde2); color: var(--acento-mosc); }
.nombres-lista a.gen0 { background: #eef6fd; border-color: #d3e8f8; color: #1c6dab; }
.nombres-lista a.gen1 { background: #fdf0f6; border-color: #f6d8e6; color: #b0417a; }
.nombres-lista a.gen2 { background: #f3f0fd; border-color: #e2dbf6; color: #6a4bb8; }
.nombres-lista small { color: inherit; opacity: .65; }
.nombres-leyenda { color: #8b939e; font-size: 12.5px; margin-top: 14px; }
.gen-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.gen-dot.gen0 { background: #7db8e8; } .gen-dot.gen1 { background: #eda0c2; } .gen-dot.gen2 { background: #b3a1e6; }

.nombres-buscador { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px;
  padding: 14px; margin: 0 0 18px; background: var(--acento-tenue); border: 1px solid var(--acento-borde); border-radius: 12px; }
.nombres-buscador .calc-envia { grid-column: 1 / -1; margin: 0; }
.nombres-rango { display: flex; gap: 6px; }
.nombres-rango input { width: 50%; min-width: 0; }

.nombre-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.nombre-dato { padding: 6px 12px; border-radius: 999px; background: #f2f4f7; font-size: 13px; color: #555; }
.nombre-dato a { color: var(--acento-osc); text-decoration: none; }
.nombre-dato.gen0 { background: #eef6fd; color: #1c6dab; }
.nombre-dato.gen1 { background: #fdf0f6; color: #b0417a; }
.nombre-dato.gen2 { background: #f3f0fd; color: #6a4bb8; }
.nombre-celebs { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.nombre-celebs a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px;
  text-decoration: none; color: #333; font-size: 12.5px; text-align: center; }
.nombre-celebs img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; background: #f2f4f7; }
.nombre-celebs a:hover { color: var(--acento-osc); }
.lat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lat-chips a { padding: 4px 10px; border-radius: 999px; background: var(--acento-tenue); border: 1px solid var(--acento-borde);
  color: var(--acento-mosc); text-decoration: none; font-size: 12.5px; }
.lat-chips a:hover { background: var(--acento-claro); }

.dibujos-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; }
.dibujos-cats a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px;
  border: 1px solid var(--acento-borde); border-radius: 12px; text-decoration: none; color: #333;
  font-size: 13px; font-weight: 600; background: #fff; transition: transform .15s ease; }
.dibujos-cats a:hover { transform: translateY(-2px); border-color: var(--acento-borde2); background: var(--acento-tenue); }
.dibujos-cats img { width: 64px; height: 64px; object-fit: contain; }
.dibujos-cats small { color: #8b939e; font-weight: 400; }
.dibujos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dibujo-card { display: flex; flex-direction: column; text-decoration: none; color: #333;
  border: 1px solid #e6e9ee; border-radius: 12px; overflow: hidden; background: #fff; transition: transform .15s ease; }
.dibujo-card:hover { transform: translateY(-2px); border-color: var(--acento-borde2); }
.dibujo-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 8px; box-sizing: border-box; }
.dibujo-card span { padding: 7px 10px 9px; font-size: 13px; font-weight: 600; text-align: center;
  border-top: 1px solid #f0f2f5; }
.dibujo-marco { margin: 6px 0 12px; border: 1px solid #e6e9ee; border-radius: 12px; padding: 10px; text-align: center; }
.dibujo-marco img { max-width: 100%; height: auto; }
.dibujo-acciones { margin: 0 0 4px; }
.lamina-pagina { max-width: 800px; margin: 20px auto; padding: 0 16px; text-align: center; }
.lamina-acciones { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.lamina-img { max-width: 100%; height: auto; }
@media print {
  .no-imprimir, .barra-red, .pie, .cab-sitio, .cab-etapas { display: none !important; }
  .lamina-pagina { margin: 0; max-width: none; }
}

.canciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cancion-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e6e9ee;
  border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; font-size: 14px; background: #fff; }
.cancion-card:hover { border-color: var(--acento-borde2); background: var(--acento-tenue); color: var(--acento-mosc); }
.cancion-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #f2f4f7; flex: none; }
.cancion-foto { margin: 6px 0 12px; }
.cancion-foto img { max-width: 100%; border-radius: 12px; }
.cancion-letra { white-space: normal; }
.cancion-otras { columns: 2; }

@media (max-width: 700px) {
  .nombres-cols { grid-template-columns: 1fr; }
  .cancion-otras { columns: 1; }
}

/* Calculadoras de Padres: bloques del calendario de vacunas y notas */
.calc-vac { margin: 10px 0; padding: 10px 14px; border: 1px solid #e6e9ee; border-radius: 10px; }
.calc-vac h3 { margin: 0 0 6px; font-size: .95rem; color: var(--acento-mosc); }
.calc-vac ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.calc-vac.pasada { opacity: .55; }
.calc-vac.pasada h3::after { content: ' · puesta'; color: #8b939e; font-weight: 400; }
.calc-nota { color: #8b939e; font-size: 12.5px; margin-top: 6px; }
.calc-fecha { display: flex; gap: 8px; }
.calc-fecha select { flex: 1; min-width: 0; }
.semana-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
/* Iconos de las calculadoras de Padres (dibujados para web-n). */
[data-calc-icon="ovulacion"] .calc-card-ico { background-image: url('/images/web-n/calc_ovulacion.svg'); }
[data-calc-icon="tabla-china"] .calc-card-ico { background-image: url('/images/web-n/calc_tabla-china.svg'); }
[data-calc-icon="calendario-embarazo"] .calc-card-ico { background-image: url('/images/web-n/calc_calendario-embarazo.svg'); }
[data-calc-icon="peso-embarazo"] .calc-card-ico { background-image: url('/images/web-n/calc_peso-embarazo.svg'); }
[data-calc-icon="dia-parto"] .calc-card-ico { background-image: url('/images/web-n/calc_dia-parto.svg'); }
[data-calc-icon="altura"] .calc-card-ico { background-image: url('/images/web-n/calc_altura.svg'); }
[data-calc-icon="calendario-vacunas"] .calc-card-ico { background-image: url('/images/web-n/calc_calendario-vacunas.svg'); }
[data-calc-icon="peso-altura"] .calc-card-ico { background-image: url('/images/web-n/calc_peso-altura.svg'); }
[data-calc-icon="indice-masa-corporal"] .calc-card-ico { background-image: url('/images/web-n/calc_indice-masa-corporal.svg'); }

/* ---- Padres: módulos de portada (etapas + herramientas) ---- */
.etapas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.etapas-grid a { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; border-radius: 12px;
  text-decoration: none; color: #333; background: #fff; border: 1px solid #e6e9ee; border-top: 4px solid var(--et, var(--acento));
  transition: transform .15s ease, box-shadow .15s ease; }
.etapas-grid a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(16,24,40,.08); }
.etapas-grid b { font-size: 15px; }
.etapas-grid small { color: #8b939e; font-size: 12.5px; }
.home-herr { padding: 14px 18px; }
.herr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.herr-grid a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  text-decoration: none; background: var(--acento-tenue); border: 1px solid var(--acento-borde); }
.herr-grid a:hover { background: var(--acento-claro); }
.herr-grid b { color: var(--acento-mosc); font-size: 14.5px; }
.herr-grid small { color: #66707c; font-size: 12.5px; }