/* self-v5.css · Operaria Self · landing v5 · 10-sep-2026 · segunda vuelta de Francisco: velo más tenue, fotos a pantalla
   completa que se turnan (como «Una noche» de Restó360), la tejedora tras los caminos, las dos imágenes que crecen en la
   entrada (con imán), sin franjas entre almas, ocho brotes en el regreso y el cierre a la manera de /niveles
   Rige: brief web v1 + canon-visual.md (Self: dos niveles de texto; lienzo de lectura off-white,
   nunca rosa piel) + las seis leyes de landing-pro. Un solo breakpoint (1025px), declarado una vez.
   Apilado es el estado por defecto; el pin y los efectos entran por media query y por clase. */

:root{
  --papel:#EDEAE3;      /* off-white · lienzo de lectura */
  --crema:#F0E4D2;      /* crema claro · piel con calor */
  --piel:#EDC9C0;       /* rosa piel · puente hacia el corazón; nunca lienzo de texto */
  --coral:#D7806A;
  --tierra:#91524A;
  --tinta:#2B1714;      /* tinta Self */
  --frio:#E3E7EA;       /* la memoria fría del hero: temperatura, no bloque de marca */
  --sentido:#DCE5E1;    /* el petrol que asoma casi imperceptible: la bisagra */
  --nav-h:64px;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:'DM Mono', 'SF Mono', Menlo, monospace;
  --motion:1;           /* el JS lee esto: 0 bajo reduced-motion (ley 4: el CSS manda) */
  --p:0;                /* progreso del riel, 0..1, lo escribe el JS */
}

*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}   /* smooth le pelea al scrub */
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-weight:400;
  font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
main{display:block}

/* ---------- voces: una escala por rol ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(1.75rem, min(5vw, 6.6vh), 4.4rem);line-height:1.08}
h2{font-size:clamp(1.9rem, min(4.2vw, 5.8vh), 3.4rem);line-height:1.1}   /* UNA escala para todos los capítulos */
h3{font-size:clamp(1.55rem, min(2.6vw, 3.6vh), 2.1rem);line-height:1.15}
p{margin:0}
.s{font-style:italic}                        /* «Self» va en cursiva siempre (Francisco, 10-sep) */
.mono,.alma__num,.alma__cat,.camino__num,.camino__que,.navegador__url,.nav__ir{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- capítulos ---------- */
.cap{position:relative}                       /* ley 5: un capítulo de texto mide su contenido */
.cap__pin{position:static}                    /* ley 4: apilado por defecto; el pin entra por media query.
                                                 position se declara SOLO aquí y en el media query. */
.cap__cuerpo{width:min(100% - 3rem, 62rem);margin-inline:auto;padding:clamp(3rem, 8vh, 6rem) 0}

/* ---------- nav: Self es el marco ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(1rem, 3vw, 2.5rem);pointer-events:none}
.nav>a{pointer-events:auto;background:rgba(237,234,227,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:999px;color:var(--tinta)}
.nav__marca{display:flex;align-items:center;gap:.5rem;padding:.35rem .9rem .35rem .45rem;font-family:var(--serif);font-size:1.35rem;font-style:italic}
.nav__marca img{width:28px;height:auto}     /* height:auto NO es opcional (lecciones: <img> con atributos) */
.nav__ir{padding:.6rem 1rem}

/* ---------- 01 · SELF · fotografía velada a la manera de Restó360 ----------
   La foto va a sangre con cover + object-position por escena (ley 6); encima, la lámina rosada:
   un gradiente vertical que asienta la base y uno horizontal que asienta el lado del texto.
   El texto lee siempre sobre el lado más velado. */
.velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(0deg, rgba(237,201,192,.72) 0%, rgba(237,201,192,.36) 48%, rgba(237,201,192,.22) 100%),
  linear-gradient(90deg, rgba(237,234,227,.88) 0%, rgba(237,234,227,.5) 40%, rgba(237,201,192,.06) 100%)}
html{scroll-snap-type:y proximity}                /* el imán de la entrada: proximity, nunca mandatory (no atrapa) */
.cap--self .cap__pin{overflow:hidden;background:var(--crema)}
.self__foto{display:none}                         /* la secuencia solo existe donde hay scrub */
.cap--self > .cap__pin > .velo{display:none}
.declara{position:relative;overflow:hidden;background:var(--crema)}
.declara__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.declara--1 .declara__fondo{object-position:50% 62%}   /* la tierra, no el cielo */
.declara--4 .declara__fondo{object-position:42% 56%}   /* el brote, que vive a la izquierda */
.declara--1,.declara--4{min-height:72svh;display:grid;align-content:center}   /* capítulo-foto: llena (ley 5). align-CONTENT: la fila auto se centra en el alto mínimo */
.declara__cuerpo{position:relative;width:min(100% - 3rem, 62rem);margin-inline:auto;padding:clamp(3.5rem, 10vh, 6rem) 0}
.declara__voz{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem, 2.6vw, 2.2rem);color:var(--tierra)}
.declara__grande{font-family:var(--serif);font-size:clamp(1.9rem, min(4.2vw, 5.8vh), 3.4rem);line-height:1.1;color:var(--tierra)}
.declara h1,.declara__grande{max-width:16ch;text-wrap:balance}
/* las escenas: fotos a pantalla completa que se turnan, como «Una noche» en Restó360. Apilado: la primera
   es el fondo del bloque y las otras tres no se muestran (no hay scrub que las turne). Pineado: todas absolutas, y se
   encienden por --p, una sobre otra. Encuadre decidido una por una (ley 6). */
.declara--2,.declara--3{min-height:72svh;display:grid;align-content:center}
.escenas .foto[data-i="0"]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.escenas .foto:not([data-i="0"]){display:none}
.declara--2 .foto[data-i="0"]{object-position:50% 40%}   /* el pliego en la prensa */
.declara--2 .foto[data-i="1"]{object-position:35% 55%}   /* la máquina y el papel */
.declara--2 .foto[data-i="2"]{object-position:50% 45%}   /* la mano que firma */
.declara--2 .foto[data-i="3"]{object-position:30% 55%}   /* la mano en el escáner */
.declara--3 .foto[data-i="0"]{object-position:40% 60%}   /* los ovillos */
.declara--3 .foto[data-i="1"]{object-position:50% 40%}   /* las flores del tatuaje */
.declara--3 .foto[data-i="2"]{object-position:60% 50%}   /* las manos que cosen */
.declara--3 .foto[data-i="3"]{object-position:45% 45%}   /* las manos con el brote */

/* ---------- 02 · DOS CAMINOS · la tejedora al fondo, dos tarjetas con imagen (el marco del restorán de Restó360) ---------- */
.cap--caminos{overflow:clip}      /* clip, nunca hidden: hidden vuelve a la sección contenedor de scroll y mata el sticky del pin */
.caminos__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%}   /* las manos y el tejido */
.cap--caminos .cap__cuerpo{position:relative}
.lead{font-family:var(--serif);font-size:clamp(1.35rem, 2.2vw, 1.8rem);line-height:1.3;margin-top:1.6rem;color:var(--tierra)}
.lead + .lead{margin-top:0}
.lead--ayuda{margin-top:1.2rem}
.caminos{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));gap:1rem;margin-top:2rem}
.camino{display:grid;align-content:start;overflow:hidden;border-radius:8px;background:rgba(237,234,227,.8);border:1px solid rgba(43,23,20,.1);
  transition:transform .35s, box-shadow .35s}
.camino:hover{transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(43,23,20,.4)}
.camino__img{width:100%;height:clamp(150px, 24vh, 280px);object-fit:cover}
.camino:nth-child(1) .camino__img{object-position:50% 45%}   /* la planta en las manos */
.camino:nth-child(2) .camino__img{object-position:50% 40%}   /* el perchero */
.camino__cuerpo{padding:1rem 1.2rem 1.3rem}
.camino__num{display:block;color:var(--tierra);margin-bottom:.5rem}
.camino__voz{font-family:var(--serif);font-style:italic;font-size:1.25rem;margin-top:.3rem;color:var(--tierra)}
.camino__que{margin-top:.6rem;color:rgba(43,23,20,.73);text-transform:none;letter-spacing:.04em}
.camino__texto{margin-top:.5rem;max-width:32ch}

/* ---------- 03 · ENTRADA · las dos imágenes crecen hasta ocupar la pantalla; con imán ---------- */
.cap--entrada{overflow:clip;scroll-snap-align:start}
.entrada__par{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));height:60svh;background:var(--crema)}
.entrada__par img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cap--entrada .cap__cuerpo{position:relative;text-align:center;padding:clamp(3rem, 8vh, 5rem) 0}

/* ---------- 04–11 · ALMAS · la marca es el cuadro ---------- */
.alma{background:var(--alma-bg);color:var(--alma-ink);--variante:m}   /* el JS lee --variante: qué fotogramas cargar (ley 4) */
.alma .cap__pin{background:var(--alma-bg);padding:calc(var(--nav-h) + 1rem) clamp(1rem, 4vw, 3rem) 2.5rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-content:center}
.alma__num{color:var(--alma-acento)}
.alma__quien{font-family:var(--serif);font-style:italic;font-size:1.15rem;margin-top:.5rem;opacity:.85}
.alma__cat{margin-top:.6rem;opacity:.78}
.alma__frase{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.3;margin-top:1rem;max-width:26ch}
.alma__ver{display:inline-block;margin-top:1.4rem;font-family:var(--sans);font-weight:500;font-size:.95rem;
  color:var(--alma-acento);border-bottom:1px solid currentColor;padding-bottom:.15rem}
.alma__ver span{display:inline-block;transition:transform .35s}
.alma__ver:hover span{transform:translateX(.3em)}
.obra{margin:0;display:flex;justify-content:center}
/* el navegador limpio: en vertical es un teléfono. El ancho se calcula, no se deja al azar del
   aspect-ratio con dos máximos (que distorsiona). */
.navegador{width:min(100%, 72svh * 390 / 844);border-radius:34px;overflow:hidden;
  border:5px solid rgba(127,127,127,.28);box-shadow:0 30px 80px -30px rgba(0,0,0,.5);background:#000}
.navegador__barra{display:none}
.navegador img{width:100%;height:auto}      /* height:auto: el atributo height no manda */

/* ---------- 12 · REGRESO · ocho brotes que aparecen con el dedo ---------- */
.cap--regreso .cap__pin{overflow:hidden;background:var(--crema)}
.cap--regreso > .cap__pin > .velo{display:none}
.regreso__escena{position:relative;overflow:hidden;min-height:72svh;display:grid;align-content:center;background:var(--crema)}
.regreso__escena .declara__fondo{object-position:50% 55%}
.cap--regreso .cap__cuerpo{position:relative;padding:clamp(3.5rem, 10vh, 6rem) 0}
.regreso__voz{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem, 2.6vw, 2.2rem);color:var(--tierra)}
.regreso__voz .s{font-size:1.4em;color:var(--coral);line-height:1}   /* el Self del cierre: más grande y de otro color */

/* ---------- 13 · LA TUYA · el cierre a la manera de resto360.operaria.cl/niveles ---------- */
.cap--tuya{position:relative;overflow:clip;min-height:100dvh;display:grid;align-content:center;background:var(--crema)}
.tuya__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.velo--tuya{background:
  linear-gradient(0deg, rgba(237,201,192,.9) 0%, rgba(237,201,192,.55) 50%, rgba(237,201,192,.35) 100%),
  radial-gradient(60% 50% at 50% 45%, rgba(237,234,227,.75), transparent 70%)}
.tuya__cuerpo{position:relative;text-align:center;padding:calc(var(--nav-h) + 2rem) 0 3rem}
.tuya__cabeza h2{margin-bottom:1.6rem}
.entradas{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:0}
.btn{display:inline-block;padding:.95rem 1.6rem;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1;
  border:1px solid transparent;transition:transform .35s, background .35s}
.btn:hover{transform:translateY(-2px)}
.btn--coral{background:var(--coral);color:var(--tinta);border-color:var(--coral)}
.btn--linea{border-color:rgba(43,23,20,.45);color:var(--tinta);background:rgba(237,234,227,.35)}
.tuya__nota{margin-top:1.2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:rgba(43,23,20,.73)}
.tuya__cierre{margin-top:clamp(3rem, 12vh, 7rem)}
.tuya__punto{display:block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin:0 auto 1.2rem}
.cierre__frase{font-family:var(--serif);font-size:clamp(1.35rem, 2.2vw, 1.8rem);color:var(--tierra)}
.cierre__marca{font-family:var(--serif);font-size:1.4rem;margin-top:.6rem}
.cierre__linea{margin-top:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(43,23,20,.73)}

/* ---------- pie ---------- */
.pie{padding:3rem 0 3rem;text-align:center}
.pie__credito{display:inline-flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(43,23,20,.73)}
.pie__credito img{width:130px;height:auto}

/* =====================================================================
   EL ÚNICO BREAKPOINT · escritorio con movimiento.
   Ley 3: un número, declarado una vez. Ley 1: ningún pin más alto que la pantalla.
   ===================================================================== */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  .cap--riel .cap__pin{position:sticky;top:0;height:100dvh}
  /* sin JS no hay quien cuente el riel: la pista se retira y el pin fluye (medido: la tercera
     declaración del hero quedaba 252px fuera del cuadro a 1440×900 sin este par de reglas) */
  html:not(.js) .cap--riel{height:auto}
  html:not(.js) .cap--riel .cap__pin{height:auto}
  .alma{--variante:d}

  /* 01 · SELF · 5,2 pantallas: la lluvia va con el dedo (0–20 %), las fotos se turnan (20–80 %), el brote crece (80–100 %) */
  .cap--self{height:520vh;--variante:d}
  .cap--self.pineado .self__foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
  .cap--self.pineado > .cap__pin > .velo{display:block}
  .cap--self.pineado .declara{position:absolute;inset:0;min-height:0;background:none;display:grid;align-content:center;padding:var(--nav-h) 0 0;pointer-events:none}
  .cap--self.pineado .declara--1 .declara__fondo,.cap--self.pineado .declara--1 .velo,.cap--self.pineado .declara--4 .declara__fondo,.cap--self.pineado .declara--4 .velo{display:none}
  .cap--self.pineado .declara__cuerpo{padding:0}
  .cap--self.pineado .escenas .foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cap--self.pineado .declara--2 .foto[data-i="1"]{opacity:clamp(0, calc((var(--p) - .275) / .03), 1)}
  .cap--self.pineado .declara--2 .foto[data-i="2"]{opacity:clamp(0, calc((var(--p) - .35) / .03), 1)}
  .cap--self.pineado .declara--2 .foto[data-i="3"]{opacity:clamp(0, calc((var(--p) - .425) / .03), 1)}
  .cap--self.pineado .declara--3 .foto[data-i="1"]{opacity:clamp(0, calc((var(--p) - .575) / .03), 1)}
  .cap--self.pineado .declara--3 .foto[data-i="2"]{opacity:clamp(0, calc((var(--p) - .65) / .03), 1)}
  .cap--self.pineado .declara--3 .foto[data-i="3"]{opacity:clamp(0, calc((var(--p) - .725) / .03), 1)}
  .cap--self.pineado .declara--1{opacity:calc(1 - clamp(0, (var(--p) - .15) / .07, 1))}
  .cap--self.pineado .declara--2{opacity:calc(clamp(0, (var(--p) - .2) / .05, 1) * (1 - clamp(0, (var(--p) - .5) / .05, 1)))}
  .cap--self.pineado .declara--3{opacity:calc(clamp(0, (var(--p) - .52) / .05, 1) * (1 - clamp(0, (var(--p) - .8) / .05, 1)))}
  .cap--self.pineado .declara--4{opacity:clamp(0, (var(--p) - .84) / .08, 1)}

  /* 02 · DOS CAMINOS · 160dvh: pineado de texto sobre la tejedora, las tarjetas entran por respiración */
  .cap--caminos{height:160dvh}
  .cap--caminos .cap__pin{display:grid;align-items:center}
  .cap--caminos .cap__cuerpo{padding:var(--nav-h) 0 1rem}
  .caminos{margin-top:clamp(1.2rem, 4vh, 2.5rem);gap:1.2rem}
  .camino__img{height:clamp(120px, 22vh, 260px)}          /* mide por vh: a 720 de alto sigue cabiendo (ley 1) */
  .cap--caminos.pineado .caminos{opacity:clamp(0, calc((var(--p) - .3) / .3), 1);
    transform:translateY(calc((1 - clamp(0, (var(--p) - .3) / .3, 1)) * 16px))}

  /* 03 · ENTRADA · 150dvh: las dos imágenes crecen del 55 % al 100 % de su mitad */
  .cap--entrada{height:150dvh}
  .cap--entrada .cap__pin{display:grid;align-content:center}
  .cap--entrada.pineado .entrada__par{position:absolute;inset:0;height:auto}
  .cap--entrada.pineado .entrada__par img{transform:scale(calc(.55 + .45 * clamp(0, var(--p) / .6, 1)));transform-origin:50% 50%}
  .cap--entrada.pineado .cap__cuerpo{padding-top:var(--nav-h)}

  /* 04–11 · ALMAS · 240vh cada una: la landing real avanza con el dedo */
  .alma{height:240vh}
  .alma .cap__pin{grid-template-columns:minmax(0, 17rem) minmax(0, 1fr);gap:3rem;align-items:center;
    padding:var(--nav-h) clamp(2rem, 4vw, 4rem) 2rem}
  .navegador{width:min(100%, (100dvh - var(--nav-h) - 3rem - 28px) * 1440 / 900);border-radius:14px;border:1px solid rgba(127,127,127,.28);
    box-shadow:0 40px 100px -40px rgba(0,0,0,.55);background:var(--alma-bg)}
  .navegador__barra{display:flex;align-items:center;height:28px;padding:0 .8rem;gap:.5rem;background:rgba(127,127,127,.14);
    border-bottom:1px solid rgba(127,127,127,.18)}
  .navegador__barra::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--alma-acento);opacity:.9}
  .navegador__url{opacity:.7;letter-spacing:.06em;text-transform:none}

  /* 12 · REGRESO · 220vh: los ocho brotes aparecen con el dedo; la voz llega con los últimos */
  .cap--regreso{height:220vh;--variante:d}
  .cap--regreso.pineado .self__foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
  .cap--regreso.pineado > .cap__pin > .velo{display:block}
  .cap--regreso.pineado .regreso__escena{position:absolute;inset:0;min-height:0;background:none;padding-top:var(--nav-h);pointer-events:none}
  .cap--regreso.pineado .regreso__escena .declara__fondo,.cap--regreso.pineado .regreso__escena .velo{display:none}
  .cap--regreso.pineado .regreso__escena--ninguna{opacity:calc(1 - clamp(0, (var(--p) - .68) / .08, 1))}
  .cap--regreso.pineado .regreso__escena--todas{opacity:clamp(0, (var(--p) - .74) / .1, 1)}

}

@media (prefers-reduced-motion:reduce){
  :root{--motion:0}
  .alma__ver span,.camino,.btn{transition:none}
}