/* THE RESET · Qué incluye (v7)
   Una foto real de la comunidad a sangre como escenario y, encima, el plan ordenado por cadencia.
   Sin tarjetas, sin etiquetas tipo píldora y sin widgets: tipografía, filetes y una barra de luz que pasa por turnos. */
.pg{background:var(--night);padding-block:var(--sec-pad)}
.pg__photo{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:#100C09}
/* cuatro fotos apiladas, una por ítem del plan (misiones · mental training · expertos · comunidad): crossfade de .9 s.
   Cada foto entra con su zoom lento (de 1.07 a 1) y, al salir, se recoloca sin que se note. */
.pg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 46%);opacity:0;transform:scale(1.07);transform-origin:50% 40%;transition:opacity .9s ease,transform 0s linear .9s}
.pg__img[data-pg-img="0"]{--pos:50% 18%}
.pg__img[data-pg-img="1"]{--pos:50% 50%}
.pg__img[data-pg-img="2"]{--pos:50% 50%}
.pg__img.is-on{opacity:1;transform:scale(1);transition:opacity .9s ease,transform 9s cubic-bezier(.2,.6,.3,1)}
/* oscuro arriba (título), la gente a la vista en el centro y casi negro abajo (plan) */
.pg__photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 55% at 0% 0%,rgba(12,9,7,.72),transparent 72%),
  linear-gradient(180deg,rgba(12,9,7,.95) 0%,rgba(12,9,7,.7) 14%,rgba(12,9,7,.14) 30%,rgba(12,9,7,.04) 42%,rgba(12,9,7,.5) 70%,#0C0907 100%)}
.pg__photo::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 45% at 50% 108%,rgba(255,97,26,.16),transparent 70%);pointer-events:none}

.pg__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px clamp(32px,5vw,72px)}
/* en dos columnas, la línea base del título Thunder coincide con la del último renglón del texto */
@media (min-width:1101px){.pg__head .h2{margin-bottom:-.06em}}
.pg__head .lead{margin:0;max-width:56ch;padding-bottom:4px;color:var(--bone-2)}
.pg__head .lead strong{color:var(--bone)}

/* el hueco donde se ve a la gente; el pie de foto cierra el hueco */
.pg__cap{margin-top:clamp(200px,37vh,360px);display:flex;justify-content:flex-end;font:700 12.5px/1.2 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,231,.62)}

.pg__plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;border-top:1px solid var(--line-2)}
/* sombra anclada al plan: tapa la fila de delante de la foto y deja a la vista la de atrás */
.pg__plan{position:relative}
.pg__plan::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:-110px;bottom:-60vh;background:linear-gradient(180deg,rgba(12,9,7,0) 0,rgba(12,9,7,.62) 70px,rgba(12,9,7,.92) 130px,#0C0907 240px);pointer-events:none}
.pg__item{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;padding:clamp(18px,2.6vh,24px) clamp(18px,1.9vw,28px) 4px 0;cursor:default}
.pg__item+.pg__item{padding-left:clamp(18px,1.9vw,28px);border-left:1px solid var(--line)}
.pg__bar{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
.pg__bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ember-lo),var(--ember) 70%,#FFB27E);transform:scaleX(0);transform-origin:left}
.pg__item.is-on .pg__bar::before{animation:pgBar var(--pg-t,3.6s) linear forwards}
.pg__item.is-held .pg__bar::before{animation:none;transform:scaleX(1)}
@keyframes pgBar{to{transform:scaleX(1)}}
.pg__when{display:block;font:700 12.5px/1.2 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-hi);transition:color .4s}
.pg__item.is-on .pg__when{color:var(--ember-hi)}
.pg__t{margin-top:12px;font:800 clamp(21px,1.75vw,26px)/1.15 var(--f-sans);letter-spacing:-.025em;color:var(--bone);text-wrap:balance}
.pg__item p{margin-top:10px;font:500 16px/1.55 var(--f-sans);color:var(--bone-2);text-wrap:pretty}
.pg__item p b{font-weight:700;color:var(--bone)}

.pg__deal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 26px;margin-top:clamp(26px,4vh,40px)}
.pg__deal p{font:500 clamp(18px,1.4vw,21px)/1.35 var(--f-sans);color:var(--bone-2)}
.pg__deal b{color:var(--peach)}

html.lowfx .pg__img{transform:none;transition:opacity .6s ease}
html.lowfx .pg__img.is-on{transform:none;transition:opacity .6s ease}

@media (prefers-reduced-motion: reduce){
  .pg__img,.pg__img.is-on{transform:none;transition:opacity .01ms}
  .pg__item.is-on .pg__bar::before{animation:none;transform:scaleX(1)}
}

/* portátiles con poca altura */
@media (min-width:901px) and (max-height:760px){
  .pg__cap{margin-top:clamp(150px,28vh,220px)}
  .pg__item p{font-size:15.5px}
}

@media (max-width:1100px) and (min-width:901px){
  .pg__head{grid-template-columns:1fr}
  .pg__plan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg__item:nth-child(3){padding-left:0;border-left:0}
  .pg__item:nth-child(n+3){border-top:1px solid var(--line);margin-top:6px}
  .pg__cap{margin-top:clamp(170px,26vh,260px)}
}

@media (max-width:900px){
  .pg__head{grid-template-columns:1fr}
  /* en móvil la foto va en el flujo, entre el título y el plan */
  .pg__photo{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;margin:24px calc(var(--gutter) * -1) 0}
  .pg__img{--pos:50% 58%}
  .pg__img[data-pg-img="0"]{--pos:50% 40%}
  .pg__img[data-pg-img="1"]{--pos:50% 50%}
  .pg__img[data-pg-img="2"]{--pos:50% 50%}
  .pg__photo::after{background:linear-gradient(180deg,#0C0907 0%,rgba(12,9,7,0) 22%,rgba(12,9,7,0) 70%,#0C0907 100%)}
  .pg__cap{display:none}
  .pg__plan{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin-top:10px}
  .pg__plan::before{display:none}
  .pg__item,.pg__item+.pg__item{padding:16px 0 14px;border-left:0}
  .pg__item:nth-child(n+3){border-top:1px solid var(--line);margin-top:6px}
  .pg__item p{font-size:14.5px;line-height:1.5}
  .pg__deal{flex-direction:column;align-items:stretch;gap:14px}
  .pg__deal p{text-align:center}
}