/* ==========================================================================
   03-PROYECTOS.CSS · Tarjetas de proyecto (se apilan al hacer scroll) y cifras
   --------------------------------------------------------------------------
   Las tarjetas se generan con JavaScript desde js/02-datos.js.
   El efecto de "apilado" es CSS puro (position:sticky); el JavaScript solo
   las encoge y oscurece un poco cuando la siguiente las cubre.
   ========================================================================== */

.papel{background:var(--papel);color:var(--sobre-papel);color-scheme:light}

.proyectos{padding-block:clamp(72px,10vw,140px) clamp(88px,11vw,150px)}
.proyectos-cab{display:grid;gap:18px;max-width:46rem}
.proyectos-cab p{color:var(--suave-papel)}
.pila{display:grid;gap:clamp(22px,4vw,48px);margin-top:clamp(36px,5vw,68px)}

/* --i la pone el JavaScript (0,1,2…): cada tarjeta se pega un poco más abajo */
.tarjeta{
  --dim:0;position:sticky;top:calc(14px + var(--i)*14px);
  display:grid;gap:0;padding:10px;border-radius:28px;
  background:var(--forest);color:var(--sobre-oscuro);border:1px solid var(--linea-o);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,30,21,.55);transform-origin:50% 0;
}
.tarjeta::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  opacity:var(--dim,0);pointer-events:none;border-radius:inherit;
}
.tarjeta-foto{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--verde)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover}
.tarjeta-etiqueta{
  position:absolute;left:12px;top:12px;padding:6px 13px;border-radius:999px;
  background:var(--lima);color:var(--ink);font-size:.82rem;font-weight:700;
}
.tarjeta-cuerpo{display:flex;flex-direction:column;gap:14px;padding:20px 12px 14px}
.tarjeta-cuerpo h3{
  font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.5rem);
  letter-spacing:-.02em;line-height:1.08;
}
.tarjeta-donde{color:var(--suave-oscuro);font-size:.98rem}
.tarjeta-cifra{font-size:1.05rem;padding-top:14px;border-top:1px solid var(--linea-o)}
.tarjeta-cifra b{
  font-family:var(--f-titulo);font-weight:400;font-size:2.6rem;letter-spacing:-.03em;
  color:var(--lima);margin-right:.35em;line-height:1;vertical-align:-.08em;font-variant-numeric:tabular-nums;
}
.tarjeta-datos{display:grid}
.tarjeta-datos li{padding-block:11px;border-top:1px solid var(--linea-o);font-size:.98rem}
.tarjeta-amen{font-size:.95rem;color:var(--suave-oscuro)}
.tarjeta-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:6px}
.tarjeta-cta .boton{min-height:48px;padding-inline:22px}

/* MURO SUAVE: a quien no se ha registrado solo se le muestra una tarjeta */
html.visitante .tarjeta[data-muro="oculta"]{display:none}

/* ---------- Cifras (cuadrícula tipo "bento") ---------- */
.cifras{padding-bottom:clamp(88px,11vw,150px)}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.celda{
  border-radius:var(--radio);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;
  justify-content:flex-end;gap:8px;min-height:150px;background:var(--papel-2);
}
.celda-num{
  font-family:var(--f-titulo);font-weight:400;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(3rem,7vw,4.6rem);font-variant-numeric:tabular-nums;
}
.celda small{font-size:.5em;margin-left:.06em}
.celda p{font-size:1rem;color:var(--suave-papel);max-width:20em}
.celda--grande{grid-column:1/-1;background:var(--verde);color:var(--sobre-oscuro);min-height:260px}
.celda--grande .celda-num{font-size:clamp(6rem,24vw,12rem);color:var(--lima);font-weight:300}
.celda--grande p{color:rgba(241,244,236,.86);font-size:1.15rem}
.celda--ancha{grid-column:1/-1;background:var(--ink);color:var(--sobre-oscuro);min-height:130px}
.celda--ancha p{color:var(--suave-oscuro)}

@media (min-width:640px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .celda--grande{grid-column:span 2;grid-row:span 2;min-height:360px}
  .celda--ancha{grid-column:span 2}
}
@media (min-width:880px){
  .tarjeta{grid-template-columns:1.12fr 1fr;min-height:520px}
  .tarjeta-foto{aspect-ratio:auto;height:100%;min-height:500px}
  .tarjeta-cuerpo{padding:34px 32px 28px 40px;justify-content:center;gap:16px}
  .tarjeta-cifra b{font-size:3.2rem}
}