/* Blue Star Pool and Spas Services · home.css
   Only the Home: hero (video + free quote form, r3) and its five blocks. Classes are prefixed .hm-
   Motion rule: every node GSAP moves has NO css transform or transition on transform.
   Static tilts use the individual `rotate` / `translate` properties so they never fight GSAP. */


/* ================= ② QUÉ HACEMOS (white): staccato + fan of real photos ================= */
.hm-what{padding-top:clamp(3.4rem,5.2vw,4.8rem);padding-bottom:calc(var(--pad) + var(--wave-h)*.5)}
.hm-what-ghost{right:-1.2vw;top:-.04em;font-size:clamp(11rem,25vw,23rem);color:var(--white);-webkit-text-stroke-width:3px;paint-order:stroke fill}
.hm-what-grid{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(2rem,4.6vw,4.6rem);align-items:stretch}
.hm-what-copy{align-self:start}
.hm-what-copy h2{margin-top:1.15rem}
.hm-what-p{margin-top:1.6rem;max-width:47ch}
.hm-what-act{margin-top:1.8rem}
.hm-fan{position:relative;min-height:clamp(360px,34vw,500px)}
.hm-card{position:absolute;width:41%;aspect-ratio:1;margin:0;padding:10px;border-radius:18px;background:var(--white);box-shadow:var(--shadow),0 0 0 1px rgba(var(--navy-rgb),.06);rotate:var(--r);will-change:transform}
.hm-card img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.hm-card--1{--r:-7deg;left:0;top:18px;z-index:1}
.hm-card--2{--r:-2deg;left:20%;bottom:6px;z-index:2}
.hm-card--3{--r:3deg;left:43%;top:8px;z-index:3}
.hm-card--4{--r:8deg;right:0;bottom:20px;z-index:4}
.hm-sticker{position:absolute;z-index:6;pointer-events:none;will-change:transform}
.hm-sticker--strip{left:27%;top:-18px;rotate:-11deg}
.hm-sticker--drop{left:-30px;bottom:17%;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--cyan);color:var(--navy);box-shadow:var(--shadow-sm);rotate:-9deg}
.hm-sticker--drop .ico{width:30px;height:30px}
.wave-edge.hm-flip{transform:scaleX(-1)}

/* ================= ③ BANDA (navy, caustics) ================= */
.hm-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:clamp(420px,58vh,560px);padding:clamp(3rem,5vw,4.4rem) 0 calc(clamp(3rem,5vw,4.4rem) + var(--wave-h));text-align:center;overflow:clip;isolation:isolate}
.hm-band-tex{position:absolute;inset:-18% 0;z-index:0;background:url("/assets/img/scene/caustics.webp") 50% 50%/cover;opacity:.5;will-change:transform}
.hm-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(var(--navy-rgb),0) 34%,rgba(var(--navy-rgb),.62) 100%)}
.hm-band-ghost{left:50%;top:46%;z-index:1;font-size:clamp(11rem,31vw,28rem);translate:-50% -50%;color:rgba(var(--navy-rgb),.44);-webkit-text-stroke-width:3px;paint-order:stroke fill;will-change:transform}
.hm-band-in{position:relative;z-index:2}
.hm-band-h{margin-top:1.35rem;font-size:clamp(2.7rem,6vw,5.9rem)}
.hm-band-h .hl-in{margin-inline:auto}

/* ================= ④ SERVICIOS: specs-halo 3 + 3 (aqua) ================= */
.hm-svc{padding-bottom:calc(var(--pad) + var(--wave-h)*.5)}
.hm-svc-head{margin-bottom:clamp(4.2rem,6.4vw,5.8rem);text-align:center}
.hm-svc-head h2{margin-top:1rem}
.hm-svc-head .hl-in{margin-inline:auto}
.hm-halo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) min(26vw,420px) minmax(0,1fr);gap:clamp(2.2rem,5.2vw,4.7rem);align-items:center}
.hm-leaders{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hm-leader{fill:none;stroke:rgba(var(--blue-rgb),.5);stroke-width:1.6;stroke-linecap:round;transition:stroke .25s,stroke-width .25s}
.hm-leader.is-hot{stroke:var(--navy);stroke-width:2.4}
.hm-leader-dot{fill:var(--cyan);stroke:var(--navy);stroke-width:1.6}
.hm-specs{position:relative;z-index:1;display:grid;gap:clamp(1.6rem,2.7vw,2.5rem)}
.hm-spec{will-change:transform}
.hm-spec a{display:flex;align-items:flex-start;gap:1.1rem}
.hm-specs--l .hm-spec a{flex-direction:row-reverse;text-align:right}
.hm-specs--l .hm-spec:nth-child(2){padding-right:clamp(0px,2.4vw,36px)}
.hm-specs--r .hm-spec:nth-child(2){padding-left:clamp(0px,2.4vw,36px)}
.hm-spec-ico{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--white);color:var(--navy);box-shadow:0 0 0 2px var(--cyan),var(--shadow-sm);transition:background-color .25s,color .25s;will-change:transform}
.hm-spec-ico .ico{width:29px;height:29px}
.hm-spec a:hover .hm-spec-ico,.hm-spec a:focus-visible .hm-spec-ico{background:var(--navy);color:var(--cyan)}
.hm-spec h3{font-family:var(--display);font-weight:700;font-size:clamp(1.16rem,1.56vw,1.42rem);line-height:1.1;letter-spacing:-.012em;transition:color .25s}
.hm-spec a:hover h3{color:var(--blue)}
.hm-spec p{margin-top:.38rem;font-size:.97rem;line-height:1.45;color:rgba(var(--navy-rgb),.82)}
.hm-anchor{position:relative;z-index:1;margin:0;aspect-ratio:1;will-change:transform}
.hm-anchor::before{content:"";position:absolute;inset:-15px;border-radius:44px;border:2.5px solid var(--cyan)}
.hm-anchor::after{content:"";position:absolute;inset:-28px;border-radius:56px;border:1.5px dashed rgba(var(--blue-rgb),.34)}
.hm-anchor img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:30px;border:6px solid var(--white);box-shadow:var(--shadow)}
.hm-steam{position:absolute;left:50%;bottom:calc(100% + 32px);width:112px;height:42px;margin-left:-56px;overflow:visible;fill:none;stroke:rgba(var(--blue-rgb),.42);stroke-width:2.4;stroke-linecap:round}
.hm-svc-cta{display:flex;justify-content:center;margin-top:clamp(3.2rem,5vw,4.4rem)}

/* ================= ESCAPARATE «cómo va una visita» (white) ================= */
.hm-visit{padding-bottom:calc(var(--pad) + var(--wave-h)*.5)}
.hm-visit-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(1.6rem,2.8vw,2.6rem)}
.hm-visit-head > div{min-width:0;max-width:100%}
.hm-visit-head h2{margin-top:1rem}
.hm-visit-lead{max-width:30ch;text-wrap:balance;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.5;color:rgba(var(--navy-rgb),.84)}
.hm-way{position:relative}
.hm-route{position:relative;height:110px;margin-top:.6rem}
.hm-route-a,.hm-route-b{position:absolute;inset:0}
.hm-route-a{overflow:hidden;will-change:transform}
.hm-route-b{will-change:transform}
.hm-route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgba(var(--blue-rgb),.6);stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 11}
.hm-node{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--navy);box-shadow:0 0 0 2.5px var(--cyan),0 0 0 7px var(--white),var(--shadow-sm);translate:-50% -50%;will-change:transform}
.hm-node .ico{width:22px;height:22px}
.hm-arrow{position:absolute;left:var(--x);top:50%;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--white);border:1.5px solid rgba(var(--blue-rgb),.5);color:var(--blue);translate:-50% -50%;rotate:var(--a);will-change:transform}
.hm-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.hm-route-end{position:absolute;left:var(--x);top:var(--y);z-index:2;width:34px;height:32px;translate:-50% -50%;rotate:-8deg;will-change:transform}
.hm-route-end svg{width:100%;height:100%;fill:var(--cyan);stroke:var(--navy);stroke-width:5;stroke-linejoin:round}
.hm-steps{display:grid;grid-template-columns:repeat(4,22%);column-gap:4%;margin-top:1.5rem}
.hm-step{position:relative}
.hm-step-n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(4.6rem,8.6vw,7.8rem);line-height:.86;letter-spacing:-.03em;color:var(--white);-webkit-text-stroke:4px rgba(var(--blue-rgb),.42);paint-order:stroke fill;transition:-webkit-text-stroke-color .3s;user-select:none}
.hm-step:hover .hm-step-n{-webkit-text-stroke-color:var(--blue)}
.hm-step h3{margin-top:1rem;font-family:var(--display);font-weight:700;font-size:clamp(1.18rem,1.6vw,1.45rem);line-height:1.12;letter-spacing:-.012em}
.hm-step p{margin-top:.5rem;max-width:25ch;font-size:.99rem;line-height:1.5}

/* ================= ESPEJO «dónde trabajamos» (aqua): ② mirrored, map panel on the left ================= */
.hm-area{padding-bottom:calc(var(--pad) + var(--wave-h)*.6)}
.hm-area-ghost{right:-2.4vw;bottom:calc(var(--wave-h) + 10px);font-size:clamp(5.4rem,10vw,9rem);color:var(--aqua);-webkit-text-stroke-width:3px;paint-order:stroke fill}
.hm-area-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,5rem);align-items:stretch}
.hm-area-copy{align-self:start}
.hm-area-copy h2{margin-top:1.1rem}
.hm-area-p{margin-top:1.5rem;max-width:50ch}
.hm-zones{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.hm-zones .chip{background:var(--white);cursor:default;transition:background-color .25s,border-color .25s,color .25s;will-change:transform}
.hm-zones .chip--fill{background:var(--cyan)}
.hm-zones .chip:hover,.hm-zones .chip.is-hot{background:var(--navy);border-color:var(--navy);color:var(--white)}
.hm-addr{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;font-weight:600;color:var(--navy)}
.hm-addr .ico{flex:none;color:var(--blue)}
.hm-area-act{margin-top:1.7rem}

/* ================= RESPONSIVE ================= */
/* ② between 1181 and 1280 the cards grow a little so the two tiers still overlap */
@media (max-width:1280px) and (min-width:1181px){
  .hm-card{width:44%}
  .hm-card--3{left:40%}
}
/* ② small laptops and landscape tablets: copy in two columns, the fan in one true row */
@media (max-width:1180px) and (min-width:901px){
  .hm-what-grid{grid-template-columns:minmax(0,1fr);gap:3.2rem}
  .hm-what-copy{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"k p" "h p" "h a";grid-template-rows:auto 1fr auto;column-gap:clamp(2rem,5vw,4rem);align-self:stretch}
  .hm-what-copy .kicker{grid-area:k;justify-self:start}
  .hm-what-copy h2{grid-area:h}
  .hm-what-p{grid-area:p;align-self:end;margin-top:0;max-width:none}
  .hm-what-act{grid-area:a;margin-top:1.4rem}
  .hm-fan{min-height:0;aspect-ratio:2.6}
  .hm-card{width:33.5%}
  .hm-card--1{left:0;top:9%;bottom:auto}
  .hm-card--2{left:22.1%;top:2%;bottom:auto}
  .hm-card--3{left:44.3%;top:2%;bottom:auto}
  .hm-card--4{right:0;top:9%;bottom:auto}
  .hm-sticker--strip{left:13%;top:-16px}
  .hm-sticker--drop{left:auto;right:-16px;bottom:-4px}
}
@media (max-width:900px){
  .hm-what-grid,.hm-area-grid{grid-template-columns:minmax(0,1fr);gap:2.6rem}
  .hm-what-p{max-width:60ch}
  .hm-fan{min-height:0;aspect-ratio:1.42;margin-inline:auto;width:min(100%,640px)}
  .hm-sticker--drop{left:-8px}
  .hm-halo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 1.6rem;align-items:start}
  .hm-leaders{display:none}
  .hm-specs{display:contents}
  .hm-anchor{grid-column:1/-1;order:-1;justify-self:center;width:min(64vw,340px);margin:58px 0 30px}
  .hm-svc-head{margin-bottom:2rem}
  .hm-specs--l .hm-spec a{flex-direction:row;text-align:left}
  .hm-specs--l .hm-spec:nth-child(2),.hm-specs--r .hm-spec:nth-child(2){padding:0}
  .hm-route{display:none}
  .hm-visit-head{margin-bottom:2.3rem}
  .hm-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.4rem 2rem;margin-top:0}
  .hm-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
  .hm-step-n{font-size:4.4rem}
  .hm-step h3{margin-top:.35rem}
  .hm-step p{max-width:none}
  .hm-area-copy{order:-1}
}
@media (max-width:760px){
  .hm-what{padding-top:3.2rem}
  .hm-band{min-height:clamp(380px,56vh,470px)}
  .hm-band-ghost{font-size:13rem}
  .hm-svc-cta .btn,.hm-area-act .btn,.hm-what-act .btn{width:100%;max-width:340px;justify-content:space-between}
}
@media (max-width:560px){
  .hm-fan{aspect-ratio:1/1.04;width:100%}
  .hm-card{width:55%;padding:7px;border-radius:14px}
  .hm-card img{border-radius:8px}
  .hm-card--1{left:0;top:12px}
  .hm-card--2{left:4%;bottom:4px}
  .hm-card--3{left:auto;right:2%;top:30px}
  .hm-card--4{right:0;bottom:16px}
  .hm-sticker--strip{left:auto;right:6%;top:-10px}
  .hm-sticker--drop{left:-6px;bottom:44%;width:52px;height:52px}
  .hm-sticker--drop .ico{width:24px;height:24px}
  .hm-halo{gap:1.9rem 1rem}
  .hm-spec a,.hm-specs--l .hm-spec a{flex-direction:column;gap:.75rem}
  .hm-spec-ico{width:54px;height:54px}
  .hm-spec-ico .ico{width:26px;height:26px}
  .hm-spec h3{font-size:1.08rem}
  .hm-spec p{font-size:.93rem}
  .hm-steps{grid-template-columns:minmax(0,1fr);gap:1.9rem}
  .hm-step:not(:last-child)::after{content:"";position:absolute;left:2.05rem;top:4.3rem;bottom:-1.5rem;width:4px;background:radial-gradient(circle,rgba(var(--blue-rgb),.55) 1.5px,transparent 1.9px) 50% 0/4px 11px repeat-y}
  .hm-area-ghost{font-size:6.4rem}
}


/* ================= AJUSTES r3 2026-11-13 · hero a pantalla completa (pedido del dueño) =================
   Full-screen video of REAL jobs, copy up under the menu on the left, the free quote form on the right,
   and the water line moved out of the foreground: it is now the seam at the bottom edge of the hero.
   --hm-ww  width of the front wave image (2880x160, six crests). The shore is as tall as that image. */
.hm-hero{
  --hm-h1:clamp(2.9rem,min(5.2vw,9.6vh),5.4rem);
  --hm-ww:clamp(1700px,150vw,3000px);
  --hm-shore:calc(var(--hm-ww)*.05556);
  position:relative;display:flex;flex-direction:column;min-height:clamp(680px,100vh,1200px);min-height:clamp(680px,100svh,1200px);
  padding:calc(var(--nav-h) + clamp(1rem,3.4vh,2.6rem)) 0 calc(var(--hm-shore)*.62 + clamp(1.2rem,3vh,2.4rem));
  background:var(--navy);color:var(--white);overflow:clip;isolation:isolate}
.hm-media{position:absolute;inset:0 0 calc(var(--hm-shore)*.3) 0;z-index:0;overflow:hidden;background:var(--navy) url("/assets/img/scene/hero-reel-poster.webp") 50% 50%/cover no-repeat;will-change:transform}
.hm-video{display:block;width:100%;height:100%;object-fit:cover}
html.reduced .hm-video{display:none}
/* the veil: navy only where the copy lives, the right half keeps the water bright */
.hm-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(var(--navy-rgb),.74) 0%,rgba(var(--navy-rgb),.5) 32%,rgba(var(--navy-rgb),.12) 56%,rgba(var(--navy-rgb),0) 72%),
  linear-gradient(180deg,rgba(var(--navy-rgb),.42) 0%,rgba(var(--navy-rgb),0) 24%)}
.hm-grid{position:relative;z-index:3;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:clamp(2rem,4.4vw,5rem);align-items:start}
.hm-copy{min-width:0;padding-top:clamp(0rem,1vh,.6rem)}
.hm-sats{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:clamp(1.4rem,4vh,2.6rem)}
.hm-sat{margin:0;will-change:transform}
.hm-pill{display:inline-flex;align-items:center;gap:.6rem;height:44px;padding:0 1.1rem 0 .95rem;border-radius:999px;font-weight:700;font-size:.93rem;line-height:1;white-space:nowrap}
.hm-pill--open{background:var(--white);color:var(--navy);box-shadow:var(--shadow-sm)}
.hm-pill--years{gap:.4rem;background:var(--cyan);color:var(--navy);box-shadow:0 12px 28px rgba(var(--navy-rgb),.25)}
.hm-pill--years b{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.hm-dot{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.hm-dot i{position:absolute;inset:0;border-radius:50%;background:var(--cyan);opacity:.55}
.hm-eyebrow{margin-bottom:1rem;color:var(--cyan);text-shadow:0 1px 2px rgba(var(--navy-rgb),.7),0 2px 12px rgba(var(--navy-rgb),.5)}
/* ley de la Fábrica: sombra por glifo en titulares sobre foto */
.hm-h1{font-size:var(--hm-h1);color:var(--white);text-shadow:0 2px 3px rgba(var(--navy-rgb),.5),0 8px 28px rgba(var(--navy-rgb),.42)}
.hm-h1 .hl:nth-child(2){color:var(--cyan)}
.hm-sub{max-width:34rem;margin-top:clamp(1rem,2.4vh,1.5rem);font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.55;color:rgba(var(--white-rgb),.92);text-shadow:0 1px 2px rgba(var(--navy-rgb),.6),0 2px 14px rgba(var(--navy-rgb),.45);text-wrap:pretty}
.hm-ctas{margin-top:clamp(1.3rem,3vh,1.9rem)}
.hm-ctas .btn--ghost{background:rgba(var(--navy-rgb),.28)}
.hm-hero :focus-visible{outline-color:var(--cyan)}

/* the free quote card */
.hm-quote{position:relative;min-width:0;will-change:transform}
.hq-form{position:relative;padding:clamp(1.25rem,1.9vw,1.75rem);border-radius:24px;background:var(--white);color:var(--navy);box-shadow:0 30px 70px rgba(var(--navy-rgb),.38),0 0 0 1px rgba(var(--white-rgb),.6);container:hq/inline-size}
.hq-form::before{content:"";position:absolute;left:clamp(1.25rem,1.9vw,1.75rem);right:clamp(1.25rem,1.9vw,1.75rem);top:0;height:4px;border-radius:0 0 4px 4px;background:var(--cyan)}
.hq-kicker{font-size:.72rem}
.hq-h{margin-top:.55rem;font-size:clamp(1.6rem,2.1vw,2rem);line-height:1.02;color:var(--navy)}
.hq-p{margin-top:.5rem;font-size:.93rem;line-height:1.45;color:rgba(var(--navy-rgb),.8)}
.hq-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .65rem;margin-top:1rem}
.hq-field{position:relative;min-width:0}
.hq-field--full{grid-column:1/-1}
.hq-field input,.hq-field select,.hq-field textarea{display:block;width:100%;min-height:3.35rem;margin:0;padding:1.32rem .85rem .38rem;border:1.5px solid rgba(var(--navy-rgb),.22);border-radius:var(--r-sm);background-color:color-mix(in srgb,var(--aqua) 26%,var(--white));color:var(--navy);font-size:1rem;font-weight:500;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.hq-field textarea{min-height:4.6rem;padding-top:1.5rem;resize:vertical}
.hq-field select{padding-right:2.4rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022B7C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:16px 16px}
.hq-field select.is-empty{color:rgba(var(--navy-rgb),.7)}
.hq-field select option{color:var(--navy);background:var(--white)}
.hq-field label{position:absolute;left:.92rem;top:1.05rem;z-index:1;max-width:calc(100% - 1.9rem);overflow:hidden;font-size:.95rem;font-weight:600;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;color:rgba(var(--navy-rgb),.7);pointer-events:none;transform-origin:0 0;transition:transform .22s var(--ease),color .2s}
.hq-field input:focus + label,.hq-field input:not(:placeholder-shown) + label,.hq-field textarea:focus + label,.hq-field textarea:not(:placeholder-shown) + label,.hq-field select + label{transform:translate3d(0,-.68rem,0) scale(.76);color:var(--blue)}
.hq-field input:-webkit-autofill + label{transform:translate3d(0,-.68rem,0) scale(.76);color:var(--blue)}
.hq-field--area::before{content:"";position:absolute;left:2px;right:1rem;top:2px;z-index:1;height:1.35rem;border-radius:12px 0 0 0;background:color-mix(in srgb,var(--aqua) 26%,var(--white));pointer-events:none}
.hq-field input:hover,.hq-field select:hover,.hq-field textarea:hover{border-color:rgba(var(--blue-rgb),.6)}
.hq-field input:focus-visible,.hq-field select:focus-visible,.hq-field textarea:focus-visible{border-color:var(--blue);outline:3px solid var(--cyan);outline-offset:2px}
.hq-field.is-bad input,.hq-field.is-bad textarea{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.hq-err{display:block;font-size:.8rem;font-weight:600;line-height:1.3;color:var(--white)}
.hq-err:not(:empty){display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;padding:.28rem .62rem .28rem .38rem;border-radius:9px;background:var(--navy)}
.hq-err:not(:empty)::before{content:"!";flex:none;display:grid;place-items:center;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--cyan);color:var(--navy);font-weight:800;font-size:.72rem;line-height:1}
@container hq (max-width:330px){.hq-fields{grid-template-columns:minmax(0,1fr)}}
.hq-submit{width:100%;margin-top:.9rem;justify-content:space-between}
.hq-submit[disabled]{cursor:progress;opacity:.74}
.hq-status{display:flex;align-items:center;min-height:2.4rem;margin-top:.6rem;font-size:.85rem;line-height:1.4;color:rgba(var(--navy-rgb),.78)}
.hq-status-in{display:flex;align-items:flex-start;gap:.5rem}
.hq-status .ico{flex:none;width:18px;height:18px;color:var(--blue)}
.hq-status.is-ok .hq-status-in,.hq-status.is-fail .hq-status-in{width:100%;padding:.62rem .8rem;border-radius:12px;font-weight:600}
.hq-status.is-ok .hq-status-in{background:var(--cyan);color:var(--navy)}
.hq-status.is-ok .ico{color:var(--navy)}
.hq-status.is-fail .hq-status-in{background:var(--navy);color:var(--white)}
.hq-status.is-fail .ico{color:var(--cyan)}
.hq-status.is-fail a{color:var(--white);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}

/* the shore: waves at the bottom edge, never over the copy or the form */
.hm-shore{position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:var(--hm-shore);pointer-events:none}
.hm-bw{position:absolute;left:0;max-width:none;will-change:transform}
.hm-bw--1{width:max(2400px,170vw);height:calc(var(--hm-shore)*.9);bottom:calc(var(--hm-shore)*.12);fill:rgba(var(--cyan-rgb),.5)}
.hm-bw--2{width:max(2880px,200vw);height:calc(var(--hm-shore)*1.05);bottom:calc(var(--hm-shore)*.16);fill:rgba(var(--blue-rgb),.42)}
.hm-front-x{position:absolute;left:0;bottom:0;width:var(--hm-ww);will-change:transform}
.hm-wave-front{display:block;width:100%;max-width:none;height:auto}
.hm-front-x::after{content:"";position:absolute;left:0;right:0;top:100%;height:2px;background:var(--white)}

@media (max-width:1180px) and (min-width:1081px){.hm-hero .hm-grid{grid-template-columns:minmax(0,1fr) minmax(330px,390px)}}
/* tablets: one column, the card under the copy */
@media (max-width:1080px){
  .hm-hero{min-height:0}
  .hm-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .hm-quote{width:100%;max-width:620px}
  .hm-veil{background:linear-gradient(180deg,rgba(var(--navy-rgb),.72) 0%,rgba(var(--navy-rgb),.5) 45%,rgba(var(--navy-rgb),.3) 100%)}
}
@media (max-width:760px){
  .hm-hero{--hm-h1:clamp(2.45rem,11.2vw,3.3rem);--hm-ww:1700px;padding-top:calc(var(--nav-h) + .6rem)}
  .hm-sats{gap:.5rem;margin-bottom:1.3rem}
  .hm-pill{height:38px;padding:0 .9rem 0 .8rem;font-size:.85rem}
  .hm-pill--years b{font-size:1.1rem}
  .hm-eyebrow{margin-bottom:.8rem;font-size:.68rem;letter-spacing:.12em}
  .hm-sub{font-size:1rem}
  .hm-ctas{display:grid;gap:.7rem}
  .hm-ctas .btn{width:100%;justify-content:space-between;padding-left:1.4rem}
  .hm-grid{gap:1.8rem}
  .hq-form{border-radius:20px}
}
html:not(.js) .hm-sat,html.reduced .hm-sat,html.reduced .hm-quote,html.reduced .hm-media{will-change:auto}

/* ③ «Our standard»: the 24/7 is only a white outline, no fill (pedido del dueño) */
.hm-band .hm-band-ghost{color:transparent;-webkit-text-stroke:1.75px rgba(var(--white-rgb),.42);paint-order:normal}
@media (max-width:760px){.hm-band .hm-band-ghost{-webkit-text-stroke-width:1.4px}}

/* ④ Services takes more room on the sides (pedido del dueño): +200px of measure from 1440 up */
.hm-svc > .wrap{max-width:calc(var(--wrap) + 200px + var(--gut)*2)}
@media (min-width:1280px){.hm-halo{grid-template-columns:minmax(0,1fr) min(26vw,440px) minmax(0,1fr)}}

/* ESPEJO: a real photo of a job by the lake replaces the schematic map (pedido del dueño) */
.hm-area-photo{position:relative;margin:0;min-height:440px;border-radius:var(--r);box-shadow:var(--shadow);will-change:transform}
.hm-area-photo::before{content:"";position:absolute;inset:-12px;border-radius:calc(var(--r) + 10px);border:2px solid var(--cyan);pointer-events:none}
.hm-area-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:var(--r);border:6px solid var(--white)}
.hm-area-tag{position:absolute;left:1.2rem;bottom:1.2rem;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem .5rem .75rem;border-radius:999px;background:var(--white);color:var(--navy);font-weight:700;font-size:.88rem;box-shadow:var(--shadow-sm)}
.hm-area-tag .ico{width:18px;height:18px;color:var(--blue)}
@media (max-width:900px){.hm-area-photo{min-height:0;aspect-ratio:4/3.4;margin:12px}}
@media (max-width:560px){.hm-area-photo{aspect-ratio:1/1;margin:10px 8px}.hm-area-tag{left:.9rem;bottom:.9rem;font-size:.8rem}}

/* ================= AJUSTES r4 2026-11-13 · hero = referencia del dueño, de día, tina viva, CEO en PNG =================
   Day scene of Big Bear Lake (video 1080p, water + steam), copy on the left, CEO cut-out on the right
   (where the owner drew the green mark), 3 service tiles and a glass facts bar on the bottom edge. */
.hm-r4{--hm-h1:clamp(3rem,min(6.1vw,10.4vh),6.5rem);
  min-height:clamp(680px,100vh,1080px);min-height:clamp(680px,100svh,1080px);
  padding:calc(var(--nav-h) + clamp(1.2rem,4.2vh,3rem)) 0 clamp(1rem,2.6vh,1.6rem);gap:clamp(1.2rem,3vh,2rem)}
.hm-r4 .hm-media{inset:0;background:var(--navy) url("/assets/img/scene/hero-tub-poster.webp?v=9") 50% 50%/cover no-repeat}
.hm-r4 .hm-video{object-position:50% 50%}
.hm-r4 .hm-veil{background:
  linear-gradient(90deg,rgba(var(--navy-rgb),.86) 0%,rgba(var(--navy-rgb),.7) 26%,rgba(var(--navy-rgb),.34) 46%,rgba(var(--navy-rgb),.06) 62%,rgba(var(--navy-rgb),0) 72%),
  linear-gradient(180deg,rgba(var(--navy-rgb),.55) 0%,rgba(var(--navy-rgb),0) 22%),
  linear-gradient(0deg,rgba(var(--navy-rgb),.62) 0%,rgba(var(--navy-rgb),0) 26%)}
.hm-r4 .hm-grid{display:block;flex:1 1 auto}
.hm-r4 .hm-copy{max-width:min(46rem,56vw);padding-top:0}
.hm-r4 .hm-eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(.8rem,2vh,1.3rem);color:var(--white);letter-spacing:.16em}
.hm-r4 .hm-h1{font-size:var(--hm-h1);line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
.hm-r4 .hm-h1 .hl{display:block}
.hm-r4 .hm-h1 .hl:nth-child(2){color:var(--white)}
.hm-r4 .hm-h1 .hl:nth-child(3){color:var(--cyan)}
.hm-r4 .hm-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:clamp(1.3rem,3.4vh,2.2rem)}
.hm-tel{display:inline-flex;align-items:center;gap:.6rem;padding-left:1.6rem;border-left:1px solid rgba(var(--white-rgb),.35);font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.45rem);color:var(--white);text-decoration:none;text-shadow:0 1px 8px rgba(var(--navy-rgb),.6)}
.hm-tel svg{width:22px;height:22px;color:var(--white)}
.hm-tel:hover{color:var(--cyan)}
.hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,12.5rem));gap:clamp(.6rem,1.2vw,1.2rem);margin:clamp(1.4rem,3.6vh,2.4rem) 0 0;padding:0;list-style:none}
.hm-tile{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:.35rem .8rem;min-height:clamp(5.6rem,12vh,7rem);padding:.9rem 1rem;border:1px solid rgba(var(--white-rgb),.32);border-radius:14px;background:rgba(var(--navy-rgb),.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);text-decoration:none;transition:border-color .25s,background-color .25s,transform .25s var(--ease)}
.hm-tile-n{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--cyan)}
.hm-tile svg{justify-self:center;width:38px;height:38px;color:var(--white)}
.hm-tile-t{grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.15;text-align:center}
.hm-tile:hover{border-color:var(--cyan);background:rgba(var(--navy-rgb),.62);transform:translateY(-3px)}
.hm-ceo{position:absolute;z-index:2;right:clamp(1rem,7vw,9rem);bottom:0;height:min(78%,860px);aspect-ratio:900/1640;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(var(--navy-rgb),.35))}
.hm-ceo img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.hm-facts-wrap{position:relative;z-index:3}
.hm-facts{display:flex;align-items:center;gap:1rem;min-height:4rem;padding:.6rem clamp(1rem,2vw,2rem);border:1px solid rgba(var(--white-rgb),.24);border-radius:16px;background:rgba(var(--navy-rgb),.55);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);color:var(--white)}
.hm-facts ul{display:flex;flex:1 1 auto;margin:0;padding:0;list-style:none}
.hm-facts li{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;justify-content:center;padding:.3rem 1rem;font-family:var(--display);font-weight:600;font-size:clamp(.92rem,1.1vw,1.08rem);white-space:nowrap}
.hm-facts li + li{border-left:1px solid rgba(var(--white-rgb),.28)}
.hm-facts li:first-child{justify-content:flex-start;padding-left:0}
.hm-facts li svg{flex:none;width:24px;height:24px;color:var(--cyan)}
.hm-explore{display:inline-flex;align-items:center;gap:.5rem;padding-left:1.4rem;border-left:1px solid rgba(var(--white-rgb),.28);font-family:var(--display);font-weight:700;color:var(--white);white-space:nowrap;text-decoration:none}
.hm-explore svg{width:20px;height:20px}
.hm-explore:hover{color:var(--cyan)}
@media (max-width:1280px){.hm-r4 .hm-facts li:nth-child(3){display:none}}
@media (max-width:1080px){
  .hm-r4{min-height:clamp(640px,100svh,980px)}
  .hm-r4 .hm-copy{max-width:62vw}
  .hm-ceo{right:-2vw;height:min(62%,640px)}
  .hm-r4 .hm-veil{background:linear-gradient(90deg,rgba(var(--navy-rgb),.86) 0%,rgba(var(--navy-rgb),.62) 45%,rgba(var(--navy-rgb),.15) 75%),linear-gradient(0deg,rgba(var(--navy-rgb),.6) 0%,rgba(var(--navy-rgb),0) 30%)}
  .hm-explore{display:none}
}
@media (max-width:760px){
  .hm-r4{--hm-h1:clamp(2.6rem,13vw,3.6rem);min-height:0;padding-top:calc(var(--nav-h) + .8rem);gap:0}
  .hm-r4 .hm-grid{order:1}
  .hm-ceo{order:2;position:relative;right:auto;align-self:center;height:auto;width:min(78vw,340px);margin-top:1rem}
  .hm-r4 .hm-facts-wrap{order:3;margin-top:-3.2rem}
  .hm-r4 .hm-copy{max-width:none}
  .hm-r4 .hm-veil{background:linear-gradient(180deg,rgba(var(--navy-rgb),.82) 0%,rgba(var(--navy-rgb),.62) 50%,rgba(var(--navy-rgb),.3) 72%,rgba(var(--navy-rgb),.7) 100%)}
  .hm-r4 .hm-eyebrow{font-size:.7rem;letter-spacing:.12em}
  .hm-r4 .hm-ctas{gap:.8rem 1rem}
  .hm-tel{padding-left:1rem}
  .hm-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .hm-tile{min-height:5.6rem;padding:.7rem .5rem;gap:.3rem .3rem}
  .hm-tile-n{font-size:.85rem}
  .hm-tile svg{width:28px;height:28px}
  .hm-tile-t{font-size:.84rem}
  .hm-facts{padding:.5rem .8rem;min-height:0}
  .hm-facts ul{flex-direction:column}
  .hm-facts li{justify-content:flex-start;padding:.45rem 0;font-size:.92rem;white-space:normal}
  .hm-facts li + li{border-left:0;border-top:1px solid rgba(var(--white-rgb),.2)}
  .hm-facts li:nth-child(3){display:flex}
}
html.reduced .hm-r4 .hm-video{display:none}
.hm-tile svg,.hm-facts li svg,.hm-tel svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-r4 .hm-eyebrow::before{background:var(--cyan)}
/* r4 · day stays day: a deep shade only behind the copy, the tub and the CEO keep their real colour */
.hm-r4 .hm-veil{background:
  linear-gradient(90deg,rgba(3,22,62,.82) 0%,rgba(3,22,62,.66) 28%,rgba(3,22,62,.3) 46%,rgba(3,22,62,0) 60%),
  linear-gradient(180deg,rgba(3,22,62,.4) 0%,rgba(3,22,62,0) 16%) !important}
@media (max-width:1080px){.hm-r4 .hm-veil{background:linear-gradient(90deg,rgba(3,22,62,.84) 0%,rgba(3,22,62,.6) 45%,rgba(3,22,62,.1) 75%) !important}}
@media (max-width:760px){.hm-r4 .hm-veil{background:linear-gradient(180deg,rgba(3,22,62,.8) 0%,rgba(3,22,62,.6) 48%,rgba(3,22,62,.15) 70%,rgba(3,22,62,.5) 100%) !important}}
.hm-r4 .hm-video{filter:saturate(1.12) contrast(1.04)}
@media (max-width:1080px){.hm-r4 .hm-video{object-position:68% 50%}.hm-r4 .hm-media{background-position:68% 50%}}
@media (max-width:760px){
  .hm-r4{--hm-h1:clamp(2.1rem,10vw,3.3rem)}
  .hm-r4 .hm-facts li:nth-child(3){display:flex}
  .hm-r4 .hm-tel{padding-left:0;border-left:0}
  .hm-r4 .hm-ctas .btn{flex:1 1 100%;justify-content:space-between}
}

/* ================= AJUSTES r5 2026-11-14 · hero = la foto del dueño, a la misma hora (azul) =================
   Owner: «exactamente el mismo diseño», condensed heavy headline, blue-hour Big Bear scene with the live tub,
   NO gradient over the picture («le quita calidad»), so legibility comes only from a soft text shadow. */
@font-face{font-family:"Anton";src:url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.hm-r5{--hm-h1:clamp(3.4rem,min(7.1vw,12.6vh),8.6rem)}
.hm-r5 .hm-veil,.hm-r5 .hm-ceo{display:none}
.hm-r5 .hm-video{filter:none}
.hm-r5 .hm-media{background-position:50% 50%}
.hm-r5 .hm-video{object-position:50% 50%}
.hm-r5 .hm-h1{font-family:"Anton","Outfit",Impact,sans-serif;font-weight:400;line-height:.98;letter-spacing:.004em;
  text-shadow:0 2px 4px rgba(2,10,30,.55),0 10px 34px rgba(2,10,30,.45)}
.hm-r5 .hm-h1 .hl:nth-child(3){color:#14dcf2}
.hm-r5 .hm-eyebrow,.hm-r5 .hm-tel{text-shadow:0 1px 3px rgba(2,10,30,.7),0 4px 16px rgba(2,10,30,.5)}
.hm-r5 .hm-tile{background:rgba(6,16,40,.38);border-color:rgba(var(--white-rgb),.3)}
.hm-r5 .hm-facts{background:rgba(6,16,40,.42)}
@media (max-width:1080px){.hm-r5 .hm-video{object-position:72% 50%}.hm-r5 .hm-media{background-position:72% 50%}}
@media (max-width:760px){
  .hm-r5{--hm-h1:clamp(2.9rem,15vw,4.4rem);min-height:100svh}
  .hm-r5 .hm-grid{flex:1 1 auto}
  .hm-r5 .hm-facts-wrap{margin-top:1.2rem}
  .hm-r5 .hm-video,.hm-r5 .hm-media{object-position:50% 50%;background-position:50% 50%}
}

/* ================= EQUIPOS 2026-11-14 · el hero cabe en cualquier pantalla (Windows incluido) =================
   Antes: min-height 680px → en 1366×657 o 1280×600 (Windows con barra de tareas) la franja de abajo quedaba cortada
   y el titular se achicaba por el alto. Ahora el hero mide exactamente la pantalla y se compacta en alturas bajas. */
@media (min-width:761px){
  .hm-hero.hm-r4{min-height:100vh;min-height:100svh}
  .hm-r5{--hm-h1:clamp(3.2rem,min(7.1vw,13.4vh),8.6rem)}
}
@media (min-width:761px) and (max-height:820px){
  .hm-hero.hm-r4{padding-top:calc(var(--nav-h) + clamp(.4rem,1.6vh,1rem));padding-bottom:clamp(.6rem,1.6vh,1rem);gap:clamp(.6rem,1.6vh,1rem)}
  .hm-r4 .hm-eyebrow{margin-bottom:clamp(.4rem,1.2vh,.8rem)}
  .hm-r4 .hm-ctas{margin-top:clamp(.8rem,2vh,1.2rem)}
  .hm-tiles{margin-top:clamp(.8rem,2vh,1.3rem)}
  .hm-tile{min-height:clamp(4.2rem,9vh,5.4rem);padding:.55rem .9rem}
  .hm-tile svg{width:30px;height:30px}
  .hm-facts{min-height:3.4rem;padding-block:.4rem}
}
@media (min-width:761px) and (max-height:640px){
  .hm-tile{min-height:3.6rem;grid-template-columns:auto auto 1fr;grid-template-rows:auto}
  .hm-tile-t{grid-column:auto;text-align:left}
}

/* ================= AJUSTES r6 2026-11-13 · sombra azul a la izquierda, título de 2 líneas + párrafo, olas debajo =================
   Owner: «faltó esa sombra azul del lado izquierdo, como la de antes, para que el texto resalte»; «sin puntos, solo
   2 líneas, con un pequeño párrafo»; «las olas me gustaban pero abajo, que no se vean al principio». */
.hm-r5 .hm-veil{display:block;background:
  linear-gradient(90deg,rgba(3,26,74,.8) 0%,rgba(3,26,74,.62) 26%,rgba(3,26,74,.3) 44%,rgba(3,26,74,.08) 56%,rgba(3,26,74,0) 64%) !important}
@media (max-width:1080px){.hm-r5 .hm-veil{background:linear-gradient(90deg,rgba(3,26,74,.82) 0%,rgba(3,26,74,.55) 48%,rgba(3,26,74,.12) 78%,rgba(3,26,74,0) 100%) !important}}
@media (max-width:760px){.hm-r5 .hm-veil{background:linear-gradient(180deg,rgba(3,26,74,.5) 0%,rgba(3,26,74,.72) 28%,rgba(3,26,74,.5) 58%,rgba(3,26,74,.12) 78%,rgba(3,26,74,.45) 100%) !important}}
.hm-r5 .hm-h1 .hl:nth-child(2){color:#14dcf2}
.hm-r5 .hm-h1 .hl{white-space:nowrap}
.hm-r5 .hm-sub{max-width:31rem;margin-top:clamp(.8rem,2vh,1.3rem);font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.5;color:rgba(var(--white-rgb),.94);text-shadow:0 1px 3px rgba(2,10,30,.7),0 4px 16px rgba(2,10,30,.5)}
.hm-r5 .hm-ctas{margin-top:clamp(1.1rem,2.8vh,1.9rem)}
@media (max-width:760px){.hm-r5{--hm-h1:clamp(2.6rem,12.4vw,3.6rem)}.hm-r5 .hm-sub{font-size:1rem}}
@media (max-height:760px) and (min-width:761px){.hm-r5{--hm-h1:clamp(3.2rem,min(6.6vw,11.4vh),8rem)}.hm-r5 .hm-tiles{margin-top:clamp(1rem,2.6vh,1.6rem)}}
/* the shore, now a seam under the full-screen hero */
.hm-shore-band{--hm-ww:clamp(1700px,150vw,3000px);--hm-shore:calc(var(--hm-ww)*.05556);position:relative;z-index:1;height:calc(var(--hm-shore) + 14px);overflow:hidden;
  background:linear-gradient(180deg,#06163a 0%,#0a2a66 100%);margin-bottom:-1px}
.hm-shore-band .hm-shore{position:absolute;left:0;right:0;bottom:0;height:var(--hm-shore)}
@media (max-width:760px){.hm-shore-band{--hm-ww:1700px}}
/* «Our standard»: the short paragraph under the 2-line title */
.hm-band-p{max-width:34rem;margin:1.2rem auto 0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.55;color:rgba(var(--white-rgb),.88);text-align:center;text-wrap:pretty}

/* EQUIPOS 2026-11-14 (b) · titular con la misma proporción en Windows que en la Mac (≈ 7 % del ancho), sin pasarse del alto */
@media (min-width:761px) and (max-height:820px){.hm-r5{--hm-h1:clamp(3.2rem,min(7vw,15.2vh),8rem)}}

/* ================= AJUSTES r7 2026-11-13 · «Our standard» =================
   Top crest cut out of the band (mask) so the moving caustics fill it, same as the bottom edge. Paragraph removed. */
.hm-band{z-index:2;margin-top:calc(var(--wave-h)*-1 + 1px);padding-top:calc(clamp(3rem,5vw,4.4rem) + var(--wave-h));
  -webkit-mask:var(--wave-mask) 0 0/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 1px)/100% 100% no-repeat;
          mask:var(--wave-mask) 0 0/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 1px)/100% 100% no-repeat}
.hm-what .wave-edge--navy,.hm-band-p{display:none}

/* EQUIPOS 2026-11-14 (c) · el bloque de la izquierda centrado de arriba abajo entre el menú y la franja de datos */
@media (min-width:761px){.hm-r4 .hm-grid{display:flex;flex-direction:column;justify-content:center}}

/* ================= EQUIPOS 2026-11-14 (d) · hero PROPORCIONAL (igual en Windows que en Mac) =================
   Todo el hero se mide con --u (ver base.css): la composición de la Mac del dueño, escalada a cualquier escritorio.
   Pedido 14-11: las 3 tarjetas un poco más abajo del botón y el teléfono, y su contenido centrado. */
@media (min-width:1081px){
  .hm-hero.hm-r4{padding:calc(var(--u) * 92 + var(--u) * 11.6) 0 calc(var(--u) * 11.6);gap:calc(var(--u) * 11.6)}
  .hm-hero .wrap.hm-grid,.hm-hero .wrap.hm-facts-wrap{max-width:none;padding-inline:var(--hero-x)}
  .hm-r4 .hm-copy{max-width:calc(var(--u) * 736)}
  .hm-r4 .hm-eyebrow{font-size:calc(var(--u) * 12.48);letter-spacing:calc(var(--u) * 2);margin-bottom:calc(var(--u) * 8.7)}
  .hm-r5{--hm-h1:calc(var(--u) * 100.8)}
  .hm-r5 .hm-h1{font-size:calc(var(--u) * 100.8)}
  .hm-r5 .hm-sub{font-size:calc(var(--u) * 17.28);margin-top:calc(var(--u) * 14.5);max-width:calc(var(--u) * 496)}
  .hm-r4 .hm-ctas,.hm-r5 .hm-ctas{margin-top:calc(var(--u) * 20.3);gap:calc(var(--u) * 16) calc(var(--u) * 25.6)}
  .hm-r4 .hm-ctas .btn{min-height:calc(var(--u) * 56);font-size:calc(var(--u) * 16);padding:calc(var(--u) * 8.8) calc(var(--u) * 9.6) calc(var(--u) * 8.8) calc(var(--u) * 24);gap:calc(var(--u) * 12.8)}
  .hm-r4 .hm-ctas .btn svg,.hm-r4 .hm-ctas .btn .btn-ic{width:calc(var(--u) * 40);height:calc(var(--u) * 40)}
  .hm-tel{font-size:calc(var(--u) * 21.6);padding-left:calc(var(--u) * 25.6);gap:calc(var(--u) * 9.6)}
  .hm-tel svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
  .hm-tiles{margin-top:calc(var(--u) * 40);gap:calc(var(--u) * 17.3);grid-template-columns:repeat(3,calc(var(--u) * 200))}
  .hm-tile{min-height:calc(var(--u) * 84);padding:calc(var(--u) * 10) calc(var(--u) * 14.4);border-radius:calc(var(--u) * 14);gap:calc(var(--u) * 5.6) calc(var(--u) * 12.8);align-content:center}
  .hm-tile svg{width:calc(var(--u) * 30);height:calc(var(--u) * 30)}
  .hm-tile-n{font-size:calc(var(--u) * 16.8)}
  .hm-tile-t{font-size:calc(var(--u) * 16.56);text-align:center}
  .hm-facts{min-height:calc(var(--u) * 54.4);padding:calc(var(--u) * 6.4) calc(var(--u) * 28.8);border-radius:calc(var(--u) * 16);gap:calc(var(--u) * 16)}
  .hm-facts li{font-size:calc(var(--u) * 15.84);padding:calc(var(--u) * 4.8) calc(var(--u) * 16) calc(var(--u) * 4.8) 0;gap:calc(var(--u) * 11.2)}
  .hm-facts li svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22)}
  .hm-explore{font-size:calc(var(--u) * 17);padding-left:calc(var(--u) * 22.4);gap:calc(var(--u) * 8)}
  .hm-explore svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
}
@media (min-width:1081px){
  /* (d) las tarjetas, siempre como en la Mac: número e ícono arriba, el nombre centrado abajo */
  .hm-tile{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .hm-tile-t{grid-column:1/-1;text-align:center}
}
@media (min-width:1081px){
  /* (e) 14-11 dueño: «subir un poquito más entre la parte de abajo del banner y las 3 cartas… que todo se sienta centrado»:
     el bloque se apoya cerca de la franja (≈26 px de referencia) y el aire que sobra queda arriba, bajo el menú. */
  .hm-r4 .hm-grid{justify-content:flex-end;padding-bottom:calc(var(--u) * 14)}
}

/* ================= AJUSTES r9 2026-11-14 · sombra izquierda más fuerte al inicio y más ligera al final =================
   Owner: «que la sombra de la izquierda fuese un poquito más fuerte al principio y menos pesada al final». */
.hm-r5 .hm-veil{background:
  linear-gradient(90deg,rgba(3,26,74,.9) 0%,rgba(3,26,74,.76) 18%,rgba(3,26,74,.46) 33%,rgba(3,26,74,.16) 45%,rgba(3,26,74,.04) 53%,rgba(3,26,74,0) 59%) !important}
@media (max-width:1080px){.hm-r5 .hm-veil{background:linear-gradient(90deg,rgba(3,26,74,.9) 0%,rgba(3,26,74,.66) 34%,rgba(3,26,74,.22) 62%,rgba(3,26,74,0) 82%) !important}}
@media (max-width:760px){.hm-r5 .hm-veil{background:linear-gradient(180deg,rgba(3,26,74,.58) 0%,rgba(3,26,74,.8) 26%,rgba(3,26,74,.48) 54%,rgba(3,26,74,.08) 72%,rgba(3,26,74,.32) 100%) !important}}