/* ============================================================
   JADE — Sistema visual
   01 Tokens · 02 Base · 03 Tipografía · 04 Botones · 05 Overture
   06 Header · 07 Menú · 08 Hero · 09 Transición · 10 Secciones
   11 Formulario · 12 Footer · 13 Cookies · 14 Motion · 15 Responsive
   ============================================================ */

/* 01 · TOKENS ------------------------------------------------ */
:root{
  --jade:#0F3D33;
  --jade-deep:#0A2A24;
  --sage:#5E7F6F;
  --mist:#C9D5CB;
  --cream:#F7F7F5;
  --cream-warm:#EFF0EB;
  --carbon:#1A1A1A;
  --night:#0E1412;

  --ink:var(--carbon);
  --rule:color-mix(in srgb, var(--jade) 16%, transparent);
  --rule-light:rgba(247,247,245,.16);

  --sans:'Montserrat', system-ui, -apple-system, Arial, sans-serif;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;

  --shell:min(1340px, 88vw);
  --gutter:6vw;

  --ease:cubic-bezier(.22,.7,.18,1);
  --ease-soft:cubic-bezier(.33,.9,.25,1);

  --t-micro:200ms;
  --t-ui:420ms;
  --t-section:760ms;
  --t-cine:1200ms;

  /* textura mineral */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 02 · BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,1.05vw,1.125rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:2}

:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:2px}
.skip{
  position:fixed;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:200;background:var(--cream);color:var(--jade);
  padding:14px 22px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform var(--t-ui) var(--ease);
}
.skip:focus{transform:translate(-50%,0)}

.progress{position:fixed;inset:0 0 auto;height:2px;z-index:95;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--sage),var(--mist));
  transform:scaleX(0);transform-origin:0 50%;
}

/* 03 · TIPOGRAFÍA -------------------------------------------- */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.02}
p{margin:0}

.display{
  font-size:clamp(2.4rem,5vw,5rem);
  line-height:1.03;
  letter-spacing:-.03em;
  font-weight:400;
  text-wrap:balance;
}
.display em,.hero-title em,.creed em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.lead{
  font-size:clamp(1.05rem,1.35vw,1.35rem);
  line-height:1.52;
  font-weight:300;
  max-width:46ch;
}
.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);
}
.eyebrow i{font-style:normal;opacity:.62}
.eyebrow.light{color:var(--mist)}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28;max-width:9vw}

/* 04 · BOTONES Y LINKS --------------------------------------- */
.btn{
  --bg:var(--cream);--fg:var(--jade);
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.6em;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  transition:transform var(--t-micro) var(--ease),background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);
}
.btn i{transition:transform var(--t-ui) var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover i{transform:translate(2px,-2px)}
.btn-solid{--bg:var(--cream);--fg:var(--jade)}
.btn-ghost{background:none;border:1px solid currentColor;color:inherit;padding:.85em 1.3em}
.btn-ghost:hover{background:currentColor;color:var(--cream)}
.header.is-pinned .btn-ghost:hover{color:var(--cream)}

.link-under{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:.35em;position:relative;
}
.link-under::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(.18);transform-origin:0 50%;
  transition:transform var(--t-ui) var(--ease);
}
.link-under:hover::after{transform:scaleX(1)}

/* 05 · OVERTURE ---------------------------------------------- */
.overture{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;
  background:var(--jade-deep);
  pointer-events:none;
}
.overture-mark{
  width:clamp(56px,7vw,86px);aspect-ratio:1;
  fill:none;stroke:var(--mist);stroke-width:2.4;
  opacity:0;transform:scale(.86) rotate(-12deg);
}
.overture-mark .facet{stroke-dasharray:1 1;stroke-dashoffset:0}
.overture-word{
  position:absolute;bottom:12vh;
  font-size:.72rem;letter-spacing:.6em;color:var(--mist);
  opacity:0;
}
.overture-veil{position:absolute;inset:0;background:var(--jade-deep);transform-origin:50% 100%}
body:not(.is-loading) .overture{display:none}

/* 06 · HEADER ------------------------------------------------ */
.header{
  position:fixed;inset:0 0 auto;z-index:90;
  color:var(--cream);
  transition:background var(--t-section) var(--ease),color var(--t-section) var(--ease),box-shadow var(--t-section) var(--ease),backdrop-filter var(--t-section) var(--ease);
}
.header-inner{
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);
  height:92px;
  transition:height var(--t-section) var(--ease);
}
.header.is-pinned{
  background:rgba(247,247,245,.82);
  color:var(--jade);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 1px 0 rgba(15,61,51,.08);
}
.header.is-pinned .header-inner{height:70px}
.logo{display:flex;align-items:center;gap:11px}
.logo-mark{width:26px;aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:3;transition:transform var(--t-ui) var(--ease)}
.logo:hover .logo-mark{transform:rotate(45deg)}
.logo-word{font-size:.82rem;font-weight:600;letter-spacing:.34em}
.nav-desktop{display:flex;gap:clamp(18px,2.4vw,38px);margin-left:auto}
.nav-desktop a{
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  opacity:.74;transition:opacity var(--t-micro) var(--ease);
}
.nav-desktop a:hover{opacity:1}
.header-right{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.lang{display:flex;gap:.5em;font-size:.68rem;letter-spacing:.14em;margin:0}
.lang span{font-weight:600}
.lang i{opacity:.4;font-style:normal}
.lang a{opacity:.6;transition:opacity var(--t-micro)}
.lang a:hover{opacity:1}
.burger{display:none;align-items:center;gap:10px}
.burger-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.burger-bars{display:grid;gap:5px;width:22px}
.burger-bars i{height:1px;background:currentColor;transition:transform var(--t-ui) var(--ease)}
.burger[aria-expanded="true"] .burger-bars i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* 07 · MENÚ MÓVIL -------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:85;
  background:var(--jade);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,14vh,140px) var(--gutter) 6vh;
  overflow:hidden;
}
.menu[hidden]{display:none}
.menu nav{display:grid;gap:clamp(6px,1.4vh,16px);position:relative;z-index:2}
.menu nav a{
  display:flex;align-items:baseline;gap:.8em;
  font-size:clamp(2rem,9vw,3.4rem);letter-spacing:-.03em;line-height:1.1;
  opacity:0;transform:translateY(26px);
  transition:opacity var(--t-section) var(--ease),transform var(--t-section) var(--ease);
  transition-delay:calc(var(--i) * 70ms);
  border-bottom:1px solid var(--rule-light);padding-bottom:.25em;
}
.menu nav a span{font-size:.7rem;letter-spacing:.2em;opacity:.5;font-family:var(--sans)}
.menu nav .menu-cta{font-family:var(--serif);font-style:italic;border-bottom:0}
.menu.is-open nav a{opacity:1;transform:none}
.menu-foot{
  display:flex;gap:28px;margin-top:auto;position:relative;z-index:2;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;
  transition:opacity var(--t-section) var(--ease) 420ms;
}
.menu.is-open .menu-foot{opacity:.7}
.menu-mark{
  position:absolute;right:-16vw;bottom:-18vh;width:66vw;aspect-ratio:1;
  fill:none;stroke:var(--cream);stroke-width:1;opacity:.1;
}

/* 08 · HERO -------------------------------------------------- */
.hero{
  position:relative;
  min-height:640px;height:100vh;height:100svh;
  display:flex;align-items:flex-end;
  padding-bottom:clamp(44px,8vh,90px);
  background:var(--jade-deep);color:var(--cream);
  overflow:hidden;
  isolation:isolate;
}
.hero-layers{position:absolute;inset:-6% -4%;z-index:0}
.layer{position:absolute;inset:0;will-change:transform}

.layer-depth{
  background:
    radial-gradient(120% 90% at 18% 8%, #16574A 0%, transparent 58%),
    radial-gradient(90% 70% at 88% 92%, #0B332B 0%, transparent 62%),
    linear-gradient(170deg, #0C342C 0%, #092520 100%);
}
.layer-mineral{
  background:
    conic-gradient(from 210deg at 68% 36%, rgba(94,127,111,.42), transparent 42%, rgba(201,213,203,.16) 72%, transparent),
    radial-gradient(60% 46% at 74% 30%, rgba(201,213,203,.2), transparent 70%);
  filter:blur(28px);
  opacity:.9;
  mix-blend-mode:screen;
}
.layer-bloom{
  background:radial-gradient(42% 42% at 24% 72%, rgba(94,127,111,.5), transparent 70%);
  filter:blur(50px);
}
.layer-mark{
  width:min(74vh,60vw);aspect-ratio:1;
  inset:auto -6vw -18vh auto;
  fill:none;stroke:var(--mist);stroke-width:.7;
  opacity:.17;
}
.layer-mark .stroke-j{stroke-width:1.6}
.layer-grain{
  background-image:var(--grain);background-size:260px;
  opacity:.055;mix-blend-mode:overlay;pointer-events:none;
}

.hero-inner{display:grid;gap:clamp(24px,3.4vh,44px)}
.hero-eyebrow{color:var(--mist)}
.hero-title{
  font-size:clamp(2.9rem,7.2vw,7.4rem);
  line-height:.98;letter-spacing:-.04em;font-weight:400;
}
@media (min-height:900px){.hero-title{font-size:clamp(2.9rem,8vw,8.4rem)}}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:block}
.hero-title em{display:inline-block}
.hero-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(24px,4vw,70px);
  padding-top:clamp(14px,2.4vh,30px);
  border-top:1px solid var(--rule-light);
}
.hero-sub{max-width:44ch;font-weight:300;font-size:clamp(.98rem,1.15vw,1.16rem);opacity:.84}
.hero-actions{display:flex;align-items:center;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.scroll-cue{
  position:absolute;right:clamp(14px,2.4vw,34px);top:50%;z-index:2;
  transform-origin:100% 50%;transform:rotate(90deg) translate(0,-50%);
  display:flex;align-items:center;gap:12px;
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;opacity:.5;
}
/* Invita a bajar y se detiene: el movimiento perpetuo no comunica nada. */
.scroll-cue i{display:block;width:46px;height:1px;background:currentColor;animation:cue 2.6s var(--ease) 2s 4 both}
@keyframes cue{0%,100%{transform:scaleX(.4);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}}

/* 09 · TRANSICIÓN MATERIAL → PENSAMIENTO --------------------- */
/* La cámara atraviesa la superficie mineral: sólo transform y opacity,
   nada de filtros animados a pantalla completa. */
.veil{height:150vh;background:var(--jade-deep);position:relative}
.veil-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;contain:paint;
}
.veil-surface{
  position:absolute;inset:-20%;
  background:
    radial-gradient(52% 52% at 50% 54%, rgba(201,213,203,.92), rgba(94,127,111,.55) 42%, rgba(12,52,44,0) 74%),
    linear-gradient(180deg,#0C342C,#0A2A24);
  transform:scale(var(--veil-scale,1));
  will-change:transform;
}
.veil-light{
  position:absolute;inset:0;background:var(--cream);
  opacity:var(--veil-fade,0);
  will-change:opacity;
}

/* 10 · SECCIONES --------------------------------------------- */
.section{position:relative;padding:clamp(86px,13vh,190px) 0;overflow:hidden}

/* POTENCIAL */
.potencial{background:var(--cream);padding-block:clamp(110px,18vh,240px)}
.potencial-grid{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(30px,5vw,96px);align-items:end;
  margin-top:clamp(40px,7vh,96px);
}
.potencial-text{display:grid;gap:1.2em;max-width:42ch;font-weight:300;color:color-mix(in srgb,var(--carbon) 76%,var(--cream))}
.watermark{
  position:absolute;left:-14vw;top:-10vh;width:44vw;aspect-ratio:1;
  fill:none;stroke:var(--jade);stroke-width:.6;opacity:.07;z-index:1;
}

/* PROBLEMA */
.problema{background:var(--jade);color:var(--cream)}
.problema-grid{margin-top:clamp(40px,7vh,90px);display:grid;gap:clamp(40px,7vh,96px)}
.words{display:grid;gap:.08em;justify-items:start}
.words span{
  display:block;
  opacity:0;transform:translateY(.4em);
  transition:opacity var(--t-cine) var(--ease),transform var(--t-cine) var(--ease);
}
.words span:nth-child(2){transition-delay:220ms}
.words span:nth-child(3){transition-delay:440ms}
.is-in .words span{opacity:1;transform:none}
.problema-turn{
  display:grid;gap:.3em;justify-self:end;max-width:30ch;text-align:right;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--t-cine) var(--ease) 760ms,transform var(--t-cine) var(--ease) 760ms;
}
.is-in .problema-turn{opacity:1;transform:none}
.problema-turn em{font-family:var(--serif);font-style:italic;font-size:clamp(2.2rem,4vw,3.6rem);color:var(--mist)}
.problema-turn strong{font-weight:300;font-size:clamp(1.1rem,1.6vw,1.6rem);line-height:1.35}

/* TRANSFORMACIÓN */
.transformacion{
  background:linear-gradient(180deg,var(--jade) 0%,var(--sage) 34%,var(--cream-warm) 76%,var(--cream) 100%);
  color:var(--cream);
}
.transformacion .display{margin-top:clamp(26px,4vh,54px);max-width:22ch}
.transformacion .eyebrow{color:var(--mist)}
.path{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,2vw,30px);
  margin-top:clamp(56px,9vh,120px);
  position:relative;
}
.path::before{
  content:"";position:absolute;top:10px;left:0;right:0;height:1px;
  background:currentColor;opacity:.3;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1400ms var(--ease) 200ms;
}
.is-in .path::before{transform:scaleX(1)}
.path li{
  padding-top:34px;position:relative;
  opacity:0;transform:translateY(22px);
  transition:opacity var(--t-section) var(--ease),transform var(--t-section) var(--ease);
  transition-delay:calc(var(--i) * 110ms + 260ms);
}
.is-in .path li{opacity:1;transform:none}
.path li::before{
  content:"";position:absolute;top:5px;left:0;width:11px;height:11px;
  border:1px solid currentColor;transform:rotate(45deg);background:var(--jade);
}
.path li:nth-child(n+4)::before{background:transparent}
.path b{font-size:.66rem;letter-spacing:.2em;opacity:.6;font-weight:500}
.path h3{font-size:clamp(1.05rem,1.5vw,1.5rem);margin:.5em 0 .5em;letter-spacing:-.01em}
.path p{font-size:.92rem;font-weight:300;opacity:.84;max-width:22ch}
.path li:nth-child(4),.path li:nth-child(5){color:var(--jade)}
.path li:nth-child(4) p,.path li:nth-child(5) p{opacity:.72}

/* MÉTODO */
.metodo{
  background:var(--night);color:var(--cream);
  transition:background var(--t-cine) var(--ease);
}
.metodo::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 60% at var(--mx,70%) 20%, rgba(94,127,111,.28), transparent 70%);
  transition:background var(--t-cine) var(--ease);
}
.metodo-head{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:end;
  gap:clamp(24px,4vw,70px);margin-top:clamp(32px,5vh,64px);
}
.metodo-head .lead{opacity:.76}
.stages{margin-top:clamp(48px,8vh,110px);border-top:1px solid var(--rule-light)}
.stage{
  display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.4fr);
  align-items:center;gap:clamp(16px,3vw,52px);
  padding:clamp(22px,3.4vh,40px) 0;
  border-bottom:1px solid var(--rule-light);
  cursor:default;
  transition:padding var(--t-ui) var(--ease),background var(--t-ui) var(--ease);
}
.stage b{
  font-size:clamp(1rem,1.5vw,1.4rem);font-weight:400;letter-spacing:.06em;
  opacity:.4;font-family:var(--serif);
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
  display:inline-block;
}
.stage h3{
  font-size:clamp(1.5rem,3.2vw,3rem);font-weight:400;letter-spacing:-.03em;
  opacity:.52;transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
}
.stage p{
  font-size:.96rem;font-weight:300;max-width:38ch;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
}
.stage.is-active b{opacity:.85;transform:translateY(-2px)}
.stage.is-active h3{opacity:1;transform:translateX(6px)}
.stage.is-active p{opacity:.78;transform:none}

/* SERVICIOS */
.servicios{background:var(--cream)}
.servicios-head{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:end;
  gap:clamp(24px,4vw,70px);margin-top:clamp(32px,5vh,64px);
}
.accordion{margin-top:clamp(48px,8vh,110px);border-top:1px solid var(--rule)}
.accordion .item{border-bottom:1px solid var(--rule)}
.accordion h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0}
.accordion button{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3.2vh,38px) 0;text-align:left;
}
.accordion button b{font-family:var(--serif);font-size:1.1rem;opacity:.5;font-weight:400}
.accordion button span{
  font-size:clamp(1.6rem,3.6vw,3.2rem);letter-spacing:-.03em;font-weight:400;
  transition:transform var(--t-ui) var(--ease),color var(--t-ui) var(--ease);
}
.accordion button:hover span{transform:translateX(8px);color:var(--jade)}
.accordion button i{
  position:relative;width:16px;height:16px;flex:none;
  transition:transform var(--t-ui) var(--ease);
}
.accordion button i::before,.accordion button i::after{
  content:"";position:absolute;inset:50% 0 auto;height:1px;background:currentColor;
  transition:opacity var(--t-ui) var(--ease);
}
.accordion button i::after{transform:rotate(90deg)}
.accordion button[aria-expanded="true"] i{transform:rotate(90deg)}
.accordion button[aria-expanded="true"] i::after{opacity:0}
.accordion button[aria-expanded="true"] span{color:var(--jade)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-ui) var(--ease)}
.item.is-open .panel{grid-template-rows:1fr}
.panel-in{
  overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(20px,4vw,70px);
  opacity:0;transition:opacity var(--t-ui) var(--ease);
}
.item.is-open .panel-in{opacity:1;padding-bottom:clamp(26px,4vh,48px)}
.panel-in p{font-weight:300;max-width:44ch;color:color-mix(in srgb,var(--carbon) 72%,var(--cream))}
.panel-in ul{display:grid;gap:.6em;align-content:start}
.panel-in li{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:.6em;border-bottom:1px solid var(--rule);color:var(--sage);
}

/* PROYECTOS */
.proyectos{background:var(--cream-warm)}
.proyectos-head{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:end;
  gap:clamp(24px,4vw,70px);margin-top:clamp(32px,5vh,64px);
}
.gallery{display:grid;gap:clamp(60px,11vh,160px);margin-top:clamp(56px,9vh,120px)}
.work{display:grid;gap:clamp(22px,3vw,56px);align-items:center}
.work-a{grid-template-columns:1.6fr 1fr}
.work-b{grid-template-columns:1fr 1.6fr}
.work-c{grid-template-columns:1fr 1fr}
.frame{
  position:relative;margin:0;overflow:hidden;
  background:var(--jade);
  isolation:isolate;
}
.frame::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:240px;
  opacity:.08;mix-blend-mode:overlay;
}
.frame-tag{
  position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,2vw,24px);z-index:2;
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);color:var(--cream);opacity:.7;
}
.f-a{aspect-ratio:16/10;background:
  radial-gradient(70% 70% at 24% 24%, #2A6B5B, transparent 62%),
  linear-gradient(140deg,#0F3D33,#07211C);}
.f-b{aspect-ratio:16/11;background:
  radial-gradient(60% 60% at 76% 30%, #7D9C8B, transparent 64%),
  linear-gradient(200deg,#36584D,#0C2E27);}
.f-c{aspect-ratio:4/5;background:
  radial-gradient(65% 50% at 50% 84%, #C9D5CB, transparent 70%),
  linear-gradient(160deg,#153F36,#0A2922);}
.frame{transform:scale(1.04);transition:transform var(--t-cine) var(--ease)}
.is-in .frame{transform:scale(1)}
.work:hover .frame{transform:scale(1.02)}
.work-meta{display:grid;gap:1.1em;align-content:center;max-width:44ch}
.work-meta h3{font-size:clamp(1.35rem,2.4vw,2.3rem);line-height:1.1}
.work-meta>p:not(.eyebrow){font-weight:300;color:color-mix(in srgb,var(--carbon) 72%,var(--cream))}
.work-meta .eyebrow i{color:var(--jade);opacity:1;font-weight:500}
.work-meta .link-under{justify-self:start;color:var(--jade)}

/* MANIFIESTO */
.manifiesto{background:var(--jade);color:var(--cream);padding-block:clamp(110px,18vh,240px)}
.manifiesto::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:300px;opacity:.05;mix-blend-mode:overlay;
}
.creed{margin-top:clamp(44px,7vh,100px);display:grid;gap:.5em;max-width:24ch}
.creed p{
  font-size:clamp(1.9rem,4.4vw,4.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:300;
  opacity:0;transform:translateY(.3em);
  transition:opacity 1000ms var(--ease),transform 1000ms var(--ease);
  transition-delay:calc(var(--i) * 180ms);
}
.is-in .creed p{opacity:1;transform:none}
.creed-break{
  font-size:clamp(1rem,1.3vw,1.3rem)!important;line-height:1.6!important;
  letter-spacing:.02em!important;color:var(--mist);
  padding:.8em 0 .4em;
}
.creed strong{font-weight:400;font-family:var(--serif);font-style:italic}

/* PILARES */
.pilares{background:var(--cream)}
.pilares-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(34px,6vw,110px);margin-top:clamp(36px,6vh,80px);
}
.pilares .display{align-self:start;position:sticky;top:120px}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.pillars article{
  display:grid;gap:.75em;align-content:start;
  padding-top:1.6em;border-top:1px solid var(--rule);
  opacity:0;transform:translateY(20px);
  transition:opacity var(--t-section) var(--ease),transform var(--t-section) var(--ease);
  transition-delay:calc(var(--i) * 110ms);
}
.is-in .pillars article{opacity:1;transform:none}
.pillars svg{
  width:34px;aspect-ratio:1;fill:none;stroke:var(--jade);stroke-width:3;
  transition:transform var(--t-ui) var(--ease);
}
.pillars article:hover svg{transform:rotate(45deg)}
.pillars h3{font-size:clamp(1.1rem,1.6vw,1.6rem)}
.pillars p{font-weight:300;font-size:.96rem;color:color-mix(in srgb,var(--carbon) 72%,var(--cream))}

/* CONTACTO */
.contacto{
  background:var(--night);color:var(--cream);
  padding-block:clamp(100px,16vh,210px);
}
.contacto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 18% 12%, rgba(15,61,51,.9), transparent 68%),
             radial-gradient(50% 50% at 86% 90%, rgba(94,127,111,.32), transparent 70%);
}
.contacto-mark{
  position:absolute;right:-20vw;top:-14vh;width:72vw;aspect-ratio:1;z-index:1;
  fill:none;stroke:var(--mist);stroke-width:.5;opacity:.12;
  /* El movimiento llega del parallax (data-depth), no de una animación
     infinita: repintar un trazo de 72vw en bucle no vale su coste. */
}
.contacto-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(44px,6vw,110px);align-items:start;
}
.contacto-copy{display:grid;gap:clamp(18px,2.6vh,30px)}
.contacto-copy .lead{opacity:.78}
.contacto-direct{font-family:var(--serif);font-style:italic;font-size:1.4rem}
.contacto-direct .link-under{font-family:var(--sans);font-style:normal}

/* 11 · FORMULARIO -------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.field{display:grid;gap:.5em}
.field-wide,.form-foot{grid-column:1/-1}
.field label{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.field label span{text-transform:none;letter-spacing:.04em;opacity:.7}
.field input,.field select,.field textarea{
  background:none;border:0;border-bottom:1px solid var(--rule-light);
  padding:.7em 0;color:var(--cream);font-weight:300;
  border-radius:0;
  transition:border-color var(--t-ui) var(--ease);
}
.field select{appearance:none;cursor:pointer}
.field option{color:var(--carbon)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--mist)}
.field.is-focus label{opacity:1;color:var(--mist)}
.field.is-error input,.field.is-error textarea{border-color:#E39B8B}
.field.is-error label{color:#E39B8B;opacity:1}
.form-foot{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;margin-top:1em}
.form .btn[data-busy]{opacity:.65;pointer-events:none}
.form-status{font-size:.86rem;font-weight:300;opacity:0;transition:opacity var(--t-ui) var(--ease);max-width:34ch}
.form-status.is-shown{opacity:.9}
.form-status.is-ok{color:var(--mist)}
.form-status.is-bad{color:#E39B8B}

/* 12 · FOOTER ------------------------------------------------ */
.footer{background:var(--jade-deep);color:var(--cream);padding:clamp(60px,9vh,110px) 0 36px}
.footer-top{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;
  gap:clamp(34px,5vw,80px);
  padding-bottom:clamp(44px,7vh,86px);border-bottom:1px solid var(--rule-light);
}
.footer-brand{display:grid;gap:.8em;align-content:start}
.footer-mark{width:38px;aspect-ratio:1;fill:none;stroke:var(--mist);stroke-width:3}
.footer-word{font-size:1.1rem;font-weight:600;letter-spacing:.34em}
.footer-brand p:last-child{font-weight:300;opacity:.66;font-size:.94rem}
.footer-top nav,.footer-top>div:last-child{display:grid;gap:.75em;align-content:start}
.footer-head{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;opacity:.46;margin-bottom:.5em}
.footer-top a{font-size:.9rem;font-weight:300;opacity:.76;transition:opacity var(--t-micro),transform var(--t-micro) var(--ease)}
.footer-top a:hover{opacity:1;transform:translateX(3px)}
.footer-legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:28px;font-size:.7rem;letter-spacing:.04em;opacity:.56;
}
.footer-legal nav{display:flex;gap:clamp(12px,1.6vw,26px);flex-wrap:wrap}
.footer-legal a:hover,.footer-legal button:hover{text-decoration:underline}

/* 13 · COOKIES ----------------------------------------------- */
.cookies{
  position:fixed;left:50%;bottom:max(18px,2vh);z-index:120;
  width:min(680px,calc(100vw - 32px));transform:translateX(-50%);
  display:grid;gap:18px;
  padding:clamp(20px,2.4vw,28px);
  background:rgba(247,247,245,.9);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  color:var(--carbon);
  border:1px solid rgba(15,61,51,.12);
  box-shadow:0 20px 60px rgba(10,42,36,.16);
  animation:cookiesIn 700ms var(--ease) both;
}
@keyframes cookiesIn{from{opacity:0;transform:translate(-50%,24px)}}
.cookies[hidden]{display:none}
.cookies-title{font-weight:600;font-size:.94rem;margin-bottom:.35em}
.cookies-text{font-size:.86rem;font-weight:300;opacity:.76;max-width:56ch}
.cookies-prefs{display:flex;gap:clamp(12px,2vw,24px);flex-wrap:wrap;margin-top:16px}
.cookies-prefs label{display:flex;align-items:center;gap:.5em;font-size:.76rem;letter-spacing:.06em}
.cookies-prefs input{accent-color:var(--jade)}
.cookies-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cookies-actions button:not(.btn){
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;
  padding:.9em .2em;
}
.cookies-actions button:not(.btn):hover{opacity:1;text-decoration:underline}
.cookies .btn-solid{--bg:var(--jade);--fg:var(--cream);margin-left:auto}

/* 14 · MOTION DE ENTRADA ------------------------------------- */
[data-reveal] .eyebrow,
[data-reveal] .display,
[data-reveal] .lead,
[data-reveal] .potencial-text,
[data-reveal] .stages,
[data-reveal] .accordion,
[data-reveal] .work-meta,
[data-reveal] .form,
[data-reveal] .contacto-direct{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--t-section) var(--ease),transform var(--t-section) var(--ease);
}
[data-reveal] .display{transition-delay:90ms}
[data-reveal] .lead,[data-reveal] .potencial-text{transition-delay:180ms}
[data-reveal] .stages,[data-reveal] .accordion,[data-reveal] .form{transition-delay:240ms}
[data-reveal].is-in .eyebrow,
[data-reveal].is-in .display,
[data-reveal].is-in .lead,
[data-reveal].is-in .potencial-text,
[data-reveal].is-in .stages,
[data-reveal].is-in .accordion,
[data-reveal].is-in .work-meta,
[data-reveal].is-in .form,
[data-reveal].is-in .contacto-direct{opacity:1;transform:none}

/* Hero: secuencia cinematográfica */
.hero .layer{opacity:0;transition:opacity var(--t-cine) var(--ease)}
.hero .layer-grain{transition-duration:1600ms}
.hero-eyebrow,.hero-sub,.hero-actions{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--t-cine) var(--ease),transform var(--t-cine) var(--ease);
}
.scroll-cue{opacity:0;transition:opacity var(--t-cine) var(--ease)}
.hero-title .line>span{transform:translateY(105%);transition:transform 1100ms var(--ease)}
.hero-foot{clip-path:inset(0 0 100% 0);transition:clip-path 1200ms var(--ease)}
body.is-ready .hero .layer-depth{opacity:1}
body.is-ready .hero .layer-mineral{opacity:.9;transition-delay:220ms}
body.is-ready .hero .layer-bloom{opacity:1;transition-delay:420ms}
body.is-ready .hero .layer-mark{opacity:.17;transition-delay:640ms}
body.is-ready .hero .layer-grain{opacity:.055;transition-delay:200ms}
body.is-ready .hero-eyebrow{opacity:1;transform:none;transition-delay:820ms}
body.is-ready .hero-title .line:nth-child(1)>span{transition-delay:900ms}
body.is-ready .hero-title .line:nth-child(2)>span{transition-delay:1010ms}
body.is-ready .hero-title .line:nth-child(3)>span{transition-delay:1120ms}
body.is-ready .hero-title .line>span{transform:none}
body.is-ready .hero-foot{clip-path:inset(0 0 0 0);transition-delay:1340ms}
body.is-ready .hero-sub{opacity:1;transform:none;transition-delay:1420ms}
body.is-ready .hero-actions{opacity:1;transform:none;transition-delay:1560ms}
body.is-ready .scroll-cue{opacity:.5;transition-delay:1800ms}

/* 15 · RESPONSIVE ------------------------------------------- */
@media (max-width:1024px){
  :root{--shell:min(1340px,90vw)}
  .potencial-grid,.metodo-head,.servicios-head,.proyectos-head,.pilares-grid,.contacto-grid{grid-template-columns:1fr}
  .pilares .display{position:static}
  .path{grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,40px)}
  .path::before{display:none}
  .work-a,.work-b,.work-c{grid-template-columns:1fr}
  .work-b .work-meta{order:2}
  .panel-in{grid-template-columns:1fr;gap:24px}
  .stage{grid-template-columns:auto 1fr;grid-template-areas:"n t" ". d"}
  .stage b{grid-area:n}.stage h3{grid-area:t}.stage p{grid-area:d;opacity:.7;transform:none;margin-top:.6em}
  .creed{max-width:30ch}
}

@media (max-width:760px){
  :root{--shell:calc(100vw - 44px);--gutter:22px}
  body{font-size:1rem}
  .nav-desktop,.nav-cta{display:none}
  .burger{display:flex}
  .hero{align-items:flex-end;padding-bottom:clamp(36px,6vh,60px)}
  .hero-title{font-size:clamp(2.8rem,12vw,4.5rem)}
  .hero-foot{grid-template-columns:1fr;gap:22px}
  .hero-actions{gap:18px}
  .hero-actions .btn{width:100%;justify-content:space-between}
  .scroll-cue{display:none}
  .layer-mark{width:120vw;inset:auto -34vw -12vh auto}
  .veil{height:120vh}
  .eyebrow::after{max-width:18vw}
  .path{grid-template-columns:1fr;gap:4px}
  .path li{padding-top:26px;padding-left:24px}
  .path li::before{top:30px;left:0}
  .path li:not(:last-child){border-left:1px solid currentColor;margin-left:5px;padding-left:28px;padding-bottom:22px;opacity:1}
  .path p{max-width:none}
  .pillars{grid-template-columns:1fr;gap:26px}
  .form{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:38px}
  .footer-legal{flex-direction:column;align-items:flex-start}
  .cookies{gap:14px}
  .cookies .btn-solid{margin-left:0;width:100%;justify-content:center}
  .cookies-actions{flex-direction:column-reverse;align-items:stretch;text-align:center}
  .watermark{width:90vw;left:-34vw}
  .contacto-mark{width:150vw;right:-56vw}
  .problema-turn{justify-self:start;text-align:left}
}

/* Reduced motion: la comunicación es primaria */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .overture{display:none!important}
  .hero .layer,.hero-eyebrow,.hero-sub,.hero-actions,.scroll-cue,
  [data-reveal] .eyebrow,[data-reveal] .display,[data-reveal] .lead,
  [data-reveal] .potencial-text,[data-reveal] .stages,[data-reveal] .accordion,
  [data-reveal] .work-meta,[data-reveal] .form,[data-reveal] .contacto-direct,
  .words span,.problema-turn,.path li,.creed p,.pillars article{opacity:1!important;transform:none!important}
  .hero .layer-mineral{opacity:.9!important}
  .hero .layer-mark{opacity:.17!important}
  .hero .layer-grain{opacity:.055!important}
  .hero-title .line>span{transform:none!important}
  .hero-foot{clip-path:none!important}
  .frame{transform:none!important}
  .stage p{opacity:.7!important;transform:none!important}
  .veil{display:none}
}