/* ==========================================================================
   ComexLeader — estilos
   Paleta tomada del logo: azul profundo + celeste sobre papel claro.
   ========================================================================== */

:root{
  --tinta:#0A1628;
  --azul:#1B4FA0;
  --azul-hondo:#0E2E5C;
  --celeste:#1CA5E8;
  --papel:#F1F4F9;
  --blanco:#FFFFFF;
  --linea:#D5DDE9;
  --gris:#5B6B82;

  --display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texto:'Public Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif;
  --dato:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --ancho:1180px;
  --radio:4px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--azul); }

h1,h2,h3{
  font-family:var(--display);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.15rem, 5.2vw, 3.9rem); font-weight:800; }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); font-weight:700; }
h3{ font-size:1.06rem; font-weight:700; letter-spacing:-0.01em; }

p{ margin:0 0 1.1em; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 24px;
}

.saltar{
  position:absolute; left:-9999px; top:0;
  background:var(--azul-hondo); color:#fff;
  padding:12px 18px; z-index:100; text-decoration:none;
}
.saltar:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--celeste);
  outline-offset:2px;
}

/* -------------------------------------------------- etiquetas y botones */

.etiqueta{
  font-family:var(--dato);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 1rem;
}
.etiqueta--claro{ color:var(--celeste); }

.boton{
  display:inline-block;
  background:var(--azul);
  color:#fff;
  font-family:var(--display);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:-0.01em;
  padding:15px 28px;
  border:2px solid var(--azul);
  border-radius:var(--radio);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.boton:hover{ background:var(--azul-hondo); border-color:var(--azul-hondo); }
.boton:active{ transform:translateY(1px); }

.boton--linea{
  background:transparent;
  color:var(--azul-hondo);
  border-color:var(--linea);
}
.boton--linea:hover{ background:transparent; border-color:var(--azul); color:var(--azul); }

.boton--chico{ padding:10px 20px; font-size:.9rem; }

.boton--ancho{
  width:100%;
  border:none;
  font-family:var(--display);
  font-size:1rem;
  padding:17px 28px;
}

/* -------------------------------------------------- cabecera */

.cabecera{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}

.cabecera__fila{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:78px;
}

.marca{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  line-height:1;
}
.marca img{ height:38px; width:auto; }
.marca__texto{
  font-family:var(--display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-0.005em;
  text-transform:uppercase;
  color:var(--azul);
}

.cabecera__nav{
  margin-left:auto;
  display:flex;
  gap:26px;
}
.cabecera__nav a{
  color:var(--tinta);
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.cabecera__nav a:hover{ color:var(--azul); border-bottom-color:var(--celeste); }

/* -------------------------------------------------- hero */

.hero{
  padding:76px 0 84px;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(28,165,232,.12), transparent 65%),
    var(--blanco);
  border-bottom:1px solid var(--linea);
}

.hero__grilla{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}

.hero__bajada{
  font-size:1.13rem;
  color:var(--gris);
  max-width:46ch;
}

.hero__acciones{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 18px;
}

.hero__nota{
  font-family:var(--dato);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--gris);
  margin:0;
}

/* -------------------------------------------------- guía aérea (elemento firma) */

.guia{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-top:6px solid var(--azul);
  border-radius:var(--radio);
  box-shadow:0 26px 60px -34px rgba(14,46,92,.55);
  padding:22px 24px 20px;
  font-family:var(--dato);
  position:relative;
}

.guia__cabecera{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
  padding-bottom:14px;
  border-bottom:1px solid var(--linea);
}
.guia__nro{ color:var(--azul-hondo); letter-spacing:.08em; }

.guia__cuerpo{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  padding:20px 0;
}

.guia__campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.guia__rotulo{
  font-size:.63rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
}

.guia__valor{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--tinta);
  letter-spacing:-0.01em;
}
.guia__valor b{
  font-family:var(--dato);
  font-weight:600;
  font-size:.72rem;
  color:var(--celeste);
  margin-left:4px;
  vertical-align:2px;
}

.guia__destino{
  display:inline-block;
  transition:opacity .32s ease, transform .32s ease;
}
.guia__destino.saliendo{ opacity:0; transform:translateY(-6px); }

.guia__flecha{
  width:64px;
  height:14px;
  position:relative;
}
.guia__flecha span{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--linea), var(--celeste));
}
.guia__flecha span::after{
  content:"";
  position:absolute;
  right:-1px; top:-4px;
  border-left:9px solid var(--celeste);
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

.guia__perforado{
  height:1px;
  background-image:linear-gradient(90deg, var(--linea) 0 6px, transparent 6px 12px);
  background-size:12px 1px;
  margin:0 -24px;
}

.guia__datos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:18px 0 16px;
  font-size:.78rem;
  color:var(--tinta);
}
.guia__datos div{ display:flex; flex-direction:column; gap:5px; }

.guia__codigo{
  height:38px;
  background-image:repeating-linear-gradient(90deg,
    var(--azul-hondo) 0 2px, transparent 2px 4px,
    var(--azul-hondo) 4px 7px, transparent 7px 9px,
    var(--azul-hondo) 9px 10px, transparent 10px 14px);
  opacity:.85;
  margin-bottom:14px;
}

.guia__estado{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--azul-hondo);
}
.guia__estado i{
  width:8px; height:8px; border-radius:50%;
  background:#19B36B;
  box-shadow:0 0 0 4px rgba(25,179,107,.16);
}

/* -------------------------------------------------- secciones */

.seccion{ padding:86px 0; }
.seccion--papel{ background:var(--papel); border-block:1px solid var(--linea); }

.seccion__grilla{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
}

.seccion__intro h2{ margin-bottom:0; }

.seccion__cuerpo > p{ color:var(--gris); max-width:62ch; }

.lista{
  list-style:none;
  margin:32px 0;
  padding:0;
  display:grid;
  gap:2px;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
}
.lista li{
  background:var(--blanco);
  padding:22px 24px;
}
.lista h3{ margin-bottom:.35em; color:var(--azul-hondo); }
.lista p{ margin:0; color:var(--gris); font-size:.97rem; }

/* pasos: numerados porque el contenido sí es una secuencia */
.pasos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:34px;
}
.paso{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:24px 22px;
}
.paso__nro{
  font-family:var(--dato);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--celeste);
  display:block;
  margin-bottom:14px;
}
.paso h3{ color:var(--azul-hondo); }
.paso p{ margin:0; color:var(--gris); font-size:.95rem; }

/* -------------------------------------------------- números */

.numeros{
  background:var(--azul-hondo);
  color:#fff;
  padding:86px 0;
}
.numeros h2{ color:#fff; max-width:20ch; }

.numeros__grilla{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:52px;
}
.numero{ border-top:2px solid rgba(255,255,255,.22); padding-top:22px; }
.numero__dato{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.1rem,4.6vw,3.1rem);
  letter-spacing:-0.03em;
  color:var(--celeste);
  margin-bottom:10px;
}
.numero p{ margin:0; color:rgba(255,255,255,.82); font-size:.98rem; }

/* -------------------------------------------------- contacto */

.contacto__grilla{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contacto__texto > p{ color:var(--gris); max-width:46ch; }
.contacto__nota{
  font-family:var(--dato);
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--azul-hondo);
}
.contacto__redes{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  gap:10px;
}
.contacto__redes a{
  display:inline-block;
  font-size:.88rem;
  font-weight:500;
  text-decoration:none;
  color:var(--azul-hondo);
  border:1px solid var(--linea);
  background:var(--blanco);
  border-radius:var(--radio);
  padding:9px 16px;
}
.contacto__redes a:hover{ border-color:var(--azul); color:var(--azul); }

.formulario{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-top:6px solid var(--azul);
  border-radius:var(--radio);
  padding:30px 30px 28px;
  box-shadow:0 26px 60px -40px rgba(14,46,92,.5);
}

.formulario__titulo{
  font-family:var(--dato);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--linea);
}

.campo{ margin-bottom:16px; }
.campo label{
  display:block;
  font-size:.83rem;
  font-weight:600;
  margin-bottom:6px;
  color:var(--azul-hondo);
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  font-family:var(--texto);
  font-size:1rem;
  color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:12px 14px;
}
.campo textarea{ resize:vertical; min-height:96px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ border-color:var(--azul); }
.campo--error input,
.campo--error select,
.campo--error textarea{ border-color:#C8372D; }
.campo__error{
  display:block;
  font-size:.8rem;
  color:#C8372D;
  margin-top:5px;
}

.trampa{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.formulario__aviso{
  margin:14px 0 0;
  font-size:.92rem;
  min-height:1.2em;
}
.formulario__aviso.ok{ color:#12805A; }
.formulario__aviso.mal{ color:#C8372D; }

.enviando{ opacity:.65; pointer-events:none; }

/* -------------------------------------------------- pie */

.pie{
  background:var(--tinta);
  color:rgba(255,255,255,.72);
  padding:52px 0 26px;
}
.pie__fila{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  justify-content:space-between;
  align-items:flex-start;
}
.pie__marca .marca__texto{ color:#fff; }
.pie__marca .marca img{ height:44px; }
.pie__marca p{
  margin:14px 0 0;
  font-family:var(--dato);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--celeste);
}
.pie__nav{
  display:grid;
  grid-template-columns:repeat(2,auto);
  gap:10px 34px;
}
.pie__nav a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:.94rem;
}
.pie__nav a:hover{ color:#fff; }

.pie__legal{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;
  color:rgba(255,255,255,.55);
}

/* -------------------------------------------------- responsive */

@media (max-width:960px){
  .hero__grilla,
  .seccion__grilla,
  .contacto__grilla{ grid-template-columns:1fr; gap:40px; }
  .hero{ padding:56px 0 64px; }
  .seccion{ padding:64px 0; }
  .numeros{ padding:64px 0; }
  .pasos{ grid-template-columns:1fr; }
  .cabecera__nav{ display:none; }
  .cabecera__fila{ min-height:68px; gap:16px; }
  .marca img{ height:32px; }
  .marca__texto{ font-size:1.12rem; }
  .boton--chico{ margin-left:auto; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .contenedor{ padding:0 18px; }
  .guia__cuerpo{ grid-template-columns:1fr; gap:16px; }
  .guia__flecha{ width:14px; height:34px; margin-left:2px; }
  .guia__flecha span{
    top:0; bottom:0; left:50%; right:auto;
    width:2px; height:auto;
    background:linear-gradient(180deg, var(--linea), var(--celeste));
  }
  .guia__flecha span::after{
    right:auto; left:-4px; top:auto; bottom:-1px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:9px solid var(--celeste);
    border-bottom:none;
  }
  .guia__datos{ grid-template-columns:1fr 1fr; }
  .numeros__grilla{ grid-template-columns:1fr; }
  .formulario{ padding:24px 20px; }
  .contacto__redes{ flex-wrap:wrap; }
}

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