@charset "utf-8";
/* =====================================================================
   Inspector Calderas — hoja de estilos
   Paleta: Rich Black · Metallic Seaweed · Green Sheen · Opal · Champagne (fondo oscuro)
   Concepto: tablero de instrumentos de una sala de calderas — líneas finas, geometría recta,
   instrumentos animados con movimiento sobrio.
   Versión 2026-10-29c
   ===================================================================== */

*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --ink:#031926;           /* Rich Black: fondo base */
  --bg-2:#05202E;          /* banda alternada */
  --surface:#0A2A38;       /* tarjetas */
  --surface-2:#0E3343;
  --seaweed:#468189;       /* gráficos, rellenos */
  --sheen:#77ACA2;         /* enlaces, acentos (7:1) */
  --opal:#9DBEBB;          /* texto secundario (9:1) */
  --champagne:#F4E9CD;     /* títulos y botones */
  --text:#DCE6E3;          /* texto de lectura (14:1) */
  --muted:#86A6A3;         /* notas (6,8:1) */
  --red:#E0675A;           /* línea roja de presión máxima (Art. 57) */
  --flame-1:#FFD98A; --flame-2:#F5A03C; --flame-3:#E2572B; --flame-core:#8FD3E3;
  --line:rgba(157,190,187,.16);
  --line-strong:rgba(157,190,187,.32);
  --radius:4px; --radius-btn:6px;
  --font-head:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
body{background:var(--ink);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.08;letter-spacing:-.005em;text-wrap:balance;color:var(--champagne)}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--sheen);outline-offset:3px;border-radius:2px}
.container{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
section{position:relative;padding:104px 0}
@media (max-width:768px){section{padding:64px 0}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--champagne);color:var(--ink);font-weight:600;padding:10px 16px;border-radius:var(--radius-btn)}
.skip-link:focus{top:12px}
.blueprint{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(157,190,187,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(157,190,187,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(80% 70% at 70% 30%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 70% at 70% 30%,#000 30%,transparent 85%)}

/* ---------- piezas comunes ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sheen);margin-bottom:14px}
.kicker::before{content:"";width:8px;height:8px;background:var(--sheen)}
.section-head{max-width:700px;margin-bottom:48px}
.section-head h2{font-size:clamp(32px,4.4vw,48px);margin-bottom:14px}
.section-head p{color:var(--opal);font-size:17px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .kicker{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:var(--radius-btn);font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:.01em;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease);white-space:nowrap;border:1.5px solid transparent}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-primary{background:var(--champagne);color:var(--ink)}
.btn-primary:hover{background:#FFF5DC;transform:translateY(-1px)}
.btn-outline{border-color:var(--line-strong);color:var(--champagne);background:transparent}
.btn-outline:hover{border-color:var(--champagne);background:rgba(244,233,205,.06)}
.btn-sm{min-height:42px;padding:9px 18px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--sheen);padding:8px 0;min-height:40px;border-bottom:1.5px solid transparent;transition:border-color .25s,color .25s}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover{border-bottom-color:var(--sheen);color:var(--champagne)}
.link-arrow:hover::after{transform:translateX(3px)}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---------- navegación ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(3,25,38,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);transition:box-shadow .3s,background .3s}
#nav.scrolled{background:rgba(3,25,38,.97);box-shadow:0 8px 30px -16px rgba(0,0,0,.7)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand img{height:40px;width:auto}
.brand-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;border-left:1px solid var(--line-strong);padding-left:14px}
@media (max-width:1280px){.brand-tag{display:none}}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-size:15px;font-weight:500;color:var(--opal);padding:8px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--champagne);border-bottom-color:var(--sheen)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-brochure{font-size:14px;color:var(--opal);font-weight:500;display:flex;align-items:center;gap:6px;padding:10px 4px}
.nav-brochure:hover{color:var(--champagne)}
.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--radius-btn)}
.nav-toggle span{width:24px;height:2px;background:var(--champagne);transition:transform .3s,opacity .3s}
@media (max-width:980px){
  .nav-inner{min-height:64px}
  .brand img{height:34px}
  .nav-links{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(340px,86vw);background:var(--bg-2);border-left:1px solid var(--line-strong);flex-direction:column;justify-content:center;align-items:flex-start;padding:40px 36px;gap:18px;transform:translateX(100%);transition:transform .4s var(--ease);visibility:hidden}
  .nav-links.open{transform:none;visibility:visible}
  .nav-links a{font-family:var(--font-head);font-size:26px;font-weight:600;color:var(--champagne)}
  .nav-cta .btn-outline,.nav-brochure{display:none}
  .nav-toggle{display:flex;position:relative;z-index:2}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- portada: hero ---------- */
#hero{padding:148px 0 88px;background:radial-gradient(70% 60% at 78% 35%,rgba(70,129,137,.22),transparent 70%),var(--ink);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.hero-grid > *{min-width:0}
@media (max-width:960px){#hero{padding:108px 0 56px}.hero-grid{grid-template-columns:1fr;gap:40px}}
.plate{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;margin-bottom:28px;background:linear-gradient(180deg,#1A4252,#0F3241);border:1px solid var(--line-strong);border-radius:3px;font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--champagne);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px -10px rgba(0,0,0,.8);max-width:100%}
.plate .screw{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E8F0EE,#6F8F8C);flex:0 0 auto}
h1{font-size:clamp(40px,5.8vw,72px);line-height:1.0;margin-bottom:24px;letter-spacing:-.01em}
.hl{color:var(--sheen)}
.hero-sub{font-size:18px;color:var(--opal);max-width:560px;margin-bottom:32px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px}
.hero-trust li{font-family:var(--font-mono);font-size:12.5px;color:var(--opal);border:1px solid var(--line-strong);padding:6px 10px;border-radius:3px}
.hero-visual{position:relative}

/* ---------- panel de instrumentos (SVG) ---------- */
.panel-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.sv-frame{fill:#072636;stroke:var(--line-strong);stroke-width:1.5}
.sv-face{fill:#06212F;stroke:rgba(157,190,187,.45);stroke-width:2}
.sv-bezel{fill:none;stroke:rgba(157,190,187,.75);stroke-width:5}
.sv-line{fill:none;stroke:var(--opal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-thin{fill:none;stroke:rgba(157,190,187,.55);stroke-width:1.2;stroke-linecap:round}
.sv-acc{fill:none;stroke:var(--sheen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sv-red{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round}
.sv-tick{stroke:var(--opal);stroke-width:2;stroke-linecap:round}
.sv-tick-s{stroke:rgba(157,190,187,.5);stroke-width:1.2}
.sv-num{fill:var(--opal);font-family:var(--font-mono);font-size:13px;text-anchor:middle}
.sv-lbl{fill:var(--muted);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em}
.sv-lbl-c{fill:var(--champagne);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}
.sv-big{fill:var(--champagne);font-family:var(--font-head);font-weight:700;font-size:22px}
.sv-needle{fill:var(--champagne)}
.sv-hub{fill:var(--champagne);stroke:#06212F;stroke-width:3}
.sv-screw{fill:#1F4655;stroke:rgba(157,190,187,.6);stroke-width:1}
.sv-glass{fill:rgba(157,190,187,.10);stroke:var(--champagne);stroke-width:4}
.sv-handle{fill:none;stroke:var(--champagne);stroke-width:9;stroke-linecap:round}
.sv-stamp rect{fill:rgba(119,172,162,.14);stroke:var(--sheen);stroke-width:2}
.sv-stamp text{fill:var(--sheen);font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-anchor:middle}
.sv-steam{fill:rgba(220,230,227,.55)}
.sv-fill-s{fill:var(--surface-2);stroke:var(--opal);stroke-width:2}

/* ---------- movimiento de los instrumentos ---------- */
.ndl,.lens,.lvl,.wave,.bub,.stamp,.puff,.disc,.merc,.ring,.chk,.burn,.onl,.offl,.chart,.tassel,.pipe-dot{transform-box:fill-box}
.ndl,.ring{transform-box:view-box}
/* aguja: entra desde cero y luego oscila suave alrededor del valor de trabajo (--a) */
.ndl-work{animation:ndl-in 2.6s cubic-bezier(.3,1.35,.5,1) both,ndl-idle 6s ease-in-out 2.6s infinite}
@keyframes ndl-in{from{transform:rotate(-135deg)}to{transform:rotate(var(--a))}}
@keyframes ndl-idle{0%,100%{transform:rotate(var(--a))}30%{transform:rotate(calc(var(--a) + 3deg))}65%{transform:rotate(calc(var(--a) - 2.5deg))}}
/* prueba hidrostática: sube a 1,5 × PMT, mantiene, despresuriza */
.ndl-test{animation:ndl-test 11s ease-in-out infinite}
@keyframes ndl-test{0%,8%{transform:rotate(-135deg)}36%{transform:rotate(var(--a))}84%{transform:rotate(var(--a))}97%,100%{transform:rotate(-135deg)}}
.ring{animation:ring 11s linear infinite}
@keyframes ring{0%,36%{stroke-dashoffset:var(--c)}84%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
.stamp{transform-origin:50% 50%;opacity:0;animation:stamp-in 11s ease-out infinite}
@keyframes stamp-in{0%,82%{opacity:0;transform:scale(1.3)}86%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* válvula de seguridad: abre a +6 %, máximo +10 %, cierra */
.ndl-valve{animation:ndl-valve 9s ease-in-out infinite}
@keyframes ndl-valve{0%,6%{transform:rotate(-135deg)}32%{transform:rotate(var(--a6))}44%{transform:rotate(var(--a10))}64%{transform:rotate(calc(var(--a6) - 5deg))}86%{transform:rotate(calc(var(--a6) - 7deg))}98%,100%{transform:rotate(-135deg)}}
.disc{animation:disc 9s ease-in-out infinite}
@keyframes disc{0%,30%{transform:translateY(0)}34%,62%{transform:translateY(-8px)}68%,100%{transform:translateY(0)}}
.puff{opacity:0;transform-origin:50% 50%;animation:puff 9s ease-out infinite}
.puff.p2{animation-delay:.35s}.puff.p3{animation-delay:.7s}
@keyframes puff{0%,32%{opacity:0;transform:translate(0,0) scale(.4)}40%{opacity:.85}62%{opacity:0;transform:translate(16px,-54px) scale(1.7)}100%{opacity:0}}
/* llama del quemador */
.flame{transform-origin:50% 100%}
/* termostato: quemador enciende y apaga dentro de ±5 % */
.burn{transform-origin:50% 100%;animation:burn 8s ease-in-out infinite}
@keyframes burn{0%,46%{opacity:1}52%,94%{opacity:0}100%{opacity:1}}
.lamp{animation:lamp 2.4s ease-in-out infinite}
@keyframes lamp{0%,100%{opacity:.3}50%{opacity:1}}
.merc{transform-origin:50% 100%;animation:merc 8s ease-in-out infinite}
@keyframes merc{0%{transform:scaleY(.552)}50%{transform:scaleY(.686)}100%{transform:scaleY(.552)}}
.onl{animation:onl 8s steps(1) infinite}.offl{opacity:0;animation:offl 8s steps(1) infinite}
@keyframes onl{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes offl{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* nivel de agua del tubo de nivel */
.lvl{animation:lvl 7s ease-in-out infinite}
@keyframes lvl{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.wave{animation:wave 2.4s linear infinite}
@keyframes wave{to{transform:translateX(-40px)}}
.bub{opacity:0;animation:bub 3.2s ease-in infinite}
.bub.b2{animation-delay:1.1s}.bub.b3{animation-delay:2.1s}
@keyframes bub{0%{opacity:0;transform:translateY(0)}15%{opacity:.8}100%{opacity:0;transform:translateY(-70px)}}
/* lupa de inspección */
.lens-hero{animation:lens-hero 12s ease-in-out infinite}
@keyframes lens-hero{0%,100%{transform:translate(330px,330px)}14%,34%{transform:translate(205px,222px)}48%,62%{transform:translate(470px,236px)}80%{transform:translate(330px,330px)}}
.stamp-hero{opacity:0;transform-origin:50% 50%;animation:stamp-hero 12s ease-out infinite}
@keyframes stamp-hero{0%,17%{opacity:0;transform:scale(1.3)}21%,34%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(1)}}
.lens-boiler{animation:lens-boiler 10s ease-in-out infinite}
@keyframes lens-boiler{0%,100%{transform:translate(40px,40px)}15%,27%{transform:translate(74px,152px)}40%,52%{transform:translate(300px,74px)}65%,77%{transform:translate(500px,128px)}90%{transform:translate(40px,40px)}}
.chk{stroke-dasharray:30;stroke-dashoffset:30}
.chk.k1{animation:chk1 10s ease-out infinite}.chk.k2{animation:chk2 10s ease-out infinite}.chk.k3{animation:chk3 10s ease-out infinite}
@keyframes chk1{0%,18%{stroke-dashoffset:30}24%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes chk2{0%,43%{stroke-dashoffset:30}49%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes chk3{0%,68%{stroke-dashoffset:30}74%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
/* carpeta de inscripción */
.chk.t1{animation:t1 9s ease-out infinite}.chk.t2{animation:t2 9s ease-out infinite}.chk.t3{animation:t3 9s ease-out infinite}.chk.t4{animation:t4 9s ease-out infinite}.chk.t5{animation:t5 9s ease-out infinite}
@keyframes t1{0%,6%{stroke-dashoffset:30}11%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes t2{0%,17%{stroke-dashoffset:30}22%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes t3{0%,28%{stroke-dashoffset:30}33%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes t4{0%,39%{stroke-dashoffset:30}44%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes t5{0%,50%{stroke-dashoffset:30}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
.stamp-doc{opacity:0;transform-origin:50% 50%;animation:stamp-doc 9s ease-out infinite}
@keyframes stamp-doc{0%,60%{opacity:0;transform:scale(1.4) rotate(-8deg)}65%,90%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1) rotate(-8deg)}}
/* íconos de servicios */
.lens-ic{animation:lens-ic 4s ease-in-out infinite}
.puffs{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:puffs 2.6s ease-out infinite}.puffs.q2{animation-delay:1.3s}
@keyframes puffs{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}80%{opacity:0;transform:translate(3px,-13px) scale(1.5)}100%{opacity:0}}
@keyframes lens-ic{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-4px)}}
.chart{stroke-dasharray:60;stroke-dashoffset:60;animation:chart 4s ease-out infinite}
@keyframes chart{0%{stroke-dashoffset:60}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
.tassel{transform-origin:50% 0;animation:tassel 3s ease-in-out infinite}
@keyframes tassel{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.ndl-swing{animation:ndl-swing 4s ease-in-out infinite}
@keyframes ndl-swing{0%,100%{transform:rotate(-50deg)}50%{transform:rotate(40deg)}}
.stamp-ic{transform-origin:50% 50%;animation:stamp-ic 4s ease-out infinite}
@keyframes stamp-ic{0%,40%{opacity:0;transform:scale(1.5)}50%,85%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* Las animaciones solo corren mientras se ven (JS agrega .anim-on); sin JS corren siempre */
.js .anim *{animation-play-state:paused}
.js .anim.anim-on *{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .stamp,.stamp-hero,.stamp-doc,.puff,.puffs,.bub,.offl{opacity:0!important}
  .chk{stroke-dashoffset:0!important}
}

/* ---------- pilares: inspección, certificación, capacitación ---------- */
.pillars-band{padding:0 0 72px;background:var(--ink)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.pillars{grid-template-columns:1fr;gap:14px}}
.pillar{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.pillar svg{width:72px;height:72px}
.pillar h3{font-size:23px;font-weight:600;margin-bottom:6px}
.pillar p{font-size:15px;color:var(--opal)}

/* ---------- franja de cifras ---------- */
.stats-band{padding:56px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:4px 24px;border-left:1px solid var(--line-strong)}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-family:var(--font-head);font-size:52px;font-weight:700;color:var(--champagne);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:14px;color:var(--opal);margin-top:8px;max-width:22ch}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:18px 16px}.stat:nth-child(odd){border-left:0;padding-left:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- servicios ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr}}
.service-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 22px;transition:border-color .25s,transform .25s var(--ease),background .25s}
.service-card:hover{border-color:var(--seaweed);background:var(--surface-2);transform:translateY(-2px)}
.service-icon{width:60px;height:60px;margin-bottom:18px;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}
.service-icon svg{width:46px;height:46px}
.service-card h3{font-size:24px;font-weight:600;margin-bottom:12px}
.service-card ul{flex:1}
.service-card li{font-size:14.5px;color:var(--opal);padding:7px 0 7px 16px;position:relative;border-top:1px solid var(--line)}
.service-card li:first-child{border-top:0}
.service-card li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;background:var(--seaweed)}
.service-card li a{color:var(--champagne);text-decoration:underline;text-decoration-color:var(--sheen);text-underline-offset:3px}
.service-card .link-arrow{margin-top:14px;align-self:flex-start}

/* ---------- cómo trabajamos: tubería con flujo ---------- */
#proceso{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr;gap:6px}}
.step{position:relative;padding-top:30px}
.step::after{content:"";position:absolute;top:8px;left:0;right:-28px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sheen) 0 10px,rgba(119,172,162,.18) 10px 24px);border:1px solid rgba(157,190,187,.3);animation:flow 1.4s linear infinite}
.step:last-child::after{right:0}
@media (max-width:980px){.step::after{right:0}}
@keyframes flow{from{background-position:0 0}to{background-position:24px 0}}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--font-head);font-weight:700;font-size:44px;line-height:1;color:var(--sheen);margin:8px 0 12px}
.step h3{font-size:21px;font-weight:600;margin-bottom:8px}
.step p{font-size:15px;color:var(--opal)}
.step .ref{display:block;margin-top:12px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
@media (max-width:600px){.step{padding:26px 0 18px}}

/* ---------- profesional ---------- */
.pro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.pro-grid > *{min-width:0}
@media (max-width:900px){.pro-grid{grid-template-columns:1fr;gap:32px}}
.pro-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:28px;display:grid;gap:18px}
.pro-seal{width:128px;height:128px}
.pro-seal svg{display:block;width:100%;height:100%}
.pro-card h3{font-size:28px}
.pro-role{font-family:var(--font-mono);font-size:12.5px;color:var(--sheen);letter-spacing:.02em;margin-top:8px;line-height:1.6}
.pro-note{font-size:14.5px;color:var(--opal);border-top:1px solid var(--line);padding-top:16px}
.pro-note .ref{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.about-text p{color:var(--text);margin-bottom:14px;font-size:16.5px}
.creds-list{margin-top:10px;border-top:1px solid var(--line-strong)}
.creds-list li{font-size:15px;color:var(--opal);padding:12px 0 12px 22px;border-bottom:1px solid var(--line);position:relative}
.creds-list li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--sheen)}

/* ---------- DS10.cl ---------- */
#ds10{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.app-grid > *{min-width:0}
@media (max-width:900px){.app-grid{grid-template-columns:1fr;gap:36px}}
.app-visual{display:flex;justify-content:center}
.console-card{width:min(380px,100%);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:12px;padding:18px}
.console-bar{display:flex;align-items:center;gap:7px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.console-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.console-label{margin-left:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.console-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--text)}
.console-row.me{border-color:var(--sheen);background:rgba(119,172,162,.08)}
.console-row small{font-family:var(--font-mono);font-size:11.5px;color:var(--sheen);white-space:nowrap}
.app-tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 22px}
.app-tags li{font-family:var(--font-mono);font-size:12.5px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:3px;color:var(--opal)}
.app-note{font-size:14px;color:var(--muted);margin-bottom:24px}

/* ---------- galería ---------- */
.gallery-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:900px){.gallery-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.gallery-item{margin:0}
.gallery-item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.gallery-item figcaption{font-size:14px;font-weight:500;color:var(--champagne);padding:10px 0;border-bottom:1px solid var(--line)}

/* ---------- clientes ---------- */
#clientes{background:var(--bg-2);border-top:1px solid var(--line)}
.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.logo-grid li{display:flex;align-items:center;justify-content:center;min-height:88px;padding:16px;background:#E9EFEE;border-radius:var(--radius)}
.logo-grid img{max-height:38px;width:auto;max-width:100%;filter:grayscale(1);opacity:.85;transition:filter .3s,opacity .3s}
.logo-grid li:hover img{filter:none;opacity:1}
@media (max-width:520px){.logo-grid{gap:8px}.logo-grid li{min-height:64px;padding:10px}.logo-grid img{max-height:28px}}
.letters-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;justify-content:center}
.letter-chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 18px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-btn);font-size:14.5px;font-weight:500;color:var(--champagne);transition:border-color .25s,background .25s}
.letter-chip:hover{border-color:var(--sheen);background:var(--surface-2)}
.letter-chip svg{width:16px;height:16px;color:var(--sheen);flex:0 0 auto}

/* ---------- preguntas frecuentes ---------- */
.faq{max-width:920px;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 2px;font-family:var(--font-head);font-weight:600;font-size:21px;line-height:1.25;color:var(--champagne)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border:1.5px solid var(--sheen);border-radius:var(--radius);background:linear-gradient(var(--sheen),var(--sheen)) center/12px 1.5px no-repeat,linear-gradient(var(--sheen),var(--sheen)) center/1.5px 12px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--sheen)}
.faq .answer{padding:0 2px 22px;color:var(--text);font-size:16px;max-width:760px}
.faq .answer p + p{margin-top:10px}
.faq .answer a{color:var(--sheen);text-decoration:underline;text-underline-offset:3px}
.faq .ref{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}

/* ---------- contacto ---------- */
#contacto{background:radial-gradient(60% 50% at 20% 0%,rgba(70,129,137,.18),transparent 70%),var(--bg-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.contact-grid > *{min-width:0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-info-item{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.contact-info-item:first-child{border-top:0}
.contact-info-item .ic{width:42px;height:42px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--sheen)}
.contact-info-item .ic svg{width:19px;height:19px}
.contact-info-item h3{font-size:19px;font-weight:600;margin-bottom:2px}
.contact-info-item p,.contact-info-item a{font-size:15px;color:var(--opal);overflow-wrap:anywhere}
.contact-info-item a{display:inline-block;padding:4px 0;color:var(--champagne);text-decoration:underline;text-decoration-color:var(--sheen);text-underline-offset:4px}
.quote-form{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:32px}
@media (max-width:560px){.quote-form{padding:24px 18px}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row{grid-template-columns:1fr;gap:0}}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--champagne);margin-bottom:7px}
.field label .opt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;min-height:48px;color:var(--text);font-family:var(--font-body);font-size:16px;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sheen);box-shadow:0 0 0 3px rgba(119,172,162,.22)}
.field textarea{resize:vertical;min-height:110px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote-form .btn-primary{width:100%}
.form-note{font-size:13.5px;color:var(--muted);margin-top:14px}
.form-msg{margin-top:16px;padding:12px 16px;border-radius:var(--radius);font-size:14.5px;display:none}
.form-msg.ok{display:block;background:rgba(119,172,162,.12);border:1px solid var(--sheen);color:var(--champagne)}
.form-msg.err{display:block;background:rgba(224,103,90,.12);border:1px solid var(--red);color:#F6C2BB}

/* ---------- pie ---------- */
footer{background:#021320;color:var(--opal);padding:64px 0 28px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sheen);margin-bottom:14px}
.footer-grid li{margin-bottom:9px;font-size:15px}
.footer-grid li a{color:var(--champagne);display:inline-block;padding:2px 0}
.footer-grid li a:hover{color:var(--sheen)}
.footer-brand img{height:36px;width:auto}
.footer-brand p{font-size:14.5px;margin:16px 0 0;max-width:300px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px}
.footer-bottom a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px}

/* ---------- barra de contacto en celular ---------- */
.mbar{display:none}
@media (max-width:768px){
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(3,25,38,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line-strong)}
  .mbar .btn{flex:1;min-height:46px;padding:10px 12px;font-size:15px}
  body{padding-bottom:72px}
}

/* =====================================================================
   Páginas de servicio
   ===================================================================== */
.page-hero{padding:136px 0 56px;background:radial-gradient(70% 70% at 80% 30%,rgba(70,129,137,.2),transparent 70%),var(--ink);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
@media (max-width:768px){.page-hero{padding:100px 0 40px}}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-bottom:24px}
.breadcrumb a{color:var(--sheen);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:2px 0}
.breadcrumb li + li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative}
.page-hero-grid > *{min-width:0}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;gap:28px}}
.page-hero h1{font-size:clamp(36px,4.8vw,58px)}
.page-hero .lead{font-size:18px;color:var(--opal);max-width:640px;margin-bottom:28px}
.page-visual{margin:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px}
.page-visual svg{width:100%;height:auto;display:block}
.page-visual figcaption{font-family:var(--font-mono);font-size:12px;color:var(--muted);padding:8px 6px 2px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg-2)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
.fact{padding:22px 24px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
@media (max-width:760px){.fact{border-left:0;border-top:1px solid var(--line)}.fact:first-child{border-top:0}}
.fact .v{font-family:var(--font-head);font-size:34px;font-weight:700;color:var(--champagne);line-height:1.05}
.fact .d{font-size:14.5px;color:var(--opal);margin-top:6px}
.fact .ref{display:block;font-family:var(--font-mono);font-size:12px;color:var(--sheen);margin-top:8px}
.doc-section{padding:72px 0;background:var(--ink);border-bottom:1px solid var(--line)}
.doc-section:nth-of-type(even){background:var(--bg-2)}
@media (max-width:768px){.doc-section{padding:48px 0}}
.doc-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.doc-grid > *{min-width:0}
@media (max-width:900px){.doc-grid{grid-template-columns:1fr;gap:18px}}
.doc-grid h2{font-size:clamp(30px,3.4vw,40px)}
.doc-grid .side{color:var(--opal);font-size:15px;margin-top:12px}
.prose{color:var(--text);font-size:16.5px}
.prose p + p,.prose p + ul,.prose ul + p,.prose p + ol,.prose ol + p,.prose .tbl + p{margin-top:14px}
.prose strong{color:var(--champagne);font-weight:600}
.prose .ref{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.prose a{color:var(--sheen);text-decoration:underline;text-underline-offset:3px}
.checklist li{position:relative;padding:13px 0 13px 32px;border-bottom:1px solid var(--line)}
.checklist li:first-child{border-top:1px solid var(--line)}
.checklist li::before{content:"";position:absolute;left:3px;top:20px;width:12px;height:7px;border-left:2px solid var(--sheen);border-bottom:2px solid var(--sheen);transform:rotate(-45deg)}
.checklist .ref,.numlist .ref{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.numlist{counter-reset:n}
.numlist li{position:relative;padding:14px 0 14px 48px;border-bottom:1px solid var(--line)}
.numlist li:first-child{border-top:1px solid var(--line)}
.numlist li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:13px;width:30px;height:30px;border-radius:var(--radius);background:var(--champagne);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:500}
.numlist strong,.checklist strong{color:var(--champagne)}
.tbl{overflow-x:auto;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.tbl th{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sheen);text-align:left;font-weight:500;padding:13px 16px;background:var(--bg-2);border-bottom:1px solid var(--line-strong)}
.tbl td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--opal)}
.tbl tr:first-child td{border-top:0}
.tbl td:first-child{color:var(--champagne);font-weight:500}
.tbl code{font-family:var(--font-mono);color:var(--sheen);font-size:14px;font-weight:500}
.cta-band{padding:72px 0 64px;background:var(--bg-2)}
.cta-box{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;border:1px solid var(--line-strong);border-radius:var(--radius);padding:36px;background:var(--surface)}
.cta-box h2{font-size:clamp(26px,3vw,36px);max-width:560px}
.cta-box p{color:var(--opal);margin-top:10px;max-width:560px}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:12px}
.cta-band .other{font-size:22px;margin:52px 0 16px}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.related{grid-template-columns:1fr}}
.related a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--surface);transition:border-color .25s,background .25s}
.related a:hover{border-color:var(--sheen);background:var(--surface-2)}
.related strong{display:block;font-family:var(--font-head);font-size:21px;font-weight:600;color:var(--champagne);margin-bottom:4px}
.related span{font-size:14.5px;color:var(--opal)}
.refs{font-size:13.5px;color:var(--muted);margin-top:40px;max-width:820px}

/* ---------- 404 ---------- */
.notfound{min-height:80vh;display:flex;align-items:center;padding:150px 0 80px}
.notfound .code{font-family:var(--font-mono);color:var(--sheen);font-size:14px;letter-spacing:.14em;margin-bottom:14px}
.notfound p{color:var(--opal);font-size:17px;max-width:560px;margin-bottom:28px}
.notfound .btns{display:flex;flex-wrap:wrap;gap:12px}