/* ==========================================================
   Pablo Ríos · Territorio Sonoro — borrador de rediseño v0.6 (video y fotos de Pablo + cajas negras; menú a la derecha, verde seco)
   Negro puro (igual al fondo de la ilustración), blanco cálido,
   Mulish. Una sola imagen fuerte. Mucho aire.
   ========================================================== */

:root {
  --bg: #000;
  --fg: #ecebe6;
  --muted: #8f8d87;
  --dim: #7a7872;            /* v0.6: subido desde #5c5b57 para AA (4,6:1 sobre negro) */
  --line: rgba(236, 235, 230, 0.14);
  --accent: #cdbf9f;          /* (v0.1) arena de estepa — ya no se usa en el contenido */
  /* v0.4: el color vive SOLO en el menú. Verde seco patagónico (coirón, neneo, mata negra):
     salvia-oliva apagado, sin saturar, para convivir con el dibujo B/N.
     (v0.3 ámbar: #e8b04a / #f6c766 / #a9843f) */
  --nav: #a8b48a;             /* links principales */
  --nav-hi: #c6d0a8;          /* hover / página actual */
  --nav-lo: #7c8667;          /* links secundarios, más callados */
  --note: #8fa6bd;            /* notas de borrador / pendientes (frío, para no confundirse con el ámbar del menú) */
  --nav-w: clamp(230px, 19vw, 300px);
  --pad: clamp(24px, 4vw, 64px);
  --max: 980px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Mulish", "Muli", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: opacity .35s var(--ease);
}
body.is-leaving { opacity: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
::selection { background: var(--fg); color: var(--bg); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; }

/* ---------- tipografía ---------- */
.kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.4rem;
}
h1, h2, h3 { font-weight: 300; margin: 0; letter-spacing: -0.015em; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 5.6vw, 5.2rem); margin-bottom: 1.6rem; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: .6rem; letter-spacing: 0; }
.lede { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 300; line-height: 1.5; max-width: 34ch; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.big-quote {
  font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.2;
  max-width: 22ch; margin: 0;
}

/* ---------- navegación lateral (DERECHA, fija) ---------- */
.nav {
  position: fixed; inset: 0 0 0 auto; width: var(--nav-w); z-index: 50;
  padding: clamp(28px, 4.5vh, 48px) var(--pad) 28px 0;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.brand { display: inline-block; margin-bottom: clamp(36px, 8vh, 80px); }
.brand-name { display: block; font-weight: 800; font-size: .95rem; letter-spacing: .28em; text-transform: uppercase; }
.brand-sub { display: block; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.nav-primary { list-style: none; margin: 0 0 32px; padding: 0; }
.nav-primary a {
  position: relative; display: inline-block; white-space: nowrap;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 300; line-height: 2;
  color: var(--nav); transition: color .25s;
}
.nav-primary a::before {
  content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1px; margin-right: 0;
  background: currentColor; transition: width .35s var(--ease), margin .35s var(--ease);
}
.nav-primary a:hover, .nav-primary a[aria-current="page"] { color: var(--nav-hi); }
.nav-primary a:hover::before, .nav-primary a[aria-current="page"]::before { width: 18px; margin-right: .5em; }
.nav-primary .tag {
  display: block; margin: -.55em 0 .35em; line-height: 1;
  font-size: .56rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.nav-secondary { list-style: none; margin: 0; padding: 0; }
.nav-secondary a {
  font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nav-lo); line-height: 2.4; transition: color .2s;
}
.nav-secondary a:hover, .nav-secondary a[aria-current="page"] { color: var(--nav); }

.nav-foot { margin-top: auto; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.nav-foot a { color: var(--muted); margin-left: 12px; }
.nav-foot a:hover { color: var(--nav-lo); }

.nav-toggle { display: none; }

/* v0.6: la columna del menú cierra con la forma de onda real de «Calm» (Pablo Ríos), en verde seco y muy tenue */
.page-inner .nav::after {
  content: ""; position: absolute; left: 24px; right: var(--pad); bottom: 74px; height: 36px; z-index: -1;
  background: url("img/v2/calm-onda-verde.png") center / 100% 100% no-repeat; opacity: .35;
}

/* ---------- layout ---------- */
.content { margin-right: var(--nav-w); padding: 0 var(--pad); }
.wrap { max-width: var(--max); }
.section { padding: clamp(80px, 13vh, 150px) 0; border-top: 1px solid var(--line); }
.section:first-child { border-top: 0; }
.page-head { padding: clamp(110px, 20vh, 200px) 0 clamp(50px, 8vh, 90px); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.stack > * + * { margin-top: 1rem; }

/* ---------- HERO (inicio): video de Pablo, velo y caja negra ---------- */
.hero {
  position: relative; height: 100vh; min-height: 560px;
  margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--nav-w) - var(--pad));
  background: #000; overflow: hidden;
}
.hero-poster, .hero-poster img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.listo { opacity: 1; }
/* velo: abajo (caja) y a la derecha (menú). El centro, la montaña, queda limpio */
.hero-velo { position: absolute; inset: 0; pointer-events: none;
  /* la columna del menú queda casi negra (como la caja negra de A); medido con 14 cuadros del video */
  background: linear-gradient(270deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.88) 27%, rgba(0,0,0,.4) 37%, rgba(0,0,0,0) 46%),
              linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%); }
.hero-box { position: absolute; left: var(--pad); bottom: clamp(56px, 10vh, 96px); z-index: 2;
  background: #000; padding: clamp(28px, 3vw, 44px) clamp(28px, 3.2vw, 48px) clamp(24px, 2.6vw, 36px); max-width: min(620px, 52vw); }
.hero-box .kicker { color: var(--nav); margin-bottom: 1rem; }
.hero-box h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 200; line-height: 1.1; margin-bottom: 1rem; max-width: 15ch; }
.hero-box .lede { margin: 0; font-size: 1.05rem; color: var(--muted); max-width: none; }
/* botón «Ver en movimiento» (modo clic): caja negra como la del título, arriba a la derecha, sobre el cielo (nunca pisa la caja) */
.hero-play { position: absolute; z-index: 2; right: var(--pad); top: clamp(24px, 4vh, 40px);
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: #000; color: var(--fg);
  border: 1px solid rgba(236,235,230,.28); font: inherit; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.hero-play:hover { border-color: var(--nav-hi); color: var(--nav-hi); }
.hero-play:focus-visible { outline: 2px solid var(--nav-hi); outline-offset: 3px; }
.hero-play[hidden] { display: none; }
.hero-play-i { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero-play[aria-pressed="true"] .hero-play-i { width: 9px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
@media (max-width: 900px) { .hero-play { display: none !important; } }
.hero-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-cue::after { content: ""; width: 1px; height: 34px; background: var(--muted); animation: cue 2.4s infinite var(--ease); transform-origin: top; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.page-home .nav .brand, .page-home .nav ul, .page-home .nav .nav-foot { opacity: 0; animation: rise 1.1s .15s var(--ease) forwards; }
.page-home .nav .nav-primary { animation-delay: .3s; }
.page-home .nav .nav-secondary { animation-delay: .45s; }

/* ---------- botones / enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .8em;
  padding: 15px 26px; border: 1px solid var(--fg);
  font-size: .72rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--fg); }
.link {
  font-size: .72rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .25s;
  display: inline-block;
}
.link:hover { border-color: var(--fg); }
.link::after { content: " →"; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 2rem; }

/* ---------- reproductor ---------- */
.player { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.player + .player { border-top-color: transparent; padding-top: 4px; }
.player button {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.player button:hover, .player.is-playing button { background: var(--fg); color: var(--bg); }
.player svg { width: 14px; height: 14px; fill: currentColor; }
.player .icon-pause { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }
.player-body { flex: 1; min-width: 0; }
.player-title { font-size: .85rem; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.player-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.player-bar { position: relative; height: 2px; background: var(--line); cursor: pointer; }
.player-bar::before { content: ""; position: absolute; inset: -10px 0; } /* área de click */
.player-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fg); }

/* ---------- inicio: bloques ---------- */
.intro-piece { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }

.doors { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.door { padding: 34px 28px 40px 0; border-right: 1px solid var(--line); transition: background .3s; }
.door + .door { padding-left: 28px; }
.door:last-child { border-right: 0; }
.door .num { font-size: .7rem; letter-spacing: .24em; color: var(--muted); font-weight: 700; }
.door h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300; margin: 18px 0 12px; }
.door p { color: var(--muted); font-size: .95rem; }
.door a.cover-link:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.door .sublinks { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }

/* bloque “caja negra sobre paisaje” — guiño al feed de Instagram */
.landscape-box {
  position: relative; min-height: 78vh;
  margin-left: calc(-1 * var(--pad));
  background: #000 url("img/v2/montana-1600.jpg") 50% 75% / cover no-repeat;
  display: flex; align-items: center; justify-content: flex-end;
}
.landscape-box .box {
  background: #000; padding: clamp(32px, 4vw, 56px); max-width: 520px;
  border: 1px solid var(--line);
}
.landscape-box .box h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.price { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; margin: 1.4rem 0 .2rem; }
.date { color: var(--fg); font-size: .95rem; }

.split-img { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 62% center; }

/* ---------- escuchar ---------- */
.works { list-style: none; margin: 0; padding: 0; }
.work { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 56px); padding: 44px 0; border-top: 1px solid var(--line); }
.work img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.15); transition: filter .4s; }
.work:hover img { filter: none; }
.work .meta { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.work h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: .5rem; }
.work h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.work .player { margin-top: 1rem; }

.ficha { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ficha .cover { width: 100%; aspect-ratio: 1; object-fit: cover; }
.credits { white-space: pre-line; color: var(--muted); font-size: .95rem; }
.also { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; gap: 24px; flex-wrap: wrap; }
.embed { width: 100%; max-width: 460px; height: 470px; border: 0; margin: 1rem 0 1.4rem; }

/* ---------- listas / tarjetas ---------- */
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 56px 1fr; padding: 18px 0; border-top: 1px solid var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--muted); padding-top: .3em; }
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { padding: 18px 0 18px 30px; border-top: 1px solid var(--line); position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 2.05em; width: 14px; height: 1px; background: var(--muted); }

.moments { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 2rem; }
.moments div { padding: 26px 18px 10px 0; }
.moments span { display: block; font-size: .7rem; letter-spacing: .22em; color: var(--muted); font-weight: 700; }
.moments strong { display: block; font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 2rem); margin-top: 10px; }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 70px); }
.steps div { padding: 26px 0; border-top: 1px solid var(--line); }
.steps .n { font-size: .7rem; letter-spacing: .22em; color: var(--muted); font-weight: 700; }
.steps h3 { margin-top: 8px; }
.steps p { color: var(--muted); margin: 0; }

.card { border: 1px solid var(--line); padding: clamp(28px, 4vw, 48px); }
.card .price-line { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--fg); margin-bottom: 1.2rem; }

.offer {
  border: 1px solid var(--fg); padding: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end;
}
.offer .amount { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; line-height: 1; }
.offer .amount small { font-size: .45em; color: var(--muted); letter-spacing: .04em; }

.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.yesno div { border-top: 1px solid var(--line); padding-top: 20px; }
.yesno strong { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; display: block; margin-bottom: 10px; }

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 64px); }
.quotes figure { margin: 0; border-top: 1px solid var(--line); padding-top: 24px; }
.quotes blockquote { margin: 0 0 14px; font-size: 1.15rem; font-weight: 300; line-height: 1.55; }
.quotes figcaption { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

.not-list { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 300; line-height: 1.6; }

/* ---------- notas de borrador (contenido pendiente del sitio actual) ---------- */
.pending {
  border: 1px dashed var(--note); color: var(--note);
  font-size: .85rem; line-height: 1.55; padding: 14px 18px; margin: 1.4rem 0; max-width: 62ch;
}
.pending::before { content: "Pendiente de Pablo · "; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }
.draft-note { color: var(--note); }

/* ---------- formulario ---------- */
.form { display: grid; gap: 22px; max-width: 560px; }
.form label { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: block; margin-bottom: 8px; }
.form input, .form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--fg); font: inherit; padding: 10px 0; outline: none; transition: border-color .2s;
}
.form textarea { min-height: 150px; resize: vertical; border: 1px solid var(--line); padding: 12px; }
.form input:focus, .form textarea:focus { border-color: var(--fg); }
.form button { justify-self: start; cursor: pointer; background: transparent; color: var(--fg); font-family: inherit; }

/* ---------- pie ---------- */
.footer { margin-right: var(--nav-w); padding: 70px var(--pad) 40px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; max-width: var(--max); }
.footer strong { color: var(--fg); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; font-size: .75rem; display: block; margin-bottom: 14px; }
.footer .motto { color: var(--fg); font-size: 1.1rem; font-weight: 300; margin: 14px 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { line-height: 2; }
.footer a:hover { color: var(--fg); }
.footer .legal { margin-top: 50px; font-size: .72rem; color: var(--dim); }

/* ---------- reveal suave ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .page-home .nav * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {
  :root { --nav-w: 0px; }
  .nav {
    position: fixed; inset: 0; width: 100%; padding: 22px var(--pad) 32px;
    background: rgba(0,0,0,.97); transform: translateX(100%);
    transition: transform .5s var(--ease); pointer-events: auto;
  }
  .nav-open .nav { transform: none; }
  .nav .brand { margin-bottom: 48px; align-self: flex-start; text-align: left; }
  .nav-primary a { font-size: 1.9rem; line-height: 1.75; }
  .page-inner .nav::after { opacity: .2; }
  .nav-toggle {
    display: block; position: fixed; top: 18px; right: var(--pad); z-index: 60;
    background: transparent; border: 0; color: var(--nav); cursor: pointer; padding: 8px 0;
    font: 800 .72rem/1 "Mulish", sans-serif; letter-spacing: .26em; text-transform: uppercase;
  }
  .mobile-brand { position: absolute; top: 22px; left: var(--pad); z-index: 40; }
  .hero { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); background-position: 64% center; }
  .hero-cue { display: none; }
  .nav-primary .tag { margin-top: -.35em; }
  .hero::before { background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.7) 100%); }
  .two-col, .split-img, .ficha, .intro-piece, .quotes, .yesno, .steps, .offer { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door, .door + .door { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .moments { grid-template-columns: repeat(2, 1fr); }
  .work { grid-template-columns: 96px 1fr; }
  .landscape-box { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 40vh var(--pad) var(--pad); align-items: flex-end; background-position: left top; background-size: 160% auto; min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .intro-piece img { max-width: 220px; }
}
@media (min-width: 901px) { .mobile-brand { display: none; } }

/* ---------- v0.5: Aprender (hub con dos ofertas separadas) ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.path { display: flex; flex-direction: column; }
.path-body { padding: clamp(28px, 3.5vw, 44px) 0 0; display: flex; flex-direction: column; flex: 1; }
.path-body .actions { margin-top: auto; padding-top: 1.6rem; }
.path h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.path h2 .muted { display: block; font-size: .55em; margin-top: .35em; letter-spacing: .02em; }
.path-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; transition: opacity .4s; }
.path-img:hover img { opacity: .85; }
/* el taller en vivo va sin imagen y con borde: se lee como otra propuesta, no como variante */
.path-live { border: 1px solid var(--line); padding: 0 clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px); }

/* ---------- v0.6: crédito de foto/video ---------- */
.hero-credit {
  position: absolute; left: var(--pad); bottom: 22px; z-index: 2;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  background: #000; color: var(--muted); padding: 4px 8px; pointer-events: none;
}
.credit { margin-top: 10px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; }
}

/* ---------- v0.6: Cuaderno (notas) ---------- */
.note-list { list-style: none; margin: 0; padding: 0; }
.note-list > li { border-top: 1px solid var(--line); padding: clamp(28px, 4vw, 40px) 0; }
.note-list > li:first-child { border-top: 0; padding-top: 0; }
.note-list .meta { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.note-list h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .5rem; }
.note-list h2 a:hover { color: var(--nav-hi); }
.note-list .lede-sm { color: var(--muted); max-width: 52ch; margin: 0; font-weight: 300; }

.note { padding-bottom: 120px; }
.note-hero { margin: 0 0 clamp(36px, 5vw, 56px); }
.note-hero img { width: 100%; max-height: min(52vh, 520px); object-fit: cover; object-position: center 72%; }
.note-body { max-width: 62ch; }
.note-body p { font-weight: 300; font-size: 1.05rem; line-height: 1.75; }
.note-body figure {
  margin: clamp(36px, 5vw, 52px) auto;
  max-width: 420px;
  text-align: center;
}
.note-body figure.note-figure-wide { max-width: 520px; }
.note-body figure img { width: 100%; margin: 0 auto; }
.note-body figcaption {
  margin-top: 12px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.note-body .signoff { margin-top: 2.4rem; }
.note-source {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}

/* invitación suave a la newsletter (final de nota / listado) — no es un botón */
.soft-sub {
  margin: clamp(40px, 6vw, 56px) 0 0;
  max-width: 62ch;
  font-family: "Mulish", "Muli", system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nav-lo);            /* #7c8667 */
}
.note-source + .soft-sub { margin-top: 14px; }
.soft-sub a {
  color: var(--nav);               /* #a8b48a */
  border-bottom: 1px solid rgba(168, 180, 138, .35);
  transition: color .25s, border-color .25s;
}
.soft-sub a:hover { color: var(--nav-hi); border-color: var(--nav-hi); }  /* #c6d0a8 */

/* ==========================================================
   v0.6 — dirección A (+ la contención de B): video/fotos de Pablo con velo,
   texto en cajas negras, Mulish liviana, líneas finas, verde seco de acento.
   ========================================================== */
.kicker { color: var(--nav-lo); }
.section { border-top-color: rgba(168, 180, 138, .18); }

/* franja de encabezado de cada página interna */
.band { position: relative; margin: 0 calc(-1 * var(--pad)); padding: clamp(200px, 38vh, 340px) var(--pad) 0; overflow: hidden; }
.band-img { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: clamp(300px, 56vh, 520px); object-fit: cover; object-position: 50% 58%; }
.band-montana .band-img { object-position: 50% 70%; }
.band-velo { position: absolute; left: 0; right: 0; top: 0; height: clamp(300px, 56vh, 520px);
  background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.35) 100%); }
.band-box { position: relative; background: #000; max-width: min(760px, 100%); padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 52px) clamp(10px, 2vw, 24px) clamp(28px, 3.4vw, 52px);
  margin-left: calc(-1 * clamp(28px, 3.4vw, 52px)); }
.band-box h1 { font-weight: 200; font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.band-box .kicker a { color: var(--nav); }
.band + * { margin-top: 0; }

/* portadas en 4:5, como en el feed */
.work img, .ficha .cover, .intro-piece img { aspect-ratio: 4 / 5; object-fit: cover; }
.split-img img, .path-img img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.path-img img { aspect-ratio: 4 / 3; }

/* cajas: la línea fina en verde seco, como en el aula */
.landscape-box .box { border: 0; border-top: 1px solid var(--nav); }
.door .num, .steps .n, .moments span, .numbered li::before { color: var(--nav-lo); }
.btn.solid { background: var(--fg); border-color: var(--fg); }

@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero-poster { position: relative; display: block; height: 66vh; }
  .hero-video { display: none; }
  .hero-velo { height: 66vh; background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 35%), linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 12%, rgba(0,0,0,0) 24%); }
  .hero-box { position: relative; left: auto; bottom: auto; max-width: none; margin: -64px var(--pad) 0; padding: 26px 24px 22px; }
  .hero-box h1 { font-size: 2rem; }
  .hero-credit { left: auto; right: var(--pad); bottom: auto; top: 72px; }
  .band { padding-top: 46vh; margin: 0 calc(-1 * var(--pad)); }
  .band-img, .band-velo { height: 54vh; }
  .band-box { margin-left: 0; padding: 24px var(--pad) 8px; }
  .page-inner .nav::after { display: none; }
  .landscape-box { background-image: url("img/v2/montana-800.jpg"); background-position: 30% 75%; }
}
@media (max-width: 768px) { .hero-video { display: none !important; } }

/* ==========================================================
   v0.7 — claridad en la portada: héroe más bajo en escritorio para que
   las tres propuestas entren en la primera pantalla; prueba con material real.
   ========================================================== */
@media (min-width: 901px) {
  .hero { height: calc(100vh - 300px); min-height: 440px; max-height: 760px; }
  .hero-box { bottom: 32px; padding: 26px 36px 22px; max-width: min(640px, 56vw); }
  .hero-box h1 { font-size: clamp(2rem, 3vw, 2.9rem); max-width: 18ch; margin-bottom: .7rem; }
  .hero-box .lede { font-size: 1.02rem; max-width: 46ch; color: var(--fg); }
}
.hero-box .lede { color: var(--fg); }
.ofertas { padding: 28px 0 clamp(56px, 9vh, 96px); }
.ofertas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.oferta { display: flex; flex-direction: column; border-top: 1px solid var(--nav); padding-top: 18px; }
.oferta .kicker { margin-bottom: .55rem; }
.oferta h2 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 300; line-height: 1.2; margin: 0 0 .5rem; }
.oferta .muted { font-size: .9rem; line-height: 1.5; margin: 0; }
.oferta-dato { font-size: .85rem; color: var(--fg); margin: .7rem 0 0; line-height: 1.5; }
.oferta-dato strong { letter-spacing: .05em; }
.oferta .actions { margin-top: auto; padding-top: 1rem; gap: 10px 22px; }
.oferta .btn { padding-top: 12px; padding-bottom: 12px; }
.ofertas-pie { margin: 1.6rem 0 0; }
.prueba h2 { font-weight: 200; font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 2.4rem; }
.prueba-obras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.prueba-obras a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.prueba-obras img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 8px; filter: grayscale(.15); transition: filter .4s; }
.prueba-obras a:hover img { filter: none; }
.prueba-obras a:hover .prueba-t { text-decoration: underline; text-underline-offset: 4px; }
.prueba-t { font-size: 1rem; font-weight: 400; }
.prueba-m { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nav-lo); font-weight: 700; }
.prueba-n { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.prueba-datos { list-style: none; margin: 2.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 56px; border-top: 1px solid var(--line); padding-top: 22px; }
.prueba-datos li { color: var(--muted); max-width: 34ch; }
.prueba-datos strong { display: block; color: var(--fg); font-weight: 200; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.quotes-3 { grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem; }
.quotes-3 blockquote { font-size: 1.02rem; }
@media (max-width: 1100px) and (min-width: 901px) { .prueba-obras { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .ofertas { padding-top: 36px; }
  .ofertas-grid { grid-template-columns: 1fr; gap: 32px; }
  .prueba-obras { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .quotes-3 { grid-template-columns: 1fr; }
}
.oferta-mas { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nav); }
.oferta-mas:hover { color: var(--nav-hi); }
@media (min-width: 901px) { .hero { height: calc(100vh - 330px); min-height: 420px; } .ofertas { padding-top: 22px; } }
@media (max-width: 900px) {
  .page-home .hero-poster, .page-home .hero-velo { height: 54vh; }
}
@media (max-width: 900px) {
  .page-home .hero-velo { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 35%), linear-gradient(180deg, rgba(0,0,0,.88) 0px, rgba(0,0,0,.62) 84px, rgba(0,0,0,0) 170px); }
}
/* v0.8: retrato real de Pablo (foto de Open Folk). Nunca más grande que el original (724 px). */
.retrato { max-width: 724px; }
.retrato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
/* Pablo: el retrato abre la página (sin franja de paisaje) */
.pablo-head { padding: clamp(56px, 9vh, 96px) 0 clamp(50px, 8vh, 90px); align-items: end; }
.pablo-head h1 { font-weight: 200; font-size: clamp(2.6rem, 5vw, 4.6rem); margin: .4rem 0 1rem; }
.pablo-head .retrato img { max-height: calc(100vh - 160px); width: auto; max-width: 100%; }
@media (max-width: 900px) { .pablo-head { padding-top: 84px; } .pablo-head .retrato img { max-height: none; width: 100%; } }

/* ==========================================================
   v0.9 — que se vea la luz sobre el cerro.
   El video ya no pasa por debajo de la columna del menú (como las franjas de las páginas
   internas): el menú queda sobre negro y el velo lateral, que apagaba ~75 % la ladera
   derecha del cerro, desaparece. Queda solo una sombra suave abajo y a la izquierda,
   detrás de la caja del título (que ya es negra).
   ========================================================== */
@media (min-width: 901px) {
  .hero { margin-right: calc(-1 * var(--pad)); }
  .hero-velo { background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 28%),
                           linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 36%); }
}