/* El Paisano Portada — todo dentro de .epp */
.epp{
  --epp-rojo:#C8291F; --epp-negro:#1A1A1A; --epp-gris:#F4F5F7; --epp-gris2:#EDEDEF;
  --epp-oscuro:#2E2E2E; --epp-texto2:#5E5E66; --epp-linea:#E3E3E8; --epp-gap:24px;
  container-type:inline-size; container-name:epp;
  color:var(--epp-negro); line-height:1.2; max-width:1280px; margin:0 auto;
}
.epp *,.epp *::before,.epp *::after{box-sizing:border-box}
.epp h2,.epp h3,.epp p{margin:0;padding:0;border:0;font-family:inherit;letter-spacing:normal;text-transform:none;background:none}
.epp a{text-decoration:none;box-shadow:none}
.epp-sec{margin:0 0 40px}

/* ---------- Tarjeta base ---------- */
.epp-card{position:relative;display:flex;min-width:0;overflow:hidden}
.epp-media{display:block;position:relative;overflow:hidden;background:var(--epp-gris2);flex-shrink:0}
.epp-media img,.epp-media .epp-sin-img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;margin:0;border-radius:0;transition:transform .4s ease}
.epp-card:hover .epp-media img{transform:scale(1.04)}
.epp-sin-img{display:grid;place-items:center;background:#FFFFF2;color:var(--epp-rojo);font-size:40px;font-weight:900}
.epp-cuerpo{display:flex;flex-direction:column;gap:8px;min-width:0}
.epp-kicker{position:relative;z-index:2;align-self:flex-start;color:var(--epp-rojo);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}
.epp-kicker:hover{text-decoration:underline}
.epp .epp-titulo{font-size:21px;font-weight:800;line-height:1.18;color:var(--epp-negro)}
.epp .epp-titulo a{color:inherit}
.epp .epp-titulo a::after{content:"";position:absolute;inset:0;z-index:1} /* toda la tarjeta es clicable */
.epp-card:hover .epp-titulo a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.epp .epp-sub{font-size:16px;line-height:1.4;color:var(--epp-texto2)}
.epp-autor{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--epp-negro);letter-spacing:.2px}

/* Cabecera de sección */
.epp-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:2px solid var(--epp-negro);padding-bottom:6px;margin-bottom:20px}
.epp .epp-cab h2{font-size:26px;font-weight:900;text-transform:uppercase;color:var(--epp-negro)}
.epp-ver-mas{display:inline-flex;align-items:center;gap:4px;color:var(--epp-rojo);font-weight:700;font-size:14px;white-space:nowrap}
.epp-ver-mas:hover{text-decoration:underline}

/* Tarjeta lateral: texto a la izquierda, miniatura cuadrada a la derecha */
.epp-lado{flex-direction:row-reverse;align-items:flex-start;gap:16px;background:var(--epp-gris);padding:20px}
.epp-lado .epp-media{width:36%;max-width:180px;aspect-ratio:1/1}
.epp-lado .epp-cuerpo{flex:1}

/* Tarjeta en columna: imagen arriba */
.epp-col{flex-direction:column;background:var(--epp-gris2)}
.epp-col .epp-media{aspect-ratio:16/10}
.epp-col .epp-cuerpo{padding:18px 22px 22px}
.epp .epp-col .epp-titulo{font-size:23px}

/* Tarjeta horizontal: imagen a la izquierda */
.epp-horiz{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.epp-horiz .epp-media{aspect-ratio:16/10;height:100%}
.epp-horiz .epp-cuerpo{justify-content:center;padding:28px 40px}

/* ---------- Destacados ---------- */
.epp-d-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--epp-gap)}
.epp-d-main{flex-direction:column;background:var(--epp-oscuro)}
.epp-d-main .epp-media{aspect-ratio:16/9}
.epp-d-main .epp-cuerpo{padding:22px 26px 26px;gap:10px}
.epp-d-main .epp-kicker{color:#FF9A8F}
.epp .epp-d-main .epp-titulo{font-size:40px;line-height:1.08;color:#fff}
.epp-d-main .epp-sub{color:#D8D8DC}
.epp-d-main .epp-autor{color:#fff}
.epp-d-side{display:grid;grid-template-rows:repeat(3,1fr);gap:var(--epp-gap)}
.epp .epp-d-side .epp-titulo{font-size:18px}

/* ---------- Fila especial ---------- */
.epp-f-main{background:var(--epp-gris2)}
.epp .epp-f-main .epp-titulo{font-size:40px;line-height:1.1}
.epp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--epp-gap);margin-top:var(--epp-gap)}

/* ---------- Bloque de sección ---------- */
.epp-b-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.epp-b-grid.epp-con-ad{grid-template-columns:minmax(0,1fr) 300px}
.epp-b-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff;padding-bottom:24px;margin-bottom:24px;border-bottom:4px solid var(--epp-linea)}
.epp-b-top .epp-cuerpo{padding:0 0 0 28px;justify-content:flex-start}
.epp .epp-b-top .epp-titulo{font-size:38px;line-height:1.08}
.epp-b-abajo{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:var(--epp-gap);align-items:start}
.epp-b-alta{background:var(--epp-gris)}
.epp .epp-b-alta .epp-titulo{font-size:28px}
.epp-b-lista{display:grid;gap:var(--epp-gap)}
.epp .epp-b-lista .epp-titulo{font-size:22px}
.epp-b-ad{position:sticky;top:20px;align-self:start}

/* ---------- Anuncios y HTML ---------- */
.epp-ad{text-align:center;min-height:250px}
.epp-ad-label{display:block;font-size:12px;color:#77777F;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.epp-ad-ancho .epp-ad{min-height:100px}

/* ---------- Tablet ---------- */
@container epp (max-width:960px){
  .epp-d-grid{grid-template-columns:minmax(0,1fr)}
  .epp-d-side{grid-template-rows:none}
  .epp .epp-d-main .epp-titulo{font-size:32px}
  .epp-b-grid.epp-con-ad{grid-template-columns:minmax(0,1fr)}
  .epp-b-ad{position:static}
  .epp .epp-f-main .epp-titulo,.epp .epp-b-top .epp-titulo{font-size:30px}
  .epp-horiz .epp-cuerpo{padding:22px 26px}
  .epp-b-top .epp-cuerpo{padding:0 0 0 22px}
}
/* ---------- Celular ---------- */
@container epp (max-width:640px){
  .epp{--epp-gap:14px}
  .epp-sec{margin-bottom:28px}
  .epp-horiz{grid-template-columns:1fr}
  .epp-horiz .epp-cuerpo,.epp-b-top .epp-cuerpo{padding:16px 16px 18px}
  .epp-b-top{padding-bottom:0;margin-bottom:14px;border-bottom:0;background:var(--epp-gris)}
  .epp-cols{grid-template-columns:1fr}
  .epp-b-abajo{grid-template-columns:1fr}
  .epp-lado{padding:14px;gap:12px}
  .epp-lado .epp-media{width:32%}
  .epp-col .epp-cuerpo{padding:14px 16px 18px}
  .epp-d-main .epp-cuerpo{padding:16px 16px 20px}
  .epp .epp-d-main .epp-titulo{font-size:26px}
  .epp .epp-f-main .epp-titulo,.epp .epp-b-top .epp-titulo{font-size:24px}
  .epp .epp-col .epp-titulo,.epp .epp-b-alta .epp-titulo{font-size:20px}
  .epp .epp-titulo,.epp .epp-d-side .epp-titulo,.epp .epp-b-lista .epp-titulo{font-size:17px}
  .epp .epp-sub{font-size:15px}
  /* En celular, las notas de las columnas pasan a lista compacta */
  .epp-cols .epp-col{flex-direction:row-reverse;align-items:flex-start;gap:12px;padding:14px;background:var(--epp-gris)}
  .epp-cols .epp-col .epp-media{width:32%;aspect-ratio:1/1}
  .epp-cols .epp-col .epp-cuerpo{flex:1;padding:0}
  .epp .epp-cols .epp-col .epp-titulo{font-size:17px}
  .epp .epp-cab h2{font-size:21px}
  .epp-kicker{font-size:12px}
  .epp-autor{font-size:12px}
}