/* Delta Services & Technology — sitio web
   Paleta tomada del logo: verde #00833E, rojo #E2211C, dorado #CC9F52 */
:root{
  --bg:#0A110D; --bg-2:#0F1813; --surface:#132019; --surface-2:#18291F; --line:#23372B;
  --green:#00833E; --green-hi:#22B462; --red:#E2211C; --gold:#CC9F52; --gold-hi:#E3BE7C;
  --text:#EDF3EE; --muted:#A3B3A8; --ink:#0D1A12; --ink-muted:#4F6155; --paper:#F3F6F2; --paper-line:#DCE4DD;
  --display:"Chakra Petch","Arial Narrow",Arial,sans-serif;
  --body:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  --radius:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.5px}
h2{font-size:clamp(30px,4vw,46px);font-weight:700}
h3{font-size:22px;font-weight:600}
p{margin:0}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(60px,8vw,104px)}
.kicker{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:16px}
.head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:44px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);color:var(--ink);padding:8px 14px}

/* light band */
.paper{background:var(--paper);color:var(--ink)}
.paper .muted,.paper .lead{color:var(--ink-muted)}
.paper .kicker{color:var(--green)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:#00994A;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
.paper .btn-ghost{border-color:var(--paper-line);color:var(--ink)}
.paper .btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,17,13,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brand img{height:46px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--muted);padding:8px 12px;border-radius:8px}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--green)}
.nav .btn{padding:10px 16px;margin-left:8px;color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 12px;font:600 15px var(--body)}
@media (max-width:940px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px 16px 18px;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav .btn{margin:8px 0 0;justify-content:center}
}

/* hero */
.hero{position:relative;padding-block:0;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;background:url(img/hero-operador.jpg) 70% center/cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,17,13,.97) 0%,rgba(10,17,13,.8) 40%,rgba(10,17,13,.05) 100%)}
.hero .wrap{position:relative;padding-block:clamp(72px,11vw,140px);display:flex;flex-direction:column;gap:24px;max-width:1200px}
.hero h1{max-width:13ch}
.hero h1 em{font-style:normal;color:var(--green-hi)}
.status{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border:1px solid var(--line);background:rgba(19,32,25,.8);padding:6px 14px;border-radius:999px;font-family:var(--display);font-size:14px;letter-spacing:1px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 0 rgba(34,180,98,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(34,180,98,0)}100%{box-shadow:0 0 0 0 rgba(34,180,98,0)}}
.hero-strip{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:10px;color:var(--muted);font-size:15px}
.hero-strip span{display:flex;align-items:center;gap:8px}
.hero-strip svg{width:18px;height:18px;fill:var(--gold)}
@media (max-width:700px){.hero-media::after{background:linear-gradient(180deg,rgba(10,17,13,.75),rgba(10,17,13,.96))}}

/* page hero (inner pages) */
.page-hero{padding-block:clamp(56px,8vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line);background:radial-gradient(900px 400px at 85% -10%,rgba(0,131,62,.22),transparent 60%),var(--bg)}
.page-hero .wrap{display:flex;flex-direction:column;gap:18px}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--gold-hi)}

/* grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:border-color .15s,transform .15s}
a.tile:hover{border-color:var(--green);transform:translateY(-2px)}
a.tile .more{margin-top:auto;font-weight:700;font-size:14px;color:var(--gold-hi)}
.paper .tile{background:#fff;border-color:var(--paper-line)}
.ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(0,131,62,.16);flex:none}
.ic svg{width:24px;height:24px;fill:var(--green-hi)}
.ic.red{background:rgba(226,33,28,.14)} .ic.red svg{fill:#FF5A55}
.ic.gold{background:rgba(204,159,82,.16)} .ic.gold svg{fill:var(--gold-hi)}
.paper .ic{background:rgba(0,131,62,.1)} .paper .ic svg{fill:var(--green)}
.tile p{color:var(--muted);font-size:15.5px}
.paper .tile p{color:var(--ink-muted)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .tag{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.65);padding:5px 12px;border-radius:6px;font-family:var(--display);font-size:13px;letter-spacing:1px;color:#fff}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks svg{flex:none;width:20px;height:20px;margin-top:3px;fill:var(--green-hi)}
.paper .checks svg{fill:var(--green)}

/* layers diagram */
.layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.layers>div{padding:26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.layers>div:last-child{border-right:0}
.layers b{font-family:var(--display);font-size:13px;letter-spacing:2px;color:var(--gold)}
@media (max-width:900px){.layers{grid-template-columns:1fr 1fr}.layers>div:nth-child(2){border-right:0}.layers>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.layers{grid-template-columns:1fr}.layers>div{border-right:0;border-bottom:1px solid var(--line)}}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.steps li{list-style:none;counter-increment:s;border-top:2px solid var(--green);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.steps li::before{content:"0" counter(s);font-family:var(--display);color:var(--gold);font-weight:700}
.steps{padding:0;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* service detail */
.svc{scroll-margin-top:96px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:44px;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0}
.svc-head{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:100px}
.svc-body{display:flex;flex-direction:column;gap:18px}
.svc-body .grid{margin-top:4px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.mini b{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}
.mini span{color:var(--muted);font-size:15px}
.svc-index{display:flex;flex-wrap:wrap;gap:8px}
.svc-index a{text-decoration:none;font-size:14px;font-weight:600;border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--muted)}
.svc-index a:hover{border-color:var(--green);color:var(--text)}
@media (max-width:860px){.svc{grid-template-columns:1fr}.svc-head{position:static}}

/* guardian console */
.console{background:#050906;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.console-bar{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:13px;letter-spacing:1px;color:var(--muted)}
.console-grid{display:grid;grid-template-columns:1.4fr 1fr;min-height:320px}
.console-view{position:relative;background:url(img/centro-monitoreo.jpg) center/cover;min-height:260px}
.console-view .box{position:absolute;border:2px solid var(--green-hi);border-radius:4px}
.console-view .box span{position:absolute;top:-22px;left:-2px;background:var(--green-hi);color:#04120a;font:700 11px var(--display);padding:2px 6px;white-space:nowrap}
.feed{border-left:1px solid var(--line);display:flex;flex-direction:column}
.feed-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;animation:in .4s ease}
.feed-item time{font-family:var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.feed-item b{display:block}
.lvl{display:inline-block;font:700 11px var(--display);letter-spacing:1px;padding:1px 7px;border-radius:4px;margin-right:6px}
.lvl.hi{background:var(--red);color:#fff}.lvl.md{background:var(--gold);color:#1a1206}.lvl.ok{background:var(--green);color:#fff}
@keyframes in{from{opacity:.3;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:760px){.console-grid{grid-template-columns:1fr}.feed{border-left:0;border-top:1px solid var(--line)}}

/* sector tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tabs button{font:600 15px var(--body);background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,36px)}
.panel .risk{background:var(--bg-2);border-radius:12px;padding:18px 20px}
.panel .risk h4{font-size:15px;letter-spacing:2px;text-transform:uppercase;color:#FF6A64;margin-bottom:10px}
@media (max-width:760px){.panel{grid-template-columns:1fr}}

/* band cta */
.cta{background:linear-gradient(120deg,#00562A,#00833E 60%,#0A6B39);color:#fff;border-radius:22px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta .btn-wa{background:#fff;color:#00562A}
.cta .btn-wa:hover{background:#EAF5EE}
.cta p{color:#D6EEDF}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* quote / values */
.quote{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:600}
.quote span{color:var(--gold-hi)}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);border-radius:var(--radius);overflow:hidden}
.values div{background:#fff;padding:24px;display:flex;flex-direction:column;gap:8px}
.values b{font-family:var(--display);font-size:22px;color:var(--green)}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* contact builder */
.builder{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.builder label{font-weight:700;font-size:15px;display:block;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{margin:0;font-weight:600;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;color:var(--muted)}
.chips input:checked+label{background:var(--green);border-color:var(--green);color:#fff}
.chips input:focus-visible+label{outline:3px solid var(--gold);outline-offset:2px}
.field{width:100%;font:500 16px var(--body);color:var(--text);background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.field:focus{outline:2px solid var(--green);border-color:transparent}
textarea.field{min-height:110px;resize:vertical}
.preview{background:#0B1A10;border:1px dashed var(--line);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--muted);white-space:pre-wrap}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-list a,.contact-list div{display:flex;gap:14px;align-items:center;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.contact-list a:hover{border-color:var(--green)}
.contact-list small{display:block;color:var(--muted);font-size:13px}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:52px 28px;font-size:15px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.foot h4{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none;color:var(--muted)}
.foot a:hover{color:var(--text)}
.foot .logos{display:flex;align-items:center;gap:14px}
.foot .logos img{height:52px;width:auto}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* floating whatsapp */
.wa-float{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:30px;height:30px;fill:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.risk .checks svg{fill:#FF6A64}