@font-face{font-family:'Plus Jakarta Sans';src:url("../fonts/plus-jakarta-sans.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* Toda la página es oscura: va sobre la escena 3D */
:root{
  color-scheme:dark;
  --bg:#061917; --paper:#0B2422; --ink:#E9F3F2; --ink-2:#A9C8C4; --line:#1F4542;
  --teal:#0F4541; --teal-2:#041210; --on-teal:#F1F8F7; --on-teal-2:#A9C8C4;
  --sky:#93CDE3; --sky-ink:#072321; --ice:#0E2E2C; --tick:#93CDE3;
  --panel:rgba(6,25,23,.66);
  --shadow:0 30px 70px -30px rgba(0,0,0,.8);
  --sans:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  /* Escala de tres niveles */
  --t-h1:clamp(2.5rem,6vw,5rem);
  --t-h2:clamp(2rem,4.5vw,3.75rem);
  --t-h3:clamp(1.4rem,2.4vw,2rem);
  --t-small:.875rem;
  --sec-y:clamp(72px,10vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.06rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.04em}
p{margin:0}ul{margin:0;padding:0;list-style:none}a{color:inherit}
:focus-visible{outline:2px solid var(--tick);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
section[id]{scroll-margin-top:70px}

/* ---------- Encabezado: transparente sobre el hero, con fondo al bajar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:#F1F8F7;transition:background-color .3s,color .3s,box-shadow .3s}
.top.is-scrolled{background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;transition:padding .3s var(--ease)}
.top.is-scrolled .bar{padding-block:12px}
.logo{display:inline-flex;align-items:flex-end;gap:2px;text-decoration:none;color:inherit}
.logo svg{height:30px;width:auto;overflow:visible}
.logo .tk{fill:var(--sky);transform-box:fill-box;transform-origin:bottom left;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.top.is-scrolled .logo .tk{fill:var(--tick)}
.logo b{font-weight:800;font-size:1.72rem;letter-spacing:-.05em;line-height:.78}
.nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);font-weight:600;font-size:.95rem}
.nav a{text-decoration:none}
.nav a:not(.btn){background:linear-gradient(var(--sky),var(--sky)) left bottom/0 2px no-repeat;padding-block:3px;transition:background-size .3s var(--ease)}
.top:not(.is-scrolled) .nav .btn{background:var(--sky);color:var(--sky-ink)}

/* ---------- Botones y enlaces ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65em;font-weight:700;font-size:1rem;text-decoration:none;
  background:var(--teal);color:var(--on-teal);border-radius:999px;padding:.85em 1.5em;
  transition:transform .16s var(--ease),background-color .2s,color .2s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform .2s var(--ease)}
.btn-sm{padding:.55em 1.1em;font-size:.92rem}
.textlink{font-weight:600;text-decoration:none;border-bottom:2px solid var(--tick);padding-bottom:2px;transition:color .2s}

/* Efectos de hover solo con mouse: en celular el toque no los dispara */
@media (hover:hover) and (pointer:fine){
  .logo:hover .tk{transform:rotate(-16deg) scale(1.2)}
  .nav a:not(.btn):hover{background-size:100% 2px}
  .btn:hover{background:var(--sky);color:var(--sky-ink)}
  .btn:hover svg{transform:translateX(3px)}
  .textlink:hover{color:var(--tick)}
}

/* ---------- Hero con foto de fondo ---------- */
.hero-band{position:relative;isolation:isolate;overflow:hidden;color:#F1F8F7;
  background:#072321 center/cover no-repeat;min-height:min(100svh,920px);display:flex;align-items:center}
/* Escena 3D fija detrás de la página; si el navegador no tiene 3D, se usa la foto */
.escena{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none;animation:fade .8s var(--ease) both}
.con-3d .hero-band{background:transparent}
.sin-3d .hero-band{background-image:url("../img/hero-movil.webp")}
/* Sombra solo detrás del texto: en celular, de abajo hacia arriba */
.hero-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,#072321 0%,rgba(7,35,33,.92) 55%,rgba(7,35,33,.2) 100%)}
@media (max-width:759px){.hero-band{align-items:flex-end}}
@media (min-width:760px){
  .sin-3d .hero-band{background-image:url("../img/hero.webp")}
  .hero-band::before{background:
    radial-gradient(ellipse 70% 85% at 18% 55%,rgba(7,35,33,.94) 0%,rgba(7,35,33,.8) 45%,rgba(7,35,33,.15) 100%),
    linear-gradient(0deg,#072321 0%,rgba(7,35,33,0) 25%)}
}
.hero{padding-block:clamp(110px,14vw,170px) clamp(56px,8vw,110px)}
.hero-text{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;justify-items:start;max-width:720px}
h1{font-size:var(--t-h1);font-weight:800;line-height:1.04}
h1 em,h2 em{font-style:normal;color:var(--tick)}
.hero-band h1 em{color:var(--sky)}
h1 .line{display:block}
h1 .line>span{display:inline-block;animation:up .7s var(--ease) both}
h1 .line:nth-child(2)>span{animation-delay:.06s}
h1 .line:nth-child(3)>span{animation-delay:.12s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lede{font-size:clamp(1.15rem,1.7vw,1.32rem);color:var(--ink-2);max-width:46ch}
.hero-band .lede{color:#C9DEDA;max-width:44ch;animation:fade .7s .25s var(--ease) both}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;animation:fade .7s .35s var(--ease) both}
.hero-band .btn{background:var(--sky);color:var(--sky-ink)}
.hero-band .textlink{color:#F1F8F7;border-color:var(--sky)}
.hero-band :focus-visible,.top:not(.is-scrolled) :focus-visible{outline-color:var(--sky)}
@media (hover:hover) and (pointer:fine){.hero-band .btn:hover{background:#F1F8F7}.hero-band .textlink:hover{color:var(--sky)}}
.svc-strip{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600;font-size:var(--t-small);letter-spacing:.01em;color:#C9DEDA;animation:fade .7s .45s var(--ease) both}
.svc-strip li{display:flex;align-items:center;gap:8px}
.svc-strip li::before{content:"";width:7px;height:12px;background:var(--sky);clip-path:polygon(0 0,100% 0,57% 100%,0 100%)}

/* ---------- Encabezados de sección ---------- */
.sec{padding-block:var(--sec-y);background:var(--panel)}
.sin-3d .sec{background:var(--bg)}
.sec-title{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;margin-bottom:clamp(40px,6vw,72px)}
h2{font-size:var(--t-h2);font-weight:800;line-height:1.08}
.sec-title p{color:var(--ink-2);max-width:40ch}

/* ---------- Selector de servicios ---------- */
.picker{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.tabs{display:grid;gap:4px;border-top:2px solid var(--ink)}
.tabs button{
  font:inherit;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.02em;text-align:left;
  color:var(--ink-2);background:none;border:0;border-bottom:1px solid var(--line);padding:18px 40px 18px 0;cursor:pointer;position:relative;
  transition:color .2s,transform .2s var(--ease);
}
.tabs button::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:24px;margin-top:-12px;background:var(--tick);clip-path:polygon(0 0,100% 0,57% 100%,0 100%);transform:scale(.6);opacity:0;transform-origin:bottom left;transition:transform .25s var(--ease),opacity .2s}
.tabs button[aria-selected="true"]{color:var(--ink);transform:translateX(12px)}
.tabs button[aria-selected="true"]::after{transform:translateX(-12px);opacity:1}
.tabs button:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.tabs button:hover{color:var(--ink)}}
.panels{scroll-margin-top:80px;background:var(--teal);color:var(--on-teal);border-radius:24px;padding:clamp(26px,4vw,48px);position:relative;overflow:hidden}
.panel{scroll-margin-top:96px;display:grid;gap:18px;justify-items:start}
/* El cambio de panel solo se anima con mouse o toque, no con el teclado */
.panels.by-pointer .panel{animation:panelIn .2s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel .kind{font-weight:700;font-size:var(--t-small);letter-spacing:.01em;color:var(--sky)}
.panel h3{font-size:var(--t-h3);font-weight:800;line-height:1.1;color:var(--on-teal)}
.panel p{color:var(--on-teal-2)}
.panel .btn{background:var(--sky);color:var(--sky-ink)}
.panel :focus-visible{outline-color:var(--sky)}
.panel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.how{font:inherit;font-weight:600;font-size:.95rem;color:var(--on-teal);background:none;border:0;border-bottom:1px solid var(--sky);padding:6px 0 2px;cursor:pointer;transition:color .2s}
.how[aria-expanded="true"]{color:var(--sky)}
.how-box{width:100%;background:rgba(147,205,227,.12);border-left:3px solid var(--sky);border-radius:0 10px 10px 0;padding:14px 16px;animation:panelIn .2s var(--ease) both}
.how-box p{color:var(--on-teal);font-size:.98rem}
@media (hover:hover) and (pointer:fine){.panel .btn:hover{background:var(--on-teal)}.how:hover{color:var(--sky)}}
.price{margin-top:clamp(28px,4vw,44px);font-size:1.2rem;max-width:56ch}
.price b{font-weight:800}

/* ---------- Trabajos ---------- */
.cases{display:grid;gap:clamp(72px,10vw,136px)}
.case{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center}
.case:nth-child(even){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.case:nth-child(even) .case-shot{order:2}
.case-shot{position:relative;display:block;padding:0 6% 9% 0;text-decoration:none;border-radius:14px}
.case:nth-child(even) .case-shot{padding:0 0 9% 6%}
.frame{
  aspect-ratio:16/11;width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);
  background-color:var(--paper);background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;
}
.phone{
  position:absolute;right:0;bottom:0;width:23%;aspect-ratio:9/19;border-radius:22px;border:5px solid var(--teal-2);
  background-color:var(--paper);background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;box-shadow:var(--shadow);
  animation:pan 18s ease-in-out infinite alternate;
}
@keyframes pan{0%,6%{background-position:50% 0}94%,100%{background-position:50% 100%}}
.case:nth-child(even) .phone{right:auto;left:0}
.hint{display:none}
/* Recorrido de la captura: solo con mouse */
@media (hover:hover) and (pointer:fine){
  .frame{transition:background-position 7s cubic-bezier(.45,0,.4,1)}
  .case-shot:hover .frame,.case-shot:focus-visible .frame{background-position:50% 100%}
  .hint{display:block;position:absolute;left:14px;top:14px;font-weight:600;font-size:.78rem;background:var(--teal-2);color:var(--on-teal);border-radius:999px;padding:.35em .9em;opacity:0;transition:opacity .2s}
  .case:nth-child(even) .hint{left:calc(6% + 14px)}
  .case-shot:hover .hint{opacity:1}
}
.case-text{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start}
.case-meta{display:grid;gap:2px;font-weight:600;font-size:var(--t-small);letter-spacing:.01em;color:var(--ink-2)}
.case-meta b{color:var(--ink);font-weight:800;font-size:1rem;letter-spacing:-.01em}
.case h3{font-size:var(--t-h3);font-weight:800;line-height:1.1}
.case p.body{color:var(--ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:8px 10px;font-weight:600;font-size:var(--t-small)}
.facts li{background:var(--ice);color:var(--ink);border-radius:8px;padding:.4em .8em}
.status{color:var(--ink-2);font-size:1rem}
.status::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--tick);margin-right:.5em;vertical-align:.1em}

/* ---------- Comentarios ---------- */
.quote{margin:0;display:grid;gap:20px;max-width:34ch;padding-left:clamp(20px,3vw,36px);border-left:3px solid var(--sky)}
.quote blockquote{margin:0}
.quote p{font-size:var(--t-h3);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.quote figcaption{font-size:var(--t-small);font-weight:600;letter-spacing:.01em;color:var(--ink-2)}

/* ---------- Proceso ---------- */
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stop{position:relative;padding:34px clamp(10px,2vw,28px) 0 0}
.stop::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.stop::after{content:"";position:absolute;left:0;top:9px;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.stop:nth-child(2)::after{transition-delay:.15s}
.stop:nth-child(3)::after{transition-delay:.3s}
.stop:nth-child(4)::after{transition-delay:.45s}
.path.is-visible .stop::after{transform:scaleX(1)}
.stop i{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);z-index:1}
.stop:last-child i{background:var(--sky);border-color:var(--sky)}
.stop h3{font-size:1.3rem;font-weight:700;line-height:1.15;margin-bottom:8px}
.stop p{color:var(--ink-2);font-size:1.02rem}

/* ---------- Contacto ---------- */
.contact{background:rgba(14,59,56,.78);color:var(--on-teal)}
.sin-3d .contact{background:var(--teal)}
.contact .wrap{padding-block:var(--sec-y);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(36px,6vw,90px);align-items:end}
.contact h2{color:var(--on-teal)}
.contact h2 em{color:var(--sky)}
.contact .lede{color:var(--on-teal-2);margin-top:22px}
.ways{display:grid;gap:22px}
.ways .btn{background:var(--sky);color:var(--sky-ink);font-size:1.1rem;padding:1em 1.6em}
.way{display:grid;gap:4px;border-top:1px solid rgba(241,248,247,.2);padding-top:14px}
.way span{font-size:var(--t-small);font-weight:600;color:var(--on-teal-2)}
.way div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:1.15rem;overflow-wrap:anywhere}
.way a{text-decoration:none;border-bottom:1px solid var(--sky)}
.copy{font:inherit;font-weight:600;font-size:.78rem;background:none;color:var(--on-teal);border:1px solid rgba(241,248,247,.5);border-radius:999px;padding:.45em 1em;cursor:pointer;transition:background-color .2s,color .2s,transform .16s var(--ease)}
.copy:active{transform:scale(.97)}
.contact :focus-visible{outline-color:var(--sky)}
@media (hover:hover) and (pointer:fine){.ways .btn:hover{background:var(--on-teal)}.copy:hover{background:var(--on-teal);color:var(--teal)}}

/* ---------- Pie ---------- */
.foot{background:var(--teal-2);color:var(--on-teal-2);font-size:1rem}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px 40px;padding-block:52px 28px}
.foot .logo{color:var(--on-teal)}
.foot-h{font-size:var(--t-small);font-weight:700;letter-spacing:0;color:var(--on-teal);margin:0 0 12px}
.foot ul{display:grid;gap:2px}
.foot a{text-decoration:none}
.foot li a{display:inline-block;padding-block:8px}
.foot :focus-visible{outline-color:var(--sky)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--sky)}}
.foot .brand{display:grid;gap:14px;align-content:start}
.foot-base{grid-column:1/-1;border-top:1px solid rgba(241,248,247,.12);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--t-small)}

/* ---------- Aparición al desplazarse (solo si hay JavaScript) ---------- */
@media (scripting:enabled){
  .rise{transform:translateY(24px);opacity:.001;transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .rise[data-d]{transition-delay:.08s}
  .rise.is-visible{transform:none;opacity:1}
}

@media (max-width:900px){
  .case,.case:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .case:nth-child(even) .case-shot{order:0}
  .picker{grid-template-columns:minmax(0,1fr)}
  .path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .contact .wrap{grid-template-columns:minmax(0,1fr)}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .brand{grid-column:1/-1}
}
@media (max-width:640px){
  .nav a:not(.btn){display:none}
  .path{grid-template-columns:minmax(0,1fr)}
  .phone{border-width:4px;border-radius:16px}
  .foot .wrap{grid-template-columns:minmax(0,1fr)}
}
/* Movimiento reducido: sin desplazamientos, solo cambios de opacidad y color */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color!important}
  .rise{transform:none!important}
  .path .stop::after{transform:scaleX(1)}
  .tabs button[aria-selected="true"],.tabs button[aria-selected="true"]::after{transform:none}
}

.s-dd{background-image:url("../img/delmec-desk.jpg?v=3")}
.s-dm{background-image:url("../img/delmec-movil.jpg?v=3")}
.s-pd{background-image:url("../img/proclima-desk.jpg?v=3")}
.s-pm{background-image:url("../img/proclima-movil.jpg?v=3")}

/* ---------- Accesibilidad y uso en pantallas táctiles ---------- */
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.cifra .num,.way div{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:fixed;left:12px;top:12px;z-index:100;background:var(--sky);color:var(--sky-ink);font-weight:700;padding:.7em 1.1em;border-radius:8px;text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease)}
.saltar:focus-visible{transform:none;outline-color:var(--on-teal)}
@media (pointer:fine){html{overscroll-behavior:none}}

/* ---------- Botón fijo de WhatsApp en celular (aparece después del hero) ---------- */
.cta-fija{display:none}
@media (max-width:640px){
  .cta-fija{display:flex;justify-content:center;align-items:center;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:60;
    min-height:52px;border-radius:999px;background:var(--sky);color:var(--sky-ink);font-weight:800;text-decoration:none;box-shadow:0 16px 32px -12px rgba(0,0,0,.6);
    transform:translateY(calc(100% + 24px));opacity:0;transition:transform .25s var(--ease),opacity .2s}
  .cta-fija.visible{transform:none;opacity:1}
  .cta-fija:active{transform:scale(.97)}
  .foot{padding-bottom:80px}
}