/* ==========================================================================
   Menos Ruido — home.css
   Sistema de diseño de la portada. Sereno, editorial, mucho aire.
   Variables en :root para que funcionen aunque el módulo se use suelto.
   ========================================================================== */

:root{
  --mr-navy:#0F172A; --mr-green:#0FA38E; --mr-mint:#CDEEE6;
  --mr-gray:#E6E8EB; --mr-smoke:#F6F7F8; --mr-white:#fff;
  --mr-ink:#0F172A; --mr-muted:#5A6577; --mr-muted2:#8A93A3;
  --mr-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mr-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mr-wrap:1180px; --mr-radius:18px;
}

.mr{ font-family:var(--mr-sans); color:var(--mr-ink); font-size:17px; line-height:1.7; }
.mr *{ box-sizing:border-box; }
.mr a{ color:inherit; text-decoration:none; }
.mr-wrap{ max-width:var(--mr-wrap); margin:0 auto; padding:0 28px; }
.mr-serif{ font-family:var(--mr-serif); }
.mr-kicker{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mr-green); }
.mr-muted{ color:var(--mr-muted); }
.mr-dot{ width:7px; height:7px; border-radius:50%; background:var(--mr-green); display:inline-block; }

/* Botones */
.mr-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mr-sans); font-weight:600; font-size:14px; border-radius:999px; padding:10px 20px; cursor:pointer; border:1px solid transparent; }
.mr-btn--green{ background:var(--mr-green); color:#fff !important; }
.mr-btn--green:hover{ background:#0c8f7c; color:#fff !important; }
.mr-btn--ghost{ background:transparent; color:var(--mr-green) !important; border-color:var(--mr-green); }

/* Encabezados de sección */
.mr-section{ margin:48px 0; }
.mr-section__h{ display:flex; align-items:center; gap:14px; }
.mr-section__sub{ color:var(--mr-muted2); font-size:15px; margin:4px 0 26px; }

/* --- Publicidad --- */
.mr-ad{ margin:0 auto; position:relative; display:flex; justify-content:center; }
.mr-ad__tag{ position:absolute; top:8px; left:10px; z-index:2; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mr-muted2); }
.mr-ad__ph{ display:flex; align-items:center; justify-content:center; width:100%; background:repeating-linear-gradient(135deg,#EEF1F3 0 12px,#F6F7F8 12px 24px); border:1px solid var(--mr-gray); border-radius:12px; color:var(--mr-muted2); font-size:12.5px; }
.mr-ad--full .mr-ad__ph{ height:90px; max-width:970px; }
.mr-ad--billboard .mr-ad__ph{ height:250px; max-width:970px; }
.mr-ad--leader .mr-ad__ph{ height:90px; max-width:728px; }
.mr-ad--half .mr-ad__ph{ height:600px; }
.mr-ad--box .mr-ad__ph{ height:250px; max-width:300px; }
/* Slot de anuncio bajo la columna lateral del hero. */
.mr-aside-ad{ margin-top:28px; display:flex; justify-content:center; }
.mr-ad--mobile{ display:none; }
.mr-ad--mobile .mr-ad__ph{ height:100px; max-width:320px; }
.mr-ad-row{ margin:40px 0; }

/* --- Hero (título primero) --- */
.mr-hero__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start; }
.mr-feat__cat{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mr-feat__rt{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--mr-muted2); }
.mr-feat__rt .mr-sep{ opacity:.5; margin:0 3px; }
.mr-feat__title{ font-family:var(--mr-serif); font-weight:600; font-size:40px; line-height:1.12; letter-spacing:-.015em; color:var(--mr-navy); }
.mr-feat__medialink{ display:block; }
.mr-feat__media{ aspect-ratio:16/10; border-radius:var(--mr-radius); background-size:cover; background-position:center; background-color:var(--mr-gray); box-shadow:0 24px 50px -28px rgba(15,23,42,.35); }
.mr-feat__dek{ font-size:18px; line-height:1.6; color:var(--mr-muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mr-feat__foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.mr-feat__meta{ font-size:14px; color:var(--mr-muted2); }
.mr-feat__meta .mr-sep{ opacity:.5; margin:0 4px; }
.mr-feat__cta{ font-weight:600; font-size:15px; color:var(--mr-green) !important; white-space:nowrap; }
.mr-feat__cta:hover{ color:#0c8f7c !important; }
.mr-feat__cta span{ transition:transform .2s; display:inline-block; }
.mr-feat__cta:hover span{ transform:translateX(3px); }
.mr-aside__h{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mr-muted2); padding-bottom:14px; border-bottom:1px solid var(--mr-gray); }
.mr-sec-item{ display:block; padding:18px 0; border-bottom:1px solid var(--mr-gray); }
.mr-sec-item:last-child{ border-bottom:0; }
.mr-sec-item__top{ display:flex; align-items:baseline; gap:8px; }
.mr-sec-item h3{ font-family:var(--mr-serif); font-weight:500; font-size:19px; line-height:1.32; color:var(--mr-navy); }
.mr-sec-item .mr-t{ font-size:13px; font-weight:600; color:var(--mr-muted2); }

/* --- Layout contenido + sidebar --- */
.mr-layout{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; }
.mr-side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:34px; }

/* --- Hoy debes saber --- */
.mr-cards{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.mr-card{ background:var(--mr-white); border:1px solid var(--mr-gray); border-radius:var(--mr-radius); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.mr-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(15,23,42,.25); }
.mr-card__media{ aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--mr-gray); }
.mr-card__body{ padding:20px 22px 24px; }
.mr-card__title{ font-family:var(--mr-serif); font-weight:600; font-size:21px; line-height:1.25; color:var(--mr-navy); }
.mr-card__dek{ font-size:15px; color:var(--mr-muted); line-height:1.55; }
.mr-card__t{ font-size:13px; color:var(--mr-muted2); }

/* --- Explicado (con imagen) --- */
.mr-explica{ background:var(--mr-mint); border-radius:22px; padding:36px 40px; display:grid; grid-template-columns:1fr 340px; gap:36px; align-items:center; overflow:hidden; }
.mr-explica--noimg{ grid-template-columns:1fr; }
.mr-explica__k{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0B7D6B; }
.mr-explica__ico{ width:28px; height:28px; padding:5px; border-radius:8px; background:var(--mr-green); flex-shrink:0; }
.mr-explica__ico path{ stroke:#fff; fill:none; stroke-width:2; }
.mr-explica h2{ font-family:var(--mr-serif); font-weight:600; font-size:27px; line-height:1.2; color:var(--mr-navy); }
.mr-explica p{ color:#2C5A52; max-width:52ch; }
.mr-explica__media{ display:block; align-self:stretch; min-height:230px; border-radius:16px; background-size:cover; background-position:center; background-color:#bfe6dd; box-shadow:0 22px 44px -26px rgba(15,23,42,.45); }

/* --- Últimas / timeline --- */
.mr-live{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--mr-green); background:rgba(15,163,142,.1); padding:5px 11px; border-radius:999px; }
.mr-live .mr-pulse{ width:8px; height:8px; border-radius:50%; background:var(--mr-green); box-shadow:0 0 0 0 rgba(15,163,142,.5); animation:mr-p 2s infinite; }
@keyframes mr-p{ 70%{ box-shadow:0 0 0 8px rgba(15,163,142,0); } 100%{ box-shadow:0 0 0 0 rgba(15,163,142,0); } }
.mr-tl{ border-left:2px solid var(--mr-gray); margin-top:22px; }
.mr-tl__row{ position:relative; padding:16px 0 16px 28px; }
.mr-tl__row:not(:last-child){ border-bottom:1px solid var(--mr-gray); }
.mr-tl__row::before{ content:""; position:absolute; left:-7px; top:22px; width:12px; height:12px; border-radius:50%; background:var(--mr-smoke); border:2px solid var(--mr-green); }
.mr-tl__time{ font-size:13px; font-weight:600; color:var(--mr-green); font-variant-numeric:tabular-nums; }
.mr-tl__title{ display:block; font-family:var(--mr-serif); font-weight:500; font-size:18px; line-height:1.35; color:var(--mr-navy); }
.mr-tl__cat{ display:inline-block; margin-top:5px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--mr-muted2); }
.mr-tl__row--new{ animation:mr-in .5s ease; }
@keyframes mr-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* --- Coberturas --- */
.mr-panel{ background:var(--mr-white); border:1px solid var(--mr-gray); border-radius:var(--mr-radius); padding:22px 24px; }
.mr-panel__h{ font-family:var(--mr-serif); font-weight:600; font-size:19px; color:var(--mr-navy); }
/* Coberturas: banda con scroll horizontal; cada grupo es una cobertura. */
.mr-media--ph{ background:var(--mr-gray) !important; }
.mr-covx__scroll{ display:flex; gap:22px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.mr-covx__group{ flex:0 0 340px; scroll-snap-align:start; background:var(--mr-white); border:1px solid var(--mr-gray); border-top:3px solid var(--cov, var(--mr-green)); border-radius:16px; padding:18px 20px 8px; }
.mr-covx__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--mr-gray); }
.mr-covx__name{ display:flex; align-items:center; gap:8px; font-family:var(--mr-serif); font-weight:600; font-size:17px; color:var(--mr-navy); line-height:1.2; }
.mr-covx__dot{ width:8px; height:8px; border-radius:50%; background:var(--cov, var(--mr-green)); flex-shrink:0; }
.mr-covx__more{ font-size:12.5px; font-weight:600; color:var(--mr-green) !important; white-space:nowrap; }
.mr-covx__note{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--mr-gray); }
.mr-covx__note:last-child{ border-bottom:0; }
.mr-covx__thumb{ width:62px; height:48px; border-radius:8px; flex-shrink:0; background-size:cover; background-position:center; }
.mr-covx__nbody{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.mr-covx__ntitle{ font-family:var(--mr-serif); font-weight:500; font-size:14px; line-height:1.3; color:var(--mr-navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mr-covx__ntime{ font-size:12px; font-weight:600; color:var(--mr-muted2); }
@media(max-width:600px){ .mr-covx__group{ flex-basis:290px; } }

/* --- Suscripción --- */
.mr-sub{ }
.mr-sub__form{ display:flex; gap:8px; }
.mr-sub__form input{ flex:1; border:1px solid var(--mr-gray); background:var(--mr-white); border-radius:10px; padding:11px 14px; font-family:var(--mr-sans); font-size:14px; color:var(--mr-ink); }
.mr-sub__ok{ color:var(--mr-green); font-weight:600; }

/* ==========================================================================
   Blindaje contra el tema (Blocksy estiliza h1–h4 con margen/color propios).
   Fijamos margen y color del texto de cada módulo por encima del tema.
   ========================================================================== */
.mr :is(h1,h2,h3,h4){ margin:0 !important; }
.mr .mr-feat__cat{ margin:0 0 8px !important; }
.mr .mr-feat__title{ margin:0 0 14px !important; color:var(--mr-navy) !important; }
.mr .mr-feat__medialink{ margin:0 0 14px !important; }
.mr .mr-feat__dek{ margin:0 0 12px !important; }
.mr .mr-aside__h{ margin:0 0 6px !important; }
.mr .mr-sec-item h3{ margin:6px 0 0 !important; color:var(--mr-navy) !important; }
.mr .mr-section__h h2{ margin:0 !important; font-family:var(--mr-serif); font-weight:600; font-size:28px; letter-spacing:-.01em; color:var(--mr-navy) !important; }
.mr .mr-card__title{ margin:10px 0 8px !important; color:var(--mr-navy) !important; }
.mr .mr-card__dek{ margin:0 0 14px !important; }
.mr .mr-explica h2{ margin:8px 0 10px !important; color:var(--mr-navy) !important; }
.mr .mr-explica p{ margin:0 0 18px !important; }
.mr .mr-tl__title{ margin:3px 0 0 !important; color:var(--mr-navy) !important; }
.mr .mr-panel__h{ margin:0 0 6px !important; color:var(--mr-navy) !important; }

/* ==========================================================================
   Responsive (mobile-first real)
   ========================================================================== */
@media(max-width:920px){
  .mr-hero__grid{ grid-template-columns:1fr; gap:34px; }
  .mr-layout{ grid-template-columns:1fr; gap:0; }
  .mr-side{ position:static; }
}
@media(max-width:600px){
  .mr{ font-size:16px; }
  .mr-wrap{ padding:0 18px; }
  .mr .mr-feat__title{ font-size:32px; }
  .mr-feat__dek{ font-size:17px; }
  .mr-cards{ grid-template-columns:1fr; }
  .mr-explica{ grid-template-columns:1fr; padding:26px 22px; gap:22px; }
  .mr-explica__media{ min-height:190px; order:2; }
  .mr-ad--desktop{ display:none; }
  .mr-ad--mobile{ display:flex; margin:26px 0; }
  .mr .mr-section__h h2{ font-size:24px; }
  .mr-sub__form{ flex-direction:column; }
}