/* ═══════════════════════════════════════════════════════════════════════════
   noticias.css — lo que comparten noticias.html y noticia.html (D-127).
   Se carga DESPUÉS de sitio.css. Aquí no se inventan colores: todo sale de los
   tokens de sitio.css (navy, verde, pasteles --green-t / --amber-t / --red-ink).
   Diseño: Figma "LUMAVI — Página de Noticias (diseño)", tarjeta 4:298.
   Regla de accesibilidad del diseño: el Antes → Ahora siempre se dice con
   palabras y flecha, nunca solo con color o tachado.
   ═══════════════════════════════════════════════════════════════════════════ */
body{background:var(--bg)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nota-es{font-size:16px;color:var(--mid);max-width:680px}

/* etiquetas: pastel de fondo, letra en su tinta oscura */
.etq{display:inline-block;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--green-t);color:var(--green-ink)}
.etq.proyecto{background:var(--amber-t);color:var(--amber-ink);box-shadow:inset 0 0 0 1px var(--amber-l)}
.etq.sector{background:var(--bg);color:var(--navy)}
.etq.prensa{background:var(--navy);color:#fff}

/* la tarjeta */
.nota article{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;height:100%;box-shadow:0 4px 0 rgba(10,35,62,.06)}
.nota-arriba{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nota-arriba time{font-size:14px;color:var(--mid);white-space:nowrap}
.nota .tema{font:700 17px/1.3 var(--sans);color:var(--navy);margin:0}
.nota-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1.5px solid var(--line);padding-top:14px;margin-top:auto}
.nota-pie .fuente{font-size:14px;color:var(--mid)}
.nota-pie .leer{font-weight:700;font-size:16px;color:var(--green-ink);text-underline-offset:3px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}

/* Antes → Ahora: lado a lado; en el teléfono, uno debajo del otro */
.aa{background:var(--bg);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,.85fr) auto minmax(0,1.15fr);gap:6px 12px;align-items:center}
.aa-nota{grid-column:1/-1;font-size:14px;font-weight:600;color:var(--amber-ink)}
.aa-antes,.aa-ahora{display:flex;flex-direction:column;gap:2px;min-width:0}
.aa-etq{font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.aa-antes{color:var(--red-ink)}
.aa-antes del,.aa-antes .aa-txt{font:600 18px/1.15 var(--serif)}
.aa-antes del{text-decoration-thickness:1.5px}
.aa-ahora{color:var(--green-ink)}
.aa-ahora .aa-txt{font:700 24px/1.1 var(--serif)}
.aa-flecha::before{content:"→";font-size:24px;color:var(--mid);line-height:1}
.aa.largo{grid-template-columns:1fr}
.aa.largo .aa-flecha::before{content:"↓";font-size:20px}
.aa.largo .aa-ahora .aa-txt{font-size:21px}
.linea{background:var(--bg);border-radius:12px;padding:14px 16px;font:600 18px/1.3 var(--serif);color:var(--navy)}
@media (max-width:599px){
  .aa{grid-template-columns:1fr}
  .aa-flecha::before{content:"↓";font-size:20px}
}

.puntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.puntos li{position:relative;padding-left:18px;font-size:16px;line-height:1.4}
.puntos li::before{content:"•";position:absolute;left:2px;color:var(--green-ink);font-weight:700}

/* aviso legal: banda navy, justo antes del pie */
.aviso-legal{background:var(--navy);color:#fff;padding:32px 0;margin-top:72px}
.aviso-legal p{font-size:16px;line-height:1.55;max-width:880px}