/* v25 · Proyectos: la ficha de cada proyecto y su lectura como desarrollo territorial. Prefijo py-.
   Cada proyecto se cuenta en un solo bloque: el texto y una ficha con foto real;
   debajo, los cuatro frentes en su orden (encendidos con su acento los que activa),
   los sistemas del territorio con su foto del árbol y el momento del ciclo en una línea de seis.
   Acentos de frente iguales a /que-hacemos/: brújula, escuela, coar y lab. */
.py{ --py-tierra:color-mix(in oklab, var(--piedra) 42%, var(--papel)); --py-tierra-2:color-mix(in oklab, var(--piedra) 70%, var(--papel));
  background:var(--papel); padding-block:clamp(3.5rem,7vw,6.25rem) }

/* ---------------------------------------------------------------- Texto y ficha */
.py-intro{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--e-xl) clamp(2.5rem,6vw,6rem); align-items:start }
.py-intro__txt{ padding-top:clamp(0rem,1.5vw,1.25rem) }
.py-intro__txt .lede{ font-size:clamp(1.18rem,1rem + .6vw,1.5rem); line-height:1.5; color:var(--tinta); max-width:34ch }
.py-intro__txt .cuerpo{ margin-top:1.1rem; max-width:58ch }
.py-intro__txt .lede + .cuerpo{ margin-top:1.6rem }
.py-intro .py-frentes{ margin-top:clamp(2.5rem,4.5vw,3.5rem) }
.py-intro .py-fr{ grid-template-columns:1fr; gap:.55rem }
/* Solo los frentes activos, en filas: se adapta a dos o tres sin dejar huecos. */
.py-intro .py-fr__i a{ grid-template-columns:1fr; grid-template-rows:auto auto; row-gap:.2rem; min-height:0; padding:1rem 1.35rem 1.1rem }
.py-intro .py-fr__i b{ margin-top:0 }
/* Un solo sistema: la columna se ciñe a la píldora y el ciclo toma el resto. */
.py-lee__g:has(.py-sis li:only-child){ grid-template-columns:max-content minmax(0,1fr) }
.py-sis ul:has(> li:only-child){ grid-template-columns:1fr }

.py-ficha{ margin:0; background:var(--py-tierra); border-radius:22px; padding:.55rem .55rem 1.25rem }
.py-ficha__foto{ position:relative; aspect-ratio:16 / 10; border-radius:17px; overflow:hidden; background:var(--py-tierra-2) }
.py-ficha__foto picture, .py-ficha__foto img{ display:block; width:100%; height:100% }
.py-ficha__foto img{ object-fit:cover; object-position:var(--pos, 50% 50%) }
.py-ficha__pie{ position:absolute; left:.75rem; bottom:.7rem; max-width:calc(100% - 1.5rem); padding:.28rem .7rem .32rem; border-radius:999px;
  font-family:var(--lee); font-style:italic; font-size:.84rem; line-height:1.3; color:var(--papel); background:rgba(10,26,47,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.py-ficha__dl{ margin:1.05rem .95rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem }
.py-ficha__dl > div{ padding-top:.65rem; border-top:1px solid rgba(14,23,38,.13); min-width:0 }
.py-ficha__dl > div:first-child, .py-ficha__dl > div:nth-child(4):last-child{ grid-column:1 / -1 }
.py-ficha__dl dt{ font-family:var(--lee); font-style:italic; font-size:.88rem; color:var(--petroleo); margin-bottom:.2rem }
.py-ficha__dl dd{ margin:0; font-family:var(--sans); font-size:.98rem; line-height:1.42; color:var(--tinta) }

/* ---------------------------------------------------------------- Encabezados internos */
.py-lee{ margin-top:clamp(2.75rem,5vw,4.25rem) }
.py-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; margin-bottom:1rem }
.py-cab__t{ font-family:var(--sans); font-size:1.08rem; font-weight:650; letter-spacing:-.01em; color:var(--tinta); margin:0 }
.py-cab__n{ font-family:var(--lee); font-style:italic; font-size:.95rem; color:var(--mudo); margin:0 }

/* ---------------------------------------------------------------- Los cuatro frentes */
.py-fr{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem }
.py-fr__i{ min-width:0 }
.py-fr__i a{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-rows:auto auto 1fr; align-content:start; gap:.4rem;
  height:100%; min-height:10rem; padding:1.1rem 1.2rem 1.25rem; border-radius:18px; text-decoration:none; color:var(--tinta);
  border:1.5px dashed rgba(14,23,38,.2) }
.py-fr__i a::before{ content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in oklab, var(--c) 82%, var(--papel));
  transform-origin:left center; transform:scaleX(0) }
.py-fr__i[data-on] a{ border-color:transparent }
.py-fr__i[data-on] a::before{ transform:none }
.py-fr__n{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; font-family:var(--lee); font-size:1rem; line-height:1;
  color:var(--mudo); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--c) 75%, var(--tinta)) }
.py-fr__i[data-on] .py-fr__n{ color:var(--tinta); background:rgba(255,255,255,.72); box-shadow:none }
.py-fr__i b{ margin-top:.55rem; font-family:var(--sans); font-size:1.03rem; font-weight:650; line-height:1.22; letter-spacing:-.01em; color:var(--mudo) }
.py-fr__i[data-on] b{ color:var(--tinta) }
.py-fr__d{ font-family:var(--lee); font-size:.94rem; line-height:1.42; color:var(--mudo); font-style:italic }
.py-fr__i[data-on] .py-fr__d{ color:var(--tinta-2); font-style:normal }
.py-fr__i a:hover b{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.py-fr__i a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }

/* Un solo momento de movimiento: al entrar, los frentes activos se encienden en su orden. */
.rv .py-frentes:not(.visto) .py-fr__i[data-on] a::before{ transform:scaleX(0) }
.rv .py-frentes .py-fr__i[data-on] a::before{ transition:transform .75s var(--curva); transition-delay:calc(.25s + var(--i) * .14s) }

/* ---------------------------------------------------------------- Sistemas y momento del ciclo */
.py-lee__g{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--e-xl) clamp(2.5rem,6vw,6rem); align-items:start }
.py-sis .py-cab__t, .py-etapa .py-cab__t{ margin-bottom:1rem }
.py-sis ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem }
.py-sis a{ display:flex; align-items:center; gap:.85rem; height:100%; padding:.45rem 1rem .45rem .45rem; border-radius:999px; background:var(--py-tierra);
  text-decoration:none; color:var(--tinta) }
.py-sis img{ flex:none; width:3.25rem; height:3.25rem; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--papel) }
.py-sis span{ display:grid; min-width:0; line-height:1.3 }
.py-sis b{ font-family:var(--sans); font-size:.98rem; font-weight:650 }
.py-sis small{ font-family:var(--lee); font-size:.88rem; color:var(--tinta-2) }
.py-sis a:hover b{ text-decoration:underline; text-underline-offset:3px }
.py-sis a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }

.py-ciclo{ --paso:calc(100% / 6); position:relative; list-style:none; margin:1.35rem 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) }
.py-ciclo::before, .py-ciclo::after{ content:""; position:absolute; top:calc(.45rem - 1px); left:calc(var(--paso) / 2); height:2px; border-radius:2px }
.py-ciclo::before{ right:calc(var(--paso) / 2); background:color-mix(in oklab, var(--piedra) 80%, var(--tinta)) }
.py-ciclo::after{ width:calc(var(--paso) * var(--k)); background:var(--sol); transform-origin:left center }
.py-ciclo li{ position:relative; z-index:1; display:grid; justify-items:center; align-content:start; gap:.6rem; text-align:center; min-width:0 }
.py-ciclo i{ display:block; width:.9rem; height:.9rem; border-radius:50%; background:var(--papel); box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--piedra) 70%, var(--tinta)) }
.py-ciclo span{ font-family:var(--sans); font-size:.8rem; line-height:1.2; color:var(--mudo); white-space:nowrap }
.py-ciclo li[aria-current] i{ width:1.5rem; height:1.5rem; margin-top:-.3rem; margin-bottom:-.3rem; background:var(--sol);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--sol) 26%, transparent) }
.py-ciclo li[aria-current] span{ font-size:.9rem; font-weight:650; color:var(--tinta) }
.rv .py-etapa:not(.visto) .py-ciclo::after{ transform:scaleX(0) }
.rv .py-etapa .py-ciclo::after{ transition:transform .9s var(--curva) .35s }
.py-etapa__d{ margin:1.5rem 0 0; font-family:var(--lee); font-size:1rem; line-height:1.5; color:var(--tinta-2) }
.py-etapa__d b{ font-family:var(--sans); font-weight:650; color:var(--tinta) }
.py-etapa__liga{ margin:.55rem 0 0; font-size:.94rem }

/* ---------------------------------------------------------------- Calendario de Proyecto País */
.py-cal{ margin-top:clamp(2.75rem,5vw,4rem) }
.py-cal__l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem }
.py-cal__l li{ position:relative; display:grid; align-content:start; gap:.3rem; padding:1.15rem 1.25rem 1.3rem; border-radius:18px; background:var(--py-tierra) }
.py-cal__f{ font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--petroleo) }
.py-cal__l b{ font-family:var(--sans); font-size:1.12rem; font-weight:650; letter-spacing:-.01em; color:var(--tinta) }
.py-cal__d{ font-family:var(--lee); font-size:.95rem; line-height:1.45; color:var(--tinta-2) }
.py-cal__l li[data-estado="curso"]{ background:var(--noche) }
.py-cal__l li[data-estado="curso"] .py-cal__f{ color:var(--sol-2) }
.py-cal__l li[data-estado="curso"] b{ color:var(--papel) }
.py-cal__l li[data-estado="curso"] .py-cal__d{ color:#DCE3E6 }
.py-cal__ya{ justify-self:start; order:-1; margin-bottom:.35rem; padding:.18rem .62rem .22rem; border-radius:999px; font-style:normal;
  font-family:var(--sans); font-size:.8rem; font-weight:650; color:var(--noche); background:var(--sol-2) }

/* ---------------------------------------------------------------- Pantallas medianas y móviles */
@media (max-width:63.99rem){
  .py-lee__g:has(.py-sis li:only-child){ grid-template-columns:1fr }
  /* En una columna: texto, ficha y luego los frentes. */
  .py-intro{ grid-template-columns:1fr; row-gap:0 }
  .py-intro__txt{ display:contents }
  .py-intro .py-ficha{ order:1; margin-top:var(--e-xl) }
  .py-intro .py-frentes{ order:2; margin-top:var(--e-xl) }
  .py-ficha{ max-width:40rem }
  .py-fr{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .py-lee__g{ grid-template-columns:1fr }
}
@media (max-width:47.99rem){
  .py-fr, .py-intro .py-fr{ grid-template-columns:1fr; gap:.5rem }
  .py-fr__i a, .py-intro .py-fr__i a{ grid-template-columns:1fr; grid-template-rows:auto auto; row-gap:.15rem; min-height:0; padding:.9rem 1.1rem }
  .py-intro .py-fr__i a{ min-height:0 }
  .py-fr__i b{ margin-top:0 }
  .py-sis ul{ grid-template-columns:1fr }
  .py-cal__l{ grid-template-columns:1fr; gap:.5rem }
  .py-ficha__dl{ grid-template-columns:1fr; gap:.8rem; margin-inline:.7rem }
}
@media (max-width:39.99rem){
  /* En móvil solo se rotula el momento actual; los demás quedan para lectores de pantalla. */
  .py-ciclo li:not([aria-current]) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@media (prefers-reduced-motion:reduce){
  .rv .py-frentes .py-fr__i[data-on] a::before, .rv .py-etapa .py-ciclo::after{ transition:none }
  .rv .py-frentes:not(.visto) .py-fr__i[data-on] a::before{ transform:none }
  .rv .py-etapa:not(.visto) .py-ciclo::after{ transform:none }
}