/* ==========================================================================
   Secciones de la home, en orden. Cada bloque solo contiene lo propio de su sección;
   las alturas de scroll las escribe su JS (js/sections/sNN-*.js) en múltiplos de --S.
   ========================================================================== */

/* ---------- 01 · portada ---------- */
.s01{position:relative;z-index:1}
.s01 > .pin{overflow:hidden;background:var(--c-invert)}
.hfoto{position:absolute;inset:0;overflow:hidden;will-change:transform}   /* la salida 01 → 02 escala este envoltorio (s02); la entrada, la imagen de dentro (s01) */
.hencuadre{position:absolute;inset:0;transform-origin:0% 38%;transform:scale(1.2)}   /* encuadre provisional hasta el vídeo: productores a la derecha, libres de la caja */
.hfoto img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hgrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rgb-fuerte),.60) 0%,rgba(var(--rgb-fuerte),.14) 23.6%,rgba(var(--rgb-fuerte),.35) 55%,rgba(var(--rgb-fuerte),.88) 100%)}
.hoscuro{position:absolute;inset:0;opacity:0;background-color:var(--c-invert)}             /* se funde en el gris de la secuencia del 02 */
/* indicación de scroll: abajo y centrada respecto a la ventana, no al artboard (por eso descuenta --oy). Sale con #hsale.
   La entrada anima #hscroll; el bucle, el svg de dentro (s01) */
.hscroll{position:absolute;left:0;width:100%;bottom:calc(var(--hscroll-pie) - var(--oy)/var(--k));display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--c-ink);pointer-events:none;opacity:0}
.hscroll p{margin:0;white-space:nowrap;font-weight:500}
.flecha--baja{position:static;flex:none;width:12px;height:34px;color:inherit}
.con-dedo{display:none}
@media (pointer: coarse){.con-raton{display:none}.con-dedo{display:inline}}
.hbox{padding:12px 20px 11px;gap:0;display:inline-flex;background:transparent;box-shadow:none}   /* la tarjeta la pinta el canvas (revelado de marca) */
.hbox p{position:relative;z-index:1}
.hbox canvas{position:absolute;pointer-events:none;z-index:0}

/* ---------- 02 · la mano ---------- */
.s02{position:relative;z-index:2;pointer-events:none}   /* su margin-top negativo lo calcula el JS: comparte escenario con la portada.
                                                           Está montado encima de ella: mientras la portada se ve, no puede tragarse sus clics (el botón de reserva) */
.s02.viva{pointer-events:auto}                          /* cuando la portada ya se ha ido (lo marca s02-mano.js) */
.s02 > .pin > .pin-in{overflow:hidden}
#cvMano{position:absolute;inset:0;width:100%;height:100%;display:block}
.nm{position:absolute;left:0;top:0;color:var(--c-ink);transform-origin:50% 50%;white-space:nowrap;will-change:transform,opacity}
.nm i{display:block;font:600 30px/32px var(--f-display);font-style:normal;letter-spacing:-.01em}
.nm s{display:block;font:400 15px/18px var(--f-ui);text-decoration:none;opacity:.66;margin-top:6px}
.nm s u{text-decoration:none;color:var(--c-acento);margin-right:4px}
.ghost{position:absolute;left:380px;top:328.5px;width:680px;height:243px;text-align:center;opacity:0}
.ghost canvas{display:block;width:320px;height:121px;margin:0 auto}
.ghost p{margin:28px auto 0;width:620px}

/* ---------- 03 · scroll horizontal ---------- */
.g03{position:relative;z-index:3;margin-top:calc(-2*var(--S))}   /* sube sobre la última pantalla del relevo y una más: el 02 no se suelta a la vista */
.s03{position:relative}
.s03 > .pin{overflow:hidden}
.s03 .pin-in{overflow:hidden}
.track{position:absolute;inset:0}
.scene{position:absolute;inset:0;overflow:visible;will-change:transform}
.scene[data-tone="d"]{--bg:var(--c-invert);--fg:var(--c-ink);--fg2:var(--c-ink-2);--fg3:var(--c-ink-3)}
.scene[data-tone="p"]{--bg:var(--c-papel);--fg:var(--c-tinta);--fg2:var(--c-tinta);--fg3:var(--c-tinta-3)}
.sbg{position:absolute;inset:0;left:calc(var(--borde)*var(--k)*-1);background-color:var(--bg);will-change:transform}   /* sobresale --borde px por la izquierda para el borde roto */
.scene > .velo{z-index:5}
.scin{position:absolute;inset:0;will-change:transform}
.xrow{position:absolute;left:64px;display:flex;gap:16px}
.xrow .split{display:block}
.x{display:inline-block}
.num{display:flex;gap:16px;align-items:baseline;position:absolute}

/* ---------- 04 · nuestros productores ---------- */
.s04{position:relative;z-index:2;margin-top:calc(-1*var(--S))}
.s04 > .pin{overflow:visible}
.ph{will-change:clip-path}   /* a sangre: geometría en base.css */
.phi{position:absolute;inset:0;overflow:hidden;will-change:transform}
.phi img{width:100%;height:100%;object-fit:cover;will-change:transform}
.oscuro{position:absolute;inset:0;background:var(--c-invert);opacity:0}
.degr{position:absolute;left:calc(var(--ox)/var(--k)*-1);top:calc(var(--oy)/var(--k)*-1);width:calc(var(--W)/var(--k));height:calc(520px + var(--oy)/var(--k));background:linear-gradient(rgba(var(--rgb-fuerte),.92),rgba(var(--rgb-fuerte),0));opacity:0}
.tag{position:absolute;left:768px;width:608px}

/* ---------- 05 · el camino ---------- */
.g05{position:relative;z-index:3;margin-top:calc(-1*var(--S))}
.s05{position:sticky;top:0;height:var(--S);background:var(--c-marca);overflow:hidden;will-change:clip-path}
.s05::after{z-index:0}
.m05{position:absolute;left:0;top:0;width:100%;will-change:transform}
.ab05{position:absolute;left:0;top:0;width:var(--AW);height:2113px;transform-origin:0 0;transform:translate(var(--ox),var(--oy)) scale(var(--k))}
.card05{position:absolute;width:474px;padding:44px 48px 48px;background:var(--c-blanco);border-radius:var(--r-tarjeta);box-shadow:var(--sombra-tarjeta);color:var(--c-tinta);will-change:transform,opacity;z-index:2}
.c5n{position:relative;height:118px}
.c5n .dxxl{color:var(--c-tinta-3)}
.c5l{position:absolute;left:4px;top:78px;color:var(--c-acento-texto)}
.c5t{margin:0 0 6px}
.c5b{margin:0;color:var(--c-tinta-2)}
.camino{position:absolute;overflow:visible;z-index:0;color:var(--c-tinta)}   /* el trazo usa currentColor */
.viajero{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;z-index:1;will-change:transform;color:var(--c-tinta)}

/* ---------- 06 · quiénes estamos detrás ---------- */
.s06{position:relative;z-index:4}
.s06 > .pin{overflow:visible;z-index:1}
.s06 > .pin > .pin-in{overflow:hidden}
.papeltxt{color:var(--c-tinta)}
.port{position:absolute;will-change:transform}
.pc{position:absolute;inset:0;border-radius:50%;overflow:hidden;will-change:transform;background:var(--c-retrato)}
.pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.pc--brocha{background:transparent}
#stage{position:absolute;inset:0;will-change:transform,opacity;pointer-events:none}   /* cinta v6 (cinta.js) */
#cv{display:block;width:100%;height:100%}

/* ---------- 07 · cierre ---------- */
.s07{position:relative;margin-top:calc(-1*var(--S));z-index:2}
.s07 > .pin{overflow:hidden}
.g07{background:linear-gradient(rgba(var(--rgb-fuerte),.35),rgba(var(--rgb-fuerte),.7));opacity:0}

/* ---- pie: fuera del escenario, en flujo normal; sus cantos se alinean con los del artboard (ox + margen de 64) ---- */
.pie{position:relative;z-index:3;background-color:var(--c-invert);color:var(--c-ink-3);font:400 calc(13px * var(--k))/1.4 var(--f-ui);
  padding:calc(48px * var(--k)) calc(var(--ox) + 64px * var(--k)) calc(40px * var(--k))}
.pie-in{display:flex;align-items:center;gap:calc(16px * var(--k)) calc(40px * var(--k));flex-wrap:wrap;
  padding-top:calc(32px * var(--k));border-top:1px solid var(--c-linea)}
.pie-logo{display:block;width:calc(92px * var(--k));margin-right:auto}
.pie-logo img{display:block;width:100%;height:auto}
.pie-legal{display:flex;flex-wrap:wrap;gap:calc(8px * var(--k)) calc(28px * var(--k))}
.pie a{color:inherit;text-decoration:none;transition:color var(--t-corta)}
.pie-legal a:hover,.pie-legal a:focus-visible{color:var(--c-ink)}
.pie a:focus-visible{outline:1px solid var(--c-acento);outline-offset:4px;border-radius:2px}
.pie-copy{margin:0}