/* ============================================================
   ACTORES S.C.G — Estilos de NOTICIAS (listado + artículo)
   Se carga junto a site.css en noticias.html y noticia.html
   ============================================================ */

/* ====== NOTICIA DESTACADA ====== */
.nfeat{display:grid; grid-template-columns:1.15fr 1fr; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#fff; margin-bottom:40px; transition:transform .5s var(--ease), box-shadow .5s}
.nfeat:hover{transform:translateY(-5px); box-shadow:0 40px 70px -34px rgba(0,0,0,.35)}
.nfeat .ph{min-height:340px}
.nfeat .body{padding:44px clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:center}
.nfeat .body h2{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3vw,40px); line-height:1.08; margin:14px 0 14px}
.nfeat .body p{font-size:16px; color:#3a3a37; margin:0 0 24px; max-width:48ch}
@media(max-width:820px){.nfeat{grid-template-columns:1fr} .nfeat .ph{min-height:240px}}

/* ====== GRID DE NOTICIAS ====== */
.ngrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.ncard{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s, border-color .3s}
.ncard:hover{transform:translateY(-6px); border-color:transparent; box-shadow:0 34px 60px -34px rgba(0,0,0,.35)}
.ncard .ph{aspect-ratio:16/10}
.ncard .body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.nmeta{display:flex; align-items:center; gap:10px; font-size:12px; margin-bottom:12px}
.ncat{color:var(--orange-700); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.ndot{width:3px; height:3px; border-radius:50%; background:var(--g1)}
.ndate{color:var(--g2); font-weight:500}
.ncard h3{font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.18; margin:0 0 8px}
.ncard p{font-size:14.5px; color:#4a4a45; margin:0 0 16px}
.ncard .more{margin-top:auto; font-size:13px; font-weight:600; color:var(--accent)}
@media(max-width:940px){.ngrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ngrid{grid-template-columns:1fr}}

/* ====== PAGINACIÓN ====== */
.pager{display:flex; gap:8px; justify-content:center; margin-top:54px}
.pager a{min-width:44px; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:var(--ink); transition:background .2s, color .2s, border-color .2s}
.pager a:hover{border-color:var(--ink)}
.pager a.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.pager a.dis{opacity:.4; pointer-events:none}

/* ====== SUSCRIPCIÓN ====== */
.subscribe{background:var(--ink); color:#fff; border-radius:24px; padding:clamp(32px,4vw,52px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; overflow:hidden; position:relative}
.subscribe .spiral{right:-80px; top:-80px; width:280px; height:280px; opacity:.12}
.subscribe .spiral path{stroke:var(--accent)}
.subscribe .s-copy{position:relative; z-index:2}
.subscribe h3{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,34px); margin:0 0 8px}
.subscribe p{margin:0; color:rgba(255,255,255,.75); max-width:44ch}
.subform{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:2}
.subform input{border:1px solid var(--line-light); background:rgba(255,255,255,.06); color:#fff; border-radius:44px; padding:15px 22px; font-size:15px; font-family:var(--font-ui); min-width:240px}
.subform input::placeholder{color:#9b9a94}

/* ====== ARTÍCULO (detalle) ====== */
.ahero{position:relative; min-height:70vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background-size:cover; background-position:center; background-color:#171715}
.ahero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,17,15,.15),rgba(18,17,15,.72)); z-index:1}
.ahero .wrap{position:relative; z-index:2; padding-bottom:52px; padding-top:120px}
.ahero .crumb{color:rgba(255,255,255,.8)}
.ahero .crumb a:hover{color:#fff}
.acat{display:inline-block; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:20px; margin-bottom:18px}
.ahero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(32px,5vw,68px); line-height:1.02; letter-spacing:-.02em; margin:0; max-width:20ch}
.ameta{display:flex; gap:20px; flex-wrap:wrap; margin-top:24px; font-size:13.5px; color:rgba(255,255,255,.85); font-weight:500; align-items:center}
.ameta .who{display:flex; align-items:center; gap:10px}
.ameta .av{width:34px; height:34px; border-radius:50%; background-size:cover; background-position:center; border:2px solid rgba(255,255,255,.5)}
.ameta span{display:flex; align-items:center; gap:8px}
.ameta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent)}
.ameta .who::before{display:none}

.article{padding:70px 0 90px}
.article-body{max-width:760px; margin:0 auto}
.article-body .lead{font-size:22px; line-height:1.5; color:var(--ink); font-weight:500; margin:0 0 30px}
.article-body p{font-size:18px; line-height:1.75; color:#26261f; margin:0 0 24px}
.article-body h2{font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.1; margin:44px 0 16px}
.article-body h3{font-family:var(--font-display); font-weight:600; font-size:22px; margin:34px 0 12px}
.article-body ul{margin:0 0 24px; padding-left:0; list-style:none}
.article-body ul li{position:relative; padding-left:28px; margin-bottom:12px; font-size:18px; line-height:1.6; color:#26261f}
.article-body ul li::before{content:""; position:absolute; left:0; top:11px; width:12px; height:2px; background:var(--accent)}
.article-body a.inline{color:var(--orange-700); border-bottom:1px solid var(--orange-100); font-weight:600}
.pullquote{margin:40px 0; padding:6px 0 6px 26px; border-left:3px solid var(--accent); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:28px; line-height:1.25; color:var(--ink)}
figure{margin:38px 0}
figure .fimg{border-radius:16px; overflow:hidden; aspect-ratio:16/9; background-size:cover; background-position:center}
figure figcaption{margin-top:12px; font-size:13.5px; color:var(--g2); text-align:center}
.share{max-width:760px; margin:44px auto 0; padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.share .lbl{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g2)}
.share a{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease)}
.share a:hover{background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px)}
.share svg{width:18px; height:18px; fill:currentColor}

/* ====== RELACIONADAS ====== */
.related{background:var(--paper)}