/* =====================================================================
   La Vega · Propuestas para la página Nosotros (A, B y C)
   Usa los tokens de styles.css. Prefijos: px- común, pa- A, pb- B, pc- C.
   ===================================================================== */

/* ---------- Común ---------- */
.px-pend{position:absolute;left:var(--s-200);bottom:var(--s-200);z-index:3;font-size:.75rem;line-height:1rem;font-weight:600;background:rgba(19,18,9,.72);color:var(--bg);padding:var(--s-50) var(--s-75);border-radius:var(--r-full)}
.px-note{margin-top:var(--s-300);font-size:.875rem;line-height:1.25rem;color:var(--ink-2)}
.px-fig{position:relative;margin:0;border-radius:var(--r-3xl);overflow:hidden;background:var(--bg-2)}
.px-fig img{width:100%;height:100%;object-fit:cover}
.px-fig--logo{background:var(--red);display:grid;place-items:center}
.px-fig--logo img{width:36%;height:auto;object-fit:contain}
/* las fotos "envejecen" según la época: 3 muy antigua … 0 actual */
.px-old3 img{filter:sepia(.9) saturate(.7) contrast(1.05)}
.px-old2 img{filter:sepia(.6) saturate(.8)}
.px-old1 img{filter:sepia(.3) saturate(.9)}
.px-names{margin-top:var(--s-200);gap:var(--s-50) var(--s-75)}

/* barra para cambiar de propuesta (solo revisión, quitar al publicar) */
.px-switch{position:fixed;left:50%;bottom:var(--s-200);transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:var(--s-50);padding:var(--s-50);border-radius:var(--r-full);background:rgba(19,18,9,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:.875rem;line-height:1.25rem;font-weight:600;color:#D9CFC6}
.px-switch span{padding-inline:var(--s-100)}
.px-switch a{min-width:36px;height:36px;display:grid;place-items:center;padding-inline:var(--s-100);border-radius:var(--r-full);text-decoration:none;color:var(--bg)}
.px-switch a[aria-current]{background:var(--red);color:#fff}
.px-switch__cur{color:#BDB3A9 !important}
@media (max-width:899px){.px-switch{bottom:84px}}

/* =====================================================================
   A · Escenario fijo
   ===================================================================== */
.pa-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);color:var(--bg)}
.pa-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:pa-zoom 2.4s var(--ease) forwards}
@keyframes pa-zoom{to{transform:scale(1)}}
.pa-hero__shade{position:absolute;inset:0;background:rgba(19,18,9,.46)}
.pa-hero__text{position:relative;z-index:2;padding-bottom:calc(var(--s-900) + var(--s-400));width:100%}
.pa-hero h1{font-size:3rem;line-height:1;letter-spacing:-0.02em;margin-block:var(--s-200);max-width:760px}
@media (min-width:768px){.pa-hero h1{font-size:4.5rem;line-height:1}}
.pa-hero p{max-width:560px;font-size:1.125rem;line-height:1.75rem;color:#E9DFD6}
.pa-hero .px-pend{left:auto;right:var(--s-200)}

.pa-story{padding-block:var(--s-800)}
@media (min-width:768px){.pa-story{padding-block:var(--s-900)}}
.pa-grid{display:grid;gap:var(--s-600)}
.pa-stage{display:none}
.pa-step{padding-block:var(--s-600);border-top:1px solid var(--line)}
.pa-step__year{font-size:3.75rem;line-height:1;font-weight:600;letter-spacing:-0.03em;color:var(--red);margin-bottom:var(--s-200)}
.pa-step h3{font-size:1.5rem;line-height:2rem;margin-bottom:var(--s-100)}
.pa-step p{color:var(--ink-2);max-width:520px}
.pa-step p+p{margin-top:var(--s-100)}
.pa-step__fig .px-fig{margin-top:var(--s-300);aspect-ratio:3/2}
@media (min-width:960px){
  .pa-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-900);align-items:start}
  .pa-stage{display:block;position:sticky;top:0;height:100svh;padding-block:calc(var(--s-900) + var(--s-200)) var(--s-600);box-sizing:border-box}
  .pa-years{position:relative;height:6rem;overflow:hidden;margin-bottom:var(--s-300)}
  .pa-year{position:absolute;left:0;top:0;font-size:6rem;line-height:1;font-weight:700;letter-spacing:-0.04em;color:var(--red);white-space:nowrap;transform:translateY(100%);opacity:0;transition:transform 700ms var(--ease),opacity 700ms var(--ease)}
  .pa-year.is-on{transform:none;opacity:1}
  .pa-year.is-past{transform:translateY(-100%);opacity:0}
  .pa-frames{position:relative;height:calc(100% - 6rem - var(--s-300) - 56px)}
  .pa-frame{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity 900ms var(--ease),transform 1400ms var(--ease)}
  .pa-frame.is-on{opacity:1;transform:none}
  .pa-ticks{display:flex;gap:var(--s-75);list-style:none;margin:var(--s-300) 0 0;padding:0}
  .pa-ticks li{flex:1;font-size:.75rem;line-height:1rem;font-weight:600;color:var(--ink-2)}
  .pa-ticks li::before{content:"";display:block;height:4px;border-radius:var(--r-full);background:var(--line);margin-bottom:var(--s-75);transition:background-color var(--dur) var(--ease)}
  .pa-ticks li.is-on{color:var(--red)}.pa-ticks li.is-on::before,.pa-ticks li.is-past::before{background:var(--red)}
  .pa-step{min-height:78svh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding-block:var(--s-600);opacity:.28;transition:opacity 600ms var(--ease)}
  .pa-step.is-on{opacity:1}
  .pa-step__fig{display:none}
  .pa-step__year{font-size:1rem;line-height:1.5rem;letter-spacing:.02em;margin-bottom:var(--s-100)}
  .pa-step h3{font-size:2.25rem;line-height:2.5rem;margin-bottom:var(--s-200)}
  .pa-step p{font-size:1.125rem;line-height:1.75rem}
  .pa-steps{padding-block:18svh}
}
.pa-concept__grid{display:grid;gap:var(--s-600)}
@media (min-width:960px){.pa-concept__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--s-900);align-items:center}}
.pa-concept__media{border-radius:var(--r-3xl);overflow:hidden;aspect-ratio:4/5}
.pa-concept__media img{width:100%;height:100%;object-fit:cover}
.pa-concept__list{list-style:none;margin:0;padding:0;display:grid}
.pa-concept__list li{display:grid;grid-template-columns:56px 1fr;gap:var(--s-200);padding-block:var(--s-300);border-top:1px solid #313131}
.pa-cn{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--orange)}
.pa-concept__list h3{font-size:1.25rem;line-height:1.75rem;color:var(--bg);margin-bottom:var(--s-50)}
.pa-concept__list p{color:#BDB3A9}

/* =====================================================================
   B · Recorrido horizontal
   ===================================================================== */
.pb-hero{padding-top:calc(var(--s-900) + var(--s-500));padding-bottom:var(--s-800)}
.pb-hero__grid{display:grid;gap:var(--s-600);align-items:end}
@media (min-width:960px){.pb-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s-800)}}
.pb-hero h1{font-size:3rem;line-height:1;letter-spacing:-0.02em;margin-block:var(--s-200)}
@media (min-width:768px){.pb-hero h1{font-size:4.5rem;line-height:1}}
.pb-hero__text>p{max-width:560px;font-size:1.125rem;line-height:1.75rem;color:var(--ink-2)}
.pb-hero__text>.pb-hero__since{margin-top:var(--s-500);font-size:3.75rem;line-height:1;font-weight:700;letter-spacing:-0.03em;color:var(--red)}
.pb-hero__since span{display:block;font-size:.875rem;line-height:1.25rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s-75)}
/* foto con forma de arco, como la Puerta de Bisagra */
.pb-arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px var(--r-3xl) var(--r-3xl);overflow:hidden;background:var(--bg-2)}
.pb-arch img{width:100%;height:100%;object-fit:cover}
.pb-arch .px-pend{left:50%;transform:translateX(-50%);white-space:nowrap}

.pb-story{position:relative;background:var(--surface);border-block:1px solid var(--line)}
.pb-pin{padding-block:var(--s-800)}
.pb-top{display:grid;gap:var(--s-400);margin-bottom:var(--s-500)}
.pb-ruler{position:relative;height:44px}
.pb-ruler__line{position:absolute;left:0;right:0;top:9px;height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px)}
.pb-ruler__fill{position:absolute;inset:0;width:0;background:repeating-linear-gradient(90deg,var(--red) 0 10px,transparent 10px 18px)}
.pb-ruler ol{list-style:none;margin:0;padding:0}
.pb-ruler li{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%))}
.pb-ruler li::before{content:"";display:block;width:22px;height:22px;margin:-0px auto 0;border-radius:var(--r-full);background:var(--surface);border:3px solid var(--line);transition:all var(--dur) var(--ease)}
.pb-ruler li span{display:block;margin-top:var(--s-50);font-size:.75rem;line-height:1rem;font-weight:600;color:var(--ink-2);text-align:center}
.pb-ruler li.is-on::before,.pb-ruler li.is-past::before{border-color:var(--red);background:var(--red)}
.pb-ruler li.is-on span{color:var(--red)}
/* móvil: paneles en carrusel deslizable */
.pb-track{display:flex;gap:var(--s-300);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);scrollbar-width:none}
.pb-track::-webkit-scrollbar{display:none}
.pb-panel{flex:0 0 86%;scroll-snap-align:center;display:grid;gap:var(--s-300);align-content:start}
.pb-fig{aspect-ratio:4/3}
.pb-txt .pb-year{font-size:3.75rem;line-height:1;font-weight:700;letter-spacing:-0.03em;color:var(--red);margin-bottom:var(--s-100)}
.pb-txt h3{font-size:1.5rem;line-height:2rem;margin-bottom:var(--s-100)}
.pb-txt p{color:var(--ink-2)}
.pb-txt p+p{margin-top:var(--s-100)}
@media (min-width:960px){
  .pb-story.is-pinned{height:var(--pb-h,400vh)}
  .pb-story.is-pinned .pb-pin{position:sticky;top:0;height:100svh;box-sizing:border-box;padding-block:calc(var(--s-900) + var(--s-100)) var(--s-500);overflow:hidden;display:flex;flex-direction:column}
  .pb-top{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:var(--s-800);width:100%;box-sizing:border-box}
  .pb-story.is-pinned .pb-track{flex:1;overflow:visible;scroll-snap-type:none;padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));will-change:transform;gap:var(--s-700)}
  .pb-panel{flex:0 0 min(860px,70vw);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-500);align-items:center;align-content:center;opacity:.35;transition:opacity 600ms var(--ease)}
  .pb-panel.is-on{opacity:1}
  .pb-fig{aspect-ratio:4/5;max-height:58svh;width:100%}
  .pb-txt .pb-year{font-size:6rem}
}
.pb-cards{display:grid;gap:var(--s-300)}
@media (min-width:768px){.pb-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pb-cards{grid-template-columns:repeat(4,1fr)}}
.pb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3xl);padding:var(--s-75);display:grid;align-content:start}
.pb-card__img{aspect-ratio:4/3;border-radius:calc(var(--r-3xl) - var(--s-75));overflow:hidden;margin-bottom:var(--s-200)}
.pb-card__img img{width:100%;height:100%;object-fit:cover}
.pb-card h3{font-size:1.125rem;line-height:1.75rem;padding-inline:var(--s-100)}
.pb-card p{font-size:.875rem;line-height:1.25rem;color:var(--ink-2);padding:var(--s-50) var(--s-100) var(--s-100)}
.gallery.pb-strip{display:flex;gap:var(--s-200);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));scrollbar-width:none;grid-auto-rows:auto;cursor:grab}
.gallery.pb-strip::-webkit-scrollbar{display:none}
.gallery.pb-strip a{flex:0 0 min(75vw,420px);aspect-ratio:4/5;scroll-snap-align:start}
.gallery.pb-strip a:nth-child(3n+2){aspect-ratio:1/1;align-self:end}
.pb-strip.is-drag{cursor:grabbing;scroll-snap-type:none}

/* =====================================================================
   C · Álbum de recuerdos
   ===================================================================== */
.pc-hero{padding-top:calc(var(--s-900) + var(--s-500))}
.pc-hero__head{text-align:center;display:grid;justify-items:center;margin-bottom:var(--s-600)}
.pc-counter{font-size:5rem;line-height:1;font-weight:700;letter-spacing:-0.04em;color:var(--red);margin-top:var(--s-200);font-variant-numeric:tabular-nums}
@media (min-width:768px){.pc-counter{font-size:8rem}}
.pc-hero h1{font-size:2.25rem;line-height:2.5rem;letter-spacing:-0.02em;margin-block:var(--s-200);max-width:760px}
@media (min-width:768px){.pc-hero h1{font-size:3rem;line-height:1}}
.pc-hero__head>p:last-child{max-width:600px;font-size:1.125rem;line-height:1.75rem;color:var(--ink-2)}
.pc-hero__frame{position:relative;border-radius:var(--r-3xl);overflow:hidden;aspect-ratio:21/9;background:var(--bg-2)}
@media (max-width:767px){.pc-hero__frame{aspect-ratio:4/5}}
.pc-hero__frame img{width:100%;height:100%;object-fit:cover}

.pc-line{position:relative;margin-top:var(--s-600)}
.pc-rail{position:absolute;left:20px;top:0;width:12px;height:100%;overflow:visible}
.pc-rail line{stroke-width:4;stroke-linecap:butt}
.pc-rail__bg{stroke:var(--line);stroke-dasharray:12 10}
.pc-rail__fg{stroke:var(--red);stroke-dasharray:12 10}
.pc-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-800)}
.pc-item{position:relative;padding-left:var(--s-700);display:grid;gap:var(--s-300)}
.pc-dot{position:absolute;left:14px;top:var(--s-100);width:24px;height:24px;border-radius:var(--r-full);background:var(--bg);border:3px solid var(--line);transition:all 500ms var(--ease)}
.pc-item.is-in .pc-dot{background:var(--red);border-color:var(--red);transform:scale(1.15)}
.pc-year{font-size:3rem;line-height:1;font-weight:700;letter-spacing:-0.03em;color:var(--red);margin-bottom:var(--s-100)}
.pc-text h3{font-size:1.5rem;line-height:2rem;margin-bottom:var(--s-100)}
.pc-text p{color:var(--ink-2);max-width:480px}
.pc-text p+p{margin-top:var(--s-100)}
.pc-text,.pc-pol{opacity:0;transition:opacity 800ms var(--ease),transform 900ms var(--ease)}
.pc-text{transform:translateY(32px)}
.pc-pol{transform:translateY(48px) rotate(calc(var(--rot) * -3))}
.pc-item.is-in .pc-text{opacity:1;transform:none}
.pc-item.is-in .pc-pol{opacity:1;transform:rotate(var(--rot));transition-delay:120ms}
.pc-pol{position:relative;margin:0;background:#fff;padding:var(--s-100) var(--s-100) 0;border-radius:var(--r-md);box-shadow:0 1px 2px rgba(43,27,25,.08),0 12px 32px rgba(43,27,25,.12);max-width:420px}
.pc-pol img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.pc-pol figcaption{padding:var(--s-100) var(--s-25) var(--s-200);font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--ink-2);text-align:center}
.pc-pol--names{background:var(--red)}
.pc-pol--names figcaption{color:#F6E9DF}
.pc-strike{aspect-ratio:1/1;display:grid;align-content:center;justify-items:center;gap:var(--s-75);color:#fff;font-size:2rem;line-height:2.5rem;font-weight:700;letter-spacing:-0.02em}
.pc-strike span{position:relative;opacity:.35;transition:opacity 500ms var(--ease)}
.pc-strike span::after{content:"";position:absolute;left:-6%;top:55%;height:4px;width:0;background:#F6E9DF;border-radius:2px;transition:width 450ms var(--ease)}
.pc-strike span.is-on{opacity:1}
.pc-strike span.is-out{opacity:.55}
.pc-strike span.is-out::after{width:112%}
.pc-strike span:last-child.is-on{font-size:2.6rem;color:#fff}
@media (min-width:900px){
  .pc-rail{left:50%;margin-left:-6px}
  .pc-item{grid-template-columns:1fr 1fr;padding-left:0;gap:var(--s-900);align-items:center}
  .pc-dot{left:50%;top:50%;margin:-12px 0 0 -12px}
  .pc-item--l .pc-text{text-align:right;justify-self:end}
  .pc-item--l .pc-text p{margin-left:auto}
  .pc-item--l .px-names{justify-content:flex-end}
  .pc-item--r .pc-text{order:2}
  .pc-item--l .pc-pol{justify-self:start}
  .pc-item--r .pc-pol{justify-self:end}
  .pc-year{font-size:4.5rem}
}
.pc-concept{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-300)}
@media (min-width:768px){.pc-concept{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pc-concept{grid-template-columns:repeat(4,1fr)}}
.pc-concept li{border-radius:var(--r-3xl);background:var(--dark-2);padding:var(--s-300);border:1px solid #313131;display:grid;gap:var(--s-100);align-content:start}
.pc-num{display:block;width:84px;height:84px;margin:calc(-1 * var(--s-75)) 0 var(--s-75) calc(-1 * var(--s-75));color:var(--orange)}
.pc-num svg{width:100%;height:100%;overflow:visible}
.pc-concept h3{font-size:1.25rem;line-height:1.75rem;color:var(--bg)}
.pc-concept p{color:#BDB3A9}
.gallery.pc-album{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:var(--s-300) var(--s-200)}
@media (min-width:768px){.gallery.pc-album{grid-template-columns:repeat(4,1fr);gap:var(--s-500) var(--s-300)}}
.gallery.pc-album a{background:#fff;padding:var(--s-75) var(--s-75) 0;border-radius:var(--r-md);overflow:visible;box-shadow:0 1px 2px rgba(43,27,25,.08),0 10px 24px rgba(43,27,25,.10);transform:rotate(var(--rot));transition:transform 600ms var(--ease),box-shadow 600ms var(--ease);text-decoration:none}
.gallery.pc-album a:hover{transform:rotate(0) translateY(-4px) scale(1.03);box-shadow:0 2px 4px rgba(43,27,25,.08),0 18px 40px rgba(43,27,25,.16);z-index:2;position:relative}
.gallery.pc-album a:hover img{transform:none}
.gallery.pc-album img{aspect-ratio:1/1;height:auto;border-radius:2px}
.gallery.pc-album span{display:block;padding:var(--s-75) var(--s-25) var(--s-100);font-size:.75rem;line-height:1rem;font-weight:600;color:var(--ink-2);text-align:center}

@media (prefers-reduced-motion:reduce){
  .pa-hero__img{animation:none;transform:none}
  .pc-text,.pc-pol{opacity:1;transform:rotate(var(--rot,0))}
  .pc-strike span{opacity:1}
}
