/* Meridantis — landing corporativa. Tema unico (oscuro), sin modo claro:
   la marca vive sobre fondo oscuro (ver logos mono-fondo-negro/azul). */

:root{
  --bg:#0A121C;
  --bg-elevada:#101B2B;
  --bg-tarjeta:#0D1826;
  --linea:rgba(255,255,255,.09);
  --tinta:#EAF1F8;
  --tinta-tenue:#93A9C2;
  --tinta-debil:#5E7488;
  --acento:#2DD4E8;
  --acento-2:#4A93F5;
  --acento-profundo:#123B82;
  --radio:14px;
  --radio-pill:999px;
  --fuente-titulo:'Montserrat',system-ui,sans-serif;
  --fuente-texto:'Manrope',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--fuente-titulo);
  color:var(--tinta);
  margin:0;
  letter-spacing:-0.01em;
}

p{margin:0;color:var(--tinta-tenue);}

a{color:inherit;text-decoration:none;}

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

.salto{
  position:absolute;left:-9999px;top:0;
  background:var(--acento);color:#04141c;padding:.75rem 1rem;border-radius:0 0 8px 0;
  z-index:100;
}
.salto:focus{left:0;}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radio-pill);
  padding:.85rem 1.6rem;
  font-family:var(--fuente-texto);
  font-weight:700;
  font-size:.95rem;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s ease;
}
.boton--primario{
  background:linear-gradient(135deg,var(--acento-2),var(--acento));
  color:#04141c;
  box-shadow:0 8px 30px -10px rgba(45,212,232,.45);
}
.boton--primario:hover{transform:translateY(-2px);box-shadow:0 12px 34px -8px rgba(45,212,232,.6);}
.boton--primario:active{transform:translateY(0) scale(.98);}

.boton--fantasma{
  background:transparent;
  color:var(--tinta);
  border-color:var(--linea);
}
.boton--fantasma:hover{border-color:var(--acento);color:var(--acento);}
.boton--fantasma:active{transform:scale(.98);}

.boton--nav{padding:.6rem 1.3rem;font-size:.88rem;}
.boton--ancho{width:100%;}

/* ---------- Navegación ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:72px;
  display:flex;align-items:center;
  background:rgba(10,18,28,.7);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.nav--con-fondo{border-bottom-color:var(--linea);}

.nav__inner{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
}

.nav__marca{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--fuente-titulo);font-weight:700;font-size:1.05rem;
  flex-shrink:0;
}

.nav__links{
  display:flex;gap:2rem;
  flex:1;
  justify-content:center;
}
.nav__links a{
  font-size:.92rem;font-weight:600;color:var(--tinta-tenue);
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--tinta);}

.nav__hamburguesa{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;
  background:none;border:none;cursor:pointer;
  flex-shrink:0;
}
.nav__hamburguesa span{
  display:block;height:2px;width:22px;background:var(--tinta);
  transition:transform .25s ease, opacity .25s ease;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;
  padding:calc(72px + 4rem) 24px 4rem;
  overflow:hidden;
}

.hero__malla{
  position:absolute;
  top:0;right:-10%;
  width:70%;height:100%;
  opacity:.55;
  mask-image:linear-gradient(to left, black 30%, transparent 90%);
  -webkit-mask-image:linear-gradient(to left, black 30%, transparent 90%);
  pointer-events:none;
}
.hero__svg{width:100%;height:100%;}
.malla__lineas line{stroke:rgba(74,147,245,.35);stroke-width:1;}
.malla__nodos circle{fill:#2DD4E8;}

@media (prefers-reduced-motion: no-preference){
  .malla__lineas line{
    stroke-dasharray:4 340;
    animation:fluir 5.5s linear infinite;
  }
  .malla__nodos circle{
    animation:pulso 3.2s ease-in-out infinite;
  }
}
@keyframes fluir{ to{ stroke-dashoffset:-344; } }
@keyframes pulso{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.25); }
}

.hero__contenido{
  position:relative;z-index:1;
  max-width:640px;
}

.hero__titulo{
  font-size:clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight:800;
  line-height:1.12;
  margin-bottom:1.3rem;
}

.hero__subtitulo{
  font-size:1.15rem;
  color:var(--tinta-tenue);
  max-width:46ch;
  margin-bottom:2.2rem;
}

.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;}

.franja-confianza{
  text-align:center;
  padding:1.6rem 24px 3.2rem;
  color:var(--tinta-debil);
  font-size:.92rem;
  max-width:60ch;
  margin:0 auto;
}

/* ---------- Secciones genéricas ---------- */
.seccion{
  max-width:1320px;
  margin:0 auto;
  padding:5rem 24px;
}

.seccion__cabecera{
  max-width:640px;
  margin-bottom:3rem;
}
.seccion__cabecera h2{
  font-size:clamp(1.8rem,3vw,2.4rem);
  margin-bottom:.9rem;
}
.seccion__cabecera p{font-size:1.05rem;}

/* ---------- Bento plataformas ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,minmax(220px,auto));
  gap:1.25rem;
}
.bento__celda--grande{
  grid-column:span 2;
  grid-row:span 2;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.bento__celda{
  position:relative;
  background:var(--bg-tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:2rem;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:.7rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.bento__celda::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 85% -10%, var(--acento), transparent 55%);
  opacity:.16;
  pointer-events:none;
}
.bento__celda h3{
  font-size:1.3rem;
  color:var(--acento);
  filter:none;
}
.bento__celda--grande h3{font-size:1.7rem;}
.bento__celda p{font-size:.98rem;max-width:42ch;}

@media (hover:hover){
  .bento__celda:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--acento) 50%, var(--linea));
  }
}

@media (max-width:900px){
  .bento{grid-template-columns:1fr;grid-template-rows:none;}
  .bento__celda--grande{grid-column:auto;grid-row:auto;}
}

/* ---------- Diferenciadores ---------- */
.diferenciadores{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--linea);
}
.diferenciadores li{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:2rem;
  padding:2.2rem 0;
  border-bottom:1px solid var(--linea);
}
.diferenciadores__numero{
  font-family:var(--fuente-titulo);
  font-weight:800;
  font-size:1.6rem;
  color:var(--acento);
  opacity:.7;
}
.diferenciadores h3{font-size:1.25rem;margin-bottom:.5rem;}
.diferenciadores p{max-width:64ch;font-size:1.02rem;}

@media (max-width:700px){
  .diferenciadores li{grid-template-columns:1fr;gap:.6rem;}
}

/* ---------- Contacto ---------- */
.seccion--contacto{padding-bottom:7rem;}
.contacto__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
}
.contacto__texto h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:1rem;}
.contacto__texto p{font-size:1.05rem;margin-bottom:1.6rem;max-width:44ch;}
.contacto__correo{
  display:inline-block;
  font-family:var(--fuente-titulo);
  font-weight:700;
  font-size:1.15rem;
  color:var(--acento);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.contacto__correo:hover{border-color:var(--acento);}

.tarjeta-contacto{
  background:var(--bg-tarjeta);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:2rem;
  display:flex;flex-direction:column;gap:1.25rem;
}
.campo{display:flex;flex-direction:column;gap:.4rem;}
.campo label{font-size:.88rem;font-weight:600;color:var(--tinta-tenue);}
.campo input,.campo textarea{
  background:var(--bg-elevada);
  border:1px solid var(--linea);
  border-radius:8px;
  padding:.75rem .9rem;
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:.98rem;
  resize:vertical;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-debil);}
.campo input:focus,.campo textarea:focus{
  outline:2px solid var(--acento);
  outline-offset:1px;
  border-color:var(--acento);
}
.campo__error{color:#F2A65A;font-size:.85rem;}
.campo__estado{font-size:.92rem;color:var(--acento);}

@media (max-width:800px){
  .contacto__grid{grid-template-columns:1fr;}
}

/* ---------- Pie ---------- */
.pie{
  border-top:1px solid var(--linea);
  padding:3rem 24px;
}
.pie__inner{
  max-width:1320px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.pie__tagline{font-size:.85rem;letter-spacing:.06em;color:var(--tinta-debil);}
.pie__legal{font-size:.82rem;color:var(--tinta-debil);}

/* ---------- Revelado en scroll ---------- */
.revelar{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.revelar.revelar--visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .revelar{opacity:1;transform:none;transition:none;}
}

/* ---------- Menú móvil ---------- */
@media (max-width:860px){
  .nav__links{
    position:fixed;top:72px;left:0;right:0;
    flex-direction:column;
    background:var(--bg-elevada);
    padding:1.5rem 24px;
    border-bottom:1px solid var(--linea);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav__links.nav__links--abierto{
    opacity:1;transform:none;pointer-events:auto;
  }
  .nav__hamburguesa{display:flex;}
  .boton--nav{display:none;}
}