/* =========================================================
   M² · sitio final — base, cabecera y portada
   Dirección "Obra limpia": blanco obra, plata, un solo verde y noche.
   Movimiento: Out Quint al entrar, In Expo al salir. Solo transform, opacity y clip-path.
   Las secciones viven en css/secciones.css.
   ========================================================= */
@property --c{syntax:'<length>';inherits:false;initial-value:12px}
:root{
  --bg:#F4F5F4;
  --surface:#FFFFFF;
  --surface-2:#F8F9F8;
  --ink:#18201C;
  --muted:#59625D;
  --muted-2:#8A938E;
  --line:#D5D9D6;
  --plata:#B4BAB6;
  --brand:#159768;
  --brand-claro:#1FC184;
  --brand-soft:#E5F1EB;
  --cta:#0F7A53;
  --cta-press:#0B6544;
  --dark:#131715;
  --dark-2:#1A1F1C;
  --dark-line:#2A302D;
  --dark-txt:#BCC4BF;
  --marcador:#FFE45C;
  --grid:rgba(16,24,20,.055);

  --sh-1:0 0 0 1px rgba(16,24,20,.07),0 1px 2px rgba(16,24,20,.05),0 2px 6px -2px rgba(16,24,20,.06);
  --sh-2:0 0 0 1px rgba(16,24,20,.06),0 2px 4px rgba(16,24,20,.04),0 12px 28px -10px rgba(16,24,20,.16);
  --sh-3:0 0 0 1px rgba(16,24,20,.05),0 4px 8px -2px rgba(16,24,20,.05),0 24px 48px -16px rgba(16,24,20,.16),0 60px 120px -40px rgba(16,24,20,.24);
  --sh-cta:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(11,80,55,.35),0 8px 18px -6px rgba(15,122,83,.5);
  --sh-cta-hover:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.14),0 2px 4px rgba(11,80,55,.3),0 16px 30px -8px rgba(15,122,83,.55);
  --luz:inset 0 1px 0 rgba(255,255,255,.9);

  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* La voz: el remate de cada titular va en itálica de imprenta, como dicho en voz alta */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --h1:clamp(2.5rem,1.25rem + 3.9vw,4.7rem);
  --h2:clamp(1.9rem,1.15rem + 2.7vw,3.3rem);
  --txt:clamp(1rem,.96rem + .2vw,1.1rem);

  --r:4px;
  --r-lg:8px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.7,0,.84,0);
  --e-move:cubic-bezier(.4,0,.2,1);
  --e-telon:cubic-bezier(.76,0,.24,1);
  --t-press:80ms;
  --t-hover:180ms;
  --t-reveal:850ms;

  --gutter:clamp(16px,4vw,40px);
  --maxw:1240px;
  --section-y:clamp(72px,10vw,144px);
  --header-h:72px;
  --d0:.72s; /* la portada entra cuando se levanta el telón */
  interpolate-size:allow-keywords;
}
.sin-telon{--d0:0s}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:500 var(--txt)/1.6 var(--font);overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
::selection{background:var(--brand);color:#fff}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.marcador{background:var(--marcador);color:#3a3200;padding:0 .3em;border-radius:2px;font-weight:600;font-family:var(--font)}
.sup{font-size:.6em;vertical-align:.75em;color:var(--brand);font-weight:800;display:inline-block;line-height:1}
.num{font-variant-numeric:tabular-nums}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Grano de película: le saca lo plano a las superficies */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.saltar{position:fixed;left:12px;top:12px;z-index:120;padding:10px 16px;background:var(--surface);color:var(--ink);font-weight:700;border-radius:var(--r);box-shadow:var(--sh-2);transform:translate3d(0,-160%,0);transition:transform .3s var(--e-out)}
.saltar:focus-visible{transform:none;outline:2px solid var(--brand);outline-offset:2px}

/* ---------- El corte de la M ---------- */
.bisel{border-radius:var(--r) var(--r) var(--c) var(--r);corner-shape:round round bevel round}
@supports not (corner-shape:bevel){
  .bisel{border-radius:var(--r);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
}

/* ---------- Botón: luz arriba, aro que lo cruza, corte que se abre, imán al puntero ---------- */
.btn{--c:12px;--lift:0px;--s:1;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 26px;
  background-color:var(--cta);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);
  color:#fff;font:700 1rem/1 var(--font);white-space:nowrap;text-decoration:none;border:0;cursor:pointer;box-shadow:var(--sh-cta);
  transform:translate3d(var(--ix,0px),calc(var(--iy,0px) + var(--lift)),0) scale(var(--s));
  transition-property:transform,background-color,box-shadow,--c;transition-duration:var(--t-hover);transition-timing-function:var(--e-out)}
.btn::before{content:"";position:absolute;z-index:-1;left:-15%;width:130%;top:34%;height:190%;border-top:2px solid rgba(255,255,255,.4);border-radius:50%;
  transform:translate3d(-40%,0,0) rotate(-5deg);opacity:0;transition:transform .55s var(--e-out),opacity .2s var(--e-out)}
.btn:hover{--lift:-1px;--c:18px;background-color:var(--cta-press);box-shadow:var(--sh-cta-hover)}
.btn:hover::before{transform:translate3d(0,0,0) rotate(-5deg);opacity:1}
.btn:active{--s:.97;transition-duration:var(--t-press)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.btn svg{width:20px;height:20px;flex:none;transition:transform var(--t-hover) var(--e-out)}
.btn:hover svg{transform:rotate(-10deg)}
.btn--chico{--c:10px;min-height:44px;padding:0 16px;font-size:.92rem}
.btn--claro{background-color:var(--brand)}
.btn--claro:hover{background-color:var(--cta)}
.btn--ancho{width:100%}

.link{font-weight:700;text-decoration:none;padding-bottom:4px;display:inline-flex;align-items:center;gap:.5em;
  background:linear-gradient(var(--brand),var(--brand)) 0 100%/0 2px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 2px no-repeat;
  transition:background-size .45s var(--e-out)}
.link:hover,.link:focus-visible{background-size:100% 2px,100% 2px}
.link:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.link svg{width:16px;height:16px;transition:transform .35s var(--e-out)}
.link:hover svg{transform:translate3d(0,3px,0)}

/* ---------- Telón de entrada (solo la primera vez en la sesión). Se levanta solo, sin JS ---------- */
.telon{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:var(--dark);pointer-events:none;
  animation:telon-sale .8s var(--e-telon) .62s forwards}
.telon__marca{display:grid;justify-items:center;gap:18px}
.telon img{width:84px;height:auto;opacity:0;transform:translate3d(0,10px,0) scale(.96);animation:telon-logo .55s var(--e-out) .04s forwards}
.telon__linea{width:120px;height:2px;background:var(--dark-line);overflow:hidden}
.telon__linea::after{content:"";display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;animation:telon-linea .55s var(--e-out) .12s forwards}
@keyframes telon-logo{to{opacity:1;transform:none}}
@keyframes telon-linea{to{transform:scaleX(1)}}
@keyframes telon-sale{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.no-js .telon,.sin-telon .telon{display:none}

/* ---------- Barra de avance ---------- */
.progreso{position:fixed;left:0;top:0;right:0;height:2px;z-index:40;background:linear-gradient(90deg,var(--cta),var(--brand-claro));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* =========================================================
   Cabecera: vidrio oscuro; se esconde al bajar y vuelve al subir
   ========================================================= */
.cabecera{position:sticky;top:0;z-index:30;color:#fff;background:rgba(19,23,21,.84);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px -18px rgba(0,0,0,.6);transition:transform .45s var(--e-out)}
.cabecera.oculta{transform:translate3d(0,-100%,0)}
.cabecera .wrap{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:var(--r)}
.marca:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.marca img{height:48px;width:auto}
.marca span{font-size:.8rem;line-height:1.2;color:#AEB6B1;font-weight:600;border-left:1px solid var(--dark-line);padding-left:12px}
.nav{display:none;gap:26px;margin-left:auto;font-size:.93rem;font-weight:600}
.nav a{position:relative;padding-block:6px;text-decoration:none;color:#C4CBC7;transition:color var(--t-hover) var(--e-out)}
.nav a::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-8px;height:10px;border-top:2px solid var(--brand);
  border-radius:50% 50% 0 0/100% 100% 0 0;transform:scaleX(0);transition:transform .4s var(--e-out)}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{color:#fff;outline:none}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.cabecera .btn{margin-left:auto}
.tel{display:none;align-items:center;gap:8px;margin-left:8px;padding:6px 4px;font-weight:700;font-size:.93rem;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;border-radius:var(--r)}
.tel svg{width:17px;height:17px;fill:none;stroke:var(--brand-claro);stroke-width:1.8;stroke-linejoin:round;transition:transform var(--t-hover) var(--e-out)}
.tel:hover svg{transform:rotate(-12deg)}
.tel:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media (min-width:1200px){.tel{display:inline-flex}}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-left:4px;border:0;border-radius:var(--r);background:transparent;color:#fff;cursor:pointer}
.menu-btn:focus-visible{outline:2px solid var(--brand)}
.menu-btn span{position:relative;display:block;width:22px;height:2px;background:currentColor;transition:background-color .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:transform .4s var(--e-out)}
.menu-btn span::before{transform:translate3d(0,-7px,0)}
.menu-btn span::after{transform:translate3d(0,7px,0)}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:rotate(-45deg)}
@media (min-width:1040px){.nav{display:flex}.cabecera .btn{margin-left:8px}.menu-btn{display:none}}
@media (max-width:520px){.marca span{display:none}.marca img{height:44px}.cabecera .btn{padding:0 14px}}
/* En pantallas mínimas el botón vive en el menú y en la barra fija de abajo */
@media (max-width:380px){.cabecera .btn{display:none}.menu-btn{margin-left:auto}}

/* Menú en celular: cortina oscura con enlaces grandes */
.menu{position:fixed;inset:var(--header-h) 0 0;z-index:29;background:var(--dark);color:#fff;padding:24px var(--gutter) 32px;display:flex;flex-direction:column;gap:6px;overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--e-telon),visibility 0s .6s}
.menu.abierto{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--e-telon),visibility 0s}
.menu a:not(.btn){display:flex;align-items:baseline;gap:14px;padding:14px 0;font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;letter-spacing:-.03em;text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--dark-line);opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.menu a.menu__tel{flex-direction:column;align-items:flex-start;gap:2px;box-shadow:none;font-variant-numeric:tabular-nums}
.menu a small{font:600 .85rem var(--font);letter-spacing:0;color:var(--brand-claro)}
.menu.abierto a{opacity:1;transform:none;transition-delay:calc(.15s + var(--i,0) * 50ms)}
.menu .btn{margin-top:auto}
@media (min-width:1040px){.menu{display:none}}

/* =========================================================
   Portada: retícula que sigue al mouse, luz de estudio y la obra 3D
   ========================================================= */
.hero{position:relative;isolation:isolate;min-height:min(calc(100svh - var(--header-h)),960px);display:grid;align-content:center;gap:clamp(28px,4vw,48px);
  padding-block:clamp(36px,5vw,72px) clamp(28px,3vw,40px);overflow:clip}
.hero__fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__luz{position:absolute;inset:0;background:radial-gradient(900px 600px at 78% 18%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
/* Sin retícula de plano: la portada es una superficie limpia con luz de ventana */
.hero__reticula{display:none}
.hero__luz::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 520px at 12% 100%,rgba(21,151,104,.07),transparent 70%)}
/* El foco: donde pasa el mouse, una luz cálida y suave, como una linterna sobre el piso */
.hero__foco{--fx:70%;--fy:40%;position:absolute;inset:-40px;opacity:0;transition:opacity .8s var(--e-out);
  background:radial-gradient(420px 420px at var(--fx) var(--fy),rgba(31,193,132,.08),transparent 70%)}
.hero.con-mouse .hero__foco{opacity:1}

.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
@media (min-width:1000px){.hero__grid{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}}
.sello{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 .86rem var(--font);color:var(--muted)}
.sello i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.sello i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:pulso 2.4s var(--e-out) 1.6s infinite}
@keyframes pulso{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
h1{font-size:var(--h1);line-height:.98;letter-spacing:-.045em;font-weight:800;margin:0 0 26px}
h1 em{display:block;font:italic 400 1.1em/.94 var(--serif);letter-spacing:-.02em;color:var(--muted)}
h1 em .subraya{color:var(--ink)}
/* El remate de cada titular de sección, en la misma voz que la portada */
main h2 em{font:italic 400 1.12em/1 var(--serif);letter-spacing:-.015em;color:var(--cta)}
/* La itálica se sale un pelo de su caja: la máscara de cada palabra le deja lugar */
em .p{padding-right:.08em;margin-right:-.08em}
.subraya{position:relative;display:inline-block;white-space:nowrap;color:var(--ink)}
.subraya svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;overflow:visible}
.subraya path{fill:none;stroke:var(--brand);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .subraya path{stroke-dasharray:1;stroke-dashoffset:1}
.listo .subraya path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--e-out) calc(var(--d0) + 1s)}
/* Titular palabra por palabra: cada una sube desde su propia máscara */
.p{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.p>span{display:inline-block}
.js h1 .p>span{transform:translate3d(0,108%,0)}
.listo h1 .p>span{transform:none;transition:transform 1.05s var(--e-out) calc(var(--d0) + var(--w,0) * 55ms)}
.bajada{color:var(--muted);max-width:34em;margin:0 0 32px;font-size:1.06em}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.llamar{margin:22px 0 0;font-size:.95rem;color:var(--muted)}
.llamar a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.llamar a:hover{color:var(--cta)}
.js .entra{opacity:0;transform:translate3d(0,16px,0);filter:blur(6px)}
.listo .entra{opacity:1;transform:none;filter:none;transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out),filter var(--t-reveal) var(--e-out);
  transition-delay:calc(var(--d0) + .35s + var(--i,0) * 90ms)}

/* La obra 3D: apoyada sobre el plano, sin marco */
.hero__obra{position:relative;aspect-ratio:1/.86;min-height:280px}
@media (min-width:1000px){.hero__obra{aspect-ratio:1/1.02;margin-right:calc(var(--gutter) * -.5)}}
.hero__obra::before{content:"";position:absolute;inset:6% 2% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));z-index:-1}
.hero__obra canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.obra__respaldo{position:absolute;inset:22% 14% 24%;transform:perspective(700px) rotateX(50deg) rotateZ(-32deg);
  background:repeating-linear-gradient(90deg,transparent 0 calc(33.33% - 2px),#cfd3cf calc(33.33% - 2px) 33.33%),repeating-linear-gradient(0deg,#f4f3ef 0 34px,#d6d9d5 34px 36px);
  box-shadow:0 30px 40px -24px rgba(24,32,28,.35)}
.webgl-hero .obra__respaldo{display:none}
.etiqueta-obra{position:absolute;right:6%;top:8%;display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.94);border-radius:999px;box-shadow:var(--sh-1)}
.etiqueta-obra i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.etiqueta-obra i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);opacity:0}
.ficha{position:absolute;left:0;bottom:6%;padding:14px 16px;min-width:214px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.95);box-shadow:var(--sh-2),var(--luz)}
.ficha ul{margin:0;padding:0;list-style:none}
.ficha b{display:block;font:700 .8rem var(--font);color:var(--muted);margin-bottom:6px}
.ficha li{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;line-height:1.9}
.ficha li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;flex:none}
.ficha li i svg{width:10px;height:10px}
/* En celular la ficha monta sobre el borde de abajo y deja ver el piso */
@media (max-width:999px){.hero__obra{margin-bottom:40px}.ficha{left:auto;right:0;bottom:-40px}.etiqueta-obra{top:2%;right:0}}
.js .etiqueta-obra,.js .ficha{opacity:0;transform:translate3d(0,10px,0) scale(.98);filter:blur(6px)}
.obra-lista .etiqueta-obra,.obra-lista .ficha{opacity:1;transform:none;filter:none;transition:opacity .6s var(--e-out),transform .6s var(--e-out),filter .6s var(--e-out)}
.obra-lista .ficha{transition-delay:.25s}
.js .ficha li i{transform:scale(.4);opacity:0}
.obra-lista .ficha li i{transform:none;opacity:1;transition:transform .32s var(--e-out),opacity .32s var(--e-out);transition-delay:calc(.45s + var(--i,0) * 120ms)}
.obra-lista .etiqueta-obra i::after{animation:pulso 1.4s var(--e-out) .2s 2}

/* Un .wrap con margin:auto dentro del grid se encoge a su contenido: se estira a mano */
.hero>.wrap{width:100%}
.hero__pie{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.datos{display:grid;grid-template-columns:repeat(4,minmax(0,auto));margin:0;border-top:1px solid var(--line);flex:1 1 640px;max-width:820px}
.datos div{position:relative;padding:16px 20px 0 0}
.datos div+div{padding-left:20px;border-left:1px solid var(--line)}
.datos div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.datos div:hover::before{transform:scaleX(1)}
.datos dt{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.2;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.datos dd{margin:2px 0 0;font-size:.8rem;line-height:1.35;color:var(--muted)}
@media (max-width:700px){.datos{grid-template-columns:repeat(2,minmax(0,1fr))}.datos div:nth-child(3){padding-left:0;border-left:0}.datos div:nth-child(n+3){margin-top:12px}}
.bajar{display:inline-flex;align-items:center;gap:12px;font:600 .88rem var(--font);color:var(--muted);text-decoration:none}
.bajar span{position:relative;width:1px;height:44px;background:var(--line);overflow:hidden}
.bajar span::after{content:"";position:absolute;left:0;top:0;width:1px;height:45%;background:var(--brand);animation:bajar 2.2s var(--e-move) infinite}
@keyframes bajar{0%{transform:translate3d(0,-100%,0)}100%{transform:translate3d(0,230%,0)}}
.bajar:hover{color:var(--ink)}
.bajar:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media (max-width:700px){.bajar{display:none}}

/* ---------- Cinta: los pisos y el oficio pasando despacio ---------- */
.cinta{background:var(--dark);color:#DDE2DF;overflow:hidden;padding-block:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cinta__pista{display:flex;width:max-content;animation:cinta 48s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta__grupo{display:flex;align-items:center;gap:30px;padding:0 30px 0 0;margin:0;list-style:none}
.cinta__grupo li{display:flex;align-items:center;gap:30px;white-space:nowrap;font-weight:800;font-size:clamp(1.15rem,.9rem + 1.1vw,1.75rem);letter-spacing:-.03em}
.cinta__grupo li.suave{color:#6E7873;font-weight:600}
.cinta i{width:38px;height:38px;border-radius:50%;background-position:center;background-size:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 14px -6px #000;flex:none}
@keyframes cinta{to{transform:translate3d(-50%,0,0)}}

/* =========================================================
   Cabeza de sección y revelado
   ========================================================= */
.hoja{padding-block:var(--section-y);position:relative}
.hoja--blanca{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.cabeza{margin-bottom:clamp(32px,4vw,52px);max-width:760px}
.cabeza h2{font-size:var(--h2);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:0 0 14px}
.cabeza p:last-child{color:var(--muted);max-width:40em;margin:0}
.titulo-seccion{display:flex;align-items:center;gap:12px;font:700 .95rem var(--font);color:var(--muted);margin:0 0 14px}
.titulo-seccion svg{width:40px;height:20px;flex:none}
.titulo-seccion path{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round}
.js .titulo-seccion path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--e-out) .15s}
.js .visto .titulo-seccion path,.js .visto.titulo-seccion path{stroke-dashoffset:0}
/* Revelado: el titular sube palabra por palabra desde su máscara; el resto apenas aparece, sin desenfoque */
.js [data-revela]>*{opacity:0;transform:translate3d(0,10px,0)}
.js [data-revela].visto>*{opacity:1;transform:none;transition:opacity .7s var(--e-out),transform .7s var(--e-out);transition-delay:calc(.12s + var(--i,0) * 110ms)}
.js [data-revela]>h2{opacity:1;transform:none}
.js [data-revela] h2 .p>span{transform:translate3d(0,108%,0)}
.js [data-revela].visto h2 .p>span{transform:none;transition:transform .95s var(--e-out) calc(var(--w,0) * 45ms)}
/* Texto con un teléfono adentro */
.cabeza p a,.etapa p a,.proceso__tel a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;font-variant-numeric:tabular-nums}

.panel{padding:clamp(18px,3vw,28px);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-2),var(--luz)}
.elevable{position:relative;background:var(--surface);box-shadow:var(--sh-1),var(--luz);transition:transform .45s var(--e-out)}
.elevable::after{content:"";position:absolute;inset:0;border-radius:inherit;corner-shape:inherit;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:opacity .45s var(--e-out)}
.elevable:hover{transform:translate3d(0,-3px,0)}
.elevable:hover::after{opacity:1}