/* ============================================================
   PROPUESTAS — estilos propios de la página de fichas
   Usa las variables de marca definidas en inicio.css (:root)
   ============================================================ */

/* ---------- Encabezado ---------- */
.pr-hero{
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(31,182,216,.12), transparent 60%),
    linear-gradient(180deg,#fff, var(--cream));
  padding:132px 0 52px;
}
.pr-hero .crumbs{font-size:.9rem;color:var(--grey);margin-bottom:18px}
.pr-hero .crumbs a{color:var(--blue);text-decoration:none}
.pr-hero .crumbs span{margin:0 4px}
.pr-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);color:var(--navy);line-height:1.14;margin-bottom:18px}
.pr-hero h1 .script{color:var(--orange);font-weight:400}
.pr-hero .lead{font-size:1.08rem;font-weight:300;color:var(--grey);max-width:60ch}

/* ---------- Barra de filtros por estado ---------- */
.pr-filterbar{background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:64px;z-index:40}
.pr-filters{display:flex;gap:10px;padding:16px 0;overflow-x:auto;scrollbar-width:none}
.pr-filters::-webkit-scrollbar{display:none}
.pr-fil{
  flex:none;border:1px solid var(--line);background:#fff;color:var(--grey);
  padding:9px 18px;border-radius:999px;font-family:inherit;font-size:.92rem;font-weight:500;
  cursor:pointer;transition:.2s;white-space:nowrap;
}
.pr-fil:hover{border-color:var(--blue);color:var(--blue)}
.pr-fil.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- Grid de fichas ---------- */
.pr-wrap{background:var(--cream);padding:56px 0 72px}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

/* Ficha individual */
.ficha{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:32px 30px;display:flex;flex-direction:column;transition:.3s;
  scroll-margin-top:100px;
}
.ficha:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px rgba(34,54,74,.4)}
.ficha-top{margin-bottom:14px}
.ficha h2{font-size:1.32rem;color:var(--navy);line-height:1.28;margin-bottom:20px}

/* Bloques internos (problema / beneficios / impacto) */
.ficha-block{margin-bottom:16px}
.ficha-block h3{
  font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blue);margin-bottom:5px;
}
.ficha-block p{color:var(--grey);font-weight:300;font-size:.96rem;line-height:1.6}

/* Botón de documento */
.ficha-doc{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1.5px solid var(--blue);
  color:var(--blue);font-weight:600;font-size:.92rem;text-decoration:none;transition:.2s;
}
.ficha-doc:hover{background:var(--blue);color:#fff}
/* estilo tenue mientras el documento no está disponible (aria-disabled) */
.ficha-doc[aria-disabled="true"]{opacity:.55}
.ficha-doc[aria-disabled="true"]:hover{background:transparent;color:var(--blue)}

/* Propuestas ocultas temporalmente (sin documento publicado todavia).
   Siguen en el HTML; para mostrar una, borra su atributo  data-oculta  */
.ficha[data-oculta]{display:none!important}

/* Nota al pie */
.pr-note{text-align:center;color:var(--grey);font-size:.9rem;font-style:italic;
  margin-top:38px;opacity:.85}
.pr-empty{text-align:center;color:var(--grey);padding:60px 0;font-size:1rem}

/* ---------- CTA ---------- */
.pr-cta{
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(31,182,216,.2), transparent 60%),
    linear-gradient(135deg,var(--blue-deep),var(--blue));
  color:#fff;text-align:center;padding:70px 0;
}
.pr-cta h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:14px}
.pr-cta p{max-width:54ch;margin:0 auto 30px;font-weight:300;opacity:.95;font-size:1.05rem}
.pr-cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.pr-cta .btn.white{background:#fff;color:var(--blue-deep)!important}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .pr-grid{grid-template-columns:1fr}
  .pr-filterbar{top:60px}
}