/* ============================================================
   SAE — Servicios Aduaneros Especializados | saehn.com  v2
   Dirección: precisión logística. Sora (display) + Inter (texto)
   + IBM Plex Mono (códigos de manifiesto, datos, coordenadas).
   Tinta marina profunda + bronce del logo SAE KEM.
   ============================================================ */

:root{
  --tinta:    #0B1726;
  --tinta-2:  #101F33;
  --tinta-3:  #18293F;
  --bronce:   #B08D3E;
  --oro:      #D4B45C;
  --niebla:   #F4F5F7;
  --pizarra:  #515E6E;
  --blanco:   #FFFFFF;
  --linea:    rgba(11,23,38,.10);
  --linea-osc: rgba(255,255,255,.12);
  --ancho:    1140px;
  --sombra:   0 18px 45px -18px rgba(11,23,38,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--pizarra);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--bronce); }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--oro); outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:"Sora", "Inter", sans-serif;
  color:var(--tinta);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{ font-size:clamp(2.3rem, 5.2vw, 3.9rem); font-weight:800; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); }
h3{ font-size:1.35rem; }
h4{ font-size:1.05rem; }

.contenedor{ width:min(var(--ancho), 92vw); margin-inline:auto; }

/* Etiquetas estilo manifiesto de carga */
.codigo{
  font-family:"IBM Plex Mono", monospace;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bronce);
  display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:1.1rem;
}
.codigo::before{
  content:""; width:26px; height:1px; background:var(--bronce);
}

/* ---------- Revelado al hacer scroll (solo si hay JS) ---------- */
html.js .revelar{ opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .revelar.visible{ opacity:1; transform:none; }
html.js .revelar[data-retraso="1"].visible{ transition-delay:.12s; }
html.js .revelar[data-retraso="2"].visible{ transition-delay:.24s; }
html.js .revelar[data-retraso="3"].visible{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js .revelar{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

/* ---------- Cabecera ---------- */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(11,23,38,0);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.cabecera.solida{
  background:rgba(11,23,38,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.45);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0; transition:padding .35s ease;
}
.cabecera.solida .cabecera__fila{ padding:.6rem 0; }

.marca{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.marca__insignia{
  width:46px; height:46px; border-radius:50%;
  background:var(--blanco); padding:4px;
  box-shadow:0 0 0 2px var(--bronce);
}
.marca__insignia img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.marca__sigla{
  font-family:"Sora", sans-serif; font-weight:800; font-size:1.3rem;
  color:var(--blanco); display:block; line-height:1.1; letter-spacing:.02em;
}
.marca__sub{
  font-family:"IBM Plex Mono", monospace; font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oro);
}

.nav{ display:flex; gap:2rem; align-items:center; }
.nav a{
  text-decoration:none; color:rgba(255,255,255,.85);
  font-size:.92rem; font-weight:500; position:relative; padding:.3rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--oro); transition:right .3s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav .nav__cta{
  background:var(--bronce); color:var(--blanco);
  padding:.6rem 1.4rem; border-radius:3px; font-weight:600;
  transition:transform .2s ease, background .2s ease;
}
.nav .nav__cta::after{ display:none; }
.nav .nav__cta:hover{ background:var(--oro); color:var(--tinta); transform:translateY(-2px); }

.nav-boton{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem;
}
.nav-boton span{ display:block; width:26px; height:2px; background:var(--blanco);
  margin:6px 0; transition:transform .3s ease, opacity .3s ease; }
.nav-abierta .nav-boton span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-abierta .nav-boton span:nth-child(2){ opacity:0; }
.nav-abierta .nav-boton span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-boton{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:rgba(11,23,38,.98); flex-direction:column; gap:0;
    align-items:stretch; padding:0 4vw;
    max-height:0; overflow:hidden; transition:max-height .4s ease;
  }
  .nav-abierta .nav{ max-height:420px; padding-bottom:1.2rem; }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--linea-osc); }
  .nav .nav__cta{ text-align:center; margin-top:1rem; }
}

/* ---------- Héroe ---------- */
.heroe{
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--tinta); color:var(--blanco); overflow:hidden;
  padding-top:90px;
}
.heroe__fondo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28;
  animation:deriva 28s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{ transform:scale(1) translateX(0); }
  to{ transform:scale(1.08) translateX(-1.5%); }
}
.heroe::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,23,38,.25) 0%, rgba(11,23,38,.05) 45%, var(--tinta) 100%);
}
.heroe__contenido{ position:relative; z-index:2; max-width:760px; }
.heroe h1{ color:var(--blanco); margin-bottom:.4em; }
.heroe h1 em{ font-style:normal; color:var(--oro); }
.heroe p.intro{ font-size:1.18rem; color:rgba(255,255,255,.82); max-width:56ch; }
.heroe .codigo{ color:var(--oro); }
.heroe .codigo::before{ background:var(--oro); }

.heroe__acciones{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.boton{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:var(--bronce); color:var(--blanco);
  padding:.95rem 2.1rem; border-radius:3px; border:none;
  font-family:"Sora", sans-serif; font-weight:600; font-size:.98rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.boton:hover{ background:var(--oro); color:var(--tinta);
  transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(212,180,92,.5); }
.boton--fantasma{
  background:transparent; border:1px solid rgba(255,255,255,.45); color:var(--blanco);
}
.boton--fantasma:hover{ background:rgba(255,255,255,.1); color:var(--blanco);
  border-color:var(--oro); box-shadow:none; }

/* ---------- Ruta animada (firma) ---------- */
.ruta{ position:relative; z-index:2; margin-top:4rem; padding-bottom:3rem; }
.ruta svg{ width:100%; height:auto; display:block; overflow:visible; }
.ruta .trazo{
  fill:none; stroke:var(--oro); stroke-width:1.6;
  stroke-dasharray:7 7;
  animation:flujo 1.6s linear infinite;
}
@keyframes flujo{ to{ stroke-dashoffset:-14; } }
.ruta .puerto{ fill:var(--oro); }
.ruta .anillo{ fill:none; stroke:var(--oro); stroke-width:1; opacity:.6;
  animation:pulso 2.6s ease-out infinite; transform-origin:center; }
@keyframes pulso{
  0%{ opacity:.7; } 70%{ opacity:0; } 100%{ opacity:0; }
}
.ruta text{
  font-family:"IBM Plex Mono", monospace; font-size:11px;
  fill:rgba(255,255,255,.75); letter-spacing:.12em; text-transform:uppercase;
}
.ruta .sub{ fill:rgba(255,255,255,.4); font-size:9px; }

/* ---------- Cinta de datos / contadores ---------- */
.cinta{
  background:var(--tinta-2); color:var(--blanco);
  border-top:1px solid var(--linea-osc);
}
.cinta__rejilla{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.cinta__celda{
  padding:2.2rem 1.6rem; text-align:center;
  border-left:1px solid var(--linea-osc);
}
.cinta__celda:first-child{ border-left:none; }
.cinta__cifra{
  font-family:"IBM Plex Mono", monospace; font-size:2.5rem; font-weight:600;
  color:var(--oro); line-height:1; display:block; margin-bottom:.45rem;
}
.cinta__celda small{
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
@media (max-width:700px){
  .cinta__celda{ border-left:none; border-top:1px solid var(--linea-osc); padding:1.5rem; }
  .cinta__celda:first-child{ border-top:none; }
}

/* ---------- Secciones ---------- */
.seccion{ padding:clamp(3.5rem, 8vw, 6.5rem) 0; }
.seccion--niebla{ background:var(--niebla); }
.seccion--tinta{ background:var(--tinta); color:rgba(255,255,255,.78); }
.seccion--tinta h2,.seccion--tinta h3{ color:var(--blanco); }
.seccion__intro{ max-width:60ch; margin-bottom:3rem; font-size:1.1rem; }

/* ---------- Tarjetas de servicio ---------- */
.servicios{
  display:grid; gap:1.8rem;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.tarjeta:hover{ transform:translateY(-8px); box-shadow:var(--sombra); }
.tarjeta__media{ overflow:hidden; height:210px; position:relative; }
.tarjeta__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.tarjeta:hover .tarjeta__media img{ transform:scale(1.07); }
.tarjeta__media .codigo{
  position:absolute; left:1rem; bottom:.8rem; margin:0;
  background:rgba(11,23,38,.85); color:var(--oro);
  padding:.3rem .7rem; border-radius:2px; backdrop-filter:blur(4px);
}
.tarjeta__media .codigo::before{ display:none; }
.tarjeta__cuerpo{ padding:1.7rem; flex:1; display:flex; flex-direction:column; }
.tarjeta__cuerpo p{ margin-top:0; }
.tarjeta ul{ margin:.5rem 0 1.3rem; padding:0; list-style:none; }
.tarjeta li{
  margin-bottom:.45rem; padding-left:1.4rem; position:relative; font-size:.97rem;
}
.tarjeta li::before{
  content:"—"; position:absolute; left:0; color:var(--bronce); font-weight:600;
}
.tarjeta .enlace{
  margin-top:auto; font-weight:600; text-decoration:none;
  font-family:"Sora", sans-serif; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.tarjeta .enlace::after{ content:"→"; transition:transform .25s ease; }
.tarjeta .enlace:hover::after{ transform:translateX(5px); }

/* ---------- Bloques alternados ---------- */
.bloque{
  display:grid; gap:3.5rem; align-items:center;
  grid-template-columns:1fr 1fr;
  padding:clamp(2.5rem, 5vw, 4.5rem) 0;
}
.bloque + .bloque{ border-top:1px solid var(--linea); }
.bloque--invertido .bloque__media{ order:2; }
.bloque__media{ position:relative; }
.bloque__media::before{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--bronce); border-radius:6px; z-index:0; opacity:.5;
}
.bloque__media img{
  position:relative; z-index:1; border-radius:6px;
  width:100%; height:360px; object-fit:cover; box-shadow:var(--sombra);
}
.bloque ul{ padding:0; list-style:none; }
.bloque li{ margin-bottom:.5rem; padding-left:1.5rem; position:relative; }
.bloque li::before{ content:"—"; position:absolute; left:0; color:var(--bronce); font-weight:600; }
@media (max-width:780px){
  .bloque{ grid-template-columns:1fr; gap:2rem; }
  .bloque--invertido .bloque__media{ order:0; }
  .bloque__media img{ height:240px; }
  .bloque__media::before{ inset:10px -10px -10px 10px; }
}

/* ---------- Valores (sellos de inspección) ---------- */
.valores{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.valor{
  position:relative; overflow:hidden;
  background:var(--blanco); border:1px solid var(--linea); border-radius:8px;
  padding:2rem 1.8rem 1.7rem;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.valor::before{
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--bronce), var(--oro));
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.valor:hover{ transform:translateY(-7px); box-shadow:var(--sombra); border-color:var(--bronce); }
.valor:hover::before{ width:100%; }

.valor__num{
  position:absolute; top:1.2rem; right:1.4rem;
  font-family:"IBM Plex Mono", monospace; font-size:.68rem;
  letter-spacing:.2em; color:var(--pizarra); opacity:.5;
  transition:color .3s ease, opacity .3s ease;
}
.valor:hover .valor__num{ color:var(--bronce); opacity:1; }

.valor__insignia{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--bronce); color:var(--bronce);
  margin-bottom:1.2rem; background:var(--niebla);
  transition:background .35s ease, color .35s ease, border-style .35s ease,
             transform .35s cubic-bezier(.34,1.56,.64,1);
}
.valor__insignia svg{ width:30px; height:30px; }
.valor:hover .valor__insignia{
  background:var(--bronce); color:var(--blanco);
  border-style:solid; transform:rotate(-8deg) scale(1.08);
}

/* Estampado al entrar en pantalla */
@keyframes sello{
  0%{ transform:scale(1.7) rotate(-10deg); opacity:0; }
  55%{ transform:scale(.94) rotate(2deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
html.js .valor .valor__insignia{ opacity:0; }
html.js .valor.visible .valor__insignia{
  animation:sello .6s cubic-bezier(.2,.7,.2,1) forwards;
}
html.js .valor.visible[data-retraso="1"] .valor__insignia{ animation-delay:.12s; }
html.js .valor.visible[data-retraso="2"] .valor__insignia{ animation-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  html.js .valor .valor__insignia{ opacity:1; animation:none!important; }
}

.valor h4{ margin:0 0 .35rem; font-size:1.12rem; }
.valor p{ margin:0; font-size:.93rem; line-height:1.55; }

/* ---------- Franja CTA ---------- */
.franja{ text-align:center; position:relative; overflow:hidden; }
.franja .codigo{ justify-content:center; color:var(--oro); }
.franja .codigo::before{ background:var(--oro); }
.franja p{ max-width:56ch; margin:0 auto 2.2rem; }

/* ---------- Contacto ---------- */
.contacto{ display:grid; gap:3.5rem; grid-template-columns:1fr 1.25fr; }
@media (max-width:840px){ .contacto{ grid-template-columns:1fr; } }

.dato{
  margin-bottom:1.2rem; padding:1.1rem 1.3rem;
  background:var(--blanco); border:1px solid var(--linea); border-radius:6px;
  transition:border-color .25s ease, transform .25s ease;
}
.dato:hover{ border-color:var(--bronce); transform:translateX(4px); }
.dato strong{
  display:block; font-family:"IBM Plex Mono", monospace; font-weight:500;
  color:var(--bronce); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:.25rem;
}
.dato a{ font-size:1.08rem; text-decoration:none; color:var(--tinta); font-weight:600; }
.dato a:hover{ color:var(--bronce); }

.formulario{
  background:var(--blanco); border:1px solid var(--linea); border-radius:8px;
  padding:2.2rem; box-shadow:var(--sombra);
}
.formulario label{
  display:block; font-weight:600; color:var(--tinta);
  margin:1.2rem 0 .4rem; font-size:.92rem;
  font-family:"Sora", sans-serif;
}
.formulario label:first-child{ margin-top:0; }
.formulario input,.formulario textarea{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--linea); border-radius:4px;
  font:inherit; color:var(--tinta); background:var(--niebla);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.formulario input:focus,.formulario textarea:focus{
  border-color:var(--bronce); background:var(--blanco);
  box-shadow:0 0 0 4px rgba(176,141,62,.15); outline:none;
}
.formulario .boton{ margin-top:1.7rem; width:100%; }
.campo-miel{ position:absolute; left:-9999px; }

.aviso{
  padding:1rem 1.2rem; border-radius:6px; margin-bottom:1.5rem;
  background:#EAF5EC; border:1px solid #BBDFC2; color:#1E5A2A; font-weight:500;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.65);
  transition:transform .25s ease;
}
.whatsapp:hover{ transform:scale(1.1); }
.whatsapp svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Pie ---------- */
.pie{
  background:var(--tinta); color:rgba(255,255,255,.7);
  padding:3.5rem 0 2rem; font-size:.95rem;
}
.pie__rejilla{ display:grid; gap:2.8rem; grid-template-columns:2fr 1fr 1fr; }
@media (max-width:760px){ .pie__rejilla{ grid-template-columns:1fr; } }
.pie h4{
  color:var(--blanco); font-size:.82rem; margin-bottom:1rem;
  font-family:"IBM Plex Mono", monospace; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.pie a{ color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s ease; }
.pie a:hover{ color:var(--oro); }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ margin-bottom:.55rem; }
.pie__legal{
  border-top:1px solid var(--linea-osc);
  margin-top:2.8rem; padding-top:1.3rem;
  font-size:.82rem; text-align:center; color:rgba(255,255,255,.4);
  font-family:"IBM Plex Mono", monospace;
}