/* ══════════════════════════════════════════════════════════════
   7am__estudio · Workshop Experience Dossier
   Paleta extraída del dossier original
   ══════════════════════════════════════════════════════════════ */

:root{
  --green:#456003;
  --green-d:#33470A;
  --green-l:#5C7C12;
  --cream:#FDFBE2;
  --ivory:#FAF3D5;
  --yellow:#FDF0B9;
  --ink:#1c1c14;

  --pad:clamp(20px, 5vw, 92px);
  --r:2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--green);
  font-family:var(--f); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* las imágenes nunca se seleccionan: al arrastrar una pieza el navegador
   pintaba el color de ::selection encima y todo se teñía de verde */
img{
  display:block; max-width:100%; height:auto;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--green); color:var(--cream)}

/* ── Tipografía base ───────────────────────────────────────── */
.display{
  font-weight:600; font-stretch:105%;
  font-size:clamp(3rem, 9.2vw, 8.6rem);
  line-height:.86; letter-spacing:-.035em; text-transform:uppercase;
}
.display--xl{font-size:clamp(3.4rem, 12vw, 11.5rem)}
.display em{
  font-style:italic; text-transform:none; font-weight:500;
  letter-spacing:-.04em; display:inline-block;
}
.lead{font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.45}

.tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.1rem;
}
.tag--circled{position:relative; padding:.5em 1.3em; z-index:1}
.tag--circled::before{
  content:""; position:absolute; inset:-6px -4px; border:2px solid currentColor;
  border-radius:50%; transform:rotate(-4deg); z-index:-1; opacity:.85;
}

/* ══════════ LOADER ══════════ */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--green); color:var(--ivory);
  display:grid; place-items:center; transition:transform 1s var(--ease-out) .15s;
}
.loader.is-done{transform:translateY(-101%)}
.loader__inner{text-align:center; padding:var(--pad)}
.loader__mark{font-size:.72rem; letter-spacing:.3em; font-weight:700; opacity:.65; margin-bottom:2.2rem}
.loader__title{
  font-size:clamp(2.2rem,6.5vw,5rem); line-height:.92; font-weight:600;
  letter-spacing:-.035em; text-transform:uppercase;
}
.loader__title span{display:block}
.loader__title em{font-style:italic; text-transform:none; font-weight:500}
.loader__bar{width:min(280px,60vw); height:2px; background:rgba(250,243,213,.25); margin:2.4rem auto .8rem; overflow:hidden}
.loader__bar i{display:block; height:100%; width:0; background:var(--ivory)}
.loader__num{font-size:.72rem; letter-spacing:.24em; font-weight:600; opacity:.7}

/* ══════════ CURSOR ══════════ */
.cursor{position:fixed; top:0; left:0; z-index:190; pointer-events:none; mix-blend-mode:difference; display:none}
.cursor__dot,.cursor__ring{position:absolute; border-radius:50%; transform:translate(-50%,-50%)}
.cursor__dot{width:6px; height:6px; background:#fff}
.cursor__ring{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.7);
  transition:width .35s var(--ease), height .35s var(--ease), opacity .3s;
}
.cursor.is-hover .cursor__ring{width:64px; height:64px}
.cursor.is-grab .cursor__ring{width:54px; height:54px; background:rgba(255,255,255,.14)}
.cursor__label{
  position:absolute; transform:translate(-50%,-50%); color:#fff; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:0;
  transition:opacity .25s; white-space:nowrap;
}
.cursor.is-grab .cursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} body{cursor:none} a,button{cursor:none} }
.cursor{opacity:0; transition:opacity .3s}
.cursor.is-awake{opacity:1}

/* ══════════ NAV ══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--pad); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ivory);
  mix-blend-mode:normal; transition:color .5s var(--ease), background .5s var(--ease), padding .4s var(--ease);
}
.nav.is-solid{background:rgba(253,251,226,.82); backdrop-filter:blur(14px) saturate(1.4); color:var(--green); padding-top:.8rem; padding-bottom:.8rem}
.nav.is-light{color:var(--green)}
.nav.is-hidden{transform:translateY(-110%)}
.nav{transition:transform .5s var(--ease), color .5s var(--ease), background .5s var(--ease), padding .4s var(--ease)}
.nav__brand{display:flex; align-items:center; gap:.55em; letter-spacing:.12em}
.nav__brand .dot{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.55); opacity:.45}}
.nav__links{display:flex; gap:1.8rem}
.nav__links a{position:relative; opacity:.82; transition:opacity .3s}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav__cta{
  display:inline-flex; align-items:center; gap:.6em; border:1px solid currentColor;
  padding:.62em 1.15em; border-radius:100px; overflow:hidden; position:relative; z-index:0;
}
.nav__cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--cream); border-radius:100px;
  transform:scale(0); transform-origin:center; transition:transform .5s var(--ease-out);
}
.nav__cta span,.nav__cta i{position:relative; z-index:1; transition:color .35s}
.nav__cta:hover::before{transform:scale(1.2)}
.nav__cta:hover{color:var(--green)}
.nav__cta-arrow{transition:transform .4s var(--ease-out)}
.nav__cta:hover .nav__cta-arrow{transform:translateX(4px)}

.nav.is-onGreen{background:rgba(51,71,10,.82); backdrop-filter:blur(14px); color:var(--ivory); padding-top:.8rem; padding-bottom:.8rem}
/* sobre la banda fotográfica y fondos verdes traslúcidos: texto claro con sombra */
.nav:not(.is-solid):not(.is-light):not(.is-onGreen){text-shadow:0 1px 16px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.35)}
body.is-dragging{user-select:none; -webkit-user-select:none}

.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:130; background:transparent}
.progress i{display:block; height:100%; width:0; background:var(--green); mix-blend-mode:difference; background:#8fae3a}

/* ══════════ HERO ══════════ */
/* la sección es alta y su contenido queda fijado: ese recorrido de scroll
   es el que va sacando las piezas del sobre */
.hero{position:relative; height:200svh}
.hero__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}
/* ── Cielo ─────────────────────────────────────────────────── */
/* Azul claro y luminoso, abriéndose hacia el horizonte. */
.sky{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  background:linear-gradient(180deg,
    #74C6EC 0%, #85D0F0 28%, #99DAF4 55%, #B0E4F8 78%, #CCEFFB 100%);
}
.sky__clouds{position:absolute; inset:-8% -10%; will-change:transform}
.cloud{
  position:absolute; height:auto; will-change:transform;
  animation:drift linear infinite;
}
@keyframes drift{
  from{transform:translate3d(-46vw, 0, 0)}
  to  {transform:translate3d(146vw, 0, 0)}
}
/* cinco capas: las cercanas nítidas y opacas, las lejanas más pálidas
   y algo desenfocadas (perspectiva atmosférica) */
.cloud--1{top:20%; width:44%; opacity:1;                       animation-duration:400s; animation-delay:-120s}
.cloud--2{top:46%; width:33%; opacity:.95;                     animation-duration:310s; animation-delay:-235s}
.cloud--3{top:15%; width:18%; opacity:.9;  filter:blur(.4px);  animation-duration:250s; animation-delay:-40s}
.cloud--4{top:66%; width:38%; opacity:.72; filter:blur(1.4px); animation-duration:560s; animation-delay:-330s}
.cloud--5{top:78%; width:22%; opacity:.88; filter:blur(.7px);  animation-duration:370s; animation-delay:-180s}

/* malla de puntos: una capa base que deriva con el ratón y otra que se
   enciende bajo el cursor */
.sky__mesh{
  position:absolute; inset:-16%; will-change:transform;
  background-image:radial-gradient(circle, rgba(255,255,255,.7) .62px, transparent .72px);
  background-size:21px 21px;
}
.sky__hot{
  position:absolute; inset:0; will-change:transform; opacity:0;
  transition:opacity .5s var(--ease);
  -webkit-mask-image:radial-gradient(circle 330px at 50% 50%, #000 0%, rgba(0,0,0,.55) 46%, transparent 74%);
          mask-image:radial-gradient(circle 330px at 50% 50%, #000 0%, rgba(0,0,0,.55) 46%, transparent 74%);
}
.sky__hot.is-awake{opacity:1}
.sky__mesh--hot{
  inset:-16%;
  background-image:radial-gradient(circle, #fff 1.35px, transparent 1.45px);
}

.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 48%, rgba(10,70,110,0) 58%, rgba(10,70,110,.1) 100%);
}
/* sobre el cielo claro el texto va en verde: contrasta y liga con el sobre */
.hero__meta{
  position:absolute; top:calc(var(--pad) + 2.6rem); z-index:10; color:var(--green-d);
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.75;
  text-shadow:0 1px 10px rgba(255,255,255,.6);
}
.hero__meta--l{left:var(--pad)}
.hero__meta--r{right:var(--pad); text-align:right}

.stage{position:absolute; inset:0; z-index:5}
.piece{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  z-index:var(--z, 1); will-change:transform; transform-origin:50% 50%;
  translate:-50% -50%;           /* centrado independiente del transform de JS */
}
.piece img{width:100%; pointer-events:none}
.piece,.film,.polaroid,.frame{user-select:none; -webkit-user-select:none}
.piece[data-drag]{touch-action:none}
.shadow-soft{filter:drop-shadow(0 18px 26px rgba(0,0,0,.22))}
.piece--star img{filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.piece--abs{position:absolute}

/* El sobre se monta en dos capas para que las piezas salgan de su interior */
.piece--env{pointer-events:none}
.piece--env img{filter:drop-shadow(0 34px 60px rgba(0,0,0,.38))}
.piece--envfront img{
  /* recorte del panel verde frontal, medido sobre el propio asset */
  clip-path:polygon(0% 44.5%, 25% 60%, 40% 68.2%, 60% 68.2%, 75% 61%, 100% 45.2%, 100% 100%, 0% 100%);
  filter:none;
}

.film{
  background:#111; padding:12px 12px 34px; display:grid; gap:10px;
  box-shadow:0 22px 40px rgba(0,0,0,.35);
}
.film img{aspect-ratio:1/1.05; object-fit:cover; width:100%}

.polaroid{
  background:#fdfdf8; padding:10px 10px 40px;
  box-shadow:0 20px 34px rgba(0,0,0,.25);
}
.polaroid img{width:100%; aspect-ratio:1/1; object-fit:cover}

/* el rótulo escala con el ancho real del sobre */
/* el rótulo escala con el ancho real del sobre y se apoya siempre
   por debajo del vértice del panel verde (68,2 % de la altura) */
.env__label{position:absolute; left:0; right:0; bottom:3%; padding:0 8%; text-align:center; color:var(--ivory)}
.env__title{
  font-size:calc(var(--w) * .078); line-height:.98; font-weight:600;
  letter-spacing:-.03em; text-transform:uppercase;
}
.env__title span{display:block}
/* el título va en caja alta: la máscara de revelado puede ser mínima,
   así el bloque no crece y las tres líneas caen sobre el panel verde */
.env__title .word{padding:.04em .03em .08em; margin:-.04em -.03em -.08em}
.env__foot{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.7em;
  font-size:calc(var(--w) * .0185); letter-spacing:.13em; text-transform:uppercase; font-weight:600; opacity:.88;
}

.hero__scroll{
  position:absolute; bottom:calc(var(--pad) * .5); left:50%; transform:translateX(-50%); z-index:12;
  color:var(--green-d); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  display:grid; justify-items:center; gap:.9rem; text-shadow:0 1px 10px rgba(255,255,255,.6);
}
.hero__scroll-line{display:block; width:1px; height:34px; background:linear-gradient(var(--green-d),rgba(51,71,10,0)); animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ══════════ BANDA DE RESPIRO ══════════ */
.banner{
  position:relative; overflow:hidden; background:var(--cream);
  min-height:clamp(520px, 76vh, 780px);
}

/* ── Sello ─────────────────────────────────────────────────── */
.stamp-wrap{
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 20px 34px rgba(60,70,20,.22));
}
.stamp-wrap:active{cursor:grabbing}

/* dientes redondos separados entre sí: entre muesca y muesca queda un tramo
   recto, que es lo que evita los picos de cuando los círculos se tocan */
.stamp{
  --r:13px;                 /* radio de la muesca */
  --c:34px;                 /* paso entre muescas (mayor que 2r → tramo recto) */
  background:var(--yellow); padding:11% 11% 13%;
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 50% 0    / var(--c) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / var(--c) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 50%    / 100% var(--c) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 50% / 100% var(--c) repeat-y;
  -webkit-mask-composite:source-in;
          mask:
    radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 50% 0    / var(--c) 100% repeat-x,
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 50% 100% / var(--c) 100% repeat-x,
    radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 50%    / 100% var(--c) repeat-y,
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 50% / 100% var(--c) repeat-y;
          mask-composite:intersect;
}
/* frase en caja normal, ligera y con un relieve muy suave */
.stamp__text{
  color:var(--green-d); text-align:center;
  font-size:clamp(.74rem, 1.08vw, .98rem); font-weight:400;
  letter-spacing:.005em; line-height:1.34; margin:4% 0 10%;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
/* dos de los cuatro sellos van en verde, con el texto invertido */
.stamp--green{background:var(--green)}
.stamp--green .stamp__text{
  color:var(--cream);
  text-shadow:0 1px 0 rgba(20,30,2,.45);
}
.stamp__photo{overflow:hidden; background:var(--yellow)}
.stamp__photo img{width:100%; aspect-ratio:1/1.08; object-fit:cover}

/* ── Destellos ─────────────────────────────────────────────── */
.spark svg{width:100%; height:auto; display:block; fill:var(--green); opacity:var(--o,1)}

/* ══════════ MARQUEE ══════════ */
.marquee{overflow:hidden; padding:1.05rem 0; white-space:nowrap; border-block:1px solid currentColor}
.marquee--cream{background:var(--cream); color:var(--green)}
.marquee--green{background:var(--green); color:var(--ivory); border-color:rgba(250,243,213,.25)}
.marquee__track{display:inline-flex; align-items:center; gap:2.4rem; will-change:transform}
.marquee__track span{font-size:clamp(.9rem,1.7vw,1.35rem); font-weight:600; letter-spacing:-.01em; text-transform:uppercase}
.marquee__track i{font-style:normal; opacity:.55; font-size:.9em}

/* ══════════ SECCIONES ══════════ */
.sec{position:relative; padding:clamp(5rem, 11vw, 11rem) var(--pad); overflow:hidden}
.sec--cream{background:var(--cream); color:var(--green)}
.sec--green{background:var(--green); color:var(--ivory)}
.sec__rail{
  display:flex; gap:clamp(1.5rem,6vw,5rem); font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; opacity:.55; margin-bottom:clamp(2.5rem,6vw,5rem);
}

/* ── Reveal ─────────────────────────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out)}
[data-reveal].is-in{opacity:1; transform:none}
/* la máscara se agranda con padding y se compensa con margen negativo,
   así no recorta ascendentes ni descendentes */
.word{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.16em .06em .24em; margin:-.16em -.06em -.24em;
}
.word i{display:inline-block; font-style:inherit; transform:translateY(115%); transition:transform 1.05s var(--ease-out)}
.is-in .word i, [data-split].is-in .word i{transform:none}

/* ── Sobre mí ───────────────────────────────────────────────── */
.about__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4.5rem) clamp(2rem,5vw,6rem); align-items:start}
.about__head{grid-column:1 / -1}
.about__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); margin-top:clamp(1.5rem,4vw,3rem)}
.about__cols p{font-size:.9rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase; line-height:1.75; margin-bottom:1.3em}
.about__cols b{font-weight:800}
.about__photo{position:relative; margin-top:clamp(1rem,3vw,0)}
.frame{position:relative; overflow:hidden; background:var(--yellow)}
.frame img{width:100%; aspect-ratio:4/5; object-fit:cover}
.frame--tilt{box-shadow:0 30px 60px -30px rgba(50,60,10,.5)}
.about__stats{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:clamp(2rem,5vw,4rem); border-top:1px solid currentColor; padding-top:2.2rem}
.stat b{display:block; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; font-weight:600; letter-spacing:-.04em}
.stat span{display:block; margin-top:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.7; line-height:1.6}

/* ── Detalle ────────────────────────────────────────────────── */
.detail__grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem) clamp(2rem,5vw,5rem); align-items:start}
/* el hilo va por debajo: al cruzar el collage queda tapado por las piezas */
.detail__grid > *:not(.thread){position:relative; z-index:1}
.thread{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  color:var(--ivory); opacity:.8; pointer-events:none; overflow:visible;
}
/* el trazado lo lleva el scroll desde app.js: sin transición, para que
   avance y retroceda pegado al movimiento */
.thread path{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.detail__problem{max-width:34ch}
.detail__problem .lead{font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.86rem; line-height:1.8}
.detail__collage{position:relative; min-height:clamp(340px,38vw,480px); grid-row:span 2}
.detail__title{align-self:end}
.detail__title .display{font-size:clamp(2.6rem, 7.4vw, 6.6rem)}
.detail__solution{grid-column:2; max-width:44ch}
.detail__solution p{font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.82rem; line-height:1.85}
.uline{
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:.3em; text-decoration-skip-ink:none;
}

/* ── Servicios ──────────────────────────────────────────────── */
.services__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:2rem; align-items:start; margin-bottom:clamp(3rem,7vw,6rem)}
.services__intro{font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.85; max-width:46ch}
.services__head .display{text-align:right; justify-self:end; font-size:clamp(3rem, 9.4vw, 8.6rem)}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.6rem)}
.card{
  position:relative; background:var(--yellow); padding:1.1rem 1.1rem 1.6rem;
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  will-change:transform;
}
.card:hover{box-shadow:0 34px 60px -34px rgba(50,60,10,.65)}
.card__img{overflow:hidden; margin-bottom:1.3rem; background:#e9e3c2}
.card__img img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s var(--ease-out), filter .7s}
.card:hover .card__img img{transform:scale(1.07)}
.card h3{font-size:clamp(1rem,1.35vw,1.32rem); font-weight:500; letter-spacing:-.02em; margin-bottom:.75rem; line-height:1.15}
.card p{font-size:.79rem; line-height:1.62; opacity:.88}

.services__cta{display:flex; justify-content:center; margin-top:clamp(2.5rem,5vw,4rem)}
/* ── Cronograma ─────────────────────────────────────────────── */
.timeline{padding-top:clamp(3rem,6vw,6rem)}
.timeline__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:2rem; align-items:start; margin-bottom:clamp(3rem,7vw,5rem)}
.timeline__intro{font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.85; max-width:44ch}
.timeline__head .display{text-align:right; justify-self:end; font-size:clamp(2.8rem, 8.4vw, 7.7rem)}
.timeline__line{height:1px; background:rgba(69,96,3,.2); margin-bottom:2.6rem}
.timeline__line i{display:block; height:100%; width:0; background:var(--green); transition:width 1.6s var(--ease-out)}
.timeline__line.is-in i{width:100%}
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.6rem)}
.phase__head{
  display:flex; align-items:center; gap:.7em; background:var(--yellow); padding:.85em 1.1em;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.6rem;
}
.phase__dot{width:8px; height:8px; border-radius:50%; background:var(--green); flex:none}
.phase li{position:relative; padding-left:1.5em; margin-bottom:1em; font-size:.94rem; line-height:1.45}
.phase li::before{content:""; position:absolute; left:.15em; top:.62em; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75}

/* al pasar el ratón la fase se levanta un poco y su contenido se abre */
.phase{transition:transform .55s var(--ease-out)}
.phase__head{transition:background .45s var(--ease), letter-spacing .45s var(--ease), box-shadow .5s var(--ease)}
.phase__dot{transition:transform .45s var(--ease-out)}
.phase li{transition:transform .45s var(--ease-out)}
.phase:hover{transform:translateY(-6px)}
.phase:hover .phase__head{
  background:#F8E7A4; letter-spacing:.22em;
  box-shadow:0 14px 28px -16px rgba(50,60,10,.55);
}
.phase:hover .phase__dot{transform:scale(1.6)}
.phase:hover li{transform:translateX(7px)}
.phase:hover li:nth-child(2){transition-delay:.05s}
.phase:hover li:nth-child(3){transition-delay:.1s}
.phase:hover li:nth-child(4){transition-delay:.15s}
.timeline__note{
  margin-top:clamp(2rem,4vw,3rem); margin-left:auto; max-width:56ch; text-align:right;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.8;
}

/* ── Beneficios ─────────────────────────────────────────────── */
.benefits__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.benefits__title{grid-column:1 / -1}
.benefits__list{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,3vw,3rem); margin-top:clamp(1.5rem,4vw,3rem)}
.benefit h3{
  font-size:.86rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.9rem; padding-bottom:.5rem; border-bottom:2px solid currentColor; display:inline-block;
}
.benefit p{font-size:.79rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.8}

/* ── Beneficios: se marcan al hacer clic ──────────────────── */
.benefit{
  position:relative; z-index:0; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem; align-items:start;
  transition:transform .45s var(--ease-out);
}
.benefit h3,.benefit p{grid-column:2}
.benefit:hover{transform:translateY(-3px)}
/* fondo amarillo que aparece al conseguirlo */
.benefit::before{
  content:""; position:absolute; inset:-1rem -1.1rem; z-index:-1; border-radius:16px;
  background:var(--yellow); opacity:0; transform:scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.benefit.is-done::before{opacity:1; transform:scale(1)}

.benefit__check{
  grid-row:1 / span 2; margin-top:.1rem; padding:0;
  width:30px; height:30px; border:2px solid currentColor; border-radius:50%;
  background:transparent; color:inherit; display:grid; place-items:center;
  position:relative; cursor:pointer; flex:none;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.benefit__check svg{width:16px; height:16px; overflow:visible}
.benefit__check path{
  fill:none; stroke:var(--cream); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,30); stroke-dashoffset:var(--len,30);
  transition:stroke-dashoffset .45s var(--ease-out) .08s;
}
.benefit__check::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--green); opacity:0; pointer-events:none;
}
.benefit.is-done .benefit__check{
  background:var(--green); border-color:var(--green);
  animation:checkPop .5s var(--ease-out);
}
.benefit.is-done .benefit__check path{stroke-dashoffset:0}
.benefit.is-done .benefit__check::after{animation:checkRing .6s var(--ease-out)}
@keyframes checkPop{0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)}}
@keyframes checkRing{0%{opacity:.65; transform:scale(.85)} 100%{opacity:0; transform:scale(1.75)}}

.benefits__score{
  grid-column:1 / -1; margin-top:2.4rem;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  opacity:.55; transition:opacity .4s var(--ease), color .4s var(--ease);
}
.benefits__score b{font-weight:800}
.benefits__score.is-full{opacity:1; color:var(--green-l)}
.benefits__score.is-full::after{content:" \2713"; font-weight:800}
.benefits__art{position:relative; min-height:clamp(360px,40vw,520px)}

/* ── Qué es / qué no es ─────────────────────────────────────── */
.expect__h{margin-bottom:clamp(2rem,5vw,4rem)}
.spread{
  position:relative; width:min(100%, 800px); margin-inline:auto; aspect-ratio:1560/1294;
  display:grid; grid-template-columns:1fr 1fr; padding:70px 62px 114px 64px;
}
.spread__book{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; filter:drop-shadow(0 40px 60px rgba(50,60,10,.25))}
.spread__pencil{cursor:grab; touch-action:none}
.spread__pencil:active{cursor:grabbing}
.spread__pencil img{filter:drop-shadow(0 10px 18px rgba(50,60,10,.35))}
.spread__page{position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center}
.spread__page--l{padding-right:15%}
.spread__page--r{padding-left:11%}
.vlist li{
  position:relative; padding-left:2.1em; margin-bottom:5.2em;
  font-size:clamp(.8rem, 1.1vw, 1rem); font-weight:400;
  letter-spacing:.012em; line-height:1.6;
}
.vlist li b{
  display:block; margin-bottom:.5em;
  font-size:1.2em; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.25;
}
/* casilla que se marca al hacer clic: el ✓ vive dentro del propio cuadro
   y solo se revela al activarlo */
.vlist li{cursor:pointer; user-select:none; -webkit-user-select:none}
.vlist li::before{
  content:"✓"; position:absolute; left:0; top:.14em;
  width:1.15em; height:1.15em; display:grid; place-content:center;
  border:2px solid var(--green-l); border-radius:3px;
  color:transparent; background:transparent;
  font-size:.86em; font-weight:800; line-height:1;
  transition:background .3s var(--ease), color .25s var(--ease),
             border-color .3s var(--ease), transform .4s var(--ease-out);
}
.vlist li:hover::before{border-color:var(--green)}
.vlist li.is-checked::before{
  background:var(--green-l); border-color:var(--green-l); color:var(--cream);
  animation:tickPop .45s var(--ease-out);
}
@keyframes tickPop{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}
.vlist li:last-child{margin-bottom:0}

/* frase de ánimo que va cambiando según se marcan las casillas */
.expect__cheer{
  margin:clamp(1.4rem,3vw,2.4rem) auto 0; max-width:46ch; text-align:center;
  font-size:clamp(1rem,1.55vw,1.4rem); font-style:italic; font-weight:500;
  letter-spacing:-.015em; line-height:1.35; color:var(--green-l);
  min-height:2.7em;                       /* evita el salto al aparecer */
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), color .4s var(--ease);
}
.expect__cheer.is-in{opacity:1; transform:none}
.expect__cheer.is-full{color:var(--green); font-weight:600}

/* ── Proceso ────────────────────────────────────────────────── */
.process__h{margin-bottom:clamp(2.5rem,6vw,5rem); font-size:clamp(2.8rem, 9vw, 8rem)}
.process__grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.process__photo{position:relative}
.process__photo .frame img{aspect-ratio:4/3.4}
/* línea temporal: un raíl tenue y encima el progreso, que avanza con el scroll */
.steps{position:relative; display:grid; gap:clamp(2rem,3.4vw,3.2rem)}
.steps::before,.steps::after{
  content:""; position:absolute; left:26px; width:2px; border-radius:2px;
  top:var(--top,27px);
}
.steps::before{height:var(--track,0px); background:rgba(69,96,3,.2)}
.steps::after{height:var(--progress,0px); background:var(--green)}

.steps li{
  position:relative; display:grid; grid-template-columns:54px 1fr;
  gap:.8rem 1.7rem; align-items:start; border-top:0; padding-top:0;
}
.steps__n{
  grid-row:1 / span 2; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:1;
  background:var(--cream); border:2px solid rgba(69,96,3,.28); color:var(--green);
  font-size:1.1rem; font-weight:800; line-height:1; letter-spacing:0; opacity:1;
  transition:background .5s var(--ease), color .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease-out);
}
/* el botón cae bajo los pasos, alineado con su texto */
.process__cta{grid-column:2; justify-self:start; margin-top:clamp(2rem,4vw,3.2rem); margin-left:calc(54px + 1.7rem)}

.steps li.is-active .steps__n{
  background:var(--green); border-color:var(--green); color:var(--cream);
  transform:scale(1.08);
}
.steps h3{font-size:clamp(1rem,1.5vw,1.5rem); font-weight:500; letter-spacing:-.02em}
.steps p{font-size:.79rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; line-height:1.8; opacity:.85}

/* ── Contacto ───────────────────────────────────────────────── */
.contact{padding-block:clamp(5rem,10vw,9rem)}
.contact__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.contact__brand{margin-top:2rem; font-size:.78rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; opacity:.85}
.stars{margin-top:1.4rem; font-size:1.1rem; letter-spacing:.35em}
.stars span{display:inline-block}
.contact__claim{margin-top:1.4rem; font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; line-height:1.9; opacity:.9}
.contact__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem}
.btn{
  position:relative; z-index:0; display:inline-flex; align-items:center; gap:.8em; overflow:hidden;
  padding:1.05em 1.9em; border-radius:100px; font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; will-change:transform;
}
.btn span,.btn i{position:relative; z-index:1; font-style:normal; transition:transform .5s var(--ease-out)}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--ivory); transform:translateY(101%); transition:transform .55s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--green)}
.btn:hover i{transform:translateX(5px)}
.btn--fill{background:var(--ivory); color:var(--green); border-color:var(--ivory)}
.btn--fill::before{background:var(--green-d)}
.btn--fill:hover{color:var(--ivory)}
/* botón sólido para fondos claros; va después de .btn para poder ganarle */
.btn--dark{background:var(--green); color:var(--cream); border-color:var(--green)}
.btn--dark::before{background:var(--cream)}
.btn--dark:hover{color:var(--green)}
.contact__r{position:relative}
.contact__r .frame{background:transparent}
.contact__r .frame img{aspect-ratio:3/4}

/* ══════════ PÁGINA DE SOLICITUD ══════════ */
.page-plain{background:var(--cream)}
.nav--static{position:static; color:var(--green)}

.req{padding:clamp(2rem,5vw,4rem) var(--pad) clamp(4rem,8vw,7rem); max-width:1100px; margin-inline:auto}
.req__head{max-width:52ch; margin-bottom:clamp(2.5rem,5vw,4rem)}
.req__head .display{font-size:clamp(2.6rem, 7vw, 5.6rem); margin-bottom:1.4rem}
.req__lead{
  font-size:.84rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.8; max-width:46ch;
}

.form{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,2.6vw,2.2rem)}
.field{display:flex; flex-direction:column; gap:.6rem; min-width:0; border:0; padding:0; margin:0}
.field--full{grid-column:1 / -1}
.field label, .field legend{
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); padding:0;
}

.field input, .field textarea{
  width:100%; font:inherit; font-size:.92rem; color:var(--green);
  background:transparent; border:0; border-bottom:2px solid rgba(69,96,3,.28);
  padding:.65rem .1rem; border-radius:0;
  transition:border-color .35s var(--ease);
}
.field textarea{
  border:2px solid rgba(69,96,3,.28); padding:.9rem 1rem; resize:vertical; line-height:1.6;
}
.field input:focus, .field textarea:focus{outline:0; border-color:var(--green)}
.field input::placeholder, .field textarea::placeholder{color:rgba(69,96,3,.42)}

.opts{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.4rem}
.opts .opt-box{
  display:flex; align-items:center; gap:.8rem; cursor:pointer;
  background:var(--yellow); padding:.9rem 1.1rem; border-radius:14px;
  font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:background .35s var(--ease), transform .35s var(--ease-out);
}
.opts .opt-box:hover{transform:translateY(-2px)}
.opts .opt-box input{
  appearance:none; -webkit-appearance:none; flex:none; padding:0; margin:0;
  width:18px; height:18px; border:2px solid var(--green); border-radius:50%;
  background:transparent; transition:background .3s, box-shadow .3s; cursor:pointer;
}
.opts .opt-box input:checked{background:var(--green); box-shadow:inset 0 0 0 3px var(--yellow)}
.opts .opt-box:has(input:checked){background:#F7E49B}

.form__foot{grid-column:1 / -1; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:.6rem}
.form__note{font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.6}
.form__note.is-error{color:#B23A1C}
.form__note.is-ok{color:var(--green-l)}

@media (max-width:760px){
  .form, .opts{grid-template-columns:1fr}
}

/* ── Footer ─────────────────────────────────────────────────── */
.foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding:1.6rem var(--pad); background:var(--cream); color:var(--green);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.foot a:hover{text-decoration:underline}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:1fr; gap:2.2rem}
  .benefits__grid,.detail__grid,.process__grid,.contact__grid,.about__grid{grid-template-columns:1fr}
  .process__cta{grid-column:1; margin-left:0}
  .detail__collage{grid-row:auto; order:3; margin-top:2.5rem}
  .thread{display:none}
  .detail__solution{grid-column:1}
  .benefits__art{order:3; min-height:340px}
  .services__head,.timeline__head{grid-template-columns:1fr}
  .services__head .display,.timeline__head .display{text-align:left; justify-self:start; order:-1; margin-bottom:1.5rem}
  .timeline__note{text-align:left; margin-left:0}
  .nav__links{display:none}
}
@media (max-width:760px){
  .about__cols,.benefits__list,.spread{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .about__stats{grid-template-columns:1fr; gap:1.8rem}
  .hero__meta--r{font-size:.58rem}
  .hero__meta{top:calc(var(--pad) + 3.2rem)}
  /* la banda: los sellos se apilan en dos filas */
  /* en una columna: los sellos se apilan centrados, sin solaparse */
  .banner{min-height:clamp(980px, 285vw, 1240px)}
  .banner .stamp-wrap{--w:min(46vw, 182px) !important; --x:50% !important}
  .banner .stamp-wrap:nth-of-type(1){--y:11% !important}
  .banner .stamp-wrap:nth-of-type(2){--y:37% !important}
  .banner .stamp-wrap:nth-of-type(3){--y:63% !important}
  .banner .stamp-wrap:nth-of-type(4){--y:89% !important}
  .banner .spark{--w:clamp(14px, 4vw, 26px) !important}

  .spread__book{display:none}
  .spread__pencil{display:none}   /* sin libreta que lo sostenga, pisaría el texto */
  .spread{aspect-ratio:auto; width:100%; background:var(--yellow); padding:1.8rem; gap:2.4rem}
  .spread__page--l,.spread__page--r{padding-inline:0}
  .env__label{bottom:8%}
}
@media (max-width:560px){
  /* ojo: nunca redefinir --w con var(--w) — es cíclico y anula el ancho */
  .piece--env{--w:min(92vw, 360px) !important}
  .env__label{bottom:2.2%}
  .env__title{font-size:calc(var(--w) * .069)}
  .film{padding:7px 7px 20px}
  .polaroid{padding:7px 7px 26px}
  .hero__meta--r{font-size:.55rem; letter-spacing:.12em; top:calc(var(--pad) + 2.2rem)}
  .hero__scroll{font-size:.58rem; letter-spacing:.18em}
  .hero__scroll-line{height:34px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  /* las nubes acabarían fuera de plano: se dejan quietas y repartidas */
  .cloud{animation:none !important}
  .cloud--1{transform:translate3d(4vw,0,0)}   .cloud--2{transform:translate3d(48vw,0,0)}
  .cloud--3{transform:translate3d(72vw,0,0)}  .cloud--4{transform:translate3d(-6vw,0,0)}
  .cloud--5{transform:translate3d(58vw,0,0)}
  .sky__hot{display:none}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none}
  .word i{transform:none}
}