/* ══════════════════════════════════════════════════════════
   ICES · sitio corporativo · fase 1
   Paleta: ambar de marca #C78419 sobre agua del Golfo de noche.
   Identidad visual comprometida en un solo mundo (oscuro con
   secciones claras para texto denso): no reacciona al tema del
   sistema, es una decision de diseno.
   ══════════════════════════════════════════════════════════ */
:root{
  --marca:#C78419;          /* muestreado del logotipo */
  --marca-alta:#E3A342;     /* ambar aclarado, para hover  */
  --marca-texto:#8E5C0D;    /* ambar oscurecido, texto chico sobre claro */
  --sobre-marca:#17100A;

  --mar:#0B1A20;            /* fondo profundo */
  --mar-2:#102A32;
  --mar-linea:#1B333A;
  --mar-tinta:#DCE8E7;
  --mar-suave:#93AFAD;

  --claro:#E9EDEC;
  --claro-2:#DEE4E3;
  --blanco:#FFFFFF;
  --tinta:#10201E;
  --suave:#536561;
  --linea:#C7D1CF;
  --linea-tenue:#DBE2E1;

  --dato:#0D666B;
  --ok:#257E4F;
  --alerta:#A87608;
  --critico:#B23A32;

  --f-titulo:Cambria,"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --f-texto:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-dato:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,"Roboto Mono",monospace;

  --margen:clamp(1.15rem,4.5vw,3.5rem);
  --ancho:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--claro);color:var(--tinta);
  font:17px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased}
img,svg,video,iframe{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px}

.w{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:700;margin:0;
  letter-spacing:-.014em;text-wrap:balance;line-height:1.12}
h1{font-size:clamp(2.3rem,5.6vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.14rem;letter-spacing:0;line-height:1.3}
/* 66ch se calcula sobre el tamano de letra del propio elemento: en los textos
   chicos daria un ancho ridiculo, asi que las utilidades lo anulan. */
p{margin:0;max-width:66ch}
.rotulo{font-family:var(--f-dato);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--suave);margin:0;max-width:none}
.entrada{font-size:clamp(1.03rem,1.5vw,1.2rem);color:var(--suave)}
.col{display:flex;flex-direction:column}
.g1{gap:.4rem}.g2{gap:.9rem}.g3{gap:1.5rem}.g4{gap:2.5rem}
.dato{font-family:var(--f-dato);font-variant-numeric:tabular-nums}

/* dato pendiente de confirmar antes de salir a produccion */
.pend{border-bottom:1px dotted var(--marca-texto);cursor:help;color:var(--marca-texto)}

.bloque{padding-block:clamp(3.5rem,7.5vw,6.5rem)}
.bloque--linea{border-top:1px solid var(--linea-tenue)}
.bloque--mar{background:var(--mar);color:var(--mar-tinta)}
.bloque--mar h2,.bloque--mar h3{color:#F2F8F7}
.bloque--mar .rotulo{color:var(--mar-suave)}
.bloque--mar .entrada{color:var(--mar-suave)}
.bloque--mar p{color:#B7C9C6}

/* ─────────── rail + navegacion ─────────── */
.rail{background:#071216;color:#9DB6B4;font-family:var(--f-dato);
  font-size:.68rem;letter-spacing:.07em}
.rail .w{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;padding-block:.5rem}
.rail .sep{flex:1}
.pulso{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ok);margin-right:.45rem;vertical-align:1px;
  animation:latir 2.8s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.3}}

.nav{position:sticky;top:0;z-index:40;background:rgba(11,26,32,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--mar-linea)}
.nav .w{display:flex;align-items:center;gap:1.5rem;padding-block:.8rem}
.marca-enlace{color:var(--marca);text-decoration:none;flex:none}
/* El motivo real del logotipo es una espiral, recuperada del vector original.
   La version de 16 trazos finos se vuelve una marana por debajo de 60 px, asi
   que la barra usa una sola espiral gruesa con el mismo giro y proporcion. */
.marca-enlace svg{height:34px;width:auto}
.marca-enlace {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}

.marca-logo {
  height: 2.5rem;   /* el ancho sale solo del viewBox */
  width: auto;
  flex: none;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color:#fff;
}

.marca-texto strong {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.marca-texto small {
  font-size: .95rem;
  font-weight: 400;
  opacity: .75;
  max-width: 22ch;   /* que no se estire de más */
}
.nav-menu{margin-left:auto;display:flex;gap:1.45rem;font-size:.86rem}
.nav-menu a{color:#A8C0BE;text-decoration:none;padding-block:.25rem;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav-menu a:hover,.nav-menu a:focus-visible{color:#F2F8F7;border-bottom-color:var(--marca)}
/* En pantalla angosta el menu no se esconde: se vuelve una tira desplazable.
   Ocultarlo dejaria al visitante de campo sin forma de saltar de seccion. */
@media (max-width:900px){
  .nav .w{flex-wrap:wrap;gap:.6rem}
  .nav-menu{margin-left:0;width:100%;overflow-x:auto;gap:1.1rem;
    padding-bottom:.2rem;font-size:.8rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-menu::-webkit-scrollbar{display:none}
  .nav-menu a{white-space:nowrap;flex:none}
}
@media (max-width:520px){
  .rail .w span:nth-child(2){display:none}
}

/* ─────────── botones ─────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font:600 .9rem/1 var(--f-texto);padding:.85rem 1.4rem;border:1px solid var(--marca);
  transition:transform .15s,background .15s,color .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn--lleno{background:var(--marca);color:var(--sobre-marca)}
.btn--lleno:hover{background:var(--marca-alta)}
.btn--linea{background:transparent;color:var(--marca)}
.btn--linea:hover{background:rgba(199,132,25,.12)}
.btn--claro{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--claro:hover{border-color:var(--marca);color:var(--marca-texto)}
.botones{display:flex;flex-wrap:wrap;gap:.8rem}

/* ─────────── encabezado con video ─────────── */
.hero{position:relative;background:var(--mar);color:#fff;overflow:hidden;
  min-height:clamp(520px,78vh,760px);display:flex;align-items:flex-end}
.hero video,.hero .respaldo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
/* El velo tiene que garantizar lectura sobre cualquier cuadro del video,
   incluidos los planos claros de instalacion a mediodia. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,15,19,.70) 0%,rgba(6,15,19,.48) 30%,
    rgba(6,15,19,.80) 62%,rgba(6,15,19,.96) 100%)}
.hero .w{position:relative;z-index:2;padding-block:clamp(3rem,8vw,5.5rem)}
.hero .rotulo{color:#D6BE8E}
.hero h1{color:#fff;max-width:20ch;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* Segundo nivel del encabezado: el titular es corto y memorable, esta linea
   carga el significado. Va en un cuerpo intermedio entre h1 y texto. */
.hero-claim{color:#fff;font-family:var(--f-titulo);font-weight:700;
  font-size:clamp(1.2rem,2.3vw,1.65rem);line-height:1.3;letter-spacing:-.008em;
  max-width:34ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* Se acota por clase y no por `.hero p`: ese selector le ganaba en
   especificidad a .rotulo y .hero-pastillas y les imponia un ancho de 56ch
   calculado sobre su propia letra chica, que salia en 367 px. */
.hero-texto{color:#DCE4E3;max-width:56ch}
.lema{font-family:var(--f-titulo);font-style:italic;font-size:1.18rem;
  color:var(--marca-alta);border-left:2px solid var(--marca);padding-left:.95rem;
  max-width:36ch}
.hero-pastillas{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;max-width:none;
  font-family:var(--f-dato);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#B9CFCD}
.hero-pastillas a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:2px;transition:color .15s,border-color .15s}
.hero-pastillas a:hover,.hero-pastillas a:focus-visible{color:var(--marca-alta);
  border-bottom-color:var(--marca)}
.hero-pastillas a::before{content:"· ";color:var(--marca)}

/* ─────────── cifras ─────────── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linea-tenue);border:1px solid var(--linea-tenue)}
.cifra{background:var(--claro);padding:1.5rem 1.25rem}
.cifra b{display:block;font-family:var(--f-dato);font-variant-numeric:tabular-nums;
  font-size:clamp(1.55rem,3vw,2.2rem);line-height:1;font-weight:600}
.cifra small{display:block;margin-top:.55rem;font-size:.78rem;color:var(--suave);line-height:1.45}
@media (max-width:820px){.cifras{grid-template-columns:repeat(2,1fr)}}

/* ─────────── capacidades ─────────── */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:1.25rem;margin-top:2.5rem}
.cap{background:var(--blanco);border:1px solid var(--linea);display:flex;
  flex-direction:column;overflow:hidden}
.cap-foto{aspect-ratio:16/10;overflow:hidden;background:var(--mar)}
.cap-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cap:hover .cap-foto img{transform:scale(1.04)}
.cap-foto--dibujo{display:grid;place-items:center;padding:0}
.cap-cuerpo{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.cap-dominio{font-family:var(--f-dato);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dato)}
.cap-cuerpo p{font-size:.93rem;color:var(--suave)}
.cap-lista{list-style:none;margin:.35rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.3rem .5rem;font-family:var(--f-dato);font-size:.7rem;color:var(--suave)}
.cap-lista li{border:1px solid var(--linea);padding:.22rem .5rem}

/* ─────────── hallazgos ─────────── */
.hallazgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.25rem;margin-top:2.5rem}
.hallazgo{margin:0;background:var(--mar);border:1px solid var(--mar-linea);
  display:flex;flex-direction:column}
.hallazgo--ancho{grid-column:span 2}
@media (max-width:760px){.hallazgo--ancho{grid-column:span 1}}
.hallazgo img{width:100%;object-fit:cover;aspect-ratio:16/9}
.hallazgo--alto img{aspect-ratio:4/3}
.hallazgo figcaption{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.hallazgo b{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marca)}
.hallazgo span{font-size:.9rem;color:#B7C9C6;line-height:1.5}

/* ─────────── secuencia SMHGM ─────────── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--mar-linea);border:1px solid var(--mar-linea);margin-top:2.5rem}
/* Las tarjetas de paso son oscuras dentro de una seccion clara: hay que
   fijarles color propio o heredan la tinta oscura y quedan ilegibles. */
.paso{background:#0E2229;padding:1.55rem 1.35rem;color:#B7C9C6}
.paso b{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.13em;color:var(--marca)}
.paso h3{margin:.65rem 0 .5rem;color:#F2F8F7}
.paso p{font-size:.89rem;color:#B7C9C6;max-width:none}
@media (max-width:900px){.pasos{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pasos{grid-template-columns:1fr}}

.esquema{border:1px solid var(--mar-linea);margin-top:2.5rem;background:#08181E}
.esquema svg{width:100%;height:auto}

/* ─────────── recorrido 3D ─────────── */
.visor{position:relative;margin-top:2.25rem;border:1px solid var(--linea);
  background:var(--mar);aspect-ratio:16/9;overflow:hidden}
.visor iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.visor-cartel{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;text-align:center;
  padding:2rem;background-size:cover;background-position:center;cursor:pointer;border:0;
  color:#fff;font-family:inherit;width:100%}
.visor-cartel::before{content:"";position:absolute;inset:0;background:rgba(7,18,22,.66)}
.visor-cartel>*{position:relative}
.visor-cartel strong{font-family:var(--f-titulo);font-size:1.3rem;font-weight:700}
.visor-cartel em{font-family:var(--f-dato);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;font-style:normal;color:#C9DCDA}

/* ─────────── tecnologia / normatividad ─────────── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media (max-width:900px){.dos{grid-template-columns:1fr}}
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--linea-tenue);border:1px solid var(--linea-tenue);margin-top:2rem}
.ficha{background:var(--blanco);padding:1.25rem 1.3rem}
.ficha h3{font-size:.95rem;margin-bottom:.55rem}
.ficha ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;
  font-family:var(--f-dato);font-size:.76rem;color:var(--suave)}
.ficha li::before{content:"— ";color:var(--marca-texto)}

.normas{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.norma{font-family:var(--f-dato);font-size:.78rem;border:1px solid var(--linea);
  padding:.45rem .75rem;color:var(--tinta);background:var(--blanco)}
.norma em{font-style:normal;color:var(--suave);font-size:.72rem}

/* ─────────── contratacion ─────────── */
.dl{display:grid;grid-template-columns:12rem 1fr;gap:0 1.35rem;margin:0;font-size:.92rem}
.dl dt{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--suave);padding-top:.5rem;
  border-bottom:1px solid var(--linea-tenue)}
.dl dd{margin:0;padding:.38rem 0;border-bottom:1px solid var(--linea-tenue)}
@media (max-width:640px){
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;padding-bottom:0}
}

/* ─────────── contacto ─────────── */
.contacto{background:var(--mar);color:var(--mar-tinta)}
.contacto h2{color:#F2F8F7}
.contacto .rotulo{color:var(--mar-suave)}
form{display:flex;flex-direction:column;gap:.9rem;margin-top:.5rem}
.campo{display:flex;flex-direction:column;gap:.3rem}
.campo label{font-family:var(--f-dato);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mar-suave)}
.campo input,.campo textarea,.campo select{
  background:#08181E;border:1px solid var(--mar-linea);color:#EAF3F2;
  font:400 .95rem/1.5 var(--f-texto);padding:.7rem .8rem;width:100%}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--marca);outline:none}
.campo textarea{resize:vertical;min-height:110px}
.aviso{font-size:.78rem;color:var(--mar-suave);margin-top:.3rem}
.datos-contacto{display:flex;flex-direction:column;gap:1.35rem}
.datos-contacto div{display:flex;flex-direction:column;gap:.2rem}
.datos-contacto a{color:#EAF3F2;text-decoration:none;border-bottom:1px solid var(--mar-linea)}
.datos-contacto a:hover{border-bottom-color:var(--marca);color:var(--marca-alta)}

.pie{background:#071216;color:#8FA8A6;font-size:.85rem;padding-block:2.5rem 2rem}
.pie .w{display:flex;flex-direction:column;gap:1.5rem}
.pie-lema{font-family:var(--f-titulo);font-style:italic;color:var(--marca);font-size:1.08rem}
.pie-meta{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-top:1.25rem;
  border-top:1px solid var(--mar-linea);font-family:var(--f-dato);
  font-size:.68rem;letter-spacing:.06em}

/* ─────────── aparicion al desplazar ─────────── */
/* El estado oculto solo se aplica si el script corrio (clase .js en <html>).
   Asi, si el script falla o el observador no dispara, el contenido se ve
   igual: la animacion es un anadido, nunca un requisito para leer la pagina. */
.js .sube{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .sube.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .sube{opacity:1;transform:none;transition:none}
  .pulso{animation:none}
  .cap:hover .cap-foto img{transform:none}
}

/* ─────────── enlace a pagina de servicio ─────────── */
.enlace-mas{font-family:var(--f-dato);font-size:.76rem;letter-spacing:.06em;
  color:var(--marca-texto);text-decoration:none;border-bottom:1px solid var(--linea)}
.enlace-mas:hover,.enlace-mas:focus-visible{border-bottom-color:var(--marca);color:var(--marca)}
.enlace-mas::after{content:" →"}

/* ─────────── icono de dominio en las tarjetas ─────────── */
.cap-dominio{display:flex;align-items:center;gap:.6rem}
.cap-icono{width:26px;height:26px;flex:none;color:var(--marca)}
.cap-icono svg{width:100%;height:100%;display:block}

/* ─────────── bloque del infografico ─────────── */
.infografia{display:grid;grid-template-columns:minmax(0,220px) 1fr;
  gap:clamp(1.25rem,3vw,2.25rem);align-items:center;margin-top:2.5rem;
  background:#0E2229;border:1px solid var(--mar-linea);padding:1.5rem}
.infografia img{width:100%;height:auto;border:1px solid var(--mar-linea)}
.infografia .col{gap:.8rem}
.infografia h3{color:#F2F8F7}
.infografia p{color:#B7C9C6;font-size:.93rem;max-width:56ch}
@media (max-width:720px){.infografia{grid-template-columns:1fr}}

/* ─────────── retrato del satelite ─────────── */
.satelite{margin:2.5rem 0 0;border:1px solid var(--mar-linea);background:#08181E}
.satelite img{width:100%;height:auto}
.satelite figcaption{padding:.85rem 1.1rem;font-family:var(--f-dato);font-size:.72rem;
  letter-spacing:.06em;color:var(--mar-suave)}

/* ─────────── segundo nivel de titulo en secciones claras ─────────── */
.bloque-claim{font-family:var(--f-titulo);font-weight:700;color:var(--tinta);
  font-size:clamp(1.12rem,2vw,1.45rem);line-height:1.32;letter-spacing:-.008em;
  max-width:44ch;text-wrap:balance}

/* La barra es fija: sin este margen, al saltar a un ancla el titulo queda oculto. */
[id]{scroll-margin-top:88px}
@media (max-width:900px){[id]{scroll-margin-top:120px}}

/* La septima tarjeta deja sola a la ultima en rejilla de tres: se le da el
   ancho de dos para que la fila cierre. */
@media (min-width:1000px){ .cap--ancha{grid-column:span 2} }