/* ══════════════════════════════════════════════════════════════════════════
   SOMMELIER — a la manera del New York Times, para comida.
   Blanco, negro y gris. Ningun color de acento. La jerarquia la hace la letra:
   una serif de titulares con peso (Libre Caslon), una sans estrecha para rubros y
   pies (Libre Franklin), y filetes verticales de un pixel separando columnas.
   Nada de tarjetas, nada de sombras, nada de esquinas redondeadas.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ink: #121212; --ink-2: #5a5a5a; --ink-3: #727272;
  --paper: #ffffff; --rule: #e2e2e2; --rule-dark: #121212;
  --serif: 'Libre Caslon Text', 'Georgia', serif;
  --sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --up: #1a7f37; --down: #b3261e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* cabecera ─ fina, centrada, con el nombre grande y la fecha en Franklin */
.top { border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--ink-2); }
.top-in { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.top .prices { display: flex; gap: 16px; font-family: var(--mono); font-size: 11.5px; }
.top .prices b { color: var(--ink); font-weight: 600; }
.mast { text-align: center; padding: 22px 0 10px; }
.mast .name { font-family: var(--serif); font-size: clamp(38px, 7vw, 68px); font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.mast .sub { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
.mast .meta { display: flex; justify-content: space-between; margin-top: 14px; padding: 8px 0; border-top: 1px solid var(--rule-dark); border-bottom: 3px double var(--rule-dark); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.nav { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 40; }
.nav-in { display: flex; justify-content: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a { padding: 10px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.on { border-bottom-color: var(--ink); }
.search { display: flex; border: 1px solid var(--rule); }
.search input { border: 0; outline: 0; background: transparent; color: var(--ink); padding: 7px 10px; width: 180px; font-family: var(--sans); font-size: 13px; }
.search button { border: 0; background: transparent; padding: 0 10px; cursor: pointer; color: var(--ink-2); }

/* la portada: tres columnas con filetes verticales */
.front { display: grid; grid-template-columns: 1.15fr 1.7fr 1fr; gap: 0; padding: 22px 0 10px; }
.col { padding: 0 20px; border-right: 1px solid var(--rule); }
.col:first-child { padding-left: 0; }
.col:last-child { border-right: 0; padding-right: 0; }
.story { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.story:last-child { border-bottom: 0; }
.story h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.22; margin-bottom: 6px; text-wrap: balance; }
.story h3.sm { font-size: 15.5px; }
.story h3.lg { font-size: 22px; }
.story p { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-bottom: 6px; }
.story:hover h3 { color: var(--ink-2); }
.story .img-box { margin-bottom: 10px; }
.story .label { margin-top: 2px; }
.story .byline { display: block; margin-top: 4px; }
.story.row { display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: start; }
.story.row .img-box { margin: 0; }
.lead h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; margin: 12px 0 10px; text-wrap: balance; letter-spacing: -.3px; }
.lead p { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.lead:hover h2 { color: var(--ink-2); }
.label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 5px; display: block; }
.byline { font-size: 11.5px; color: var(--ink-3); }
.img-box { position: relative; overflow: hidden; background: #efefef; }
.ratio-wide { aspect-ratio: 3/2; } .ratio-sq { aspect-ratio: 1; }
.img-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.colhead { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--rule-dark); margin-bottom: 4px; }

/* filas de seccion: cabecera con doble filete y cuatro columnas sin cajas */
.section { padding: 26px 0 8px; border-top: 1px solid var(--rule-dark); margin-top: 18px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.section-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.section-head a.all { font-size: 12px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.grid4 .story { border-bottom: 0; padding: 0; }
.grid4 > .story + .story { border-left: 1px solid var(--rule); padding-left: 24px; margin-left: -12px; }

/* la despensa: tabla sobria */
.pantry { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule); padding: 14px 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px; }
.pantry a { display: flex; flex-direction: column; gap: 1px; }
.pantry .n { font-size: 12px; font-weight: 600; }
.pantry .v { font-family: var(--mono); font-size: 15px; }
.pantry .c { font-family: var(--mono); font-size: 11.5px; }
.up { color: var(--up); } .down { color: var(--down); }

/* pieza */
.art { max-width: 700px; margin: 34px auto; }
.art h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.4px; margin: 8px 0 14px; text-wrap: balance; }
.art .dek { font-size: 19px; color: var(--ink-2); line-height: 1.45; margin-bottom: 18px; }
.art .meta { font-size: 12.5px; color: var(--ink-3); padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
.art figure { margin: 0 0 24px; }
.art figcaption { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.body { font-family: var(--serif); font-size: 18.5px; line-height: 1.7; }
.body p { margin-bottom: 22px; }
.facts { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule); padding: 14px 0; margin: 28px 0; font-size: 14px; }
.facts b.t { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.facts ul { padding-left: 18px; color: var(--ink-2); line-height: 1.7; }

/* paginas de listado */
.page-title { padding: 30px 0 14px; border-bottom: 3px double var(--rule-dark); margin-bottom: 20px; }
.page-title h1 { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); font-weight: 700; }
.page-title p { color: var(--ink-2); margin-top: 6px; }
.pager { display: flex; justify-content: center; gap: 18px; padding: 30px 0; font-size: 13px; font-weight: 600; }
.pager a { border: 1px solid var(--rule-dark); padding: 8px 16px; }
.pager span { color: var(--ink-3); }
.days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.days a { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border: 1px solid var(--rule); }
.days a.on, .days a:hover { border-color: var(--rule-dark); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 10px 8px; border-bottom: 1px solid var(--rule-dark); font-weight: 600; }
.table td { padding: 11px 8px; border-bottom: 1px solid var(--rule); }
.table .num { text-align: right; font-family: var(--mono); }
.foot { border-top: 3px double var(--rule-dark); margin-top: 50px; padding: 26px 0 40px; font-size: 12.5px; color: var(--ink-2); }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.foot .name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.foot h5 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.foot a { display: block; padding: 2px 0; }
.foot a:hover { color: var(--ink); }
@media (max-width: 960px) { .front { grid-template-columns: 1fr 1fr; } .col:last-child { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--rule); padding: 14px 0 0; } .grid4 { grid-template-columns: 1fr 1fr; } .grid4 > .story + .story { border-left: 0; padding-left: 0; margin-left: 0; } }
@media (max-width: 640px) { .nav-in { justify-content: flex-start; } .nav a { padding-left: 10px; padding-right: 10px; } .front { grid-template-columns: 1fr; } .col { padding: 0; border-right: 0; } .grid4 { grid-template-columns: 1fr; } .top .prices { display: none; } .foot-in { grid-template-columns: 1fr; } }

/* ── v9: formas propias de periódico ── */
.story.ranked { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.story .rank { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink-3); }
.strip8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-top: 10px; }
.strip8 .byline { display: block; margin-top: 6px; font-size: 11px; line-height: 1.25; color: var(--ink); }
.story.picture { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: end; border: 0; }
.story.picture h3 { font-size: 30px; line-height: 1.1; } .story.picture p { font-size: 16px; }
.lead-left { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 0; }
.lead-left > .story { padding: 0 24px 0 0; border: 0; }
.lead-left > .story h3.lg { font-size: 26px; line-height: 1.15; }
.lead-left > .col { border-left: 1px solid var(--rule); border-right: 0; padding: 0 0 0 22px; margin-left: 0; }
.lead-left > .col + .col { margin-left: 22px; }
.lead-left .story:first-child { padding-top: 0; }
.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; }
.five .story { border-bottom: 0; padding: 0; }
.five > .story + .story { border-left: 1px solid var(--rule); padding-left: 20px; margin-left: -10px; }
.five h3 { font-size: 16.5px; }
.dryline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.dryline a { padding: 8px 0; } .dryline .label { display: inline; margin-right: 8px; } .dryline h3 { display: inline; font-family: var(--serif); font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.dryline a:hover h3 { color: var(--ink-2); }
.longreads { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.longreads .story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: start; border: 0; padding: 0; }
.longreads .story .img-box { margin: 0; }
.longreads .story + .story { border-left: 1px solid var(--rule); padding-left: 40px; margin-left: -20px; }
.world { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.world .col:last-child { border-right: 0; } .world .col:first-child { padding-left: 0; }
.briefing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.briefing .story { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.briefing .label { display: inline; margin-right: 8px; } .briefing h3 { display: inline; } .briefing .byline { display: inline; margin-left: 8px; }
@media (max-width: 960px) { .strip8 { grid-template-columns: repeat(4, 1fr); } .lead-left { grid-template-columns: 1fr 1fr; } .lead-left > .col.last { grid-column: 1 / -1; border-left: 0; padding-left: 0; margin: 12px 0 0; border-top: 1px solid var(--rule); } .five { grid-template-columns: repeat(3, 1fr); } .five > .story + .story { border-left: 0; padding-left: 0; margin-left: 0; } .longreads, .world, .briefing, .dryline { grid-template-columns: 1fr; } .longreads .story + .story { border-left: 0; padding-left: 0; margin: 20px 0 0; } .story.picture { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .strip8 { grid-template-columns: repeat(2, 1fr); } .lead-left { grid-template-columns: 1fr; } .lead-left > .col { border-left: 0; padding-left: 0; margin: 12px 0 0; } .five { grid-template-columns: 1fr; } }

.lista { max-width: 720px; }
.lista .story { display: grid; grid-template-columns: 1fr 140px; gap: 16px; align-items: start; }
.lista .story .img-box { margin: 0; order: 2; }

/* modo cocina */
.receta.cocina { display: block; }
.receta.cocina ul, .receta.cocina ol { font-size: 22px !important; line-height: 1.5 !important; }
.receta.cocina li { padding: 10px 0; border-bottom: 1px solid var(--rule); cursor: pointer; list-style-position: inside; }
.receta.cocina ol li { font-size: 26px !important; margin-bottom: 18px !important; }
.receta.cocina li.hecho { opacity: .35; text-decoration: line-through; }
.receta .temporizador { display: none; }
.receta.cocina .temporizador { display: inline-block; margin-left: 12px; font-size: 14px; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; cursor: pointer; font-family: inherit; vertical-align: middle; }
body.en-cocina .latest, body.en-cocina .bar, body.en-cocina .top { display: none; }
/* vecinas y siguiente lectura */
.vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 34px auto 0; max-width: 760px; }
.vecinas a { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.vecinas a.sig { grid-template-columns: 1fr 84px; text-align: right; }
.vecinas a.sig .img-box { order: 2; }
.vecinas small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 4px; }
.vecinas b { font-size: 15px; line-height: 1.25; font-weight: 700; }
@media (max-width: 600px) { .vecinas { grid-template-columns: 1fr; } .receta { grid-template-columns: 1fr !important; } }

/* movil: la pagina nunca es mas ancha que la pantalla */
html, body { max-width: 100%; overflow-x: hidden; }
.bar-in, .top-in { flex-wrap: wrap; height: auto; min-height: 32px; row-gap: 2px; }
.bar-in > span, .top-in > span { white-space: normal; }
@media (max-width: 600px) {
  .bar-in > span:first-child, .top-in > span:first-child { display: none; }
  .mast .name { font-size: clamp(34px, 11vw, 46px); }
  .art .meta { margin-bottom: 10px; }
  .art .meta + div { margin: 0 0 16px !important; }
  .receta { grid-template-columns: 1fr !important; }
  .hero-main h1, .cover h1 { font-size: clamp(24px, 7.5vw, 32px); }
  .sumario .t { font-size: 18px; }
}

.art figure.enmedio { margin: 30px 0 34px; }
.art figure.enmedio figcaption { font-size: 12px; opacity: .6; margin-top: 8px; }

/* ── mega-pie (estructura de gran diario) ── */
.megapie { margin-top: 60px; border-top: 3px solid currentColor; padding: 34px 0 40px; font-size: 13px; }
.megapie a { display: block; padding: 3px 0; opacity: .85; } .megapie a:hover { opacity: 1; text-decoration: underline; }
.megapie h5 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 6px; font-weight: 700; }
.megapie h5 a { display: inline; padding: 0; }
.mp-top { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.15); font-weight: 600; }
.mp-top a { display: inline; }
.mp-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 30px; padding: 18px 0 24px; border-bottom: 1px solid rgba(0,0,0,.15); }
.mp-boton { display: inline-block !important; padding: 12px 22px; border: 2px solid currentColor; font-weight: 700; letter-spacing: .1em; font-size: 12px; margin-bottom: 16px; }
.mp-idiomas b { display: block; margin-bottom: 8px; }
.mp-idiomas div { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.mp-idiomas div a { display: inline; padding: 0; }
.mp-idiomas div a.on { font-weight: 700; text-decoration: underline; }
.mp-app { margin-top: 16px; } .mp-app b { display: block; margin-bottom: 6px; }
.mp-app form { display: flex; gap: 6px; } .mp-app input { flex: 1; padding: 8px 10px; border: 1px solid currentColor; font: inherit; }
.mp-app button { padding: 8px 14px; border: 1px solid currentColor; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.mp-indice { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 24px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.mp-copy { padding-top: 16px; font-size: 12px; opacity: .7; }
@media (max-width: 960px) { .mp-cols { grid-template-columns: 1fr 1fr; } .mp-indice { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mp-cols, .mp-indice { grid-template-columns: 1fr 1fr; } }

.ratio-hero { aspect-ratio: 16/9; } .ratio-pano { aspect-ratio: 21/9; } .ratio-tall { aspect-ratio: 4/5; }

/* v15: ESTRUCTURA DE THE EPOCH TIMES (barra con desplegables, cabecera centrada, cuerpo 2/3 + 1/3) */
.top, .mast, .nav, .latest { display: none; }
.ebar { border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 13px; }
.ebar-in { display: flex; align-items: center; gap: 14px; height: 44px; }
.ebar-icono { font-size: 15px; letter-spacing: -2px; color: var(--ink); }
.ebar-menu { position: relative; }
.ebar-menu summary { list-style: none; cursor: pointer; white-space: nowrap; padding: 6px 4px; font-weight: 500; }
.ebar-menu summary::-webkit-details-marker { display: none; }
.ebar-menu summary a { color: inherit; }
.ebar-menu[open] > div { position: absolute; top: 100%; left: 0; z-index: 60; background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0,0,0,.12); min-width: 220px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.ebar-menu > div a { padding: 4px 0; } .ebar-menu > div a:hover, .ebar-menu > div a.on { text-decoration: underline; }
.ebar-bajada { font-size: 11px; color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.ebar-nav { display: flex; align-items: center; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.ebar-nav::-webkit-scrollbar { display: none; }
.ebar-plano { padding: 6px 6px; font-weight: 500; white-space: nowrap; }
.ebar-botones { display: flex; gap: 8px; margin-left: auto; }
.eb-borde, .eb-lleno { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--ink); white-space: nowrap; }
.eb-lleno { background: var(--ink); color: #fff; }
.emast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px 0 18px; border-bottom: 1px solid var(--ink); }
.emast-izq, .emast-der { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 13px; }
.emast-der { text-align: right; }
.emast-izq b { font-weight: 500; } .emast-der b { font-weight: 700; }
.emast-centro { text-align: center; }
.ename { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.6vw, 64px); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.elema { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; margin-top: 8px; }
/* cuerpo: 2/3 + 1/3 con filete vertical */
.ecuerpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 0 32px; padding-top: 18px; }
.eprincipal { min-width: 0; }
.elateral { border-left: 1px solid var(--ink); padding-left: 32px; min-width: 0; }
.ebloque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--ink); }
.ebloque h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; margin-bottom: 12px; }
.ebloque p { font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ebloque a:hover h2 { color: var(--ink-2); }
.emeta { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); margin: 16px 0 12px; }
.erel { display: block; border-top: 1px dashed var(--rule-dark); padding-top: 12px; }
.erel h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.15; }
.erel:hover h3 { color: var(--ink-2); }
.erotulo { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 22px 0 8px; border-bottom: 1px solid var(--ink); }
.eetiqueta { display: inline-block; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; margin: 12px 0 8px; }
.efeatured { display: block; padding: 20px 0 10px; }
.efeatured h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; }
.efeatured p { font-family: var(--serif); font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.edos-h { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; border-top: 1px solid var(--rule); padding-top: 14px; }
.edos-h a { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.edos-h a + a { border-left: 1px dashed var(--rule-dark); padding-left: 26px; margin-left: -13px; }
.edos-h h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.15; }
.eflechas { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0 6px; }
.eflechas span { width: 30px; height: 30px; border: 1px solid var(--ink-3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ink-2); }
.evideos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 16px; }
.evideos h3 { font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.2; margin-top: 8px; }
.eseca { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; padding-top: 14px; }
.eseca a + a { border-left: 1px dashed var(--rule-dark); padding-left: 24px; margin-left: -12px; }
.eseca h3 { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.2; }
.ecriticos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.ecriticos a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px dashed var(--rule-dark); }
.ecriticos a:nth-child(odd) { border-right: 1px dashed var(--rule-dark); padding-right: 30px; }
.eavatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; }
.efirma { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.ecriticos h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.15; }
.ebanda { background: #111; color: #fff; padding: 26px 28px 30px; margin-top: 30px; }
.ebanda-fotos { display: flex; gap: 12px; margin-bottom: 18px; } .ebanda-fotos a { flex: 1; } .ebanda-fotos .img-box { background: #333; }
.ebanda h2 { font-family: var(--serif); font-size: 28px; margin-bottom: 8px; }
.ebanda p { font-family: var(--sans); font-size: 14px; opacity: .8; margin-bottom: 16px; max-width: 60ch; }
.ebanda .eb-lleno { background: #fff; color: #111; border-color: #fff; display: inline-block; }
/* lateral */
.evideo h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.15; margin: 10px 0 4px; }
.eby { font-family: var(--sans); font-size: 12px; color: var(--ink-3); display: block; }
.epuntos { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ink); color: var(--ink-3); }
.epuntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-dark); display: inline-block; } .epuntos i.on { background: var(--ink); }
.elat-rotulo { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 22px 0 8px; border-bottom: 1px solid var(--ink); }
.elat-rotulo a { font-weight: 500; }
.elatest a { display: block; padding: 12px 0; border-bottom: 1px dashed var(--rule-dark); }
.ehora { font-family: var(--sans); font-size: 12px; color: #b3261e; display: block; margin-bottom: 4px; }
.elatest h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.elatest a:hover h3 { color: var(--ink-2); }
.epod { display: block; padding: 14px 0; border-bottom: 1px solid var(--ink); }
.epod h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 6px 0; }
.eguias { display: flex; gap: 12px; overflow-x: auto; padding-top: 14px; scrollbar-width: none; }
.eguias a { flex: 0 0 150px; } .eguias b { display: block; font-family: var(--serif); font-size: 16px; margin-top: 8px; }
.ecaja { border: 1px dashed var(--rule-dark); padding: 18px; margin-top: 22px; text-align: center; }
.ecaja > b { font-family: var(--serif); font-size: 20px; display: block; }
.ecaja a { display: block; background: #f1f4f8; text-align: left; padding: 10px 12px; margin-top: 8px; }
.ecaja a h3 { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.25; }
.ecaja .ecaja-mas { background: transparent; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.eopinion a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--rule-dark); }
.eopinion h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.edos-v { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 14px; }
.edos-v h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.2; }
.emost a { display: block; padding: 12px 0; border-bottom: 1px dashed var(--rule-dark); }
.emost h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2; }
@media (max-width: 960px) { .ecuerpo { grid-template-columns: 1fr; } .elateral { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); margin-top: 20px; } .ebloque { grid-template-columns: 1fr 116px; gap: 14px; } .ebloque-foto { order: 1; } .ebloque-txt h2 { font-size: 21px !important; } .evideos { grid-template-columns: 1fr 1fr; } .eseca { grid-template-columns: 1fr; } .eseca a + a { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px dashed var(--rule-dark); padding-top: 10px; } .ecriticos { grid-template-columns: 1fr; } .ecriticos a:nth-child(odd) { border-right: 0; padding-right: 0; } .edos-h { grid-template-columns: 1fr; } .edos-h a + a { border-left: 0; padding-left: 0; margin-left: 0; } .emast { grid-template-columns: 1fr; text-align: center; } .emast-izq, .emast-der { display: none; } .ebar-botones { display: none; } }

.lista-pieza { list-style: none; counter-reset: it; margin: 26px 0; padding: 0; }
.lista-pieza li { counter-increment: it; display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); }
.lista-pieza li::before { content: counter(it, decimal-leading-zero); font-size: 30px; line-height: 1; opacity: .35; font-weight: 700; }
.lista-pieza h3 { font-size: 20px; line-height: 1.2; margin-bottom: 6px; }
.lista-pieza p { font-size: 16px; line-height: 1.6; }
/* el numero es ::before y ocupa la columna 1: el titular y el texto van SIEMPRE en la 2,
   si no el parrafo cae en la columna de 52px y sale una palabra por linea */
.lista-pieza li > * { grid-column: 2; min-width: 0; }
@media (max-width: 600px) { .lista-pieza li { grid-template-columns: 34px 1fr; gap: 10px; }
  .lista-pieza li::before { font-size: 22px; } .lista-pieza h3 { font-size: 18px; } }

/* carruseles reales de la portada Epoch */
.ecarrusel { display: flex !important; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ecarrusel::-webkit-scrollbar { display: none; }
.ecarrusel > a { flex: 0 0 31%; scroll-snap-align: start; }
.eseca.ecarrusel > a { border-left: 1px dashed var(--rule-dark); padding-left: 16px; margin-left: 0; }
.eseca.ecarrusel > a:first-child { border-left: 0; padding-left: 0; }
.eseca.ecarrusel .eby { margin-top: 6px; }
.edos-h.ecarrusel > a { flex: 0 0 48%; display: grid; grid-template-columns: 180px 1fr; gap: 14px; border-left: 0; margin-left: 0; padding-left: 0; }
.evideos.ecarrusel > a { flex: 0 0 23%; }
.eguias.ecarrusel > a { flex: 0 0 150px; }
.eflechas button { width: 30px; height: 30px; border: 1px solid var(--ink-3); border-radius: 50%; background: #fff; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.eflechas button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.erecetas a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--rule-dark); }
.erecetas .img-box { border-radius: 50%; }
.erecetas h3 { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.2; }
.erecetas .efirma { margin-bottom: 2px; }
.eplatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; }
.eplatos .img-box { border-radius: 4px; }
@media (max-width: 960px) { .ecarrusel > a, .edos-h.ecarrusel > a, .evideos.ecarrusel > a { flex-basis: 70%; } }

.evideo-carrusel .evideo { display: none; } .evideo-carrusel .evideo.on { display: block; }
.epuntos button { border: 0; background: transparent; font-size: 18px; color: var(--ink-2); cursor: pointer; } .epuntos i { cursor: pointer; }

.mp-guias { margin-top: 16px; } .mp-guias > b { display: block; margin-bottom: 8px; }
.mp-guias div { display: flex; flex-wrap: wrap; gap: 2px 14px; } .mp-guias div a { display: inline; }

/* archivo (paginas 2+): filas a la manera Epoch, texto a la izquierda y foto a la derecha */
.earchivo a { display: grid; grid-template-columns: 1fr 240px; gap: 22px; padding: 20px 0; border-bottom: 1px dotted var(--rule-dark, #999); align-items: start; }
.earchivo h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.15; margin: 6px 0 8px; }
.earchivo p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.earchivo a:hover h3 { text-decoration: underline; }
@media (max-width: 640px) { .earchivo a { grid-template-columns: 1fr 120px; } .earchivo h3 { font-size: 18px; } }


/* pieza a la manera Epoch: centrada, serif, filete doble y capitular */
.eart-cab { max-width: 760px; margin: 0 auto; text-align: center; }
.eart-cab .label { letter-spacing: .18em; }
.eart-cab h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 10px 0 14px; }
.eart-cab .dek { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.eart-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); border-top: 3px double var(--ink); border-bottom: 1px solid var(--rule-dark); padding: 10px 0; margin: 18px 0 22px; }
.eart figure { max-width: 860px; margin: 0 auto 24px; }
.eart-cuerpo { max-width: 720px; margin: 0 auto; }
.eart-cuerpo .body p:first-of-type::first-letter { font-family: var(--serif); font-size: 64px; float: left; line-height: .8; padding: 6px 10px 0 0; }
.eart-rel { max-width: 720px; margin: 0 auto; }
.eart-rel a { display: block; padding: 12px 0; border-bottom: 1px dotted var(--rule-dark); }
.eart-rel h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.2; }
.eart-rel a:hover h3 { text-decoration: underline; }

/* lateral lleno: recetario, mas leido, guias y carta */
.elat-recetas a { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--rule-dark); align-items: center; }
.elat-recetas h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.2; }
.elat-recetas a:hover h3 { text-decoration: underline; }
.elat-leidas a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--rule-dark); align-items: start; }
.elat-leidas .enum { font-family: var(--serif); font-size: 26px; line-height: .9; color: var(--ink-3); }
.elat-leidas h3 { font-family: var(--serif); font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.elat-guias { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0; font-size: 13.5px; }
.elat-guias a { border-bottom: 1px solid var(--rule-dark); } .elat-guias a:hover { color: var(--ink); }
.elat-carta { margin-top: 26px; border: 3px double var(--ink); padding: 16px; text-align: center; }
.elat-carta b { display: block; font-family: var(--serif); font-size: 18px; margin-bottom: 10px; }
.elat-carta form { display: flex; gap: 6px; } .elat-carta input { flex: 1; min-width: 0; border: 1px solid var(--ink); padding: 8px 10px; font: inherit; font-size: 13px; }
.elat-carta button { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 8px 12px; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }


/* bandas a todo el ancho bajo las dos columnas (anatomia Epoch) */
.eancho { border-top: 1px solid var(--ink); margin-top: 26px; padding-top: 8px; }
.ebseccion { padding: 6px 0 18px; border-bottom: 1px solid var(--rule-dark); }
.ebseccion-in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start; }

.ebseccion-seca .eseca a + a { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px dashed var(--rule-dark); padding-top: 10px; margin-top: 10px; }
.eancho .ecriticos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ebseccion-in { grid-template-columns: 1fr; } .eancho .ecriticos { grid-template-columns: 1fr; } }



/* banda: apertura horizontal propia (texto ancho + foto 240px) y secas apiladas */
.ebanda-lead { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
.ebanda-lead h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.18; margin-bottom: 8px; }
.ebanda-lead p { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; margin-bottom: 8px; }
.ebanda-lead:hover h2 { text-decoration: underline; }
.ebseccion-seca .eseca { grid-template-columns: 1fr; }
.ebseccion-seca .eseca a { border: 0; margin: 0; padding: 9px 0; border-bottom: 1px dashed var(--rule-dark); }
.ebseccion .eflechas { display: none; }
@media (max-width: 900px) { .ebanda-lead { grid-template-columns: 1fr 120px; } }

/* regla final: nada puede volver a colapsar la banda */
.eancho .ebseccion-in { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; gap: 34px !important; }
.eancho .ebanda-lead { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px !important; width: 100%; }
.eancho .ebseccion-seca .eseca { grid-template-columns: 1fr !important; }
.eancho .ebseccion-seca .eseca a { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }

/* MOVIL: la "regla final" de arriba lleva !important y sin ella la banda seguia en dos
   columnas dentro de un telefono (194 px + 121 px): el titular salia a una palabra por
   linea y la foto de 240 px se montaba encima del texto. Esto va DESPUES para ganarle. */
@media (max-width: 900px) {
  .eancho .ebseccion-in { grid-template-columns: 1fr !important; gap: 18px !important; }
  .eancho .ebanda-lead { grid-template-columns: 1fr !important; gap: 14px !important; }
  .eancho .ebanda-lead .img-box { width: 100%; max-width: 100%; }
  .ebseccion .ecarrusel > a, .eancho .ecarrusel > a { flex: 0 0 78% !important; }
  .eancho .ebseccion-in > * { min-width: 0; }
}

/* LO MAS LEIDO: la fila iba con estilo en linea (64px 1fr 200px) y en un telefono
   el titular se quedaba con 50 px. Ahora es una clase y en movil la foto baja. */
.etop-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px; gap: 18px; padding: 18px 0; border-bottom: 1px dotted var(--rule-dark); align-items: center; }
.etop-n { font-family: var(--serif); font-size: 44px; line-height: .8; color: var(--ink-3); }
.etop-fila h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; }
.etop-fila:hover h3 { text-decoration: underline; }
@media (max-width: 700px) {
  .etop-fila { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; }
  .etop-n { font-size: 30px; }
  .etop-fila .img-box { grid-column: 2; margin-top: 10px; }
  .etop-fila h3 { font-size: 19px; }
}


/* SUBTITULOS del original dentro de la pieza (ver gustus.css) */
.body .sub { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.18; margin: 32px 0 10px; padding-top: 14px; border-top: 1px solid var(--rule); }
.body .sub + p { margin-top: 0; }

/* Ingredientes y pasos que vienen dentro del texto del articulo (bloques 'li').
   Antes se caian por cortos y una receta salia sin ingredientes. */
.body ul.ingr{margin:14px 0 18px;padding:0 0 0 20px;list-style:none}
.body ul.ingr li{position:relative;padding:5px 0 5px 4px;line-height:1.45;border-bottom:1px solid rgba(128,128,128,.18)}
.body ul.ingr li:last-child{border-bottom:0}
.body ul.ingr li::before{content:"";position:absolute;left:-14px;top:1.05em;width:6px;height:1px;background:currentColor;opacity:.5}
@media (max-width:600px){.body ul.ingr{padding-left:16px}}

/* ── EL MENU QUE SE DESLIZA, DICIENDOLO ───────────────────────────────────────
   Medido con navegador el 2026-09-02: la tira del menu escondia 619 px en movil
   y 140 px en escritorio, cortada a mitad de palabra y SIN NINGUNA SENAL de que
   se pudiera deslizar. El lector no encontraba media casa.
   La sombra aparece sola en el lado donde queda menu por ver y desaparece al
   llegar al final: es el propio desplazamiento el que la mueve (background-attachment
   local/scroll), sin una linea de JavaScript. */
.ebar-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background:
    linear-gradient(90deg, #ffffff 40%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), #ffffff 60%) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll;
}
.ebar-nav::-webkit-scrollbar { display: none; }

/* ── MENU COMPLETO DE MOVIL (templates/_comun/_menu_movil.html) ───────────────
   Sin JavaScript: es un <details>. En escritorio no se ve, porque alli el menu
   entra entero en la barra. */
.menuv { display: none; }
.menuv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 8px 10px 8px 0; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: #121212; }
.menuv > summary::-webkit-details-marker { display: none; }
.menuv-barras { font-size: 17px; line-height: 1; }
/* abierto, el icono es una equis: girar las tres barras dejaba "|||", que no dice nada */
.menuv[open] > summary .menuv-barras { font-size: 0; }
.menuv[open] > summary .menuv-barras::after { content: "¹5"; font-size: 17px; line-height: 1; }
.menuv[open] > summary .menuv-txt { font-size: 0; }
.menuv-panel { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 200;
  background: #ffffff; color: #121212; overflow-y: auto; padding: 62px 20px 40px;
  -webkit-overflow-scrolling: touch; }
.menuv[open] > summary { position: fixed; top: 10px; left: 14px; z-index: 201; color: #121212;
  background: #ffffff; padding: 6px 10px; border: 1px solid #e2e2e2; }
.menuv-todo { display: block; font-family: var(--sans); font-weight: 700; font-size: 15px;
  padding: 12px 0; border-bottom: 1px solid #e2e2e2; color: #121212; }
.menuv-sec { padding: 14px 0; border-bottom: 1px solid #e2e2e2; }
.menuv-tit { display: block; font-family: var(--sans); font-weight: 700; font-size: 15px;
  letter-spacing: .02em; color: #121212; margin-bottom: 8px; }
.menuv-temas { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.menuv-temas a { font-size: 13px; color: #121212; opacity: .85; }
.menuv-extras { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.menuv-extras a { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #121212; }
.menuv-idioma { padding-top: 18px; }
.menuv-idioma select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #e2e2e2;
  background: #ffffff; color: #121212; width: 100%; max-width: 260px; }
@media (max-width: 900px) { .menuv { display: block; } }

/* En ESCRITORIO no hay boton de menu (ahi el menu deberia caber), y sin embargo .ebar-nav
   escondia 128 px: cuatro secciones que el lector no encontraba nunca. En vez de deslizarse,
   el menu BAJA A UNA SEGUNDA LINEA cuando no cabe. Prefiero una barra un poco mas alta a un
   periodico con secciones invisibles. */
@media (min-width: 901px) {
  .ebar-in { height: auto; min-height: 44px; padding: 3px 0; flex-wrap: wrap; }
  .ebar-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; background: none; }
}

/* ── EL PIE SE SALIA DE LA PANTALLA EN MOVIL ──────────────────────────────────
   Medido el 2026-09-02 a 390 px: `.mp-cols` decia `1fr 1fr` y resolvia a 281px + 83px,
   o sea 394 px de contenido en 350 disponibles. `1fr` es `minmax(auto, 1fr)`: NO baja del
   ancho minimo del contenido, y una palabra larga en la primera columna empuja a la
   segunda fuera de la pantalla. Como el cuerpo recorta en horizontal, esos enlaces
   ("Contacto", "Correcciones", "Terminos de uso") quedaban INALCANZABLES, no solo feos.
   `minmax(0, 1fr)` deja que la columna se encoja, y las palabras largas parten. */
@media (max-width: 960px) {
  .mp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .mp-indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mp-cols, .mp-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mp-cols > *, .mp-indice > * { min-width: 0; overflow-wrap: anywhere; }

/* El boton del boletin salia EN VERTICAL, una letra por linea: el `input` con `flex: 1`
   se quedaba todo el ancho y al boton no le dejaba ni una palabra. En movil el formulario
   se apila, y en cualquier caso el boton no se encoge ni parte su texto. */
.mp-app button { flex: 0 0 auto; white-space: nowrap; }
.mp-app input { min-width: 0; }
@media (max-width: 600px) {
  .mp-app form { flex-wrap: wrap; }
  .mp-app input, .mp-app button { flex: 1 1 100%; }
}

/* ── FOTO-DE-APERTURA-EN-MOVIL ────────────────────────────────────────────────
   Medido con navegador el 2026-09-03: la regla de <=960px deja .ebloque en
   "1fr 116px", asi que la foto de apertura (.img-box.ratio-hero, 16/9) se
   renderiza a 116x65 px en un movil de 390. El titular se iba a cinco lineas y
   al lado quedaba un vacio blanco de media pantalla. Por debajo de 600 la foto
   sube arriba y ocupa todo el ancho. Comprobado tras el cambio: 350x197. */
@media (max-width: 600px) {
  .ebloque { grid-template-columns: 1fr; gap: 12px; }
  .ebloque-foto { order: -1; }
  .ebloque-txt h2 { font-size: 25px !important; }
}

/* ── LAS BANDAS DEL FINAL (2026-09-03): formas de broadsheet, detras de "More news" ── */
.sx { margin-top: 36px; }
.sx-b { margin: 0 0 40px; padding-top: 18px; border-top: 3px double var(--ink); }
.sx-rotulo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sx-rotulo span { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.sx-rotulo i { flex: 1; height: 1px; background: var(--rule-dark); }
.sx h2, .sx h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; }
.sx p { font-family: var(--serif); color: var(--ink-2); font-size: 15px; line-height: 1.45; margin: 8px 0 6px; }
.sx .byline { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; }
.sx-dossier-in { display: grid; grid-template-columns: 2fr 1fr; gap: 0 32px; }
.sx-dossier-lead h2 { font-size: clamp(26px, 3.2vw, 42px); margin-top: 14px; }
.sx-dossier-lead .img-box { aspect-ratio: 16/9; }
.sx-dossier-side { border-left: 1px solid var(--rule); padding-left: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.sx-dossier-side a { display: block; padding: 10px 0 14px; border-bottom: 1px dotted var(--rule-dark); }
.sx-dossier-side a:last-child { border-bottom: 0; }
.sx-dossier-side h3 { font-size: 20px; }
.sx-columnas-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
.sx-columnas-in a { position: relative; padding: 4px 0 8px 0; }
.sx-columnas-in a + a { border-left: 1px solid var(--rule); padding-left: 34px; margin-left: -17px; }
.sx-capitular { float: left; font-family: var(--serif); font-size: 46px; line-height: .9; padding: 4px 12px 0 0; font-weight: 400; color: var(--ink-3); }
.sx-columnas-in h3 { font-size: 22px; }
.sx-columnas-in p { font-size: 15.5px; }
.sx-tira-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sx-tira-in h3 { font-size: 16px; margin-top: 8px; }
.sx-tira-in .label { display: inline-block; margin-top: 10px; }
.sx-editorial { border-top: 1px solid var(--rule-dark); }
.sx-cine .img-box { aspect-ratio: 21/9; }
.sx-editorial-txt { max-width: 820px; margin: 0 auto; text-align: center; padding: 22px 0 10px; }
.sx-editorial-txt h2 { font-size: clamp(30px, 4vw, 54px); font-weight: 700; letter-spacing: -.01em; }
.sx-editorial-txt p { font-size: 18px; max-width: 640px; margin: 12px auto 4px; }
.sx-editorial-par { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.sx-editorial-par a { display: grid; grid-template-columns: 1fr 120px; gap: 16px; align-items: start; }
.sx-editorial-par h3 { font-size: 21px; }
.sx-agenda-in { list-style: none; columns: 2; column-gap: 40px; column-rule: 1px solid var(--rule); }
.sx-agenda-in li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.sx-agenda-in a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 0; align-items: baseline; }
.sx-num { font-family: var(--mono); font-size: 22px; color: var(--ink-3); }
.sx-agenda-in h3 { font-size: 19px; }
@media (max-width: 960px) { .sx-dossier-in, .sx-editorial-par { grid-template-columns: 1fr; } .sx-dossier-side { border-left: 0; padding-left: 0; margin-top: 16px; } .sx-columnas-in { grid-template-columns: 1fr; } .sx-columnas-in a + a { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--rule); padding-top: 14px; } .sx-tira-in { grid-template-columns: repeat(3, 1fr); } .sx-agenda-in { columns: 1; } }
@media (max-width: 640px) { .sx-tira-in { grid-template-columns: 1fr 1fr; } .sx-cine .img-box { aspect-ratio: 4/3; } }

/* ── WORDMARK nuevo (2026-09-03): The Imperial / EPICUREAN GAZETTE ── */
.ename { display: inline-flex; flex-direction: column; align-items: center; }
.ename-pre { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .36em; margin-bottom: 9px; color: var(--ink-2); }
.ename-main { font-family: var(--serif); font-size: clamp(28px, 4.4vw, 54px); letter-spacing: .08em; line-height: 1; }
@media (max-width: 640px) { .ename-main { font-size: clamp(22px, 7.4vw, 32px); letter-spacing: .05em; } .ename-pre { font-size: 10px; letter-spacing: .28em; } }

/* ── EL RECETARIO DEL PLANETA (2026-09-04): carrusel automatico que LLENA lo que sobra de cada columna ── */
.eprincipal, .elateral { display: flex; flex-direction: column; }
.eprincipal > *, .elateral > * { flex: 0 0 auto; }
.erecetario { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 26px; min-height: 420px; }
.erecetario-rotulo { display: flex; justify-content: space-between; align-items: baseline; }
.erecetario-rotulo small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.erecetario-esc { position: relative; flex: 1 1 auto; min-height: 340px; background: var(--ink); overflow: hidden; }
.erec { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; display: block; }
.erec.on { opacity: 1; z-index: 1; }
.erec .img-box { height: 100%; aspect-ratio: auto; }
.erec .img-box img { width: 100%; height: 100%; object-fit: cover; }
.erec-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 26px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%); color: #fff; }
.erec-txt .label { color: #fff; opacity: .85; }
.erec-txt h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.12; color: #fff; margin-top: 8px; }
.elateral .erec-txt h2 { font-size: clamp(20px, 1.8vw, 26px); }
.erecetario-fl { margin-top: 10px; }
/* ── 'More news' con formas que se alternan ── */
.emas > .emas-b + .emas-b { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--rule); }
.emas .five { margin: 0; }
/* ── MOVIL: nada de tiras que se deslizan; la hamburguesa lo da todo ── */
@media (max-width: 900px) { .ebar-nav { display: none; } .ecuerpo { display: block; } .erecetario { min-height: 300px; } }