/* Tipografías de la marca (enviadas por Spinosa): Poppins para titulares y textos principales, Cormorant Garamond para los secundarios */
@font-face{font-family:"Poppins";font-weight:300;src:url("assets/fonts/poppins-light.woff") format("woff");font-display:swap}
@font-face{font-family:"Poppins";font-weight:400;src:url("assets/fonts/poppins-regular.woff") format("woff");font-display:swap}
@font-face{font-family:"Poppins";font-weight:500;src:url("assets/fonts/poppins-medium.woff") format("woff");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:400;src:url("assets/fonts/cormorantgaramond-regular.woff") format("woff");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;src:url("assets/fonts/cormorantgaramond-italic.woff") format("woff");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:500;src:url("assets/fonts/cormorantgaramond-medium.woff") format("woff");font-display:swap}
@font-face{font-family:"Cormorant Garamond";font-weight:600;src:url("assets/fonts/cormorantgaramond-semibold.woff") format("woff");font-display:swap}
/* Tipografías anteriores: solo las usa la página Historia */
@font-face{font-family:"Spinosa Editorial";src:url("assets/editorial.woff") format("woff");font-display:swap}
@font-face{font-family:"Spinosa Editorial";src:url("assets/editorial-italic.woff") format("woff");font-style:italic;font-display:swap}
@font-face{font-family:"Spinosa Sans";src:url("assets/sans.woff") format("woff");font-display:swap}

/* Paleta de la marca */
:root{
  --cream:#f3f0e5;        /* Fondo */
  --plum:#4c355a;         /* Botón activo */
  --plum-soft:#a79bae;    /* Botón inactivo */
  --plum-ink:#302735;     /* Texto de botón inactivo */
  --text:#34312f;         /* Texto principal */
  --text-2:#68635d;       /* Texto secundario */
  /* Nombres que comparten la portada y la tienda */
  --ground:var(--cream);
  --ground-2:#ece7d9;
  --ground-3:#e3ddcc;
  --ink:var(--text-2);
  --ink-bright:var(--text);
  --ink-dim:#6f6a63;
  --accent:var(--plum);
  --accent-deep:var(--plum-ink);
  --on-media:#f3f0e5;
  --line:rgba(52,49,47,.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,4.6vw,84px);
  --top-h:96px;
  --max:1280px;
  /* margen lateral que centra el contenido en pantallas anchas */
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2));
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--top-h)}
body{margin:0;background:var(--ground);color:var(--ink);font:300 17px/1.6 var(--sans);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
/* Grano de película, muy suave sobre el crema */
body::after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .16 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
img,video,canvas{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--sans);font-weight:400;line-height:1;letter-spacing:-.035em;text-wrap:balance;color:var(--ink-bright)}
h1{font-size:clamp(50px,6.2vw,104px)}
h2{font-size:clamp(40px,5.4vw,90px)}
h3{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.03em}
p{max-width:60ch}
.lead{font:400 clamp(24px,2.2vw,32px)/1.2 var(--serif);color:var(--ink-bright);letter-spacing:0}
.lead-sm{font:italic 400 18px/1.3 var(--serif)}
::selection{background:var(--plum);color:var(--cream)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--plum-soft);border:2px solid var(--ground);border-radius:8px}
html{scrollbar-color:var(--plum-soft) var(--ground)}
:focus-visible{outline:2px solid var(--plum);outline-offset:4px}
.skip{position:fixed;top:-100px;left:20px;background:var(--plum);color:var(--cream);padding:14px 18px;z-index:90;border-radius:999px}
.skip:focus{top:12px}

/* Logotipo: el punto de la i en morado, como en la etiqueta */
.wordmark{position:relative;display:inline-block;font:500 40px/1 var(--serif);letter-spacing:-.01em;color:var(--ink-bright)}
.i-dot{position:relative;display:inline-block;line-height:1}
.i-dot::after{content:"";position:absolute;left:50%;top:.27em;width:.13em;height:.13em;border-radius:50%;background:var(--plum);transform:translateX(-50%)}

/* Controles */
.button{display:inline-flex;align-items:center;min-height:50px;padding:0 28px;border-radius:999px;background:var(--plum);color:var(--cream);font:400 15px/1 var(--sans);letter-spacing:.01em;transition:transform .5s var(--ease),background .3s}
.button:hover{background:#3d2a49;transform:translateY(-1px)}
.text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:400 15px/1 var(--sans);color:var(--ink-bright);position:relative}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--ease)}
.text-link:hover::after{transform:scaleX(.4)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:36px}
.ambient-toggle{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(243,240,229,.55);background:rgba(48,39,53,.42);color:var(--on-media);font:400 13px/1 var(--sans);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,color .3s}
.ambient-toggle:hover{background:var(--cream);color:var(--plum-ink)}

/* ---------- Cabecera fija: siempre se ve en qué sección estás ---------- */
.site-top{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--top-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--edge);background:rgba(243,240,229,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .4s}
.site-top.scrolled{border-bottom-color:var(--line)}
.site-top .wordmark{justify-self:start;font-size:clamp(46px,3.6vw,58px)}
.nav-links{display:flex;gap:clamp(28px,3.6vw,56px);font:400 clamp(17px,1.25vw,19px)/1 var(--sans)}
.nav-links a{position:relative;padding:12px 0;color:var(--ink);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.nav-links a:hover{color:var(--ink-bright)}
.nav-links a.is-current{color:var(--plum)}
.nav-links a.is-current::after{transform:scaleX(1)}
.nav-contact{justify-self:end;display:inline-flex;align-items:center;min-height:54px;padding:0 32px;border-radius:999px;background:var(--plum);color:var(--cream);font:400 17px/1 var(--sans);transition:background .3s}
.nav-contact:hover{background:#3d2a49}

/* Botón para volver arriba */
.to-top{position:fixed;right:var(--gutter);bottom:26px;z-index:55;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--plum);color:var(--cream);box-shadow:0 8px 22px rgba(48,39,53,.22);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s,transform .5s var(--ease),background .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top.show.at-end{opacity:0;transform:translateY(16px);pointer-events:none}
.to-top:hover{background:#3d2a49}

/* ---------- El origen: portada con la película de recuerdos ---------- */
.hero{min-height:min(100vh,920px);min-height:min(100svh,920px);padding:calc(var(--top-h) + clamp(12px,3vh,40px)) var(--edge) clamp(16px,3vh,40px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.hero h1{font-size:clamp(44px,4.6vw,70px)}
.hero-text{margin-top:28px;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:var(--ink);max-width:46ch}
.home-movie{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ground)}
/* Bordes fundidos en el crema: el vídeo parece pintado en la página, no pegado encima */
.home-movie::after,.morph::after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;pointer-events:none;box-shadow:inset 0 0 clamp(36px,5vw,80px) clamp(26px,3.6vw,60px) var(--ground)}
.home-movie video{position:absolute;top:0;left:0}
.home-movie .ambient-toggle{position:absolute;right:clamp(40px,5vw,80px);bottom:clamp(30px,4vw,60px);z-index:2}


/* ---------- Portada: la película de recuerdos ocupa toda la pantalla y el texto va encima ---------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;padding:calc(var(--top-h) + 40px) var(--edge) clamp(120px,22vh,220px);overflow:hidden;background:var(--plum-ink)}
.hero .home-movie{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;margin:0;z-index:0;background:var(--plum-ink)}
.hero .home-movie video{width:100%;height:100%}
/* Sombra para leer el texto y fundido inferior hacia el crema de la página */
.hero .home-movie::after{box-shadow:none;background:linear-gradient(0deg,var(--ground) 0,rgba(243,240,229,.94) 5%,rgba(243,240,229,.62) 13%,rgba(243,240,229,.22) 21%,rgba(243,240,229,0) 28%),linear-gradient(90deg,rgba(48,39,53,.6) 0,rgba(48,39,53,.26) 45%,rgba(48,39,53,0) 75%),linear-gradient(0deg,rgba(48,39,53,0) 20%,rgba(48,39,53,.3) 34%,rgba(48,39,53,0) 62%)}
.hero-copy{position:relative;z-index:2;max-width:640px;color:var(--on-media)}
.hero h1{color:var(--on-media);font-size:clamp(48px,6vw,96px)}
.hero-text{color:rgba(243,240,229,.92)}
.hero .text-link{color:var(--on-media)}
.hero .home-movie .ambient-toggle{right:var(--edge);bottom:clamp(64px,12vh,128px)}

/* Esencia: el espino de la etiqueta crece junto al texto */
.statement{position:relative;padding:clamp(56px,7vw,110px) var(--edge) clamp(56px,7vw,110px) calc(var(--edge) + clamp(70px,8vw,140px))}
.statement-inner{max-width:1240px}
.statement h2{font-size:clamp(52px,6.4vw,108px);margin-bottom:clamp(24px,3vw,44px)}
.lit-text{max-width:none;font:400 clamp(28px,3.4vw,56px)/1.12 var(--sans);letter-spacing:-.03em;color:var(--ink-bright);text-wrap:pretty}
.lit-text .w{opacity:.18;transition:opacity .35s linear}
.lit-text .w.on{opacity:1}
.statement-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 60px;margin-top:clamp(28px,3.4vw,52px)}
.statement-foot .lead{max-width:24ch}
.branch{position:absolute;left:calc(var(--edge) - var(--gutter) * .55);top:clamp(70px,8vw,130px);bottom:clamp(70px,8vw,130px);width:clamp(54px,6vw,96px);pointer-events:none;mix-blend-mode:multiply;clip-path:inset(0 0 calc(100% - var(--grow,0%)) 0)}
.branch img{width:100%;height:100%;object-fit:contain;object-position:50% 0}

/* ---------- La elaboración ---------- */
.on-media{color:var(--on-media)}
.on-media h2,.on-media h3{color:var(--on-media)}
.on-media .lead{color:var(--on-media)}
.film-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(48,39,53,.55),rgba(48,39,53,0) 58%),linear-gradient(0deg,rgba(48,39,53,.6),rgba(48,39,53,0) 45%)}
.pour-scene{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--plum-ink)}
.pour-scene>video{position:absolute;top:0;left:0}
.pour-copy{position:absolute;z-index:2;left:var(--edge);top:calc(var(--top-h) + 8vh);max-width:720px}
.pour-copy h2{font-size:clamp(44px,5.6vw,92px)}
.film-bottom{position:absolute;z-index:2;bottom:28px;left:var(--edge);right:calc(var(--gutter) + 68px);display:flex;justify-content:space-between;align-items:center;gap:20px}

.process{position:relative;height:260vh;height:260svh}
.process-sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding:var(--top-h) var(--edge) 0;overflow:hidden}
.process-copy{position:relative;z-index:2}
.process-copy h2{margin-bottom:clamp(26px,3.4vw,48px)}
.process-steps li{display:grid;grid-template-columns:46px 1fr;align-items:baseline;padding:14px 0;color:var(--plum-soft);transition:color .5s}
.process-steps li+li{border-top:1px solid var(--line)}
.step-n{font:400 13px/1 var(--sans);color:var(--plum-soft);font-variant-numeric:tabular-nums;transition:color .5s}
.process-steps h3{font-size:clamp(26px,3vw,44px);color:inherit;transition:color .5s}
.process-steps p{font:italic 400 19px/1.3 var(--serif);margin-top:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s}
.process-steps li.is-active{color:var(--ink-bright)}
.process-steps li.is-active .step-n{color:var(--plum)}
.process-steps li.is-active p{max-height:64px;opacity:1;color:var(--ink)}
.process-steps li.is-done{color:var(--ink-dim)}
.process-note{margin-top:clamp(22px,3vh,34px);max-width:46ch;font:400 clamp(18px,1.45vw,21px)/1.35 var(--serif);color:var(--ink)}
.process-visual{position:relative;justify-self:center;width:min(36vw,560px,calc(100svh - var(--top-h) - 130px))}
.frame{position:absolute;left:56%;top:44%;width:150%;aspect-ratio:16/9;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.frame img{position:absolute;width:50%;height:auto;will-change:transform;animation:sway 9s ease-in-out infinite alternate}
.frame-tl{top:0;left:0;transform-origin:100% 100%}
.frame-tr{top:0;right:0;transform-origin:0 100%;animation-delay:-3s!important}
.frame-bl{bottom:0;left:0;transform-origin:100% 0;animation-delay:-5s!important}
.frame-br{bottom:0;right:0;transform-origin:0 0;animation-delay:-7s!important}
@keyframes sway{from{rotate:-1deg}to{rotate:1.2deg}}
.morph,.process-visual figcaption{position:relative;z-index:1}
.morph{position:relative;aspect-ratio:1;overflow:hidden}
.morph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.morph img:first-child{opacity:1}
.process-visual figcaption{display:flex;justify-content:space-between;margin-top:18px;font:italic 400 19px/1 var(--serif);color:var(--ink)}
.vessel-to{color:var(--plum)}


/* Proceso: la foto ocupa justo la mitad derecha, a sangre, fundida con el crema por la izquierda */
.process-sticky{grid-template-columns:1fr 1fr;padding-right:0}
.process-copy{padding-right:clamp(16px,3vw,48px)}
.process-visual{position:absolute;top:0;right:0;bottom:0;width:50%;justify-self:auto}
.process-visual .frame{display:none}
.process-visual .morph{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto}
.process-visual .morph::after{box-shadow:none;background:linear-gradient(90deg,var(--ground) 0,rgba(243,240,229,0) 22%),linear-gradient(180deg,var(--ground) 0,rgba(243,240,229,0) 12%,rgba(243,240,229,0) 88%,var(--ground) 100%)}
.process-visual figcaption{position:absolute;z-index:2;left:20%;right:var(--gutter);bottom:clamp(28px,5vh,56px);margin:0;color:var(--cream);text-shadow:0 1px 14px rgba(48,39,53,.6)}
.process-visual .vessel-to{color:var(--cream)}
@media(max-width:760px){
  .process-sticky{padding-right:var(--gutter)}
  .process-copy{padding-right:0}
  .process-visual{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 2 * var(--gutter));height:38vh;height:38svh;margin:0 calc(var(--gutter) * -1)}
  .process-visual .morph::after{background:linear-gradient(180deg,var(--ground) 0,rgba(243,240,229,0) 18%,rgba(243,240,229,0) 80%,var(--ground) 100%)}
  .process-visual figcaption{left:var(--gutter);bottom:22%}
}

/* ---------- El ritual ---------- */
.landscape-scene{height:170vh;height:170svh;position:relative;background:var(--plum-ink)}
.landscape-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.landscape-sticky video{height:115%;position:absolute;top:-7%;left:0}
.landscape-copy{position:absolute;left:var(--edge);bottom:15%;z-index:2;max-width:min(880px,calc(100% - 2 * var(--gutter)))}
.landscape-copy h2{font-size:clamp(60px,8.6vw,140px)}
.landscape-copy .lead{margin-top:24px;max-width:30ch}
.landscape-sticky .ambient-toggle{position:absolute;right:calc(var(--gutter) + 68px);bottom:28px;z-index:3}

.moments-section{padding-top:clamp(56px,7vw,100px)}
.moments-heading{padding:0 var(--edge) clamp(18px,2.4vw,32px);display:flex;justify-content:space-between;align-items:end;gap:60px}
.moments-heading .lead{font-size:clamp(20px,1.7vw,24px);color:var(--ink);margin-bottom:8px}
.gallery-hold{height:330vh;height:330svh;position:relative}
.gallery-sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden;padding-top:calc(var(--top-h) + 20px)}
.gallery-track{position:relative;z-index:2;display:flex;gap:26px;width:max-content;padding:0 var(--gutter);height:calc(100% - 140px);will-change:transform}
.moment{width:34vw;min-width:360px;max-width:600px;height:100%;display:flex;flex-direction:column}
.moment:nth-child(even){padding-top:64px}
.moment:nth-child(odd){padding-bottom:48px}
.moment-image{flex:1;min-height:0;overflow:hidden;border-radius:6px;background:var(--ground-3)}
.moment figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:16px}
.moment h3{font-size:24px}
.moment figcaption p{font:italic 400 18px/1.2 var(--serif);color:var(--ink)}
.gallery-bottom{position:absolute;bottom:24px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font:italic 400 18px/1 var(--serif);color:var(--ink)}
.gallery-hold.static{height:auto}
.gallery-hold.static .gallery-sticky{position:relative;height:auto;min-height:0;padding-top:0}
.gallery-hold.static .gallery-track{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;height:600px;padding-bottom:30px;scrollbar-width:none}
.gallery-hold.static .moment{scroll-snap-align:center;flex:none}
.gallery-hold.static .gallery-bottom{position:relative;bottom:auto;padding:14px 0 10px}

/* ---------- Pie ---------- */
.site-foot{padding:clamp(40px,5vw,64px) var(--edge) 0;background:var(--ground)}
.foot-main{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(32px,5vw,80px);padding-bottom:clamp(36px,4vw,56px)}
.foot-main .wordmark{font-size:46px;margin-right:auto}
.foot-link{font:400 20px/1.2 var(--serif);color:var(--ink-bright);border-bottom:1px solid transparent;transition:border-color .3s}
.foot-link:hover{border-bottom-color:currentColor}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px;margin:0 calc(var(--edge) * -1);padding:16px var(--edge) 18px;background:var(--plum);color:var(--cream);font:400 15px/1.3 var(--serif)}
.foot-age{text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-family:var(--sans)}

/* ---------- Entradas ---------- */
.reveal{opacity:0;transform:translateY(28px)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;padding:calc(var(--top-h) + 30px) 0 30px;min-height:0}
  .hero-copy{padding:0 var(--gutter)}
  .home-movie{order:2}
  .moments-heading{display:block}
  .moments-heading .lead{margin-top:20px}
  .moment{width:56vw;min-width:320px}
}
@media(max-width:760px){
  :root{--top-h:70px}
  body{font-size:16px}
  .site-top{grid-template-columns:1fr auto;gap:12px}
  .site-top .wordmark{font-size:40px}
  .nav-links{position:fixed;top:var(--top-h);left:0;right:0;justify-content:center;gap:clamp(12px,4vw,22px);padding:4px var(--gutter) 6px;background:rgba(243,240,229,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:clamp(13px,3.7vw,15px);border-bottom:1px solid var(--line)}
  .nav-links a{padding:8px 0}
  .nav-contact{min-height:44px;padding:0 20px;font-size:15px}
  html{scroll-padding-top:calc(var(--top-h) + 40px)}
  .hero{padding:calc(var(--top-h) + 56px) 0 28px;gap:18px}
  .home-movie{margin:0}
  .hero-copy{padding:0 var(--gutter)}
  h1{font-size:clamp(44px,12.4vw,64px)}
  .hero h1{font-size:clamp(44px,4.6vw,70px)}
.hero-text{margin-top:20px}
  .actions{margin-top:26px;gap:12px 24px}
  .home-movie{aspect-ratio:4/3}
  .statement{padding:52px var(--gutter) 52px calc(var(--gutter) + 40px)}
  .statement h2{font-size:clamp(50px,14vw,80px)}
  .lit-text{font-size:clamp(25px,7vw,34px)}
  .branch{left:4px;width:42px}
  .pour-scene>video{object-position:60% center}
  .pour-copy{top:calc(var(--top-h) + 60px)}
  .pour-copy h2{font-size:clamp(38px,10.5vw,52px)}
  .film-bottom .lead-sm{max-width:180px;font-size:16px}
  .process{height:240vh;height:240svh}
  .process-sticky{grid-template-columns:1fr;align-content:center;gap:20px;padding-top:calc(var(--top-h) + 48px)}
  .process-visual{order:-1}
  .process-steps li{padding:9px 0}
  .process-steps h3{font-size:25px}
  .process-note{font-size:17px}
  .frame{width:300%}
  .landscape-scene{height:150vh;height:150svh}
  .landscape-sticky>video{object-position:51% center}
  .landscape-copy h2{font-size:clamp(54px,16vw,84px)}
  .moments-section{padding-top:52px}
  .gallery-hold{height:auto}
  .gallery-sticky{height:auto;position:relative;min-height:0;padding-top:0}
  .gallery-track{width:100%;height:540px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;gap:16px;transform:none!important;scrollbar-width:none}
  .moment{width:80vw;min-width:0;max-width:none;flex:none;scroll-snap-align:center}
  .moment:nth-child(even){padding-top:30px}
  .moment:nth-child(odd){padding-bottom:30px}
  .moment figcaption{display:block}
  .moment figcaption p{margin-top:6px}
  .gallery-bottom{position:relative;left:auto;right:auto;bottom:auto;padding:16px var(--gutter) 40px}
  .foot-main{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .foot-main .wordmark{margin-right:0}
  .foot-bar{justify-content:center;text-align:center}
  .to-top{bottom:18px;width:48px;height:48px}
}

/* ---------- Sin movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .frame img{animation:none}
  .branch{clip-path:none}
}
@media (hover:none),(pointer:coarse){
  .gallery-track,.morph img{will-change:auto}
}
@supports not (aspect-ratio:1){
  .morph{height:0;padding-top:100%}
  .frame{height:0;padding-top:calc(175% * 9 / 16)}
  .home-movie{height:0;padding-top:62.5%}
}

@media(max-width:760px){
  .hero{padding:calc(var(--top-h) + 60px) var(--gutter) 84px;min-height:100svh}
  .hero .hero-copy{padding:0}
  .hero .home-movie{margin:0}
  .hero .home-movie video{object-position:55% center}
  .hero .home-movie::after{background:linear-gradient(0deg,var(--ground) 0,rgba(243,240,229,.9) 4%,rgba(243,240,229,.5) 10%,rgba(243,240,229,0) 17%),linear-gradient(0deg,rgba(48,39,53,0) 12%,rgba(48,39,53,.68) 24%,rgba(48,39,53,.25) 62%,rgba(48,39,53,.15) 100%)}
  .hero .home-movie .ambient-toggle{right:var(--gutter);top:calc(var(--top-h) + 56px);bottom:auto}
}
@media(min-width:761px) and (max-width:1000px){.hero{display:flex;min-height:100svh;padding:calc(var(--top-h) + 40px) var(--gutter) 96px}.hero .hero-copy{padding:0}}