/* ==========================================================================
   Nosotros page — section-specific presentation.
   Loaded after site.css; only adds to the shared components, never renames.
   Ideas, one per section:
   - Hero: words of the title rise in sequence.
   - Historia: the stage pins to the viewport and the three chapters
     accumulate as you scroll, each entering with a sober staggered fade;
     a companion panel crossfades the photo and key facts of the chapter
     entering (on mobile it becomes a compact strip on top, no pin).
   - Equipo: cards with a brand placeholder while the photos arrive, plus a
     strip showing the coordinated team the text describes.
   - CTA: a rule that draws in and the three areas as chips.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.page-hero--nosotros { position: relative; overflow: hidden; }
.page-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-title em { font-style: italic; color: var(--blue); }

/* The split only runs with JS; while the words are being wrapped the title
   stays invisible for a moment, with a safety net in case the script fails. */
.js .hero-title[data-split]:not(.is-ready) { opacity: 0; animation: hero-title-safety 0s 1.2s forwards; }
@keyframes hero-title-safety { to { opacity: 1; } }
.hero-title .w {
  display: inline-block; opacity: 0; transform: translateY(0.45em);
  animation: word-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 42ms + 60ms);
}
@keyframes word-in { to { opacity: 1; transform: none; } }
.page-hero--nosotros .kicker, .page-hero--nosotros .lead { animation: hero-soft-in 0.9s var(--ease-out) both; }
.page-hero--nosotros .lead { animation-delay: 520ms; }
@keyframes hero-soft-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-hero__grid { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Historia: pinned stage + accumulating chapters + companion panel

   With JS on desktop (.story-section.is-pinned) the section grows to 300svh
   and the stage sticks to the viewport for two of them. Every chapter keeps
   its place from the start (nothing reflows), and the script feeds each one
   a --reveal value 0–1 derived from the scroll position. Each block of a
   chapter (numeral, label, date, paragraph) fades in with an 8px lift at its
   own offset of that value, so the entrance is staggered and fully
   scrubbable. Without JS, or with reduced motion, everything is visible in
   normal flow; on narrow screens the chapters reveal once as they enter.
   -------------------------------------------------------------------------- */
.story--chapters { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 5.5rem); }
.story--chapters .story__text { position: relative; padding-left: 3.25rem; }

.chapter { position: relative; --reveal: 1; }
.chapter + .chapter { margin-top: clamp(2.5rem, 5vw, 4rem); }
.chapter__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin-bottom: 0.85rem; }
.chapter__num {
  position: absolute; left: -3.25rem; top: -0.15rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--cream); color: var(--ink-soft);
  font-family: var(--font-serif); font-size: 0.78rem; line-height: 1;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.chapter.is-active .chapter__num { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.chapter__label { font-family: var(--font-sans); font-weight: 500; font-size: var(--step-0); line-height: 1.3; }
.chapter__when { font-size: var(--step--1); color: var(--ink-faint); }
.chapter__when::before { content: "\00b7"; margin-right: 0.75rem; }
.chapter p { transition: color var(--dur-slow) var(--ease-out); }
/* Chapters already read step back a tone; the one entering carries the ink */
.chapter:not(.is-active) p { color: var(--ink-soft); }
/* One drop cap for the book, not one per chapter */
.story--chapters .chapter + .chapter p:first-of-type::first-letter {
  float: none; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; color: inherit;
}

/* Reveal states, only with JS. --o is the block's offset inside the chapter's
   --reveal; each block takes 0.7 of the range so the paragraph lands as the
   chapter completes. The short transition smooths wheel and key steps. */
.js .story-section .chapter { --reveal: 0; }
.js .story-section .chapter.is-shown { --reveal: 1; }
.js .story-section .chapter__num { --o: 0; }
.js .story-section .chapter__label { --o: 0.1; }
.js .story-section .chapter__when { --o: 0.2; }
.js .story-section .chapter p { --o: 0.3; }
.js .story-section :is(.chapter__num, .chapter__label, .chapter__when, .chapter p) {
  --v: clamp(0, (var(--reveal) - var(--o)) / 0.7, 1);
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 8px));
  transition: opacity 240ms linear, transform 240ms var(--ease-out);
}
.js .story-section .chapter__num {
  transition: opacity 240ms linear, transform 240ms var(--ease-out),
              background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.js .story-section .chapter p { transition: opacity 240ms linear, transform 240ms var(--ease-out), color var(--dur-slow) var(--ease-out); }
/* Flow mode (narrow screens, or a stage that does not fit): a one-shot
   reveal with the site's usual pace and an 80ms stagger between blocks */
.js .story-section:not(.is-pinned) :is(.chapter__num, .chapter__label, .chapter__when, .chapter p) {
  transition-duration: var(--dur-slow); transition-delay: calc(var(--o) * 800ms);
}

/* Pinned stage */
.js .story-section.is-pinned { padding: 0; height: 300vh; height: 300svh; }
.js .story-section.is-pinned .story__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; align-content: center;
  padding: calc(var(--header-h) + 1rem) 0 1.5rem;
}
.js .story-section.is-pinned .story--chapters { align-items: stretch; }
.js .story-section.is-pinned .chapter + .chapter { margin-top: 1.75rem; }
.js .story-section.is-pinned .chapter p { max-width: 66ch; }
/* The panel takes the height of the text column, not of its photo: the
   slides leave the flow and fill whatever the row measures */
.js .story-section.is-pinned .story__panel { position: relative; top: auto; display: block; min-height: 0; }
.js .story-section.is-pinned .story__slide { position: absolute; inset: 0; }
.js .story-section.is-pinned .story__figure { height: 100%; }
/* Low viewports (laptops): the three chapters have to share the stage, so
   the text column widens, the paragraphs go to 16px/1.5 and the gaps
   tighten. The type never goes below 16px; the script falls back to flow
   mode if the block still does not fit. */
@media (max-height: 820px) {
  .js .story-section.is-pinned .story__stage { padding-top: calc(var(--header-h) + 0.75rem); padding-bottom: 0.75rem; }
  .js .story-section.is-pinned .story--chapters { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2rem, 5vw, 4rem); }
  .js .story-section.is-pinned .chapter p { font-size: 1rem; line-height: 1.5; max-width: 70ch; }
  .js .story-section.is-pinned .chapter + .chapter { margin-top: 1.1rem; }
  .js .story-section.is-pinned .chapter__head { margin-bottom: 0.5rem; }
}

.story__panel { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; }
.story__slide {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  border-radius: 2px; background: var(--navy);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);
}
.story__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.story__figure { margin: 0; height: min(66vh, 34rem); }
.story__figure img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85);
  transform: scale(1.06);
  transition: transform 6s var(--ease-out);
}
.story__slide.is-active .story__figure img { transform: scale(1); }
.story__slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(30, 33, 48, 0.92) 0, rgba(30, 33, 48, 0.55) 38%, rgba(30, 33, 48, 0.05) 70%);
}
.story__facts {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.25rem, 3vw, 2rem); color: var(--cream);
  transform: translateY(10px); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.story__slide.is-active .story__facts { transform: none; opacity: 1; transition-delay: 120ms; }
.story__facts-num {
  position: absolute; right: clamp(1.25rem, 3vw, 2rem); bottom: 100%;
  font-family: var(--font-serif); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1;
  color: rgba(255, 249, 243, 0.22);
}
.story__facts strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: var(--step-2); line-height: 1.15; }
.story__facts ul { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.35rem; font-size: var(--step--1); color: var(--on-dark-soft); }
.story__facts li { display: flex; gap: 0.6rem; align-items: baseline; }
.story__facts li::before { content: ""; flex: none; width: 0.9rem; height: 1px; background: var(--on-dark-line); transform: translateY(-0.3em); }

@media (max-width: 860px) {
  .story--chapters { display: flex; flex-direction: column; gap: 1.5rem; }
  .story--chapters .story__text { padding-left: 2.75rem; padding-top: 0.5rem; }
  .chapter__num { left: -2.75rem; width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
  .story__panel { order: -1; align-self: stretch; position: sticky; top: 0; z-index: 3; margin-inline: calc(-1 * var(--gutter)); }
  .chapter__when { flex-basis: 100%; }
  .chapter__when::before { display: none; }
  .story__slide { border-radius: 0; }
  .story__figure { height: clamp(11rem, 30vh, 16rem); }
  .story__facts { padding: 1rem var(--gutter) 1.1rem; }
  .story__facts strong { font-size: var(--step-1); }
  .story__facts ul { display: none; }
  .story__facts-num { right: var(--gutter); font-size: 2.6rem; }
  .story__slide::after { background: linear-gradient(to top, rgba(30, 33, 48, 0.9) 0, rgba(30, 33, 48, 0.45) 45%, rgba(30, 33, 48, 0.1) 100%); }
}

/* --------------------------------------------------------------------------
   Equipo: cards
   -------------------------------------------------------------------------- */
.team--nosotros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.person--card {
  --card-accent: var(--blue); --card-tint: var(--blue-tint);
  position: relative;
}
.person--card[data-area="sucesiones"] { --card-accent: var(--green); --card-tint: var(--green-tint); }
.person--card[data-area="familia"] { --card-accent: var(--bordeaux); --card-tint: var(--bordeaux-tint); }
/* The cards are not links: no hover. They arrive with the shared .reveal,
   the second one a beat after the first. */
.team--nosotros .person.reveal:nth-child(2) { transition-delay: 120ms; }
.person--card .person__photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 45%, var(--blue) 100%);
  color: var(--cream);
}
/* The portrait sits above the watermark, which only shows on a card without a photo. */
.person--card .person__photo img { position: relative; z-index: 1; object-position: center top; }
.person--card .person__photo::before {
  content: ""; position: absolute; inset: 0;
  background: url("../../images/brand/logo-vertical-cream.webp") center 42% / auto 58% no-repeat;
  opacity: 0.07;
}
.person__monogram {
  position: relative; font-family: var(--font-serif); font-size: clamp(3.4rem, 6vw, 4.6rem);
  letter-spacing: 0.06em; line-height: 1; color: var(--cream);
}
.person__photo-note {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: 0.3rem 0.65rem; border: 1px solid var(--on-dark-line); border-radius: 999px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.person--card .person__role { color: var(--card-accent); }
.person__creds {
  list-style: none; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: grid; gap: 0.6rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft);
}
.person__creds li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.7rem; align-items: start; }
.person__creds svg { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; color: var(--card-accent); }

.person--pending { border-style: dashed; border-color: var(--line-strong); --card-accent: var(--ink-soft); --card-tint: var(--cream-3); }
.person--pending .person__photo {
  background: repeating-linear-gradient(45deg, var(--cream-2) 0 10px, var(--cream-3) 10px 20px);
  color: var(--ink-faint);
}
.person--pending .person__photo::before { display: none; }
.person--pending .person__monogram { color: var(--ink-faint); }
.person--pending .person__photo-note { border-color: var(--line-strong); color: var(--ink-soft); background: var(--cream); }
.person__pending-note {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-top: 1.1rem; padding: 0.75rem 0.9rem;
  font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft);
  background: var(--cream-2); border-radius: 2px;
}
.person__pending-note svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Equipo: the four trades behind one process. A plain index, no icons: each
   row names a trade and what it resolves, so the "one team" claim is read,
   not decorated. Rows are not links: no hover.
   -------------------------------------------------------------------------- */
.crew {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.crew__intro .title { margin-top: 0.25rem; max-width: 16ch; }
.crew__intro p:not(.kicker) { margin-top: 1rem; max-width: 44ch; color: var(--ink-soft); text-wrap: pretty; }
.crew__roles { margin: 0; }
.crew__role {
  display: grid; grid-template-columns: minmax(7.5rem, 0.36fr) 1fr; gap: 0.5rem 1.5rem; align-items: center;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.crew__role:last-child { border-bottom: 1px solid var(--line); }
.crew__role dt { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.2; color: var(--ink); }
.crew__role dd { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
/* Sober reveal: fade + 8px, rows a beat apart */
.crew__role.reveal { transform: translateY(8px); }
.crew__role.reveal:nth-child(2) { transition-delay: 90ms; }
.crew__role.reveal:nth-child(3) { transition-delay: 180ms; }
.crew__role.reveal:nth-child(4) { transition-delay: 270ms; }
.crew__role.reveal.is-visible { transform: none; }
@media (max-width: 820px) {
  .crew { grid-template-columns: 1fr; gap: 2rem; }
  .crew__intro .title { max-width: none; }
}
@media (max-width: 520px) {
  .crew__role { grid-template-columns: 1fr; gap: 0.3rem; padding: 1rem 0; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band--nosotros { padding-block: clamp(5rem, 11vw, 9rem); }
.cta-band--nosotros .container { grid-template-columns: minmax(0, 1.3fr) auto; gap: clamp(2rem, 5vw, 4rem); }
.cta-band__rule {
  display: block; width: 3.5rem; height: 2px; margin-bottom: 1.5rem; background: var(--cream);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.cta-band--nosotros.is-visible .cta-band__rule { transform: scaleX(1); }
.cta-band--nosotros .title { max-width: 14ch; }
.cta-band__areas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.cta-band__areas li {
  padding: 0.35rem 0.8rem; border: 1px solid var(--on-dark-line); border-radius: 999px;
  font-size: 0.82rem; font-weight: 500; color: var(--on-dark-soft);
}
.cta-band--nosotros .cta-band__actions { gap: 0.75rem; }
.cta-band--nosotros .btn { min-width: 15rem; justify-content: center; }
@media (max-width: 760px) {
  .cta-band--nosotros .container { grid-template-columns: 1fr; }
  .cta-band--nosotros .cta-band__actions { flex-direction: row; flex-wrap: wrap; }
  .cta-band--nosotros .btn { flex: 1 1 14rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion: the states stay, the movement goes
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-title[data-split]:not(.is-ready) { opacity: 1; animation: none; }
  .hero-title .w { animation: none; opacity: 1; transform: none; }
  .page-hero--nosotros .kicker, .page-hero--nosotros .lead { animation: none; }
  .story__figure img { transform: none; }
  .story__facts { transform: none; }
  /* No pin, no reveal: the three chapters are there from the start */
  .js .story-section .chapter { --reveal: 1; }
  .js .story-section :is(.chapter__num, .chapter__label, .chapter__when, .chapter p) { transition: none; transform: none; }
  .crew__role.reveal { transform: none; }
}