/* DISTEC — Distribuidora Colombiana de Tecnología S.A.S.
   Estilos del sitio. Paleta tomada del logotipo. */

:root{
  --navy-900:#011E4A;
  --navy:#012B68;
  --cyan:#00A6FE;
  --cyan-soft:#9BDDFF;
  --slate:#5A6472;
  --mica:#EEF2F8;
  --blanco:#FFFFFF;

  --acrilico:rgba(255,255,255,.62);
  --acrilico-borde:rgba(255,255,255,.75);
  --sombra-1:0 1px 2px rgba(1,30,74,.10);
  --sombra-2:0 8px 24px rgba(1,30,74,.10), 0 2px 6px rgba(1,30,74,.06);
  --sombra-3:0 24px 64px rgba(1,30,74,.16), 0 4px 12px rgba(1,30,74,.08);

  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:24px;

  --fuente:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",
            -apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,"SFMono-Regular","Consolas",monospace;

  --ancho:1120px;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.6;
  color:var(--navy-900);
  background-color:var(--mica);
  background-image:
    radial-gradient(1100px 640px at 12% -8%, rgba(0,166,254,.20), transparent 62%),
    radial-gradient(900px 620px at 88% 4%, rgba(1,43,104,.16), transparent 60%),
    radial-gradient(1000px 700px at 50% 112%, rgba(0,166,254,.14), transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:99;
  background:var(--blanco);padding:10px 16px;border-radius:var(--r-md);
  box-shadow:var(--sombra-2);
}
.skip:focus{left:16px}

/* ---------- Barra superior ---------- */
.bar{
  position:fixed;inset:12px 12px auto 12px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 14px 10px 18px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--acrilico-borde);
  box-shadow:var(--sombra-1);
  transition:background .25s ease, box-shadow .25s ease;
}
.bar.es-fijo{background:rgba(255,255,255,.82);box-shadow:var(--sombra-2)}
.bar__brand img{width:132px;height:auto}
.bar__brand:hover{text-decoration:none}
.bar__nav{display:flex;align-items:center;gap:8px}
.bar__nav a{
  padding:8px 14px;border-radius:var(--r-md);
  font-size:15px;font-weight:600;color:var(--navy);
}
.bar__nav a:hover{background:rgba(1,43,104,.07);text-decoration:none}
.bar__cta{
  background:var(--navy);color:#fff !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);
}
.bar__cta:hover{background:#01234f}

/* ---------- Portada ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  padding:120px 20px 90px;
  overflow:hidden;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
}
.hero__panel{
  position:relative;z-index:2;
  width:min(760px,100%);
  text-align:center;
  padding:clamp(28px,5vw,52px) clamp(22px,5vw,56px);
  border-radius:var(--r-xl);
  background:var(--acrilico);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
  backdrop-filter:blur(34px) saturate(170%);
  border:1px solid var(--acrilico-borde);
  box-shadow:var(--sombra-3);
}
.hero__logo{
  width:clamp(190px,26vw,290px);
  margin:0 auto clamp(18px,3vw,28px);
}
.hero__title{
  margin:0 0 14px;
  font-size:clamp(2.05rem,5.6vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:700;
  color:var(--navy);
  text-wrap:balance;
}
.hero__sub{
  margin:0 auto;max-width:46ch;
  color:var(--slate);font-size:1.02rem;
}
.hero__acciones{
  margin-top:clamp(22px,3vw,32px);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.hero__hint{
  position:absolute;left:0;right:0;bottom:22px;z-index:2;
  text-align:center;font-size:13px;color:rgba(1,30,74,.55);
}

.btn{
  display:inline-block;padding:12px 24px;
  border-radius:var(--r-md);
  font-size:15px;font-weight:600;
  color:var(--navy);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(1,43,104,.16);
  box-shadow:var(--sombra-1);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{background:#fff;text-decoration:none;box-shadow:var(--sombra-2)}
.btn:active{transform:translateY(1px)}
.btn--accent{
  color:#fff;border-color:transparent;
  background:linear-gradient(180deg,var(--cyan) 0%,#0083D6 100%);
  box-shadow:0 6px 18px rgba(0,131,214,.35), inset 0 -1px 0 rgba(0,0,0,.22);
}
.btn--accent:hover{background:linear-gradient(180deg,#12B1FF 0%,#0089E0 100%)}

/* ---------- Datos de la empresa ---------- */
.datos{
  position:relative;z-index:2;
  scroll-margin-top:104px;
  max-width:var(--ancho);
  margin:0 auto;
  padding:clamp(60px,9vw,110px) 20px clamp(70px,9vw,120px);
}
.datos__h{
  margin:0 0 8px;
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  letter-spacing:-.02em;color:var(--navy);font-weight:700;
}
.datos__lead{margin:0 0 clamp(26px,4vw,40px);color:var(--slate);max-width:56ch}

.duo{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:min-content;
  gap:16px;
}
.card{
  position:relative;isolation:isolate;
  padding:22px 22px 18px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--sombra-2);
  display:flex;flex-direction:column;gap:6px;
  transition:box-shadow .25s ease;
}
.card--ancha{grid-column:span 2}
/* Resplandor Fluent que sigue al cursor */
.card::before{
  content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
             rgba(0,166,254,.20), rgba(0,166,254,0) 60%);
}
/* Borde iluminado (reveal) */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),
             rgba(0,166,254,.95), rgba(0,166,254,0) 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.card:hover::after,.card:focus-within::after{opacity:1}
.card:hover::before,.card:focus-within::before{opacity:1}
.card:hover{box-shadow:var(--sombra-3)}
.card__k{font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:.02em}
.card__v{margin:0;font-size:1.12rem;font-weight:600;color:var(--navy-900);line-height:1.35}
.card__v--mono{font-family:var(--mono);letter-spacing:.01em}
.card__act{
  align-self:flex-start;margin-top:10px;
  font:inherit;font-size:14px;font-weight:600;
  color:var(--navy);cursor:pointer;
  padding:7px 13px;border-radius:var(--r-sm);
  background:rgba(1,43,104,.06);
  border:1px solid rgba(1,43,104,.12);
  transition:background .18s ease,color .18s ease;
}
.card__act:hover{background:var(--navy);color:#fff;text-decoration:none}

/* ---------- Mapa ---------- */
.mapa{
  position:relative;isolation:isolate;margin:0;
  display:flex;flex-direction:column;
  min-height:340px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--sombra-2);
  transition:box-shadow .25s ease;
}
.mapa:hover{box-shadow:var(--sombra-3)}
.mapa__marco{
  flex:1 1 auto;width:100%;min-height:300px;border:0;display:block;
  filter:saturate(1.05);
}
.mapa__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;
  font-size:14.5px;color:var(--slate);
  border-top:1px solid rgba(1,43,104,.10);
  background:rgba(255,255,255,.55);
}
.mapa__link{
  font-weight:600;color:var(--navy);
  padding:6px 12px;border-radius:var(--r-sm);
  background:rgba(1,43,104,.06);
  border:1px solid rgba(1,43,104,.12);
  transition:background .18s ease,color .18s ease;
}
.mapa__link:hover{background:var(--navy);color:#fff;text-decoration:none}

/* ---------- Pie ---------- */
.pie{
  position:relative;z-index:2;
  background:var(--navy);color:rgba(255,255,255,.86);
  padding:clamp(38px,6vw,60px) 20px 26px;
  font-size:14.5px;
}
.pie__caja{
  max-width:var(--ancho);margin:0 auto;
  display:grid;gap:22px 40px;
  grid-template-columns:auto 1fr auto;
  align-items:start;
}
.pie::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 22%,rgba(255,255,255,.12) 22%);
}
.pie__logo{width:170px}
.pie__col p{margin:0 0 4px}
.pie a{color:var(--cyan-soft)}
.pie__legal{
  grid-column:1/-1;margin:8px 0 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:rgba(255,255,255,.62);
}

/* ---------- Aviso de copiado ---------- */
.aviso{
  position:fixed;left:50%;bottom:26px;z-index:60;
  transform:translate(-50%,14px);
  padding:11px 20px;border-radius:var(--r-md);
  background:rgba(1,30,74,.94);color:#fff;font-size:14.5px;font-weight:600;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--sombra-3);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.aviso.se-ve{opacity:1;transform:translate(-50%,0)}

/* ---------- Adaptable ---------- */
@media (max-width:980px){
  .duo{grid-template-columns:1fr}
  .mapa{min-height:320px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .card--ancha{grid-column:span 1}
}
@media (max-width:820px){
  .pie__caja{grid-template-columns:1fr}
  .bar{padding:8px 10px 8px 14px}
  .bar__brand img{width:112px}
  .bar__nav a{padding:8px 11px;font-size:14px}
}
@media (max-width:400px){
  .bar__nav a:not(.bar__cta){display:none}
}

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