/* ============================================================
   Nuestra historia — el CSS del mockup aprobado mockups/nuestra-historia.html, tal cual
   (brief §0). Solo se quitaron las reglas de su barra de demostración (.intro, .brand, .note,
   .hint). Lo que pide el build va aparte, al final.
   ============================================================ */
  :root{
    --paper:#EFEBE1; --ink:#1B211C; --muted:#6B7368; --rule:#CFC8B8; --moss:#1F4D3A; --moss-deep:#12332A; --mist:#DCE7E6; --copper:#B4632E;
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:light}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{padding-inline:clamp(16px,5vw,64px)}
  .eb{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--moss);margin:0 0 12px}
  h1,h2,h3{text-wrap:balance}
  .btn{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 20px;border:1px solid currentColor;border-radius:2px;color:inherit;text-decoration:none;margin-top:22px}

  /* hero */
  .hero{padding-block:72px 64px;max-width:64ch}
  .hero h1{font-weight:300;font-size:clamp(36px,6vw,74px);margin:0;line-height:1;letter-spacing:-.02em}
  .hero h1 b{font-weight:800;display:block}
  .hero p{color:#3B423C;line-height:1.55;margin:18px 0 0;font-size:clamp(15px,1.7vw,19px);max-width:48ch}
  .idx{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
  .idx b{color:var(--ink);font-weight:600;margin-right:6px}

  /* parallax chapters */
  .ch{position:relative;min-height:100vh;min-height:100dvh;display:grid;align-items:center;overflow:hidden;padding-block:12vh;box-sizing:border-box}
  .ch .bg{position:absolute;left:0;right:0;top:-18%;height:136%;background-size:cover;background-position:center;will-change:transform;z-index:0}
  .ch .bg.ph{display:flex;align-items:flex-end;padding:18px clamp(16px,5vw,64px);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
             background:repeating-linear-gradient(135deg,rgba(27,33,28,.04) 0 12px,transparent 12px 24px),var(--mist)}
  .ch .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(239,235,225,.96) 0%,rgba(239,235,225,.86) 45%,rgba(239,235,225,.2) 100%)}
  .ch.dark .veil{background:linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.86) 45%,rgba(18,51,42,.3) 100%)}
  .ch.dark{color:var(--mist)}
  .ch.dark .eb{color:#9FC7B4}
  .ch.dark p{color:#D7E3DB}
  .ch .in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,40rem) 1fr;gap:clamp(24px,5vw,72px);align-items:center}
  .ch .num{font-weight:300;font-size:clamp(64px,10vw,140px);line-height:.85;letter-spacing:-.04em;opacity:.18;position:absolute;right:clamp(16px,5vw,64px);top:10vh;z-index:2;font-variant-numeric:tabular-nums}
  .ch h2{font-weight:300;font-size:clamp(30px,4.6vw,58px);margin:0;line-height:1.02;letter-spacing:-.015em}
  .ch h2 b{font-weight:800}
  .ch p{line-height:1.65;margin:16px 0 0;font-size:clamp(15px,1.5vw,17px);color:#3B423C;max-width:48ch}
  .ch blockquote{margin:22px 0 0;padding-left:16px;border-left:2px solid currentColor;font-weight:300;font-size:clamp(18px,2.2vw,26px);line-height:1.3}
  .ch blockquote small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;font-weight:600}
  .card{position:relative;z-index:2;justify-self:end;width:min(100%,380px);aspect-ratio:3/4;border:1px solid var(--rule);background:rgba(255,255,255,.55);
        display:flex;align-items:flex-end;padding:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-sizing:border-box;
        box-shadow:0 30px 60px rgba(27,33,28,.18);will-change:transform;overflow:hidden}
  .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .card span{position:relative;background:rgba(239,235,225,.88);padding:4px 8px;border-radius:2px}
  .dark .card{border-color:rgba(220,231,230,.3);background:rgba(255,255,255,.08)}
  .people{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
  .people div{aspect-ratio:3/4;border:1px dashed var(--rule);display:flex;align-items:flex-end;padding:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);box-sizing:border-box;background:rgba(255,255,255,.4)}
  .people b{display:block;color:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:none;margin-bottom:2px}
  .people .pend{border-color:var(--copper);color:var(--copper)}
  .beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 32px;margin-top:30px;max-width:900px}
  .beliefs div{border-top:1.5px solid currentColor;padding-top:12px}
  .beliefs b{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
  .beliefs span{font-size:13px;line-height:1.5;display:block;opacity:.85}
  .close{padding-block:90px;text-align:center}
  .close h2{font-weight:300;font-size:clamp(30px,5vw,64px);margin:0;line-height:1}
  .close h2 b{font-weight:800}
  .close .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .close .btn{color:var(--moss)}

  @media (max-width:760px){
    .ch .in{grid-template-columns:1fr}
    .card{justify-self:start;width:min(100%,300px);aspect-ratio:4/3}
    .ch .veil{background:linear-gradient(180deg,rgba(239,235,225,.3) 0%,rgba(239,235,225,.92) 40%,rgba(239,235,225,.97) 100%)}
    .ch.dark .veil{background:linear-gradient(180deg,rgba(18,51,42,.4) 0%,rgba(18,51,42,.94) 40%,rgba(18,51,42,.98) 100%)}
    .ch .num{top:auto;bottom:6vh;opacity:.12}
    .people{grid-template-columns:repeat(2,1fr)}
    .beliefs{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){.ch .bg,.card{transform:none!important}}

  .ch.sub{min-height:auto;padding-block:10vh}
  .ch.sub .in{align-items:start}
  .portrait{padding:0}
  .portrait .ph{height:70vh;border:0;border-radius:0;background:var(--mist);display:flex;align-items:flex-end;padding:24px clamp(16px,5vw,64px);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.7;box-sizing:border-box}
  .beliefs{grid-template-columns:1fr 1fr;max-width:1000px}
  .beliefs span{font-size:14px}
  .close{background:#FBFAF6;padding-block:100px 0}
  .close .line{font-weight:300;font-size:clamp(17px,2vw,24px);margin:22px auto 0;max-width:40ch;color:#3B423C}
  .close .line.b{font-weight:600;color:var(--ink);margin-top:10px}
  .close .btns{margin-top:28px}
  .close .ph.last{margin-top:64px;height:60vh;border:0;border-radius:0;background:var(--mist);display:flex;align-items:flex-end;padding:24px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-sizing:border-box;margin-inline:calc(-1*clamp(16px,5vw,64px))}
  @media (max-width:760px){.beliefs{grid-template-columns:1fr}.portrait .ph{height:50vh}}

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   (d) Espacios de foto F##: el fondo de cada capítulo, su tarjeta, el retrato y la foto del
   cierre llevan el código y la descripción dentro del bloque del mockup; la foto, cuando llega,
   lo llena.
   ================================================================ */
.ch .bg > .media,.ch .bg > .foto,.card > .media,.card > .foto,
.portrait .ph > .media,.portrait .ph > .foto,.close .ph.last > .media,.close .ph.last > .foto{position:absolute;inset:0}
.ch .bg > .media,.card > .media,.portrait .ph > .media,.close .ph.last > .media{background:none;padding:34px 18px 18px;
  align-items:flex-start;justify-content:flex-start;text-align:left}
/* como la etiqueta .bg.ph del mockup: abajo del fondo, que es más alto que el capítulo */
.ch .bg > .media{align-items:flex-end;padding:18px clamp(16px,5vw,64px)}
.ch .bg > .media::before{left:clamp(16px,5vw,64px)}
.media::after{text-align:left}
.portrait .ph,.close .ph.last{position:relative;overflow:hidden}
.ch .bg:has(> .foto){background:none}
.dark .card > .media::before,.dark .card > .media::after{color:rgba(220,231,230,.5)}

/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}
/* Hilo 01: las curvas del build original sobre el fondo y el velo del capítulo, bajo el texto */
.ch > .curvas-oscuro{z-index:1}