/* Blog: artículos y portada. Usa los tokens y componentes de exam.css (se carga después de él). */
.bl-narrow{max-width:840px}
.bl-hero{background:var(--paper);padding:26px 0 8px}
.bl-hero-index{padding-bottom:40px}
.bl-h1{font-size:clamp(1.9rem,4.6vw,2.7rem)}
/* Los títulos largos (más de 75 caracteres) bajan un escalón para no ocupar media pantalla */
.bl-h1-larga{font-size:clamp(1.6rem,3.9vw,2.2rem);line-height:1.2}
.bl-lede{max-width:none}
/* Quién, cuánto se tarda en leer y cuándo se publicó. En celular, una línea por grupo; desde 720 px, todo en una fila con puntos. */
.bl-meta{list-style:none;display:grid;gap:2px;margin-top:16px;font:500 12.5px var(--sans);color:var(--sub)}
.bl-meta li{display:flex;flex-wrap:wrap}
.bl-meta li span+span::before{content:"·";margin:0 .7em}
.bl-cover{margin-top:26px}
.bl-cover img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:var(--card)}
/* Pie de foto: dice lo que es la imagen (foto de archivo, no del centro) */
.bl-cover figcaption{margin-top:10px;font:500 12.5px/1.5 var(--sans);color:var(--sub)}

.bl-sec{padding:36px 0 56px}
.bl-body{font-size:17px;line-height:1.75;color:var(--text);overflow-wrap:break-word}
.bl-body>*+*{margin-top:16px}
.bl-body h2{font-size:clamp(1.35rem,3vw,1.75rem);margin-top:44px}
.bl-body h3{font-size:1.2rem;margin-top:30px}
.bl-body>h2:first-child{margin-top:8px}
.bl-body h2+*,.bl-body h3+*{margin-top:10px}
.bl-body ul,.bl-body ol{padding-left:1.4em}
.bl-body li+li{margin-top:8px}
.bl-body li::marker{color:var(--brand-mid);font-weight:600}
.bl-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bl-body a:hover{color:var(--brand-mid)}
.bl-body h2[id]{scroll-margin-top:84px}

.bl-toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.bl-toc b{font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brand-mid)}
.bl-toc ol{margin-top:8px;font-size:15.5px}
.bl-toc li+li{margin-top:4px}
/* En celular y con el dedo, cada fila del índice mide 44 px de alto (en escritorio queda como siempre) */
@media(max-width:719px),(pointer:coarse){
  .bl-toc li+li{margin-top:0}
  .bl-toc a{display:flex;align-items:center;min-height:44px}
}

/* El aviso va pegado al texto; la caja de reserva viene después */
.bl-nota{margin-top:32px;font-size:13.5px;line-height:1.55;color:var(--sub)}
.bl-cta{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.bl-cta h2{font-size:clamp(1.3rem,3vw,1.6rem)}
.bl-cta p{margin-top:8px;color:var(--sub)}
.bl-cta .ex-cta-row{margin-top:18px}
/* WhatsApp y teléfono, a un lado de los dos botones */
.bl-cta-otros{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
.bl-cta-otros a{display:inline-flex;align-items:center;gap:9px;min-height:44px;font:600 14px var(--sans);color:var(--brand)}
.bl-cta-otros a:hover{color:var(--brand-mid)}
.bl-ico{width:19px;height:19px;flex:none;fill:currentColor}
.bl-ico-tel{fill:none}

.bl-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:24px}
.bl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.bl-card:hover{border-color:var(--brand-mid);transform:translateY(-2px)}
.bl-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper)}
.bl-card-in{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-card-tag{font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brand-mid)}
.bl-card h3{font-size:1.08rem;line-height:1.3}
.bl-card p{font-size:14.5px;line-height:1.55;color:var(--sub)}
.bl-card-rev{font:500 12px var(--sans);color:var(--sub)}
.bl-card-foot{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.bl-card-more{font:600 13px var(--sans);color:var(--brand)}
.bl-card-min{font:500 12px var(--sans);color:var(--sub)}

/* «Ver todos los artículos»: 44 px de alto para el dedo */
#mas-articulos .ex-related a{min-height:44px}
/* El texto de la banda de cierre se reparte en renglones parejos (sin «de llegada.» solo en la segunda línea) */
.ex-cta p{text-wrap:balance}
/* Migas: el área táctil llega a 44 px sin mover nada */
.bl-hero .ex-crumb a{position:relative}
.bl-hero .ex-crumb a::before{content:"";position:absolute;inset:-15px -9px}

/* Sin JavaScript el círculo queda donde siempre: la última fila del pie deja su lugar libre */
@media(max-width:719px){.ex-footer-bot{padding-right:68px}}
/* El menú móvil cerrado espera fuera de la pantalla, pero su sombra (60 px de difuminado) se colaba por el borde derecho como un
   degradado gris. Cerrado no lleva sombra; se quita al terminar de salir, para que no desaparezca de golpe. */
.mobile-menu:not(.open){box-shadow:none;transition:transform .3s var(--ease),box-shadow 0s .3s}

@media(min-width:720px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .bl-cta{padding:30px 32px}
  .bl-meta{display:flex;flex-wrap:wrap;gap:4px 0}
  .bl-meta li+li::before{content:"·";margin:0 .7em}
}
@media(min-width:1000px){
  .bl-hero{padding:38px 0 8px}
  .bl-hero-index{padding-bottom:56px}
  .bl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .bl-card{transition:none}.bl-card:hover{transform:none}
}

/* Impresión: varios artículos explican una preparación y mucha gente los imprime. Queda el texto a 12 pt, sin encabezado,
   fotos, botones ni pie, y con el teléfono y las sedes al final. */
.bl-imprimir{display:none}
@media print{
  .ex-header,.mobile-menu,.ex-crumb,.ex-wsp,.ex-cta,.ex-footer,.bl-cover,.bl-toc,.bl-cta,#mas-articulos{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .bl-hero{background:none;padding:0}
  .bl-sec{background:none;padding:14px 0 0}
  .bl-narrow{max-width:none}
  .bl-h1,.bl-h1-larga{font-size:22pt}
  .bl-body{font-size:12pt;line-height:1.5}
  .bl-body a{color:#000;text-decoration:underline}
  .bl-nota{margin-top:18px;color:#000}
  .bl-imprimir{display:block;margin-top:24px;padding-top:10px;border-top:1px solid #999;font-size:11pt;line-height:1.4;color:#000}
}