/* pages.css — SPEC-v7 inner pages (page.php): page header, sections, cards, FAQ, CTA band, related links, case cards,
   team, person and blog. Site language: dark stone, ember glow, slabs. Mobile first; wider rules at 720 / 960 px.
   .wrap and the footer come from descent.css; the rails of /casos-de-exito from series.css. */

.pg-body { background: var(--stone-900); }
.pg { display: block; }

/* ---------- page header: lit stone + ember glow (no video) ---------- */
.pg-head {
  position: relative; overflow: clip; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(2rem, 7vh, 4.5rem)) 0 clamp(2.5rem, 7vh, 4.5rem);
  background: url(/assets/img/rock/rock-wall-a.webp) 50% 30% / 1200px auto repeat, var(--stone-800);
}
.pg-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 50% 0%, rgba(11, 7, 5, .55) 0%, rgba(11, 7, 5, .9) 70%), linear-gradient(180deg, rgba(18, 12, 9, 0) 60%, var(--stone-900) 100%);
}
.pg-head__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 20%, rgba(240, 122, 34, .2) 0%, rgba(163, 38, 14, .09) 40%, rgba(5, 3, 2, 0) 72%);
}
.pg-head__wrap { position: relative; }
.pg-crumbs { margin-bottom: var(--s-5); font-size: var(--fs-small); }
.pg-crumbs ol { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0; padding: 0; list-style: none; }
.pg-crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--bone-200); }
.pg-crumbs li + li::before { content: "/"; color: var(--bone-600); }
.pg-crumbs a { color: var(--bone-400); text-decoration: none; padding-block: .3rem; }
.pg-crumbs a:hover, .pg-crumbs a:focus-visible { color: var(--fire-8); text-decoration: underline; text-underline-offset: .2em; }
.pg-head__eyebrow { margin-bottom: var(--s-3); }
.pg-head__title { max-width: 22ch; font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4.25rem); line-height: 1.05; letter-spacing: -.015em; filter: var(--display-glow); }
.pg-head__lead { max-width: 60ch; margin-top: var(--s-5); color: var(--bone-200); text-shadow: var(--legible-shadow); }

/* ---------- sections ---------- */
.pg-sec { position: relative; padding-block: clamp(2.5rem, 7vh, 4.75rem); }
.pg-sec + .pg-sec { border-top: 1px solid rgba(192, 138, 62, .12); }
.pg-sec__title { max-width: 30ch; margin-bottom: var(--s-4); font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.15; color: var(--bone-100); }
.pg-prose { max-width: 68ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.7; color: var(--bone-200); }
.pg-prose + .pg-prose { margin-top: .9em; }
.pg-muted { color: var(--bone-400); }

.pg-list { display: grid; gap: var(--s-3); max-width: 68ch; margin-top: var(--s-4); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; }
.pg-list > li { position: relative; padding-left: 1.4em; }
.pg-list > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .45em; height: .45em; border-radius: 50%; background: var(--fire-6); box-shadow: 0 0 10px rgba(240, 122, 34, .6); }
.pg-list--plain > li::before { width: .35em; height: .35em; box-shadow: none; background: var(--pig-ochre); }
.pg-quote { max-width: 46ch; margin-top: var(--s-5); padding-left: var(--s-5); border-left: 2px solid var(--fire-6); font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); line-height: 1.45; color: var(--fire-9); }
.pg-quote footer { margin-top: var(--s-2); font-family: var(--font-body); font-style: normal; font-size: var(--fs-small); color: var(--bone-400); }

.pg-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.pg-links .btn-ghost { min-height: 44px; height: auto; padding-block: .55rem; white-space: normal; text-align: left; }

/* offer page (microseries, 2026-11-03): statement, inline CTA, stepper, checklist, note */
.pg-statement { max-width: 34ch; margin-top: var(--s-6); padding-left: var(--s-5); border-left: 3px solid var(--fire-6); font: 400 clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem)/1.22 var(--font-display); color: var(--fire-9); text-wrap: balance; }
.pg-sec__cta { margin-top: var(--s-6); }
.pg-sec__cta .btn-fire { height: auto; min-height: 52px; padding-block: .8rem; white-space: normal; }
.pg-steps { --n: 3rem; display: grid; gap: var(--s-4); max-width: 52rem; margin-top: var(--s-5); }
.pg-step { position: relative; display: grid; grid-template-columns: var(--n) 1fr; gap: var(--s-3); }
.pg-step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--n) / 2 - 1px); top: var(--n); bottom: calc(-1 * var(--s-4)); width: 2px; background: linear-gradient(var(--fire-6), rgba(192, 138, 62, .15)); }
.pg-step__n, .pg-check > li::before { display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%; background: var(--grad-btn); color: var(--ink-on-fire); font: 600 1rem/1 var(--font-body); }
.pg-step__card { padding: var(--s-4) clamp(1rem, 3vw, 1.5rem); border: 1px solid rgba(192, 138, 62, .22); border-radius: var(--r-slab); background: var(--grad-slab); }
.pg-step__title { margin-bottom: var(--s-2); font-size: var(--fs-h3); line-height: 1.2; color: var(--fire-9); }
.pg-check { --n: 1.5em; display: grid; gap: var(--s-3) var(--s-6); max-width: 60rem; margin-top: var(--s-5); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--bone-100); }
@media (min-width: 720px) { .pg-check { grid-template-columns: 1fr 1fr; } }
.pg-check > li { position: relative; padding-left: 2.3em; }
.pg-check > li::before { content: ""; position: absolute; left: 0; }
.pg-check > li::after { content: ""; position: absolute; left: .55em; top: .25em; width: .38em; height: .72em; border: solid var(--ink-on-fire); border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.pg-note { margin-top: var(--s-5); font: italic var(--fs-lead)/1.45 var(--font-display); color: var(--bone-200); }

/* ---------- cards (slabs) ---------- */
.pg-cards { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 720px) { .pg-cards { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-5); } }
.pg-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5);
  border: 1px solid rgba(192, 138, 62, .2); border-radius: var(--r-slab); background: var(--grad-slab);
  box-shadow: inset 0 1px 0 rgba(249, 198, 107, .08), 0 30px 60px -34px rgba(0, 0, 0, .85);
  transition: border-color var(--d-s) var(--ease-stroke), transform var(--d-s) var(--ease-reveal), box-shadow var(--d-s) var(--ease-stroke);
}
.pg-card__title { font-size: var(--fs-h3); line-height: 1.22; color: var(--fire-9); }
.pg-card__title a { color: inherit; text-decoration: none; }
.pg-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole slab is the link */
.pg-card__text { color: var(--bone-200); line-height: 1.6; }
.pg-card__more { margin-top: auto; padding-top: var(--s-2); color: var(--fire-7); font-weight: 500; font-size: var(--fs-small); }
.pg-card__more .sym { transition: transform var(--d-xs) var(--ease-stroke); }
.pg-card--link:hover, .pg-card--link:focus-within { border-color: rgba(246, 163, 58, .6); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(249, 198, 107, .12), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 60px -28px rgba(217, 84, 26, .6); }
.pg-card--link:hover .pg-card__more .sym, .pg-card--link:focus-within .pg-card__more .sym { transform: translateX(4px); }
.pg-card--link:focus-within { outline: 2px solid var(--fire-8); outline-offset: 3px; }
.pg-card__title a:focus-visible { outline: none; box-shadow: none; }

/* ---------- FAQ ---------- */
.pg-faq__list { display: grid; gap: var(--s-5); max-width: 52rem; margin-top: var(--s-3); }
.pg-faq__item { padding-top: var(--s-4); border-top: 1px solid rgba(192, 138, 62, .2); }
.pg-faq__q { font-size: var(--fs-h3); line-height: 1.25; color: var(--fire-9); }
.pg-faq__a { max-width: 68ch; margin-top: var(--s-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.65; }

/* ---------- «siguiente paso» band ---------- */
.pg-cta { padding-block: clamp(3rem, 9vh, 6rem); }
.pg-cta__wrap {
  position: relative; display: grid; justify-items: center; gap: var(--s-4); max-width: 56rem; padding: clamp(2rem, 6vw, 3.75rem) clamp(1.25rem, 5vw, 3.5rem);
  border: 1px solid rgba(246, 163, 58, .32); border-radius: var(--r-slab); text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, rgba(217, 84, 26, .26) 0%, rgba(122, 26, 10, .12) 45%, rgba(18, 12, 9, 0) 75%), var(--grad-slab);
  box-shadow: var(--sh-slab);
}
.pg-cta__title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; }
.pg-cta__text { max-width: 54ch; color: var(--bone-200); }
.pg-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.pg-cta__mail { font-size: var(--fs-small); color: var(--bone-400); }
.pg-cta__mail a { color: var(--fire-8); text-underline-offset: .18em; overflow-wrap: anywhere; }

/* ---------- related links ---------- */
.pg-related { padding-block: 0 clamp(3rem, 8vh, 5rem); }
.pg-related__title { margin-bottom: var(--s-4); font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--pig-ochre-lt); }
.pg-related__list { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .pg-related__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.pg-related__link {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--s-3); align-items: start; height: 100%; padding: var(--s-4);
  border: 1px solid rgba(192, 138, 62, .18); border-radius: var(--r-m); background: rgba(27, 19, 14, .6); color: inherit; text-decoration: none;
  transition: border-color var(--d-s) var(--ease-stroke), background-color var(--d-s) var(--ease-stroke);
}
.pg-related__link .sym { grid-column: 2; grid-row: 1; color: var(--fire-7); transition: transform var(--d-xs) var(--ease-stroke); }
.pg-related__name { grid-column: 1; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.25; color: var(--bone-100); }
.pg-related__desc { grid-column: 1 / -1; font-size: var(--fs-small); line-height: 1.5; color: var(--bone-400); }
.pg-related__link:hover, .pg-related__link:focus-visible { border-color: rgba(246, 163, 58, .55); background: rgba(36, 24, 17, .8); }
.pg-related__link:hover .sym, .pg-related__link:focus-visible .sym { transform: translateX(4px); }
.pg-404 { max-width: 40rem; }

/* ---------- case pages: catalogue cards ---------- */
.pg-works .pg-sec__wrap { display: grid; gap: var(--s-6); }
.pg-work { display: grid; gap: var(--s-5); align-items: start; }
.pg-work__poster { width: min(100%, 15rem); }
.pg-poster { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid rgba(192, 138, 62, .25); border-radius: var(--r-m); background: var(--stone-750); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 80px -40px rgba(217, 84, 26, .55); }
.pg-work__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.1; color: var(--bone-100); }
.pg-work__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); max-width: 32rem; margin: var(--s-4) 0 0; }
.pg-work__facts dt { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pig-ochre-lt); }
.pg-work__facts dd { margin: .15rem 0 0; color: var(--bone-100); }
.pg-work__syn { max-width: 60ch; margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.5; color: var(--bone-200); }
.pg-work .btn-ghost { margin-top: var(--s-5); min-height: 44px; }
@media (min-width: 720px) {
  .pg-work { grid-template-columns: 15rem 1fr; gap: var(--s-6); }
  .pg-works--grid .pg-sec__wrap { gap: var(--s-7); }
}
@media (min-width: 960px) { .pg-work { grid-template-columns: 18rem 1fr; } .pg-work__poster { width: 18rem; } }

/* ---------- team + person ---------- */
.pg-member__mono {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--grad-btn); color: var(--ink-on-fire); font: 500 1.375rem/1 var(--font-display); letter-spacing: .04em;
  box-shadow: 0 0 0 4px rgba(18, 12, 9, .9), 0 0 0 5px rgba(246, 163, 58, .45), 0 12px 30px -10px rgba(217, 84, 26, .7);
}
.pg-member__photo { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(246, 163, 58, .45); }
.pg-member__role { font-size: var(--fs-small); color: var(--pig-ochre-lt); }
@media (min-width: 720px) { .pg-team__list { grid-template-columns: repeat(auto-fill, minmax(17rem, 24rem)); } } /* one person ≠ a full-width slab */
.pg-member .pg-member__mono { margin-bottom: var(--s-2); }
.pg-person__grid { display: grid; gap: var(--s-6); }
.pg-person__aside .pg-member__mono { width: 6.5rem; height: 6.5rem; font-size: 2.125rem; }
.pg-person__aside .pg-member__photo { width: 10rem; height: 10rem; }
.pg-person__label { margin-top: var(--s-5); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--pig-ochre-lt); }
.pg-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.pg-chips li { padding: .25rem .8rem; border: 1px solid rgba(192, 138, 62, .45); border-radius: var(--r-pill); font-size: var(--fs-small); color: var(--bone-100); }
.pg-person__links { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.pg-person__links a { display: inline-block; padding-block: .35rem; color: var(--fire-8); text-underline-offset: .2em; overflow-wrap: anywhere; }
.pg-person__links a:hover, .pg-person__links a:focus-visible { color: var(--fire-9); }
.pg-person__block + .pg-person__block { margin-top: var(--s-7); }
/* long filmographies: one titled sub-list per group */
.pg-credits__group { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(192, 138, 62, .16); }
.pg-credits__group:first-of-type { margin-top: var(--s-4); }
.pg-credits__title { margin: 0; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pig-ochre-lt); }
.pg-credits__group .pg-list { margin-top: var(--s-3); gap: var(--s-2); }
.pg-credits__group .pg-list > li { overflow-wrap: anywhere; }
.pg-credits__note { margin-top: var(--s-5); color: var(--bone-400); font-style: italic; }
.pg-list a, .pg-prose a { color: var(--fire-8); text-underline-offset: .2em; }
.pg-list a:hover, .pg-list a:focus-visible, .pg-prose a:hover, .pg-prose a:focus-visible { color: var(--fire-9); }
@media (min-width: 960px) { .pg-person__grid { grid-template-columns: 16rem 1fr; gap: var(--s-8); } .pg-person__aside { position: sticky; top: calc(var(--nav-h) + 2rem); } }

/* ---------- blog ---------- */
.pg-empty { padding: var(--s-5); border: 1px dashed rgba(192, 138, 62, .35); border-radius: var(--r-m); color: var(--bone-400); font-style: italic; }
.pg-posts { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.pg-post-card__date { font-size: var(--fs-small); color: var(--bone-400); }
.pg-post__meta { font-size: var(--fs-small); color: var(--bone-400); }
.pg-post__meta a { color: var(--fire-8); }
.pg-post__cover { width: 100%; max-width: 56rem; height: auto; margin-top: var(--s-5); border-radius: var(--r-m); }
.pg-post__body { max-width: 68ch; margin-top: var(--s-5); }
.pg-post__body > .pg-sec__title { margin-top: var(--s-7); }
.pg-post__body > * + .pg-prose, .pg-post__body > * + .pg-list { margin-top: var(--s-4); }
.pg-post__h3 { max-width: 40ch; margin-top: var(--s-6); font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); line-height: 1.25; color: var(--bone-100); }
.pg-post__h3 + .pg-prose { margin-top: var(--s-3); }
.pg-post__body strong { color: var(--bone-100); font-weight: 600; }
.pg-post__body .pg-prose { overflow-wrap: break-word; }

/* ---------- casos: the landing rails on a plain page ---------- */
.pg--cases_hub .series { background: transparent; }

/* ---------- reveal-lite (pages.js): only blocks that start below the fold ---------- */
html.pg-reveal .is-pending { opacity: 0; transform: translateY(18px); }
html.pg-reveal .is-pending.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-reveal), transform 1s var(--ease-reveal); }
@media (prefers-reduced-motion: reduce) { html.pg-reveal .is-pending { opacity: 1; transform: none; } }