:root{
  --carbon:#211E1E; --green:#439654; --green-d:#2F6F3D; --sea:#0E5C6B; --fog:#EEF2F0; --white:#FFFFFF;
  --bg:#FFFFFF; --alt:#F3F6F4; --card:#FFFFFF; --text:#211E1E; --muted:#5C6660; --line:#DCE3DE; --link:#2F6F3D;
  --action:#2F6F3D; --action-h:#245A31; --field:#8A958E; --danger:#B3261E; --deep:#1B2A28;
  --head:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow','Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#161615; --alt:#1D1F1D; --card:#222422; --text:#ECEFEC; --muted:#A3ADA6; --line:#343834; --link:#7CC48C;
  --field:#6E7A72; --danger:#F2A09A; --deep:#123A3F;
}}
:root[data-theme="dark"]{--bg:#161615; --alt:#1D1F1D; --card:#222422; --text:#ECEFEC; --muted:#A3ADA6; --line:#343834; --link:#7CC48C; --field:#6E7A72; --danger:#F2A09A; --deep:#123A3F}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--bg); color:var(--text); font:17px/1.6 var(--body)}
img{max-width:100%; height:auto; display:block}
.logo img,.plate img{width:auto}
a{color:var(--link); text-underline-offset:.18em}
::selection{background:#439654; color:#fff}
input,textarea,select{caret-color:var(--link); accent-color:#2F6F3D}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--green); outline-offset:2px}
h1,h2,h3,h4{font-family:var(--head); font-weight:600; line-height:1.1; margin:0; letter-spacing:.005em}
p{margin:0 0 1em}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
[hidden]{display:none !important}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--carbon); color:#fff; padding:10px 14px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
h1[tabindex]:focus{outline:none}
.mt6{margin-top:6px}.mt28{margin-top:28px}.mt32{margin-top:32px}
.block{width:100%; justify-content:center}
.nowrap{white-space:nowrap}


/* ---------- Header ---------- */
header.site{background:#fff; /* blanco también en modo oscuro: el logo es negro sobre transparente */ border-bottom:1px solid #DCE3DE; position:sticky; top:env(safe-area-inset-top,0px); z-index:20; color:#211E1E}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:84px}
@media (max-width:600px){header.site .wrap{height:66px}.logo img{height:44px}}
.logo img{height:58px; width:auto; flex:none}
.logo{flex:none}
nav.menu ul{list-style:none; display:flex; gap:2px; margin:0; padding:0}
nav.menu a{display:block; white-space:nowrap; text-decoration:none; color:#211E1E; font:600 16px/1 var(--head); padding:10px 8px; border-bottom:3px solid transparent}
nav.menu a:hover{color:#2F6F3D}
nav.menu a.on{border-bottom-color:#439654}
.burger{display:none; background:none; border:1px solid #DCE3DE; border-radius:4px; padding:8px 12px; cursor:pointer; font:600 15px var(--head); color:#211E1E}
@media (max-width:1180px){
  .burger{display:block}
  nav.menu{position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid #DCE3DE; display:none}
  nav.menu.open{display:block}
  nav.menu ul{flex-direction:column; padding:8px 24px 16px}
  nav.menu a{padding:12px 0; border-bottom:1px solid #EEF2F0; font-size:18px}
  nav.menu a.on{border-bottom-color:#EEF2F0; color:#2F6F3D}
}

/* ---------- Home hero ---------- */
.hero{position:relative; color:#fff; background:#0E3B44}
.hero img{width:100%; height:min(78vh,720px); object-fit:cover; object-position:center 55%}
.hero .shade{position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,25,24,.78) 0%,rgba(15,25,24,.35) 50%,rgba(15,25,24,0) 75%)}
.hero .copy{position:absolute; inset:0; display:flex; align-items:center}
@media (max-width:700px){.hero .shade{background:linear-gradient(180deg,rgba(15,25,24,.35) 0%,rgba(15,25,24,.72) 45%,rgba(15,25,24,.55) 100%)}}
.hero .copy .wrap{width:100%}
.hero h1{font-size:clamp(40px,6.2vw,80px); font-weight:700; max-width:11ch; line-height:.98}
.hero p{font-size:20px; max-width:34ch; margin:22px 0 30px; color:#E4ECE7}
.btn{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:3px; padding:13px 20px; font:600 17px/1 var(--head); cursor:pointer; text-decoration:none; letter-spacing:.01em}
.btn.green{background:var(--action); color:#fff}
.btn.green:hover{background:var(--action-h)}
.btn.line{background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.btn.dark{background:var(--carbon); color:#fff}
.btn.soft{background:var(--alt); color:var(--text); box-shadow:inset 0 0 0 1px var(--line)}
.btn.danger{background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger)}
.btn.sm{padding:8px 12px; font-size:15px}
.btns{display:flex; gap:12px; flex-wrap:wrap}

/* position readout: the one bold element */
.readout{background:var(--carbon); color:#fff}
.readout .wrap{display:grid; grid-template-columns:1.3fr repeat(4,1fr)}
.readout .pos{padding-left:0}
.readout div{padding:20px 20px}
.readout div + div{border-left:1px solid #3A3636}
.readout b{display:block; font:700 30px/1 var(--head)}
.readout span{display:block; color:#B9C2BC; font-size:14px; margin-top:6px}
.readout .pos a{color:inherit; text-decoration:none; display:block}
.readout .pos a:hover span{color:#fff; text-decoration:underline}
.readout .pos b{font-size:19px; line-height:1.25; font-weight:600; color:#8FD19E}
@media (max-width:900px){.readout .wrap{grid-template-columns:1fr 1fr} .readout .pos{grid-column:1 / -1}}

/* principles (from the original slider) */
.principles{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--line)}
.principles div{padding:36px 24px 36px 0}
.principles div + div{padding-left:24px; border-left:1px solid var(--line)}
.principles h2{font-size:24px; margin-bottom:8px}
.principles h2::before{content:""; display:block; width:28px; height:4px; background:#439654; margin-bottom:14px}
.principles p{color:var(--muted); margin:0; font-size:16px}
@media (max-width:900px){.principles{grid-template-columns:1fr 1fr}.principles div:nth-child(3){padding-left:0;border-left:0}.principles div{padding-right:16px}}
@media (max-width:520px){.principles{grid-template-columns:1fr}.principles div,.principles div + div{padding:24px 0;border-left:0;border-top:1px solid var(--line)}}

section.band{padding:80px 0}
section.band.alt{background:var(--alt)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split h2{font-size:clamp(30px,3.6vw,44px); margin-bottom:20px}
.split p{font-size:18px; max-width:58ch}
.pair{display:grid; grid-template-columns:1.25fr 1fr; gap:12px; align-items:end}
.pair img{border-radius:2px; width:100%; height:100%; object-fit:cover}
.pair img:first-child{aspect-ratio:4/5}
.pair img:last-child{aspect-ratio:1/1}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:32px}}

.dark-band{background:var(--deep); color:#E6EDE8; position:relative}
.dark-band .wrap{display:grid; grid-template-columns:5fr 7fr; gap:56px; padding-top:80px; padding-bottom:80px}
.dark-band h2{font-size:clamp(30px,3.6vw,44px); color:#fff}
.dark-band p{font-size:18px}
@media (max-width:860px){.dark-band .wrap{grid-template-columns:1fr; gap:20px}}

.services-intro{display:grid; grid-template-columns:5fr 7fr; gap:56px; margin-bottom:40px}
.services-intro h2{font-size:clamp(30px,3.6vw,44px)}
.services-intro p{font-size:18px}
.services-intro strong{font-weight:600}
@media (max-width:860px){.services-intro{grid-template-columns:1fr; gap:16px}}
.cargo{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.cargo figure{margin:0; position:relative; overflow:hidden; border-radius:2px}
.cargo img{width:100%; aspect-ratio:16/10; object-fit:cover}
.cargo figcaption{position:absolute; left:0; bottom:0; right:0; padding:18px 22px; background:linear-gradient(0deg,rgba(15,25,24,.85),rgba(15,25,24,0)); color:#fff}
.cargo figcaption h3{font-size:28px}
@media (max-width:700px){.cargo{grid-template-columns:1fr}}

.figures{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:48px; border-top:3px solid #439654}
.figures div{padding:26px 0}
.figures div + div{padding-left:32px; border-left:1px solid var(--line)}
.figures b{display:block; font:700 clamp(46px,6vw,72px)/1 var(--head); font-variant-numeric:tabular-nums}
.figures p{font:500 18px/1.3 var(--body); color:var(--muted); margin:8px 0 0}

/* ---------- inner pages ---------- */
.page-head{background:var(--carbon); color:#fff; padding:56px 0 48px; position:relative; overflow:hidden}
.page-head::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; border:36px solid rgba(67,150,84,.35)}
.page-head h1{font-size:clamp(36px,5vw,60px); font-weight:700; position:relative; z-index:1}
.page-head p{color:#C9D2CC; max-width:60ch; margin:14px 0 0; font-size:18px; position:relative; z-index:1}
.page-body{padding:56px 0 80px}
.lead{font-size:19px; max-width:62ch}

.docs{border-top:3px solid #439654; margin-top:28px}
.doc{display:grid; grid-template-columns:56px 1fr auto; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line)}
.ext{width:48px; height:60px; background:var(--carbon); color:#fff; display:grid; place-items:end center; padding-bottom:8px; font:700 13px/1 var(--head); clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.ext.pdf{background:#A8322A}.ext.xlsx{background:#2F6F3D}.ext.docx{background:#2B5797}.ext.jpg,.ext.png{background:#0E5C6B}
.doc h3{font:600 20px/1.25 var(--head)}
.doc .meta{color:var(--muted); font-size:15px}
.doc .desc{font-size:16px; margin-top:2px}
.empty{padding:26px 0; color:var(--muted); border-bottom:1px solid var(--line)}
@media (max-width:560px){.doc{grid-template-columns:48px 1fr}.doc .btn{grid-column:1 / -1; justify-content:center}}

.infra{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px}
.infra h2{font-size:28px; margin:40px 0 14px}
.infra h2:first-child{margin-top:0}
.infra ul{padding-left:20px; margin:0 0 1em}
.infra li{margin:6px 0}
.specs{background:var(--alt); border-top:3px solid #439654; padding:24px; align-self:start; position:sticky; top:calc(100px + env(safe-area-inset-top,0px))}
.specs h3{font-size:24px; margin-bottom:10px}
.specs dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:16px}
.specs dt{color:var(--muted)}
.specs dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.limits{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:8px; padding:1px 0 0 1px}
.limits div{background:var(--bg); padding:16px; border:1px solid var(--line); margin:-1px 0 0 -1px}
.limits b{display:block; font:600 20px var(--head)}
.limits span{font-size:15px; color:var(--muted)}
@media (max-width:900px){.infra{grid-template-columns:1fr; gap:32px}.specs{position:static; order:-1}}

.frame{border:1px solid var(--line); background:var(--alt); padding:40px 28px; margin-top:8px}
.frame h2{font-size:26px; margin-bottom:8px}
.muted-60{color:var(--muted); max-width:60ch}
.note{font-size:14px; color:var(--muted); max-width:60ch}
.sub-h{font-size:30px; margin-top:56px}
.tariff-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px}
.tariff-list li{display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:4px 24px; padding-top:14px; border-top:1px solid var(--line)}
.tariff-list b{font:600 19px/1.25 var(--head)}
.tariff-list span{color:var(--muted); font-size:16px}
@media (max-width:600px){.tariff-list li{grid-template-columns:1fr}}

form.f{display:grid; gap:16px; max-width:640px}
form.f .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:600px){form.f .two{grid-template-columns:1fr}}
label.l{display:block; font-weight:600; font-size:15px; margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{width:100%; padding:11px 12px; border:1px solid var(--field); border-radius:3px; background:var(--bg)}
[aria-invalid="true"]{border-color:var(--danger) !important; box-shadow:0 0 0 1px var(--danger)}
.hint-inline{font-size:14px; color:var(--muted); margin:0 0 8px}
fieldset .hint-inline{margin:10px 0 0}
fieldset{border:1px solid var(--field); border-radius:3px; padding:14px 16px; margin:0}
legend{font-weight:600; font-size:15px; padding:0 6px}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
@media (max-width:520px){.checks{grid-template-columns:1fr}}
.checks label{display:flex; gap:8px; align-items:center}
.req{color:var(--danger)}
.form-page{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start}
.form-side img{width:100%; border-radius:2px}
.form-side{display:grid; gap:16px}
.form-side .loc{background:var(--alt); padding:20px; border-top:3px solid #439654}
.form-side .loc small{display:block; margin-top:8px; color:var(--muted); font-size:14px}
.form-side .loc b{font-family:var(--head); font-size:20px; display:block; margin-bottom:6px}
@media (max-width:900px){.form-page{grid-template-columns:1fr}}
.ok-msg{border-left:4px solid #439654; background:var(--alt); padding:14px 16px}
.err{color:var(--danger); font-size:15px; min-height:1em}
.err:empty{min-height:0}
.ok-msg:focus{outline:none}

footer.site{background:var(--carbon); color:#B9C2BC; font-size:15px}
footer.site .wrap{padding-top:40px; padding-bottom:24px}
.foot-main{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-bottom:28px; border-bottom:1px solid #3A3636}
.foot-main b{display:block; color:#fff; font:600 18px/1.3 var(--head); margin-bottom:6px}
.foot-legal{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; font-size:14px}
@media (max-width:760px){.foot-main{grid-template-columns:1fr}}
footer.site a{color:#DCE3DE}

/* ---------- Admin ---------- */
.login{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--alt)}
.login form{background:var(--card); border:1px solid var(--line); border-top:4px solid #439654; padding:32px; width:100%; max-width:410px}
.login .plate{background:#fff; display:inline-block; padding:6px 8px; border-radius:2px}
.login .plate img{height:48px}
.login h1{font-size:30px; margin:18px 0 4px}
.muted0{margin:0; color:var(--muted)}
.back{font-size:14px; margin:14px 0 0}
.hint{font-size:14px; color:var(--muted); margin-top:14px; background:var(--alt); padding:10px 12px}
.admin{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
.side{background:var(--carbon); color:#fff; padding:20px 14px; display:flex; flex-direction:column; gap:4px}
.side .plate{background:#fff; padding:8px; border-radius:2px; margin:0 4px 22px}
.side .plate img{height:44px}
.side a,.side button{background:transparent; border:0; color:#C9D2CC; text-align:left; padding:10px 12px; border-radius:3px; cursor:pointer; display:flex; justify-content:space-between; gap:8px}
.side a.on{background:var(--action); color:#fff}
.side a:not(.on):hover,.side button:hover{background:rgba(255,255,255,.08); color:#fff}
.side .count{background:rgba(255,255,255,.16); border-radius:10px; padding:0 8px; font-size:13px}
.side .grow{flex:1}
.panel{padding:28px; min-width:0; background:var(--bg)}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.panel-head h1{font-size:34px}
.muted-sm{color:var(--muted); font-size:15px}
.stack{display:grid; gap:24px}
.file-name{font-size:14px; margin-top:8px; color:var(--muted)}
.check-row{display:flex; gap:8px; align-items:center}
.file-meta{color:var(--muted); font-size:13px}
.t-empty{color:var(--muted); padding:24px 10px}
.dlg-h{font-size:26px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px}
.stats div{border-top:3px solid #439654; background:var(--alt); padding:14px 16px}
.stats b{display:block; font:700 30px/1 var(--head)}
.stats span{color:var(--muted); font-size:14px}
.grid2{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:24px; align-items:start}
@media (max-width:1060px){.grid2{grid-template-columns:1fr}}
@media (max-width:760px){.admin{grid-template-columns:1fr}.side{flex-direction:row; flex-wrap:wrap; padding:12px}.side .plate{width:100%; margin:0 0 8px}.side .grow{display:none}.panel{padding:18px}}
.box{background:var(--card); border:1px solid var(--line); padding:20px}
.box h2{font-size:22px; margin-bottom:8px}
.drop{border:2px dashed var(--line); padding:22px; text-align:center; color:var(--muted); cursor:pointer; margin-top:10px}
.drop.over{border-color:#439654; background:var(--alt)}
.drop strong{color:var(--text)}
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-weight:600; color:var(--muted); font-size:14px; padding:10px; border-bottom:2px solid var(--line); white-space:nowrap}
td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.acts{display:flex; gap:6px; flex-wrap:wrap}
@media (max-width:700px){
  table,tbody,tr,td{display:block}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  tr{border-bottom:1px solid var(--line); padding:12px 0}
  td{border:0; padding:4px 0; display:flex; justify-content:space-between; gap:12px}
  td.t-doc,td.t-acts,td.t-empty{display:block}
  td[data-label]::before{content:attr(data-label); color:var(--muted); font-size:14px}
  td.t-acts{padding-top:10px}
  .acts .btn{flex:1; justify-content:center; min-height:44px}
}
.pill{font-size:13px; font-weight:600; padding:3px 8px; border-radius:10px; white-space:nowrap}
.pill.pub{background:#DDEEE1; color:#1F5A2D}.pill.hid{background:#E7EAE8; color:#5C6660}
.log{list-style:none; padding:0; margin:8px 0 0; font-size:14px; max-height:220px; overflow:auto}
.log li{padding:6px 0; border-bottom:1px solid var(--line)}
.log time{color:var(--muted); margin-right:6px}
.sec-notes{font-size:14px; color:var(--muted); margin:6px 0 0; padding-left:18px}
.sec-notes li{margin:4px 0}
.mt{margin-top:14px}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(16px); background:var(--carbon); color:#fff; padding:12px 18px; border-left:4px solid #439654; opacity:0; transition:.25s; max-width:92vw; z-index:60; font-size:15px}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
dialog{border:1px solid var(--line); background:var(--card); color:var(--text); padding:24px; max-width:440px; width:92vw}
dialog::backdrop{background:rgba(20,22,21,.6)}
.row{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- Versión web ---------- */
.mt16{margin-top:16px}.mb0{margin-bottom:0}
.embed{position:relative; border:1px solid var(--line); background:var(--alt); margin-top:20px}
.embed iframe{display:block; width:100%; height:100%; border:0}
.embed-tall{height:min(80vh,820px); min-height:520px}
.embed-h{font-size:26px; margin-bottom:8px}
.map.embed{margin-top:0; aspect-ratio:4/3}
.trampa{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.side a{text-decoration:none; font:inherit}
.side a.sub{padding-left:26px; font-size:15px}
.side form{margin:0}
.side form button{width:100%}
.flash{border-left:4px solid #439654; background:var(--alt); padding:12px 16px; margin-bottom:20px}
.flash.is-error{border-left-color:var(--danger); color:var(--text)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.chip{border:1px solid var(--line); border-radius:16px; padding:6px 14px; text-decoration:none; color:var(--text); font-size:15px; background:var(--card)}
.chip.on{background:var(--carbon); border-color:var(--carbon); color:#fff}
.pill.new{background:#FCE9C8; color:#6B4300}
tr.is-new td:first-child a,tr.is-new td[data-label="Nombre"] a{font-weight:600}
.narrow-box{max-width:640px}
.ficha{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0}
.ficha dt{color:var(--muted)}
.ficha dd{margin:0; overflow-wrap:anywhere}
.texto-mensaje{background:var(--alt); padding:14px 16px; margin-top:8px; overflow-wrap:anywhere}
.acts form{margin:0; display:contents}
details summary{cursor:pointer; color:var(--link); font-size:14px}
.mini-form{display:grid; gap:2px; margin-top:8px; max-width:260px}
.install{background:var(--card); border:1px solid var(--line); border-top:4px solid #439654; padding:32px; width:100%; max-width:560px}
.install h1{font-size:30px}.install h2{font-size:22px}
.checklist{list-style:none; padding:0; margin:10px 0 0; font-size:15px}
.checklist li{padding:8px 0; border-bottom:1px solid var(--line)}
.checklist li.ok b{color:var(--link)}.checklist li.falla b{color:var(--danger)}
.checklist small{color:var(--muted)}
.panel:focus{outline:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.new{background:#4A3510; color:#FCE9C8}}