/* ============================================================
   3DELECTRO SAN JUAN — Sistema visual v3
   Dirección: "luz de sodio en cordillera"
   Ámbar  = acción humana / seguridad
   Azul   = dato técnico / medición
   ============================================================ */

:root{
  /* Superficies */
  --night:      #0A0E14;
  --night-2:    #10161F;
  --night-3:    #18202C;
  --night-4:    #212B39;

  /* Texto */
  --frost:      #EAEFF5;
  --frost-dim:  #B4C0CE;
  --mute:       #7C8B9E;

  /* Acentos — paleta oficial de marca */
  --volt:       #1E62DD;   /* azul eléctrico de marca */
  --volt-lit:   #5E9BFF;   /* aclarado del mismo azul, sólo para texto chico (contraste AA) */
  --volt-deep:  #164CAF;
  --steel:      #7A8694;   /* gris medio de marca */

  /* Líneas */
  --rule:       rgba(234,239,245,.12);
  --rule-2:     rgba(234,239,245,.20);

  /* Superficies puntuales */
  --hdr-bg:     rgba(10,14,20,.72);
  --field-bg:   #0A0E14;
  --shadow-card: none;

  /* Tipografía */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Ritmo */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --sect: clamp(72px, 11vw, 148px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  background:var(--night);
  color:var(--frost);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--volt); color:#FFFFFF; }

:focus-visible{
  outline:2px solid var(--volt-lit);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--volt); color:#FFFFFF;
  padding:12px 20px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- Tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

.h-xl{ font-size:clamp(2.6rem, 7.4vw, 6.2rem); line-height:.96; letter-spacing:-.035em; }
.h-lg{ font-size:clamp(2.1rem, 4.6vw, 3.7rem); }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing:-.02em; }
.h-sm{ font-size:clamp(1.12rem, 1.6vw, 1.35rem); letter-spacing:-.012em; font-weight:700; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.02rem, 1.55vw, 1.24rem);
  line-height:1.66;
  color:var(--frost-dim);
  max-width:60ch;
}
.muted{ color:var(--mute); }
.dim{ color:var(--frost-dim); }
.amber{ color:var(--volt); }
.blue{ color:var(--volt-lit); }

/* Eyebrow: etiqueta de sección en mono */
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--volt-lit);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--volt);
  flex:none;
}

/* ---------- ELEMENTO FIRMA: riel de especificación ---------- */
/* Franja de datos técnicos reales del proyecto, en mono.
   Se repite como divisor entre secciones.                     */

.spec-rail{
  border-block:1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(30,98,221,.06), transparent 38%, transparent 62%, rgba(94,155,255,.07));
  overflow:hidden;
}
.spec-rail-inner{
  display:flex;
  align-items:stretch;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
}
.spec-cell{
  flex:1 1 0;
  min-width:0;
  padding:18px var(--gutter);
  border-inline-end:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
}
.spec-cell:last-child{ border-inline-end:0; }
.spec-k{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  line-height:1.35;
}
.spec-v{
  font-family:var(--mono);
  font-size:clamp(.82rem,1.5vw,1rem);
  font-weight:700;
  color:var(--frost);
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.spec-v .u{ color:var(--volt-lit); font-weight:500; }

@media (max-width:860px){
  .spec-rail-inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .spec-cell{
    padding:14px var(--gutter);
    border-block-end:1px solid var(--rule);
    min-width:0;
  }
  .spec-cell:nth-child(2n){ border-inline-end:0; }
  .spec-v{ white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
}
@media (max-width:520px){
  .spec-rail-inner{ grid-template-columns:1fr; }
  .spec-cell{ border-inline-end:0; padding:12px var(--gutter); }
  .spec-cell:last-child{ border-block-end:0; }
}

/* ---------- Header ---------- */

.hdr{
  position:sticky; top:0; z-index:80;
  background:var(--hdr-bg);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.hdr-in{
  display:flex; align-items:center; gap:18px;
  height:82px;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:42px; width:auto; }
@media (max-width:1080px){ .brand img{ height:34px; } }
@media (max-width:420px){ .brand img{ height:30px; } }

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav a{
  font-size:.86rem;
  font-weight:500;
  color:var(--frost-dim);
  padding:9px 13px;
  border-radius:6px;
  transition:color .18s, background .18s;
  white-space:nowrap;
}
.nav a:hover{ color:var(--frost); background:rgba(234,239,245,.06); }
.nav a[aria-current="page"]{ color:var(--volt-lit); }

.hdr-side{ display:flex; align-items:center; gap:10px; flex:none; }

/* Selector de idioma */
.lang{
  display:flex;
  border:1px solid var(--rule-2);
  border-radius:7px;
  overflow:hidden;
  flex:none;
}
.lang a{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:7px 10px;
  color:var(--mute);
  transition:background .18s, color .18s;
}
.lang a:hover{ color:var(--frost); background:rgba(234,239,245,.07); }
.lang a[aria-current="true"]{ background:var(--volt); color:#FFFFFF; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.9rem;
  padding:12px 20px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ flex:none; transition:transform .22s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--volt); color:#FFFFFF; }
.btn-primary:hover{ background:#2B72F0; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--rule-2); color:var(--frost); }
.btn-ghost:hover{ border-color:var(--frost-dim); background:rgba(234,239,245,.05); }
.btn-sm{ padding:9px 15px; font-size:.83rem; }

.burger{
  display:none;
  width:40px; height:38px;
  background:none; border:1px solid var(--rule-2); border-radius:7px;
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block; width:17px; height:1.6px; background:var(--frost);
  margin:3px auto; transition:transform .25s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-4.6px) rotate(-45deg); }

@media (max-width:1080px){
  .hdr-in{ height:70px; }
  .burger{ display:grid; }
  .hdr-side .btn{ display:none; }
  .nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--night-2);
    border-bottom:1px solid var(--rule);
    padding:10px var(--gutter) 24px;
    margin:0;
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s, transform .22s var(--ease), visibility .22s;
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav a{
    padding:15px 4px;
    font-size:1.02rem;
    border-radius:0;
    border-bottom:1px solid var(--rule);
  }
  .nav .nav-cta{
    margin-top:18px;
    background:var(--volt);
    color:#FFFFFF;
    text-align:center;
    border-radius:8px;
    border-bottom:0;
    font-weight:700;
  }
  .nav .nav-cta:hover{ background:#2B72F0; color:#FFFFFF; }
}
@media (min-width:1081px){ .nav .nav-cta{ display:none; } }

body.locked{ overflow:hidden; }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:clamp(560px, 88svh, 900px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
}
.hero-media > img,
.hero-media > video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:brightness(1.18) contrast(1.06) saturate(1.05);
  animation:driftIn 22s var(--ease) forwards;
}
@keyframes driftIn{
  from{ transform:scale(1.10); }
  to  { transform:scale(1.0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-media img,.hero-media video{ animation:none; transform:none; }
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--night) 1%, rgba(10,14,20,.82) 24%, rgba(10,14,20,.26) 60%, rgba(10,14,20,.58) 100%),
    linear-gradient(96deg, rgba(10,14,20,.93) 4%, rgba(10,14,20,.72) 34%, rgba(10,14,20,.24) 66%, transparent 92%),
    radial-gradient(70% 55% at 10% 86%, rgba(30,98,221,.24), transparent 72%);
}
/* Retícula técnica sutil */
.hero-grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  opacity:.5;
  pointer-events:none;
}

.hero-body{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(90px,14vh,150px) var(--gutter) clamp(44px,7vh,72px);
}
.hero-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--frost-dim);
  border:1px solid var(--rule-2);
  background:rgba(10,14,20,.5);
  border-radius:100px;
  padding:7px 15px;
  margin-bottom:26px;
}
.pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 0 0 rgba(30,98,221,.6);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(30,98,221,0); }
  100%{ box-shadow:0 0 0 0 rgba(30,98,221,0); }
}
.hero h1{ max-width:17ch; }
.hero .lead{ margin-top:22px; max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
@media (max-width:560px){
  .hero-tag{ font-size:.6rem; letter-spacing:.15em; padding:6px 12px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; }
}

/* ---------- Secciones ---------- */

.sect{ padding-block:var(--sect); }
.sect-tight{ padding-block:clamp(50px,7vw,88px); }
.sect-alt{ background:var(--night-2); }

.sect-head{ max-width:66ch; margin-bottom:clamp(38px,5vw,62px); }
.sect-head .lead{ margin-top:20px; }

/* ---------- Grillas ---------- */

.grid{ display:grid; gap:clamp(14px,1.7vw,22px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4.5vw,72px); align-items:center; }

@media (max-width:960px){
  .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
}

/* ---------- Tarjeta ---------- */

.card{
  position:relative;
  background:var(--night-2);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:clamp(22px,2.7vw,32px);
  transition:border-color .25s, background .25s, transform .25s var(--ease);
  overflow:hidden;
}
.sect-alt .card{ background:var(--night-3); }
.card:hover{ border-color:var(--rule-2); transform:translateY(-2px); }
.card-num{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.2em;
  color:var(--volt-lit);
  margin-bottom:16px;
}
.card h3{ margin-bottom:11px; }
.card p{ color:var(--frost-dim); font-size:.95rem; }
.card ul{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.card ul li{
  font-size:.87rem; color:var(--mute);
  padding-inline-start:17px; position:relative;
  line-height:1.5;
}
.card ul li::before{
  content:""; position:absolute; inset-inline-start:0; top:.62em;
  width:5px; height:1.5px; background:var(--volt);
}
.card-link{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:22px;
  font-size:.86rem; font-weight:600;
  color:var(--volt-lit);
}
.card-link svg{ transition:transform .22s var(--ease); }
.card:hover .card-link svg{ transform:translateX(3px); }

/* Tarjeta con foto */
.card-media{
  padding:0;
  display:flex; flex-direction:column;
}
.card-media figure{ margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--night-3); }
.card-media figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.card-media:hover figure img{ transform:scale(1.045); }
.card-media .card-body{ padding:clamp(20px,2.4vw,28px); flex:1; }

/* ---------- Mosaico de obra ---------- */

.mosaic{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.3vw,16px);
}
.tile{
  position:relative; margin:0;
  border-radius:12px; overflow:hidden;
  background:var(--night-3);
  border:1px solid var(--rule);
  min-height:190px;
}
.tile img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:saturate(.9) contrast(1.04);
}
.tile:hover img{ transform:scale(1.05); filter:saturate(1.05) contrast(1.06); }
.tile figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:22px 18px 16px;
  background:linear-gradient(to top, rgba(10,14,20,.96), rgba(10,14,20,.72) 42%, rgba(10,14,20,.25) 74%, transparent);
  /* El texto va sobre una foto: se mantiene claro también en modo claro */
  --frost:     #EAEFF5;
  --frost-dim: #C6D0DC;
  --volt-lit:  #7FB0FF;
  color:#EAEFF5;
}
.tile figcaption *{ text-shadow:0 1px 3px rgba(0,0,0,.55); }
.tile-k{
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:#7FB0FF; margin-bottom:5px;
}
.tile-t{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em; color:#EAEFF5; }
.tile-s{ font-size:.79rem; color:#C6D0DC; margin-top:2px; }

.c6{ grid-column:span 6; } .c4{ grid-column:span 4; }
.c3{ grid-column:span 3; } .c2{ grid-column:span 2; }
.r2{ grid-row:span 2; min-height:400px; }

@media (max-width:900px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .c6,.c4,.c3,.c2{ grid-column:span 1; }
  .r2{ grid-row:span 1; min-height:210px; }
  .tile{ min-height:170px; }
}

/* ---------- Números ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--rule);
}
.stat{
  padding:clamp(26px,3.4vw,42px) clamp(18px,2.2vw,30px);
  border-bottom:1px solid var(--rule);
  border-inline-end:1px solid var(--rule);
}
.stat:last-child{ border-inline-end:0; }
.stat-n{
  font-family:var(--display);
  font-size:clamp(2.1rem,4.2vw,3.3rem);
  font-weight:800; line-height:1;
  letter-spacing:-.04em;
}
.stat-n .u{ font-size:.42em; color:var(--volt-lit); font-weight:600; margin-inline-start:5px; letter-spacing:0; }
.stat-l{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-top:13px; line-height:1.5;
}

/* ---------- Editorial full-bleed ---------- */

.editorial{
  position:relative; isolation:isolate;
  padding-block:clamp(88px,13vw,168px);
  overflow:hidden;
}
.editorial-bg{ position:absolute; inset:0; z-index:-2; }
.editorial-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(1.15); }
.editorial-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--night) 8%, rgba(10,14,20,.84) 44%, rgba(10,14,20,.38));
}
.editorial q{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.7rem);
  font-weight:700; line-height:1.16; letter-spacing:-.026em;
  max-width:22ch;
  quotes:none;
}

/* ---------- Proceso ---------- */

.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:clamp(16px,2.6vw,34px);
  padding-block:clamp(24px,3vw,34px);
  border-top:1px solid var(--rule);
  align-items:start;
}
.step:last-child{ border-bottom:1px solid var(--rule); }
.step-n{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em;
  color:var(--volt-lit);
  padding-top:5px;
}
.step h3{ margin-bottom:8px; }
.step p{ color:var(--frost-dim); font-size:.95rem; max-width:62ch; }
@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:8px; }
}

/* ---------- Listado documental ---------- */

.docs{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.doc{
  background:var(--night-2);
  padding:17px clamp(16px,2vw,24px);
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
}
.sect-alt .doc{ background:var(--night-3); }
.doc-code{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--steel); }
.doc-name{ font-size:.92rem; font-weight:500; }
.doc-state{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; white-space:nowrap;
  border:1px solid;
}
.st-ok{ color:#5BD08A; border-color:rgba(91,208,138,.34); background:rgba(91,208,138,.09); }
.st-run{ color:var(--volt-lit); border-color:rgba(30,98,221,.42); background:rgba(30,98,221,.12); }
@media (max-width:680px){
  .doc{ grid-template-columns:1fr auto; }
  .doc-code{ grid-column:1/-1; }
}

/* ---------- Formulario ---------- */

.form{ display:grid; gap:15px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media (max-width:600px){ .row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:7px; }
.field > span{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute);
}
.field input,.field select,.field textarea{
  background:var(--field-bg);
  border:1px solid var(--rule-2);
  border-radius:9px;
  padding:12px 14px;
  font-size:.95rem;
  color:var(--frost);
  width:100%;
  transition:border-color .2s, background .2s;
}
.sect-alt .field input,.sect-alt .field select,.sect-alt .field textarea{ background:var(--field-bg); }
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--volt); background:var(--night-3);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237C8B9E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.form-note{ font-size:.8rem; color:var(--mute); }
.form-msg{ font-size:.9rem; padding:12px 15px; border-radius:9px; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:rgba(91,208,138,.1); border:1px solid rgba(91,208,138,.32); color:#7FE0A6; }
.form-msg.err{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.32); color:#FF9B9B; }

/* ---------- Datos de contacto ---------- */

.contact-list{ border-top:1px solid var(--rule); }
.contact-row{
  display:grid;
  grid-template-columns:minmax(120px,auto) minmax(0,1fr);
  gap:4px 24px;
  align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.contact-row dd{ text-align:right; overflow-wrap:anywhere; }
@media (max-width:640px){
  .contact-row{ grid-template-columns:1fr; gap:5px; }
  .contact-row dd{ text-align:left; }
}
.contact-row dt{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute);
  margin:0;
}
.contact-row dd{ margin:0; font-size:.95rem; font-weight:500; }
.contact-row dt{ min-width:0; overflow-wrap:anywhere; }
a.contact-row:hover dd{ color:var(--volt); }

/* ---------- Footer ---------- */

.ftr{
  border-top:1px solid var(--rule);
  background:var(--night-2);
  padding-block:clamp(48px,6vw,76px) 26px;
}
.ftr-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,48px);
}
@media (max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr img{ height:46px; width:auto; margin-bottom:20px; }
.ftr-col h4{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); font-weight:500;
  margin:0 0 16px;
}
.ftr-col a,.ftr-col span{
  display:block;
  font-size:.88rem; color:var(--frost-dim);
  padding-block:5px;
  transition:color .18s;
}
.ftr-col a:hover{ color:var(--volt); }
.ftr-tag{ font-size:.88rem; color:var(--mute); max-width:38ch; }
.ftr-social{ display:flex; gap:9px; margin-top:20px; }
.ftr-social a{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid var(--rule-2); border-radius:8px;
  color:var(--frost-dim);
  transition:border-color .2s, color .2s, background .2s;
  padding:0;
}
.ftr-social a:hover{ border-color:var(--volt); color:var(--volt); background:rgba(30,98,221,.10); }
.ftr-social svg{ width:16px; height:16px; }
.ftr-btm{
  margin-top:clamp(36px,4.5vw,58px);
  padding-top:22px;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute);
}

/* ---------- Reveal en scroll ---------- */

.rv{ opacity:0; transform:translateY(20px); }
.rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.d1.in{ transition-delay:.08s; }
.rv.d2.in{ transition-delay:.16s; }
.rv.d3.in{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; }
}
.no-js .rv{ opacity:1; transform:none; }

/* ---------- Cabecera interna ---------- */

.page-head{
  position:relative;
  padding-block:clamp(88px,10vw,130px) clamp(44px,6vw,72px);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  isolation:isolate;
}
.page-head-bg{ position:absolute; inset:0; z-index:-2; }
.page-head-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(1.2) contrast(1.05); }
.page-head-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--night) 14%, rgba(10,14,20,.82) 48%, rgba(10,14,20,.34) 88%),
    linear-gradient(to top, var(--night), transparent 46%);
}
.crumbs{
  font-family:var(--mono);
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
  margin-bottom:20px;
  display:flex; gap:9px; flex-wrap:wrap;
}
.crumbs a:hover{ color:var(--volt); }

/* ---------- Aviso de verificación (solo interno) ---------- */
.todo{
  border:1px dashed rgba(30,98,221,.5);
  background:rgba(30,98,221,.08);
  border-radius:10px;
  padding:14px 18px;
  font-family:var(--mono);
  font-size:.74rem;
  line-height:1.6;
  color:var(--volt);
}


/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed;
  inset-block-end:20px; inset-inline-end:20px;
  z-index:70;
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25D366;
  color:#0A0E14;
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.wa:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(37,211,102,.34); }
.wa svg{ width:28px; height:28px; }
@media (max-width:560px){
  .wa{ width:50px; height:50px; inset-block-end:16px; inset-inline-end:16px; }
  .wa svg{ width:26px; height:26px; }
}

/* ---------- Fondo técnico (sin foto) ---------- */
.tech-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(105% 85% at 88% 18%, rgba(30,98,221,.34), transparent 60%),
    radial-gradient(70% 60% at 55% 108%, rgba(30,98,221,.12), transparent 68%),
    linear-gradient(120deg, var(--night) 26%, var(--night-3) 88%);
}
.tech-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(234,239,245,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,239,245,.055) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(255deg, #000 6%, rgba(0,0,0,.30) 58%, transparent 92%);
  -webkit-mask-image:linear-gradient(255deg, #000 6%, rgba(0,0,0,.30) 58%, transparent 92%);
}

/* ---------- Clientes atendidos ---------- */
.clients{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:14px;
  overflow:hidden;
}
.client{
  background:var(--night-3);
  padding:clamp(22px,2.6vw,32px) clamp(18px,2.2vw,26px);
  display:flex; flex-direction:column; gap:8px;
  min-height:118px;
  justify-content:center;
  transition:background .25s;
}
.client:hover{ background:var(--night-4); }
.client strong{
  font-family:var(--display);
  font-size:clamp(1rem,1.5vw,1.16rem);
  font-weight:700; letter-spacing:-.015em;
  line-height:1.2;
}
.client span{
  font-family:var(--mono);
  font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); line-height:1.55;
}


/* ============================================================
   TEMA CLARO
   Mismos tokens, otros valores. Las bandas con foto o video
   (.on-media) se mantienen oscuras en los dos temas: texto
   blanco sobre imagen es lo único que se lee bien ahí.
   ============================================================ */

[data-theme="light"]{
  --night:      #FFFFFF;
  --night-2:    #F3F6FA;
  --night-3:    #FFFFFF;
  --night-4:    #E9EEF5;

  --frost:      #0A1018;
  --frost-dim:  #3D4855;
  --mute:       #66717F;

  --volt-lit:   #1E62DD;   /* en claro, el texto chico usa el azul de marca */

  --rule:       rgba(10,16,24,.13);
  --rule-2:     rgba(10,16,24,.22);

  --hdr-bg:     rgba(255,255,255,.82);
  --field-bg:   #FFFFFF;
  --shadow-card: 0 1px 2px rgba(10,16,24,.05), 0 8px 22px rgba(10,16,24,.05);
}

[data-theme="light"] .sect-alt .card,
[data-theme="light"] .sect-alt .doc,
[data-theme="light"] .client{ background:#FFFFFF; }
[data-theme="light"] .card,
[data-theme="light"] .docs,
[data-theme="light"] .clients{ box-shadow:var(--shadow-card); }
[data-theme="light"] .card:hover{ border-color:rgba(30,98,221,.34); }
[data-theme="light"] .client:hover{ background:#F7F9FC; }
[data-theme="light"] .ftr{ background:var(--night-2); }
[data-theme="light"] .tile img{ filter:saturate(.98) contrast(1.02); }
[data-theme="light"] .st-ok{ color:#1B7A46; border-color:rgba(27,122,70,.34); background:rgba(27,122,70,.09); }
[data-theme="light"] .tech-bg{
  background:
    radial-gradient(105% 85% at 88% 18%, rgba(30,98,221,.16), transparent 60%),
    radial-gradient(70% 60% at 55% 108%, rgba(30,98,221,.07), transparent 68%),
    linear-gradient(120deg, #FFFFFF 26%, #EEF3FA 88%);
}
[data-theme="light"] .tech-bg::after{
  background-image:
    linear-gradient(rgba(10,16,24,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,16,24,.05) 1px, transparent 1px);
}
[data-theme="light"] .spec-rail{
  background:linear-gradient(90deg, rgba(30,98,221,.05), transparent 38%, transparent 62%, rgba(30,98,221,.05));
}
[data-theme="light"] .wa{ color:#FFFFFF; }

/* --- Bandas con imagen o video: siempre oscuras --- */
.on-media{
  --night:      #0A0E14;
  --night-2:    #10161F;
  --night-3:    #18202C;
  --night-4:    #212B39;
  --frost:      #EAEFF5;
  --frost-dim:  #B4C0CE;
  --mute:       #8D9AAA;
  --volt-lit:   #5E9BFF;
  --rule:       rgba(234,239,245,.12);
  --rule-2:     rgba(234,239,245,.20);
  color:var(--frost);
  background:#0A0E14;
}

/* --- Logo por tema --- */
.brand .logo-light,
.ftr .logo-light{ display:none; }
[data-theme="light"] .brand .logo-dark,
[data-theme="light"] .ftr .logo-dark{ display:none; }
[data-theme="light"] .brand .logo-light,
[data-theme="light"] .ftr .logo-light{ display:block; }

/* --- Mapa: SVG en línea, temado y animado --- */
.mapa{
  --m-bg:      var(--night-2);
  --m-grid:    rgba(234,239,245,.05);
  --m-nb:      #141C27;
  --m-nb-line: rgba(234,239,245,.10);
  --m-line:    #4C8DFF;
  --m-text:    #EAEFF5;
  --m-sub:     #7A8694;
  --m-f1:.26; --m-f2:.13; --m-f3:.07;

  border:1px solid var(--rule);
  border-radius:14px;
  overflow:hidden;
  line-height:0;
}
[data-theme="light"] .mapa{
  --m-bg:      #FFFFFF;
  --m-grid:    rgba(10,16,24,.05);
  --m-nb:      #EEF1F5;
  --m-nb-line: rgba(10,16,24,.13);
  --m-line:    #1E62DD;
  --m-text:    #0A1018;
  --m-sub:     #6B7684;
  --m-f1:.20; --m-f2:.11; --m-f3:.05;
}
.mapa-svg{ display:block; width:100%; height:auto; }

/* Contorno que se dibuja al entrar en pantalla */
.m-ar{ stroke-dasharray:4400; stroke-dashoffset:4400; }
.mapa.in .m-ar{ animation:mDraw 2.6s var(--ease) forwards; }
@keyframes mDraw{ to{ stroke-dashoffset:0; } }

/* Halo y chinches */
.m-halo{ opacity:0; }
.mapa.in .m-halo{ animation:mFade 1.4s ease .9s forwards; }
@keyframes mFade{ to{ opacity:.62; } }

.m-pin{ opacity:0; transform-box:fill-box; transform-origin:center; }
.mapa.in .m-pin-a{ animation:mPop .55s var(--ease) 1.1s forwards; }
.mapa.in .m-pin-b{ animation:mPop .55s var(--ease) 2.0s forwards; }
@keyframes mPop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }

.m-label{ opacity:0; }
.mapa.in .m-label{ animation:mIn .6s ease 1.4s forwards; }
.mapa.in .m-label-2{ animation:mIn .6s ease 2.3s forwards; }
@keyframes mIn{ from{ opacity:0; } to{ opacity:1; } }

/* Ruta que se traza entre las dos ubicaciones */
.m-route{ stroke-dasharray:7 7; stroke-dashoffset:0; opacity:0; }
.mapa.in .m-route{ animation:mIn .5s ease 1.7s forwards, mDash 1.1s linear 2.2s infinite; }
@keyframes mDash{ to{ stroke-dashoffset:-28; } }

/* Pulso de las chinches */
.m-pulse{ opacity:0; transform-box:fill-box; transform-origin:center; }
.mapa.in .m-pulse{ animation:mPulse 2.8s ease-out 2.6s infinite; }
.mapa.in .m-pulse-2{ animation-delay:3.4s; }
@keyframes mPulse{
  0%{ opacity:.75; transform:scale(1); }
  70%{ opacity:0; transform:scale(3.1); }
  100%{ opacity:0; transform:scale(3.1); }
}

/* Punto que recorre la ruta */
.m-ping{ opacity:0; }
.mapa.in .m-ping{ animation:mIn .4s ease 2.4s forwards; }

@media (prefers-reduced-motion: reduce){
  .m-ar{ stroke-dasharray:none; stroke-dashoffset:0; }
  .m-halo{ opacity:.62; }
  .m-pin,.m-label,.m-route,.m-ping{ opacity:1; }
  .m-pulse{ display:none; }
  .m-ping animateMotion{ display:none; }
  .mapa.in *{ animation:none !important; }
}
.no-js .m-ar{ stroke-dasharray:none; stroke-dashoffset:0; }
.no-js .m-halo,.no-js .m-pin,.no-js .m-label,.no-js .m-route,.no-js .m-ping{ opacity:1; }

/* --- Botón de tema --- */
.theme-btn{
  width:38px; height:38px;
  display:grid; place-items:center;
  background:none;
  border:1px solid var(--rule-2);
  border-radius:7px;
  color:var(--frost-dim);
  cursor:pointer;
  padding:0;
  transition:color .18s, border-color .18s, background .18s;
}
.theme-btn:hover{ color:var(--frost); border-color:var(--frost-dim); background:rgba(127,127,127,.08); }
.theme-btn svg{ width:17px; height:17px; }
.theme-btn .i-sun{ display:none; }
[data-theme="light"] .theme-btn .i-sun{ display:block; }
[data-theme="light"] .theme-btn .i-moon{ display:none; }
@media (max-width:420px){ .theme-btn{ width:34px; height:34px; } }

/* ---------- Pie: encabezado de columna ---------- */
.ftr-col .ftr-h{
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); font-weight:500;
  margin:0 0 16px;
}

/* ---------- Preguntas frecuentes ---------- */
.faq{
  display:grid; gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:14px;
  overflow:hidden;
}
.faq-item{ background:var(--night-3); }
[data-theme="light"] .faq-item{ background:#FFFFFF; }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:20px clamp(18px,2.3vw,28px);
  font-family:var(--display);
  font-weight:700; font-size:clamp(.98rem,1.5vw,1.1rem);
  letter-spacing:-.014em; line-height:1.35;
  display:flex; align-items:flex-start; gap:16px;
  transition:color .18s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  margin-inline-start:auto;
  font-family:var(--mono); font-weight:400;
  font-size:1.32rem; line-height:1; color:var(--volt-lit);
  transition:transform .25s var(--ease);
  flex:none;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--volt-lit); }
.faq-item p{
  margin:0;
  padding:0 clamp(18px,2.3vw,28px) 22px;
  color:var(--frost-dim);
  font-size:.94rem; max-width:82ch;
}

/* ---------- Artículo técnico ---------- */
.art{ max-width:74ch; }
.art-sec{ margin-bottom:clamp(30px,4vw,46px); }
.art-sec:last-child{ margin-bottom:0; }
.art-sec h2{ margin-bottom:14px; }
.art-sec p{ color:var(--frost-dim); font-size:clamp(1rem,1.35vw,1.08rem); line-height:1.75; }