/* ==========================================================================
   Tarifa Justa – Prensa (prensa.css)
   Coherente con la paleta y tipografía del sitio, con extras editoriales.
   Incluye: layout responsivo, cards, tipografía, badges y carrusel CSS.
   ========================================================================== */

/* Paleta base (homologada) */
:root{
  --primary:#2c3e50;      /* azul oscuro / header, títulos */
  --secondary:#e74c3c;    /* rojo Tarifa Justa / acentos */
  --accent:#3498db;       /* informativo / links */
  --light:#f5f7fa;        /* fondos suaves */
  --dark:#0b0f1a;         /* fondo profundo opcional */
  --text:#333;            /* texto principal */
  --success:#27ae60;
  --warning:#f39c12;
  /* Prensa */
  --press-highlight:#FFD166;  /* “breaking” */
  --muted:#8a97a6;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(2,10,20,.08);
}

/* Reset suave + tipos */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--light);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9; text-decoration:underline}
.container{
  width:min(1160px, 92%);
  margin-inline:auto;
}

/* Header / nav (hereda del sitio, añadimos pequeñas mejoras) */
header{
  background:linear-gradient(180deg, var(--primary), #1f2b3a);
  color:#fff;
  border-bottom:3px solid var(--secondary);
}
header .topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 0;
}
header .brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; letter-spacing:.2px;
}
header .brand .dot{width:.6rem; height:.6rem; border-radius:999px; background:var(--secondary)}
header nav a{
  color:#fff; font-weight:600; padding:.5rem .75rem; border-radius:.5rem;
}
header nav a.is-active, header nav a:hover{
  background:rgba(255,255,255,.12);
  text-decoration:none;
}

/* Hero editorial con cinta “Prensa” */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(231,76,60,.18), transparent 60%),
    linear-gradient(0deg, #122034, #0f1b2b);
  color:#fff;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--press-highlight); color:#4a3a00;
  padding:.35rem .7rem; border-radius:999px; font-weight:700;
  text-transform:uppercase; font-size:.78rem; letter-spacing:.08em;
}
.hero h1{
  margin:.8rem 0 0;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:1.15;
}
.hero p{color:#e8eef6; max-width:60ch; margin-top:.6rem}

/* Grid de destacados (portadas grandes) */
.destacados{
  display:grid; gap:1rem; margin:1.5rem 0 2rem;
  grid-template-columns: 1fr;
}
@media (min-width:720px){
  .destacados{grid-template-columns: 2fr 1fr}
}
.card-feature{
  position:relative; background:var(--card); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr;
}
.card-feature .media{
  aspect-ratio: 16/9; background:#0e1726; position:relative;
}
.card-feature .badge{
  position:absolute; top:.8rem; left:.8rem;
  background:rgba(0,0,0,.65); color:#fff; font-weight:700;
  padding:.35rem .6rem; border-radius:999px; font-size:.75rem;
}
.card-feature .body{padding:1rem 1rem 1.2rem}
.card-feature h3{
  margin:.1rem 0 .4rem;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height:1.25; color:#111;
}
.card-feature .meta{color:var(--muted); font-size:.9rem}

/* Listado de notas / cards */
.cards{
  display:grid; gap:1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin: 1rem 0 3rem;
}
@media (min-width:720px){
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (min-width:1024px){
  .cards{grid-template-columns: repeat(3, minmax(0, 1fr))}
}
.card{
  background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,10,20,.12)}
.card .thumb{aspect-ratio: 16/10; background:#0e1726}
.card .pad{padding:1rem}
.card h4{margin:.2rem 0 .5rem; color:#111}
.card p{color:#4b5a6a; margin:0}
.card .meta{margin-top:.6rem; color:var(--muted); font-size:.9rem}
.badge-pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.75rem;
  font-weight:700; background:rgba(52,152,219,.12); color:var(--accent);
}

/* Archivo cronológico */
.archivo{margin:2rem 0}
.archivo h2{margin-bottom:.75rem}
.archivo .list{
  display:grid; gap:.5rem;
}
.archivo .item{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.75rem .6rem; border-radius:.6rem; background:#fff; box-shadow:var(--shadow);
}
.archivo .date{
  font-variant-numeric:tabular-nums; color:var(--muted); min-width:7.5ch;
}
.archivo .title{font-weight:700; color:#111}
.archivo .title a{color:inherit; text-decoration:none}
.archivo .title a:hover{text-decoration:underline}

/* Página de comunicado */
main.comunicado{
  background: #fff; border-radius:18px; box-shadow:var(--shadow);
  margin: 1.5rem 0 3rem; padding: clamp(1rem, 2.2vw, 2rem);
}
.comunicado h2{margin:0 0 .25rem; line-height:1.2}
.comunicado .fecha{color:var(--muted); margin:0 0 1rem}
.imagen-comunicado{
  border-radius:14px; overflow:hidden; margin: .5rem 0 1rem;
}
.comunicado .bajada{
  font-size:1.1rem; color:#2b3a4a; background:linear-gradient(0deg,#fafcfe,#fff);
  border-left:4px solid var(--secondary);
  padding:.8rem 1rem; border-radius:8px; margin:1rem 0 1.25rem;
}
.comunicado .contenido{
  color:#253246;
}
.comunicado .contenido h3{margin:1.25rem 0 .4rem}
.comunicado .contenido p{margin:.7rem 0}

/* Compartir (social) */
.social-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;
  border-top:1px solid #e6ecf3; margin-top:1.25rem; padding-top:1rem;
}
.social-share p{margin:0; font-weight:700; color:#223047}
.social-share a{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#f0f4f9; color:#0b2a4a; border-radius:999px;
  padding:.45rem .7rem; font-weight:700;
}
.social-share a:hover{background:#e6eef7; text-decoration:none}

/* Cintas y etiquetas */
.ribbon{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(90deg, var(--secondary), #ff7a6a);
  color:#fff; border-radius:.6rem; padding:.35rem .6rem; font-weight:800; letter-spacing:.02em;
}
.kicker{
  color:var(--secondary); font-weight:900; text-transform:uppercase; font-size:.78rem; letter-spacing:.08em;
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700;
  padding:.6rem .9rem; border-radius:.7rem; border:2px solid transparent;
  background:var(--secondary); color:#fff;
}
.btn:hover{filter:saturate(1.05) brightness(1.02)}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn.light{background:#fff; color:#0b1a2a; border-color:#fff}

/* Carrusel 100% CSS (scroll-snap) */
.carousel{
  position:relative; overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  display:grid; grid-auto-flow:column; grid-auto-columns: 85%;
  gap:1rem; padding-bottom:.25rem; margin:1rem 0 2rem;
}
@media (min-width:920px){
  .carousel{grid-auto-columns: calc(50% - .5rem)}
}
@media (min-width:1280px){
  .carousel{grid-auto-columns: calc(33.333% - .666rem)}
}
.slide{
  scroll-snap-align:center; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.slide .media{aspect-ratio:16/9; background:#0e1726}
.slide .body{padding:1rem}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#cfd9e6,#b7c6d9); border-radius:999px}
.carousel::-webkit-scrollbar-track{background:transparent}

/* Indicadores simples para carrusel */
.carousel-dots{
  display:flex; gap:.4rem; justify-content:center; margin-top:-.2rem; margin-bottom:1.2rem;
}
.carousel-dots .dot{
  width:8px; height:8px; border-radius:999px; background:#c7d3e2;
}
.carousel-dots .dot.is-active{background:var(--secondary)}

/* Footer */
footer{
  color:#9eb0c6; background:#0b1320; padding:2rem 0; margin-top:2rem;
  border-top:3px solid #122138;
}
footer a{color:#cfe2ff}
footer .legal{font-size:.9rem; color:#8aa0bb}

/* Utilidades */
.grid{display:grid; gap:1rem}
.center{display:grid; place-items:center}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem}
.hidden{display:none!important}

/* Modo oscuro opcional (respeta prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  :root{
    --light:#0b0f1a; --text:#e8f0fb; --card:#0f1623; --muted:#9db0c6;
    --shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  body{background:var(--light); color:var(--text)}
  header{border-bottom-color:#ff735f}
  .card, .card-feature, main.comunicado, .archivo .item{background:var(--card)}
  .card h4, .card-feature h3, .archivo .title, .comunicado h2{color:#fff}
  .card p, .card-feature .meta, .archivo .date, .social-share p{color:var(--muted)}
  .hero{background:linear-gradient(0deg, #0e1726, #0a1220)}
  .social-share{border-top-color:#223047}
  .carousel::-webkit-scrollbar-thumb{background:#32455e}
}

/* Accesibilidad y foco */
a, button, .btn {outline:none}
a:focus-visible, .btn:focus-visible{
  outline:3px solid #88c0ff; outline-offset:3px; border-radius:8px;
}

/* Impresión (para dosiers) */
@media print{
  header, .social-share, .carousel, .cards, footer{display:none!important}
  body{background:#fff; color:#000}
  main.comunicado{box-shadow:none; padding:0}
}
/* ===== Parche Prensa siempre clara (no invasivo) ===== */
body.prensa-light{
  background: var(--light) !important;
  color: var(--text) !important;
}

/* Hero clara y legible en Prensa */
body.prensa-light .hero{
  background: linear-gradient(0deg, #ffffff, #f5f7fa) !important;
  color: #0b1a2a !important;
  border: 1px solid #e7ecf3;
  box-shadow: var(--shadow);
}

/* Bloques de contenido claros sí o sí */
body.prensa-light main.comunicado,
body.prensa-light .card,
body.prensa-light .card-feature,
body.prensa-light .slide,
body.prensa-light .archivo .item{
  background:#fff !important;
  color:#253246 !important;
  box-shadow: var(--shadow);
  border: 1px solid #e7ecf3;
}

/* Textos secundarios y links con buen contraste */
body.prensa-light .fecha,
body.prensa-light .meta{ color:#5b6470 !important; }
body.prensa-light a{ color: var(--accent) !important; }

/* Botón ghost sobre hero clara */
body.prensa-light .btn.ghost{
  background:#fff; color:#0b1a2a; border-color:#d7dfeb;
}

/* Si el usuario tiene modo oscuro, mantenemos Prensa clara */
@media (prefers-color-scheme: dark){
  body.prensa-light{
    background: var(--light) !important;
    color: #223047 !important;
  }
  body.prensa-light .hero{
    background: linear-gradient(0deg, #ffffff, #f7f9fc) !important;
    color:#0b1a2a !important;
  }
}