:root{--or:#f26a1b;--or2:#ff8a3d;--ink:#fff;--mut:rgba(255,255,255,.78);--r:22px;
--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font);color:var(--ink);background:#0b0d14;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;max-width:100%;position:relative}
html{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
a{color:inherit;text-decoration:none}
/* ===== fondo: degradado mesh fijo (paleta sacada de las fotos de fondo) ===== */
:root{--night:#0a0c12;--night2:#10141d;--deep:#142e51;--blue:#1c375c;--azure:#0a5191;--slate:#677994;--mauve:#716b7c;--rose:#9e8382;--amber:#eab07a;--copper:#c68560;--rust:#865546}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;width:100%;height:100%;contain:paint;clip-path:inset(0);-webkit-clip-path:inset(0)}
.mesh{background:
 radial-gradient(70% 55% at 8% 12%,rgba(28,55,92,.95),transparent 70%),
 radial-gradient(55% 50% at 92% 22%,rgba(122,96,140,.42),transparent 70%),
 radial-gradient(60% 55% at 85% 92%,rgba(198,133,96,.42),transparent 70%),
 radial-gradient(45% 40% at 10% 52%,rgba(113,107,124,.30),transparent 70%),
 radial-gradient(50% 45% at 18% 88%,rgba(10,81,145,.42),transparent 72%),
 radial-gradient(40% 35% at 55% 55%,rgba(134,85,70,.18),transparent 70%),
 linear-gradient(180deg,#0d1424 0%,var(--night2) 45%,#141220 100%)}
.mesh::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* manchas de luz: derivan, rotan, respiran y cambian de tono (solo transform/opacity) */
/* Cada mancha es una capa del tamaño exacto del viewport (inset:0) con un degradado radial adentro:
   ninguna caja queda más ancha que la pantalla (en iOS las cajas que se salían generaban scroll horizontal). */
.mesh{contain:strict;clip-path:inset(0);-webkit-clip-path:inset(0);transform:translateZ(0)}
.mesh i{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mesh i::after{content:"";position:absolute;inset:0;opacity:0;will-change:opacity;animation:tone 22s ease-in-out infinite alternate}
.mesh .b1{--p:15vmax 8vmax;transform-origin:15vmax 8vmax;background:radial-gradient(34vmax 27vmax at var(--p),rgba(70,106,161,.50),transparent);animation:blob1 24s ease-in-out infinite alternate}
.mesh .b1::after{background:radial-gradient(34vmax 27vmax at var(--p),rgba(122,96,140,.42),transparent);animation-duration:19s}
.mesh .b2{--p:calc(100% - 11vmax) calc(16% + 22vmax);transform-origin:calc(100% - 11vmax) calc(16% + 22vmax);background:radial-gradient(30vmax 23vmax at var(--p),rgba(158,120,150,.38),transparent);animation:blob2 28s ease-in-out infinite alternate}
.mesh .b2::after{background:radial-gradient(30vmax 23vmax at var(--p),rgba(70,106,161,.36),transparent);animation-duration:25s;animation-delay:-8s}
.mesh .b3{--p:calc(100% - 21vmax) calc(100% - 2vmax);transform-origin:calc(100% - 21vmax) calc(100% - 2vmax);background:radial-gradient(31vmax 24vmax at var(--p),rgba(234,176,122,.40),transparent);animation:blob3 30s ease-in-out infinite alternate}
.mesh .b3::after{background:radial-gradient(31vmax 24vmax at var(--p),rgba(198,133,96,.45),transparent);animation-duration:21s;animation-delay:-5s}
.mesh .b4{--p:14vmax calc(100% - 4vmax);transform-origin:14vmax calc(100% - 4vmax);background:radial-gradient(27vmax 21vmax at var(--p),rgba(10,81,145,.42),transparent);animation:blob4 20s ease-in-out infinite alternate}
.mesh .b4::after{background:radial-gradient(27vmax 21vmax at var(--p),rgba(134,85,70,.34),transparent);animation-duration:27s;animation-delay:-12s}
@keyframes blob1{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.85}50%{transform:translate3d(12vw,8vh,0) rotate(28deg) scale(1.16);opacity:1}100%{transform:translate3d(22vw,-2vh,0) rotate(-12deg) scale(.96);opacity:.9}}
@keyframes blob2{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.9}50%{transform:translate3d(-14vw,10vh,0) rotate(-24deg) scale(.88);opacity:1}100%{transform:translate3d(-6vw,24vh,0) rotate(16deg) scale(1.1);opacity:.8}}
@keyframes blob3{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.85}50%{transform:translate3d(-18vw,-10vh,0) rotate(22deg) scale(1.14);opacity:1}100%{transform:translate3d(-30vw,-4vh,0) rotate(-18deg) scale(.94);opacity:.9}}
@keyframes blob4{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:.9}50%{transform:translate3d(14vw,-12vh,0) rotate(-20deg) scale(1.18);opacity:1}100%{transform:translate3d(26vw,-20vh,0) rotate(14deg) scale(1);opacity:.85}}
@keyframes tone{0%,15%{opacity:0}85%,100%{opacity:1}}
/* foto de fondo solo en el hero, con fundido hacia el degradado */
.hero,.phero{position:relative;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;contain:paint;clip-path:inset(0);
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 80%,transparent 100%)}
.bg-img,.bg-video{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover}
.bg-img{background:url(../assets/fondo.svg) center/cover no-repeat;will-change:transform}
.bg-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,16,.45),rgba(6,8,16,.12) 38%,rgba(13,20,36,.55) 100%)}
.phero .bg-shade{background:linear-gradient(180deg,rgba(6,8,16,.55),rgba(6,8,16,.28) 45%,rgba(13,20,36,.7) 100%)}
.bg-photo .bg-shade{background:linear-gradient(180deg,rgba(6,8,16,.55),rgba(6,8,16,.7))}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.05),0 14px 40px rgba(0,0,0,.35)}
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,56px);transition:padding .3s}
.brand img{height:104px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));transition:height .3s}
body.scrolled .brand img{height:64px}
.nav{display:flex;align-items:center;gap:4px;padding:6px;border-radius:18px}
.nav>a,.has-sub>a{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:13px;font-size:.95rem;font-weight:500;color:var(--mut);transition:.25s;position:relative}
.nav>a:hover,.has-sub>a:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav a.active{color:var(--or2)}
.nav a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--or)}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 10px);right:0;min-width:270px;padding:8px;border-radius:18px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:.25s;display:flex;flex-direction:column;background:rgba(18,20,30,.55)}
.sub a{padding:11px 14px;border-radius:11px;font-size:.93rem;color:var(--mut)}
.sub a:hover{background:rgba(255,255,255,.14);color:#fff}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.burger{display:none;width:48px;height:48px;border-radius:15px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:.3s}
.burger span:first-child{top:18px}.burger span:last-child{top:28px}
.burger[aria-expanded=true] span:first-child{top:23px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:23px;transform:rotate(-45deg)}
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:130px clamp(16px,4vw,56px) 70px;position:relative}
.hero-in{max-width:1080px;width:100%;text-align:center}
h1{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.lead{margin-top:18px;font-size:clamp(1rem,1.7vw,1.2rem);color:rgba(255,255,255,.9);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.cards{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.card{border-radius:var(--r);padding:24px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(20,22,32,.35))}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 24px 60px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}
.ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);margin-bottom:16px;color:#fff}
.ico svg{width:28px;height:28px}
.card h2{font-size:1.3rem;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.card p{margin:10px 0 18px;font-size:.92rem;color:var(--mut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:.92rem;background:linear-gradient(180deg,var(--or2),var(--or));color:#fff;box-shadow:0 6px 18px rgba(242,106,27,.45),inset 0 1px 0 rgba(255,255,255,.4);transition:.3s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 10px 26px rgba(242,106,27,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.big{min-height:54px;padding:0 26px;font-size:1rem}
.btn.ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);box-shadow:none}
.btn.wa{background:linear-gradient(180deg,#2fdc72,#18b556);box-shadow:0 6px 18px rgba(24,181,86,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.dots{display:none;justify-content:center;gap:8px;margin-top:16px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.dots i.on{background:var(--or2);width:20px;border-radius:6px}
.scroll-hint{position:absolute;bottom:22px;left:50%;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.5);border-radius:14px}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:sc 1.8s infinite}
@keyframes sc{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.sec{padding:90px clamp(16px,4vw,56px)}
.wrap{max-width:1080px;margin:auto}
.sec-t{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em}
.sec-s{margin-top:8px;color:var(--mut)}
.grid3{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ph{aspect-ratio:4/3;border-radius:var(--r);display:grid;place-items:center;color:var(--mut);font-weight:500}
.panel{padding:clamp(24px,4vw,48px);border-radius:28px}
.panel p{margin-top:0;color:var(--mut);max-width:62ch}
.contact{display:flex;gap:28px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.foot{padding:36px clamp(16px,4vw,56px) 40px;border-top:1px solid rgba(255,255,255,.12);background:rgba(6,8,16,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.soc{display:flex;gap:12px}
.soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);transition:.3s}
.soc a:hover{background:var(--or);transform:translateY(-3px)}
.soc svg{width:20px;height:20px}
.copy{font-size:.85rem;color:rgba(255,255,255,.6);width:100%;text-align:center}
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#2fdc72,#18b556);box-shadow:0 10px 28px rgba(24,181,86,.5),inset 0 1px 0 rgba(255,255,255,.5);transition:.3s}
.wa-float:hover{transform:scale(1.08)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.card.reveal.in:hover{transform:translateY(-6px);transition-delay:0s}
@media(max-width:860px){
 .brand img{height:68px}body.scrolled .brand img{height:52px}
 .burger{display:block}
 .nav{position:absolute;top:76px;left:16px;right:16px;flex-direction:column;align-items:stretch;padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s;background:linear-gradient(145deg,rgba(40,44,60,.7),rgba(20,22,32,.7))}
 .nav.open{opacity:1;visibility:visible;transform:none}
 .nav>a,.has-sub>a{min-height:48px;font-size:1rem}
 .sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;border:0;background:transparent;padding:0 0 0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
 .nav a.active::after{display:none}
 .hero{padding:104px 0 60px;align-items:flex-start}
 .hero-in{padding-top:20px}
 h1,.lead{padding:0 20px}
 h1 br{display:none}
 .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:6px 20px 14px;margin-top:30px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .cards::-webkit-scrollbar{display:none}
 .card{flex:0 0 80%;scroll-snap-align:center}
 .card h2 br{display:none}
 .btn{min-height:48px}
 .dots{display:flex}
 .scroll-hint{display:none}
 .grid3{grid-template-columns:1fr}
 .sec{padding:64px 16px}
 .foot-in{justify-content:center;flex-direction:column}
 .cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none}
}
@media(prefers-reduced-transparency:reduce){.glass{background:rgba(30,34,48,.92);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* utilidad solo para capturas de pantalla completa (?shot) */
.shot body{position:relative}.shot .bg{position:absolute}.shot .phero{min-height:576px}.shot .hero{min-height:900px}.shot .wa-float,.shot .nav-wrap{position:absolute}
/* ===== páginas internas ===== */
.phero{padding:150px clamp(16px,4vw,56px) 70px;min-height:clamp(440px,64vh,640px);display:flex;flex-direction:column;justify-content:flex-end}
.phero .wrap{width:100%}
.phero .wrap{max-width:1080px}
.phero h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.phero .lead{max-width:44ch;margin-top:14px;font-weight:600;letter-spacing:.04em;font-size:clamp(.95rem,1.6vw,1.15rem);color:var(--or2);text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.crumbs{display:flex;gap:8px;font-size:.85rem;color:var(--mut);margin-bottom:14px}
.crumbs a:hover{color:var(--or2)}
body.inner .sec{padding:26px clamp(16px,4vw,56px)}
body.inner main>.sec:last-child{padding-bottom:80px}
.panel{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(18,20,30,.5))}
.panel .sec-t{font-size:clamp(1.15rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.25;margin-bottom:6px}
.panel p+p{margin-top:12px}.panel p{font-size:1.04rem;line-height:1.65;color:rgba(255,255,255,.88);max-width:70ch}
.sec>.wrap>.sec-t{font-size:clamp(1.15rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.cards3{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards3.c4{grid-template-columns:repeat(4,1fr)}.cards3.c2{grid-template-columns:repeat(2,1fr)}
.cards3 .card{padding:24px}
.cards3 .card h3{font-size:1.02rem;line-height:1.3;font-weight:700;letter-spacing:.01em}
.cards3 .card p{margin:10px 0 0;font-size:.95rem;line-height:1.55;color:var(--mut)}
.cards3.slim .card{padding:20px}.cards3.slim .ico{width:46px;height:46px;margin-bottom:12px}.cards3.slim h3{font-size:.98rem;font-weight:600}
.list{margin-top:14px;padding-left:20px}.list li{margin:6px 0}
.grid3{margin-top:24px}
.ph{background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 12px,rgba(255,255,255,.03) 12px 24px);border-style:dashed;text-align:center;padding:10px;font-size:.9rem}
.cta-band h2{font-size:clamp(1.1rem,2vw,1.4rem)}
.cta-band p{margin-top:8px}
.cta-band .cta{flex-shrink:0}
.projs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.proj{border-radius:var(--r);overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.proj:hover{transform:translateY(-5px)}
.ph-img{aspect-ratio:16/9;display:grid;place-items:center;color:var(--mut);font-size:.9rem;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 12px,rgba(255,255,255,.03) 12px 24px);border-bottom:1px solid rgba(255,255,255,.18)}
.proj-b{padding:20px 22px 24px}.proj-b h3{font-size:1rem;line-height:1.3;text-transform:uppercase;letter-spacing:.01em}.proj-b p{margin-top:8px;color:var(--mut);font-size:.95rem;line-height:1.55}
.note{margin-top:22px;color:var(--mut);text-align:center}
.note-box{padding:16px 22px;border-radius:16px;color:var(--mut);font-size:.92rem;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.chips span{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);font-weight:600;font-size:.9rem}
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:start}
.cinfo{display:grid;gap:14px}
.crow{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;transition:.3s}
a.crow:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.crow .ico{margin:0;flex-shrink:0}.crow small{display:block;color:var(--mut);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}.crow b{font-size:1.02rem;line-height:1.35;display:block;overflow-wrap:anywhere}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:6px;font-size:.85rem;color:var(--mut);font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:#fff;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(8,10,18,.45);outline:0;transition:.25s}
.form select option{color:#111}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--or2);box-shadow:0 0 0 3px rgba(242,106,27,.3)}
.form button{border:0;cursor:pointer;font-family:inherit;color:#fff}
.hint{font-size:.82rem!important;color:var(--mut)!important}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;flex:1}
.foot-nav a{color:var(--mut);font-size:.9rem}.foot-nav a:hover{color:var(--or2)}
.more{color:var(--or2);font-weight:600}
.nav .has-sub>a.active{color:var(--or2)}
@media(max-width:1000px){.cards3.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
 .phero{padding:110px 16px 40px;min-height:clamp(380px,56svh,520px)}
 .cards3,.cards3.c4,.cards3.c2,.projs,.two,.form{grid-template-columns:1fr}
 body.inner .sec{padding:14px 16px}
 .cta-band{flex-direction:column;align-items:flex-start}.cta-band .cta{width:100%}
 .crow b{font-size:.95rem}
}
.panel .sec-t+p{margin-top:10px}.panel .list+p,.panel p+.chips,.panel p+.grid3{margin-top:18px}
/* galerías de fotos */
.gal{display:grid;gap:20px;margin-top:24px}.gal.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal.feat>.foto:first-child{grid-column:span 2;grid-row:span 2}
.foto{border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;margin:0}
.foto a{display:block;overflow:hidden;flex:1;aspect-ratio:4/3}
.gal.feat>.foto:first-child a{aspect-ratio:auto}
.foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{padding:12px 16px 14px;font-size:.88rem;color:var(--mut);line-height:1.4}
.gal.prod .foto a{aspect-ratio:1/1}
.gal.prod .foto img{object-position:center 65%}
.ph-img.has{background:none;overflow:hidden}.ph-img.has img{width:100%;height:100%;object-fit:cover;display:block}
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(6,8,16,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s;cursor:zoom-out;padding:4vh 4vw}
.lb.on{opacity:1}.lb img{max-width:100%;max-height:88vh;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb p{margin-top:12px;color:var(--mut);text-align:center;font-size:.92rem}
@media (max-width:900px){.gal.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.gal.feat>.foto:first-child{grid-row:auto}}
@media (max-width:560px){.gal.g3{grid-template-columns:1fr}.gal.feat>.foto:first-child{grid-column:auto}.gal.feat>.foto:first-child a{aspect-ratio:4/3}}
.gal .ph{aspect-ratio:auto;min-height:100%}
@media(max-width:860px){.phero h1,.phero .lead{padding:0}}
/* ===== hero: entrada de la foto (fade + Ken Burns + desenfoque) y parallax ===== */
.hb-par{position:absolute;left:0;right:0;top:-6%;height:112%;will-change:transform;backface-visibility:hidden}
.hb-par .bg-img,.hb-par .bg-video{inset:0;height:100%;transform-origin:50% 40%}
.js .hero-bg .bg-img{opacity:0}
.js .hero-bg.ready .bg-img{animation:heroIn 2.2s cubic-bezier(.22,.7,.18,1) both}
@keyframes heroIn{0%{opacity:0;transform:scale(1.12);filter:blur(10px)}55%{filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.hero-bg .bg-shade{opacity:.0;animation:shadeIn 1.2s ease-out .1s both}
@keyframes shadeIn{to{opacity:1}}
/* texto del hero entra escalonado, después de que asoma la foto */
.hero .reveal,.phero .reveal{transition-delay:calc(var(--d,0s) + .45s)}
.phero .crumbs.reveal{--d:0s}
@media(max-width:860px){@keyframes heroIn{0%{opacity:0;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}}
.shot .hero-bg .bg-img,.shot .hero-bg .bg-shade{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.js .hero-bg .bg-img,.hero-bg .bg-shade{opacity:1!important;transform:none!important;filter:none!important}}
/* ===== foto original (vista aérea: módulos iluminados + 3 torres al fondo) ===== */
.bg-img[style*="fondo-original"]{background-position:50% 30%}
.hero .bg-shade{background:radial-gradient(48% 30% at 50% 30%,rgba(6,8,16,.5),transparent 75%),linear-gradient(180deg,rgba(6,8,16,.55) 0%,rgba(6,8,16,.2) 30%,rgba(6,8,16,.18) 60%,rgba(13,20,36,.6) 100%)}
.phero .bg-shade{background:radial-gradient(60% 45% at 22% 72%,rgba(6,8,16,.55),transparent 75%),linear-gradient(180deg,rgba(6,8,16,.55),rgba(6,8,16,.22) 40%,rgba(13,20,36,.7) 100%)}
@media(min-width:861px){.hero .hb-par{top:-4%;height:118%}.hero .bg-img[style*="fondo-original"]{background-position:30% 30%}}
@media(max-width:860px){.bg-img[style*="fondo-original"]{background-position:66% 30%}}
/* ===== home: obras con fotos ===== */
.hobras{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hobra{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hobra:hover{transform:translateY(-5px)}
.hobra-img{display:block;aspect-ratio:4/3;overflow:hidden}
.hobra-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hobra:hover img{transform:scale(1.05)}
.hobra-b{display:block;padding:14px 18px 16px}.hobra-b b{display:block;font-size:1rem;line-height:1.3}.hobra-b small{display:block;margin-top:4px;color:var(--mut);font-size:.86rem}
#proyectos .sec-s{margin-top:18px}
#nosotros .panel p+p{margin-top:14px}
/* ===== home mobile v2: sin carrusel, tarjetas en una columna ===== */
@media(max-width:860px){
 .hero{min-height:0;padding:96px 16px 36px;display:block}
 .hero .hero-bg{bottom:auto;height:100svh;max-height:760px}
 .hero-in{padding-top:12px}
 .hero h1,.hero .lead{padding:0}
 .hero h1{font-size:clamp(1.65rem,7.4vw,2.1rem);line-height:1.15}
 .hero .lead{margin-top:12px;font-size:1rem}
 .cards{display:grid;grid-template-columns:1fr;gap:12px;overflow:visible;padding:0;margin-top:26px;scroll-snap-type:none}
 .card{flex:none;display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:start;padding:16px 16px 16px}
 .card .ico{width:48px;height:48px;border-radius:14px;margin:0;grid-row:1/span 3}
 .card .ico svg{width:24px;height:24px}
 .card h2{font-size:1.08rem;align-self:center}
 .card p{margin:4px 0 12px;font-size:.92rem;line-height:1.45}
 .card .btn{justify-self:start;min-height:40px;padding:0 16px;font-size:.88rem;width:auto}
 .dots{display:none!important}
 .hobras{grid-template-columns:1fr;gap:14px}
 .hobra-img{aspect-ratio:16/10}
 #nosotros,#contacto,#proyectos{padding:22px 16px}
 #proyectos{padding-top:34px}
 #contacto{padding-bottom:56px}
 .contact{gap:18px}
 .contact .cta{width:100%}
 .contact .btn{width:100%}
}
@media(max-width:860px){.contact .btn.big{font-size:.95rem;padding:0 14px;white-space:nowrap}}
/* ===== fix iOS v2 ===== */
/* Manchas animadas solo en escritorio con mouse; capas más grandes que la pantalla para que nunca se vea su borde
   (quedan recortadas dentro del fondo fijo). En mobile/tablet: degradado estático, sin capas. */
@media (min-width:861px) and (hover:hover) and (pointer:fine){
 .mesh i{inset:-40%}
 .mesh .b1{--p:calc(15vmax + 40vw) calc(8vmax + 40vh);transform-origin:calc(15vmax + 40vw) calc(8vmax + 40vh)}
 .mesh .b2{--p:calc(140vw - 11vmax) calc(56vh + 22vmax);transform-origin:calc(140vw - 11vmax) calc(56vh + 22vmax)}
 .mesh .b3{--p:calc(140vw - 21vmax) calc(140vh - 2vmax);transform-origin:calc(140vw - 21vmax) calc(140vh - 2vmax)}
 .mesh .b4{--p:calc(14vmax + 40vw) calc(140vh - 4vmax);transform-origin:calc(14vmax + 40vw) calc(140vh - 4vmax)}
}
@media not all and (min-width:861px) and (hover:hover) and (pointer:fine){
 .mesh i{display:none}
 .mesh{transform:none;background:
  radial-gradient(90% 45% at 0% 8%,rgba(70,106,161,.55),transparent 70%),
  radial-gradient(80% 40% at 100% 30%,rgba(122,96,140,.40),transparent 70%),
  radial-gradient(70% 40% at 0% 62%,rgba(113,107,124,.30),transparent 70%),
  radial-gradient(90% 45% at 100% 96%,rgba(234,176,122,.36),transparent 70%),
  radial-gradient(80% 40% at 0% 100%,rgba(10,81,145,.42),transparent 72%),
  linear-gradient(180deg,#0d1424 0%,#10141d 45%,#141220 100%)}
}
/* Header: fondo semiopaco con blur al scrollear (siempre en mobile), sin afectar el glass del menú */
.nav-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
 background:rgba(10,13,22,.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.10)}
body.scrolled .nav-wrap::before{opacity:1}
.nav-wrap{z-index:80}
.wa-float{z-index:70}
@media(max-width:860px){
 .nav-wrap{padding:10px 16px}
 .nav-wrap::before{opacity:1;background:linear-gradient(180deg,rgba(10,13,22,.70),rgba(10,13,22,.45))}
 body.scrolled .nav-wrap::before{background:rgba(10,13,22,.93)}
 .nav{top:calc(100% + 6px);background:rgba(18,21,32,.94)}
}
@media(prefers-reduced-transparency:reduce){.nav-wrap::before{background:rgba(10,13,22,.96);-webkit-backdrop-filter:none;backdrop-filter:none}}