@font-face{font-family:'Sora Local';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sora-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Sora Local';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Sora Local';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Sora Local';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/sora-latin-800-normal.woff2) format('woff2')}

/* DARSA LATAM — web v0 (esqueleto)
   Paleta de la guía de marca. El naranja "calor" solo existe en el segundo
   y medio que dura la portada antes de enfriarse. */
:root{
  --profundo:#173540;   /* principal */
  --petroleo:#2E6173;
  --celeste:#5CC6D9;    /* acento: display, foco, detalles */
  --gris:#F4F7F8;
  --texto:#4A6670;
  --blanco:#FFFFFF;
  --calor-1:#F6B65E;
  --calor-2:#E9783A;
  --wa:#1A7F45;         /* verde WhatsApp oscurecido para contraste AA con blanco */

  --f:'Sora Local','Sora', Arial, sans-serif;
  --wrap:1180px;
  --pad:clamp(20px,5vw,56px);
  --t-sweep:1500ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip;font-family:var(--f);font-size:17px;line-height:1.6;color:var(--texto);background:var(--gris);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f);color:var(--profundo);margin:0}
h2{font-size:clamp(30px,4.6vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.02em;max-width:18ch}
h3{font-size:20px;line-height:1.3;font-weight:700}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blanco);color:var(--profundo);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--celeste);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.intro{max-width:56ch;margin-top:16px;font-size:18px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--f);padding:15px 22px;border-radius:12px;border:0;text-decoration:none;cursor:pointer;transition:background .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--wa);color:var(--blanco)}
.btn-wa:hover{background:#146536}
.btn-claro{background:var(--blanco);color:var(--profundo)}
.btn-claro:hover{background:var(--gris)}

/* =========================================================
   PORTADA
   ========================================================= */
.hero{position:relative;min-height:100svh;overflow:hidden;color:var(--blanco);isolation:isolate}
.capa{position:absolute;inset:0;display:flex;flex-direction:column}
.capa-frio{background:
  radial-gradient(120% 80% at 85% 10%, rgba(46,97,115,.75), transparent 60%),
  var(--profundo);
  clip-path:inset(0 0 0 0)}
.capa-calor{background:
  radial-gradient(90% 70% at 80% 20%, var(--calor-1), transparent 70%),
  var(--calor-2);
  color:var(--profundo);z-index:2;pointer-events:none;clip-path:inset(0 0 0 0)}
.capa-calor .hero-content,.capa-calor .nav{filter:url(#calor)}
.hero[data-estado="frio"] .capa-calor,
.hero[data-estado="listo"] .capa-calor{clip-path:inset(100% 0 0 0)}
.hero[data-estado="frio"] .capa-calor{transition:clip-path var(--t-sweep) cubic-bezier(.65,0,.35,1)}
/* el frente acompaña al borde del barrido */
.hero[data-estado="listo"] .capa-calor{display:none}

/* La línea fría que baja con el barrido */
.frente{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;opacity:0;
  background:var(--celeste);box-shadow:0 0 24px 6px rgba(92,198,217,.55)}
.hero[data-estado="frio"] .frente{animation:baja var(--t-sweep) cubic-bezier(.65,0,.35,1) forwards}
@keyframes baja{0%{opacity:1;top:0}90%{opacity:1}100%{opacity:0;top:100%}}

/* La aleta del split, arriba de todo */
.aleta{position:absolute;top:0;left:0;right:0;height:14px;z-index:4;perspective:400px;pointer-events:none}
.aleta span{display:block;height:100%;margin:0 6vw;background:linear-gradient(#fff,#dfe7ea);border-radius:0 0 10px 10px;
  transform-origin:top center;transform:rotateX(0deg);box-shadow:0 2px 0 rgba(23,53,64,.12)}
.hero[data-estado="frio"] .aleta span,
.hero[data-estado="listo"] .aleta span{transform:rotateX(62deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}

/* Sello gigante: el isotipo como supergráfico, tono sobre tono.
   Su engranaje gira como el ventilador del equipo mientras enfría y se detiene
   en la posición exacta del logo (12 dientes: 3 vueltas completas). */
.sello-gigante{position:absolute;z-index:0;top:50%;right:-7%;height:128%;width:auto;transform:translateY(-46%);pointer-events:none}
.sello-nav{width:40px;height:40px;flex:none}
.engranaje{transform-box:view-box;transform-origin:100px 107.1px}
.hero[data-estado="frio"] .engranaje{animation:gira var(--t-sweep) cubic-bezier(.45,0,.2,1) both}
@keyframes gira{to{transform:rotate(1080deg)}}
.marca:hover .sello-nav .engranaje{animation:gira 1.2s cubic-bezier(.45,0,.2,1)}

/* Corrientes de aire: aparecen durante el barrido y se quedan muy tenues */
.flujo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.flujo path{fill:none;stroke:var(--celeste);stroke-width:1.2;opacity:.12;stroke-dasharray:6 14;vector-effect:non-scaling-stroke}
.hero[data-estado="listo"] .flujo path{animation:sopla 9s linear infinite}
@keyframes sopla{to{stroke-dashoffset:-400}}

.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;mix-blend-mode:screen;z-index:0}

/* Nav */
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:20px;padding:30px var(--pad) 0;max-width:calc(var(--wrap) + 2*var(--pad));width:100%;margin:0 auto}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-txt b{font-weight:800;font-size:20px;letter-spacing:.02em}
.marca-txt small{font-weight:600;font-size:9px;letter-spacing:.42em;margin-top:4px;opacity:.85}
.nav-links{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.nav-links a{text-decoration:none;font-size:15px;font-weight:600;opacity:.88}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav-wa{padding:11px 18px;font-size:15px}
.nav-toggle{display:none}
.capa-calor .nav-wa{background:var(--profundo)}

/* Contenido de portada */
.hero-content{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;
  max-width:calc(var(--wrap) + 2*var(--pad));width:100%;margin:0 auto;padding:40px var(--pad) 72px}
.hero h1{color:inherit;font-size:clamp(42px,6.4vw,88px);line-height:.98;font-weight:800;letter-spacing:-.035em;max-width:10ch}
.bajada{margin-top:20px;font-size:clamp(17px,1.6vw,20px);max-width:38ch;opacity:.9}

.selector{border:0;margin:30px 0 0;padding:0}
.selector legend{padding:0;font-weight:600;font-size:15px;margin-bottom:12px}
.selector-ops{display:flex;flex-wrap:wrap;gap:10px}
.op{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;text-decoration:none;font-weight:600;font-size:16px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.35);transition:background .2s,border-color .2s,color .2s}
.op::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--celeste)}
.op:hover{background:var(--blanco);color:var(--profundo);border-color:var(--blanco)}
.capa-calor .op{border-color:rgba(23,53,64,.35);background:rgba(255,255,255,.18)}
.capa-calor .op::before{background:var(--profundo)}
.selector-nota{margin-top:12px;font-size:14px;opacity:.7}

/* Display de 7 segmentos (como el del split o el control) */
.display{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.digitos{display:flex;align-items:flex-start;gap:clamp(8px,1.1vw,16px);height:clamp(140px,25vw,340px)}
.digitos svg{height:100%;width:auto;overflow:visible}
.digitos .seg{fill:rgba(92,198,217,.07);transition:fill .12s}
.digitos .seg.on{fill:var(--celeste);filter:drop-shadow(0 0 10px rgba(92,198,217,.55))}
.digitos .grado{height:22%;width:auto}
.digitos .grado circle{fill:none;stroke:var(--celeste);stroke-width:7}
.capa-calor .digitos .seg{fill:rgba(23,53,64,.07)}
.capa-calor .digitos .seg.on{fill:var(--profundo);filter:none}
.capa-calor .digitos .grado circle{stroke:var(--profundo)}
.display-modo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--celeste);opacity:.25;transition:opacity .4s}
.hero[data-estado="listo"] .display-modo{opacity:1}
.copo{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.capa-calor .display-modo{color:var(--profundo)}

/* =========================================================
   INFORME
   ========================================================= */
.informe{padding:clamp(72px,10vw,128px) 0;background:var(--gris)}
.informe-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.informe-texto{position:sticky;top:48px}
.informe-texto p{margin-top:18px;max-width:44ch;font-size:18px}
.informe-texto .nota{font-size:15px;padding-left:14px;border-left:3px solid var(--celeste)}

.hoja{background:var(--blanco);border-radius:6px;padding:clamp(22px,3vw,40px);box-shadow:0 1px 0 rgba(23,53,64,.06),0 24px 48px -28px rgba(23,53,64,.35)}
.hoja-cab{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:2px solid var(--profundo)}
.hoja-titulo{font-weight:800;color:var(--profundo);font-size:20px;line-height:1.2}
.hoja-sub{font-size:13px}
.lecturas{margin:0}
.lecturas > div{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-bottom:1px solid #DCE5E8}
.lecturas dt{font-weight:700;color:var(--profundo);font-size:16px}
.lecturas .valor{margin:0;font-weight:600;color:var(--petroleo);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.lecturas .significa{margin:0;grid-column:1 / -1;font-size:15px}
.hoja-fotos{margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hoja-fotos img{aspect-ratio:4/3;object-fit:cover;border-radius:4px;width:100%}
.hoja-fotos figcaption{grid-column:1 / -1;font-size:13px}

/* =========================================================
   SERVICIOS — el sello baja desde la portada y suelta los servicios
   Reglas de la guía: el sello no se rota, no se deforma, sin sombras.
   Solo gira el engranaje interno y siempre termina en su posición.
   ========================================================= */
.servicios{position:relative;z-index:3;background:var(--blanco)}
/* Escena del sello: sola, a pantalla completa, sobre una foto real de DARSA en duotono y desenfocada */
.srv-stage{--sw:clamp(280px,min(36vw,60vh),560px);position:relative;display:grid;place-items:center;min-height:100svh;padding:clamp(48px,8vh,96px) var(--pad);isolation:isolate}
.srv-fondo{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 50% 50%, rgba(92,198,217,.16), transparent 42%),
    linear-gradient(rgba(244,247,248,.62), rgba(244,247,248,.80)),
    url(../img/fondo-servicios.jpg) center/cover no-repeat}
/* retícula de plano técnico, muy tenue */
.srv-fondo::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(23,53,64,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(23,53,64,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.srv-mapa{position:relative;width:100%;max-width:var(--wrap);display:grid;grid-template-columns:1fr var(--sw) 1fr;grid-template-rows:1fr 1fr;min-height:calc(var(--sw) * 1.05)}
.srv-centro{grid-column:2;grid-row:1 / 3;display:grid;place-items:center;pointer-events:none}
/* el margen alrededor del sello respeta su espacio de respeto */
/* el sello es decorativo: nunca debe tapar clics (cuando está invisible sobre la portada) */
.sello-srv{pointer-events:none;width:calc(var(--sw) - clamp(64px,8vw,120px));height:auto;display:block;transform-origin:50% 50%;will-change:transform}
.srv-guias{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.srv-guias path{fill:none;stroke:var(--petroleo);stroke-width:1.5}
.srv-guias circle{fill:var(--celeste)}
.srv-items{grid-column:1 / -1;grid-row:1 / -1;display:grid;grid-template-columns:1fr var(--sw) 1fr;grid-template-rows:1fr 1fr;list-style:none;margin:0;padding:0;pointer-events:none}
/* Ficha de cada equipo: vidrio claro sobre el fondo desenfocado */
.srv-item{width:min(100%,300px);align-self:center;padding:20px 22px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 0 rgba(23,53,64,.04),0 18px 40px -24px rgba(23,53,64,.45);will-change:transform,opacity}
.srv-item svg{width:130px;height:auto;margin-bottom:12px;display:block}
.srv-item svg rect,.srv-item svg path{fill:none;stroke:var(--profundo);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.srv-item svg .aire{stroke:var(--celeste);stroke-width:2}
.srv-item p{margin-top:6px;font-size:15px;line-height:1.5}
.pos-tl{grid-column:1;grid-row:1}
.pos-bl{grid-column:1;grid-row:2}
.pos-tr{grid-column:3;grid-row:1}
.pos-br{grid-column:3;grid-row:2}
.pos-tl,.pos-bl{justify-self:end;text-align:right}
.pos-tl svg,.pos-bl svg{margin-left:auto}
.pos-tr,.pos-br{justify-self:start}

/* Titular de la sección: después de la escena, en su propio espacio */
.srv-info{padding-top:clamp(56px,8vw,96px)}
.srv-cab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 48px;align-items:end;padding-top:clamp(16px,3vh,32px);border-top:2px solid var(--profundo)}
.srv-cab h2{max-width:18ch}
.srv-cab .intro{margin:0}

/* Con movimiento: la escena se queda fija mientras bajas */
.srv-anim .srv-scroll{height:280vh}
.srv-anim .srv-stage{position:sticky;top:0;height:100svh;min-height:0}
.srv-anim .srv-guias path{stroke-dashoffset:1}
.srv-anim .srv-guias circle{opacity:0}
.srv-anim .srv-item{opacity:0}

.tambien{margin-top:clamp(24px,4vh,48px);padding-bottom:clamp(72px,9vw,112px);display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:32px}
.tambien ul{margin:0;padding:0;list-style:none;columns:2;column-gap:40px}
.tambien li{break-inside:avoid;padding:10px 0;border-bottom:1px solid #DCE5E8;color:var(--profundo);font-weight:600;font-size:16px}

/* =========================================================
   CUIDADO (mantenimiento)
   ========================================================= */
.cuidado{padding:clamp(72px,10vw,120px) 0;background:var(--petroleo);color:rgba(255,255,255,.88)}
.cuidado h2{color:var(--blanco)}
.linea{list-style:none;margin:56px 0 48px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.linea::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.3)}
.linea li{position:relative;padding:36px 20px 0 0}
.linea li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--profundo);border:2px solid var(--celeste)}
.linea li:first-child::before{background:var(--celeste)}
.cuando{display:block;font-weight:800;font-size:clamp(24px,2.6vw,32px);color:var(--blanco);line-height:1.1}
.que{display:block;margin-top:6px;font-size:16px}

/* =========================================================
   TRABAJOS
   ========================================================= */
.trabajos{padding:clamp(72px,10vw,128px) 0;background:var(--gris)}
.galeria{margin-top:48px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,14vw,190px);gap:12px}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#DCE5E8}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:13px;color:var(--blanco);background:linear-gradient(transparent,rgba(23,53,64,.85))}
.g1{grid-column:1 / 8;grid-row:span 2}
.g2{grid-column:8 / 13;grid-row:span 3}
.g3{grid-column:1 / 4;grid-row:span 2}
.g4{grid-column:4 / 8;grid-row:span 2}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto{padding:clamp(72px,10vw,128px) 0;background:var(--blanco)}
.contacto-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px)}
.datos{margin:36px 0 0}
.datos > div{padding:12px 0;border-bottom:1px solid #DCE5E8;display:grid;grid-template-columns:130px 1fr;gap:12px}
.datos dt{font-weight:700;color:var(--profundo);font-size:15px}
.datos dd{margin:0;font-size:15px}
.ph{display:block;font-size:13px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--gris);padding:clamp(22px,3vw,36px);border-radius:6px}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:15px;color:var(--profundo)}
.form .full{grid-column:1 / -1}
.opc{font-weight:400;color:var(--texto)}
.form input,.form select,.form textarea{font:400 16px/1.4 var(--f);color:var(--profundo);background:var(--blanco);border:1.5px solid #C7D4D9;border-radius:10px;padding:13px 14px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--petroleo);outline:3px solid rgba(92,198,217,.45);outline-offset:0}
.form [aria-invalid="true"]{border-color:#B3261E}
.form-error{grid-column:1 / -1;color:#B3261E;font-size:15px}

/* Pie */
.pie{background:var(--profundo);color:rgba(255,255,255,.75);padding:40px 0 120px}
.pie-grid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:14px}
.pie .marca{color:var(--blanco)}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;border-radius:999px;
  background:var(--wa);color:var(--blanco);text-decoration:none;font-weight:600;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  transform:translateY(140%);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.wa-flotante svg{width:24px;height:24px;fill:currentColor}
.wa-flotante.visible{transform:none}
/* siempre visible */
.wa-flotante{transform:none}

/* =========================================================
   CELULAR
   ========================================================= */
@media (max-width:860px){
  .nav{padding-top:24px}
  .nav-links{display:none;position:absolute;top:100%;left:var(--pad);right:var(--pad);margin:10px 0 0;flex-direction:column;gap:0;
    background:var(--blanco);border-radius:12px;padding:8px 0;box-shadow:0 20px 40px -12px rgba(0,0,0,.4)}
  .nav-links.abierto{display:flex}
  .nav-links a{display:block;padding:14px 20px;color:var(--profundo);opacity:1}
  .nav-toggle{display:block;margin-left:auto;background:transparent;color:inherit;border:1.5px solid rgba(255,255,255,.4);border-radius:10px;padding:9px 14px;font:600 15px var(--f)}
  .capa-calor .nav-toggle{border-color:rgba(23,53,64,.4)}
  .nav-wa{display:none}

  .hero{min-height:94svh}
  .sello-gigante{height:62%;right:-38%;top:6%;transform:none}
  .hero-content{grid-template-columns:1fr;align-content:center;gap:8px;padding-top:20px;padding-bottom:48px}
  .display{order:-1;justify-self:start;flex-direction:row;align-items:flex-end;gap:16px}
  .digitos{height:clamp(110px,30vw,170px)}
  .op{flex:1 1 auto;justify-content:center}

  .informe-grid,.contacto-grid,.tambien{grid-template-columns:1fr}
  .informe-texto{position:static}
  .srv-cab{grid-template-columns:1fr;gap:8px;padding-top:14px}
  .srv-cab h2{font-size:28px}
  .srv-guias{display:none}
  .srv-stage{padding:24px 16px}
  .srv-mapa{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;min-height:0;gap:10px}
  .srv-centro{grid-column:1 / -1;grid-row:1;padding:0 0 14px}
  .sello-srv{width:clamp(110px,32vw,150px)}
  .srv-items{grid-row:2 / 4;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px}
  .pos-tl{grid-column:1;grid-row:1}.pos-tr{grid-column:2;grid-row:1}
  .pos-bl{grid-column:1;grid-row:2}.pos-br{grid-column:2;grid-row:2}
  .srv-item,.pos-tl,.pos-bl{justify-self:stretch;width:auto;text-align:left;align-self:stretch;padding:14px 14px}
  .pos-tl svg,.pos-bl svg{margin-left:0}
  .srv-item svg{width:84px;margin-bottom:8px}
  .srv-item h3{font-size:15.5px}
  .srv-item p{font-size:13px;line-height:1.45}
  .tambien ul{columns:1}
  .tambien{gap:8px}
  .linea{grid-template-columns:1fr;gap:28px}
  .linea::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .linea li{padding:0 0 0 40px}
  .galeria{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .g1{grid-column:1 / -1;grid-row:span 1}
  .g2,.g3,.g4{grid-column:auto;grid-row:span 1}
  .g2{grid-row:span 2}
  .form{grid-template-columns:1fr}

  /* En celular el botón de WhatsApp es una barra fija abajo */
  .wa-flotante{left:12px;right:12px;bottom:12px;justify-content:center;border-radius:14px}
  .hero-content{padding-bottom:96px}
  .contacto{padding-bottom:110px}
}

@media (prefers-reduced-motion:reduce){
  .capa-calor,.frente{display:none}
  .aleta span{transform:rotateX(62deg)}
  .engranaje{animation:none !important}
  .flujo path{animation:none !important}
  .wa-flotante{transition:none}
}