/* ============================================================
   EMPREMAR LA — Sistema visual
   Azul de marca #20A1DA · Azul profundo #025F8B · Tinta #070B10
   ============================================================ */

:root{
  --azul:        #20A1DA;
  --azul-claro:  #6FCBEF;
  --azul-deep:   #025F8B;
  --azul-glow:   rgba(32,161,218,.45);

  --tinta:       #070B10;
  --tinta-2:     #0C1219;
  --linea-o:     rgba(255,255,255,.09);

  --niebla:      #F3F6F9;
  --niebla-2:    #E4EBF1;
  --blanco:      #FFFFFF;
  --gris:        #556676;
  --gris-claro:  #93A5B4;

  --max: 1220px;
  --gutter: clamp(20px, 5vw, 60px);
  --seccion: clamp(84px, 10vw, 152px);

  --display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radio: 6px;
  --radio-g: 14px;
  --borde: 1px solid var(--niebla-2);
  --borde-oscuro: 1px solid var(--linea-o);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --trans: 200ms var(--ease-out);
  --suave: 700ms var(--ease-out);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:hidden; overflow-x:clip; }

body{
  margin:0;
  background:var(--tinta);
  color:var(--tinta);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; }
button, a, [role="button"]{ touch-action:manipulation; }
button, .btn, .galeria__item, .wa, .cliente--cta{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin:0;
}
h1{ font-size:clamp(2.7rem, 7vw, 5.4rem); }
h2{ font-size:clamp(2.1rem, 5vw, 3.7rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); font-weight:500; letter-spacing:-.012em; line-height:1.25; }
p{ margin:0; }

/* ---------- animaciones ---------- */
html[data-anim="on"] [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--suave), transform var(--suave);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
html[data-anim="on"] [data-reveal].visto{ opacity:1; transform:none; }
html[data-anim="on"] [data-reveal][data-dir="izq"]{ transform:translate3d(-34px, 18px, 0); }
html[data-anim="on"] [data-reveal][data-dir="der"]{ transform:translate3d(34px, 18px, 0); }
html[data-anim="on"] [data-reveal][data-dir].visto{ transform:none; }

/* titulares palabra por palabra */
.pal{
  display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.09em; margin-bottom:-.09em;
  transform:skewX(var(--sk,0deg)) translateY(var(--ty,0px));
}
.pal__i{ display:inline-block; }
html[data-anim="on"] .pal__i{
  transform:translateY(110%); opacity:.001;
  transition:transform 700ms var(--ease-out), opacity 500ms ease;
  transition-delay:var(--pd, 0ms);
}
html[data-anim="on"] [data-split].visto .pal__i{ transform:none; opacity:1; }

html[data-anim="on"] .zoom img{ transform:scale(1.2); transition:transform 1100ms var(--ease-out); }
html[data-anim="on"] .zoom.visto img{ transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html[data-anim="on"] [data-reveal],
  html[data-anim="on"] [data-reveal].visto{ opacity:1; transform:none; transition:none; }
  html[data-anim="on"] .zoom img,
  html[data-anim="on"] .zoom.visto img{ transform:none; transition:none; }
  html[data-anim="on"] .pal__i{ transform:none; opacity:1; transition:none; }
  html[data-anim="on"] [data-reveal][data-dir]{ transform:none; }
  .pal{ transform:none; }
  *{ animation:none !important; }
}

/* ---------- utilidades ---------- */
.contenedor{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.seccion{ padding-block:var(--seccion); position:relative; }

.seccion--oscura{
  background:var(--tinta); color:#C9D6E0;
  border-top:1px solid rgba(255,255,255,.06);
}
.seccion--oscura h2,.seccion--oscura h3{ color:var(--blanco); }
.seccion--clara{ background:var(--blanco); color:var(--tinta); }
.seccion--niebla{
  background:linear-gradient(180deg, var(--niebla) 0%, #FFFFFF 100%);
  color:var(--tinta);
}

.seccion > .contenedor{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--azul-deep);
  display:flex; align-items:center; gap:.8rem;
  margin:0 0 1.5rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; opacity:.7; }
.seccion--oscura .eyebrow,.banda .eyebrow{ color:var(--azul-claro); }

.encabezado{ max-width:46ch; margin-bottom:clamp(2.8rem,5vw,4.5rem); }
.encabezado p{ margin-top:1.3rem; color:var(--gris); font-size:1.06rem; max-width:58ch; }
.seccion--oscura .encabezado p{ color:var(--gris-claro); }

/* ---------- botones ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-size:.95rem; font-weight:500;
  padding:.95em 1.8em; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans), border-color var(--trans);
}
.btn--primario{ background:var(--azul); color:#04212F; box-shadow:0 8px 26px -8px var(--azul-glow); }
@media (hover:hover) and (pointer:fine){ .btn--primario:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px var(--azul-glow); background:var(--azul-claro); } }
.btn--fantasma{ border-color:rgba(255,255,255,.22); color:var(--blanco); }
@media (hover:hover) and (pointer:fine){ .btn--fantasma:hover{ border-color:var(--azul); background:rgba(32,161,218,.1); transform:translateY(-2px); } }
.btn--oscuro{ background:var(--tinta); color:var(--blanco); }
@media (hover:hover) and (pointer:fine){ .btn--oscuro:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(7,11,16,.6); } }
.btn svg{ flex:none; transition:transform var(--trans); }
@media (hover:hover) and (pointer:fine){ .btn:hover svg{ transform:translateX(3px); } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:env(safe-area-inset-top, 0px); left:0; right:0; z-index:80;
  transition:background var(--trans), border-color var(--trans);
  border-bottom:1px solid transparent;
}
.nav.compacto{
  background:rgba(7,11,16,.82);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--linea-o);
}
.nav__inner{ display:flex; align-items:center; gap:1.5rem; min-height:78px; transition:min-height var(--trans); }
.nav.compacto .nav__inner{ min-height:64px; }
.nav__marca{ display:flex; align-items:center; gap:.75rem; margin-right:auto; }
.nav__marca img{ height:28px; width:auto; }
.nav__marca span{
  font-family:var(--display); font-size:1.05rem; font-weight:400;
  letter-spacing:.3em; color:var(--blanco); text-transform:uppercase;
}
.nav__links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.88rem; color:rgba(255,255,255,.66); position:relative; padding-block:.45rem;
  transition:color var(--trans);
}
@media (hover:hover) and (pointer:fine){ .nav__links a:hover{ color:var(--blanco); } }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--azul); transition:width var(--trans);
}
@media (hover:hover) and (pointer:fine){ .nav__links a:hover::after{ width:100%; } }
.nav__links a.activo{ color:var(--blanco); }
.nav__links a.activo::after{ width:100%; }
.nav__cta{ padding:.62em 1.3em; font-size:.87rem; }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; color:var(--blanco); }
.nav__toggle svg{ display:block; }
.nav__barra{
  position:absolute; left:0; bottom:-1px; height:2px; width:var(--progreso, 0%);
  background:linear-gradient(90deg, var(--azul-deep), var(--azul));
  opacity:0; transition:opacity var(--trans);
}
.nav.compacto .nav__barra{ opacity:1; }

@media (max-width: 960px){
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:rgba(7,11,16,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--linea-o);
    padding:.5rem var(--gutter) 1.5rem;
  }
  .nav__links[hidden]{ display:none; }
  .nav__links a{ display:block; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.98rem; }
  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--tinta); color:#C9D6E0;
  padding-block:clamp(128px, 16vw, 196px) clamp(72px, 9vw, 110px);
}
.hero__fondo{ position:absolute; inset:-20% -6%; z-index:-2; }
.hero__fondo img{
  width:100%; height:100%; object-fit:cover; opacity:.5;
  transform:scale(1.14);
  animation:kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.14) translate3d(0,0,0); }
  to{ transform:scale(1.32) translate3d(-2.5%, -2.5%, 0); }
}
.hero__velo{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 620px at 78% 10%, rgba(32,161,218,.10), transparent 60%),
    radial-gradient(900px 500px at 6% 94%, rgba(2,95,139,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,11,16,.95) 0%, rgba(7,11,16,.80) 45%, var(--tinta) 100%);
}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,62rem);
  gap:clamp(2rem, 5vw, 5rem); align-items:center;
  will-change:transform, opacity;
}
.hero__fondo, .banda__fondo, .hero__visual{ will-change:transform; }
.hero h1{ color:var(--blanco); }
.hero h1 .destacado{
  background:linear-gradient(100deg, var(--azul) 10%, var(--azul-claro) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ margin-top:1.8rem; max-width:50ch; color:#AEBECB; font-size:clamp(1.02rem,1.5vw,1.15rem); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem; }

.hero__datos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem;
  margin-top:3.4rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.14);
}
.hero__dato b{
  display:block; font-family:var(--display); font-size:clamp(1.35rem,2.4vw,1.95rem);
  font-weight:300; color:var(--blanco); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hero__dato span{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris-claro);
}

.hero__visual{ position:relative; width:100%; margin-top:clamp(1rem,4vw,3rem); }

/* ============================================================
   HERO VISUAL: foto MacBook, entrada cinematografica
   ============================================================ */
.hero__foto{
  position:absolute; left:31%; top:50%; width:74%; transform:translateY(-64%); z-index:-1; display:block;
  mix-blend-mode:lighten; pointer-events:none;
}
.hero__foto img{
  display:block; width:100%; height:auto;
  opacity:0; transform:scale(1.06); filter:blur(10px);
  animation:fotoEntra 2000ms cubic-bezier(.22,.8,.2,1) 150ms forwards;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);
          mask-image:linear-gradient(180deg,transparent 0,#000 30%);
}
@keyframes fotoEntra{ to{ opacity:1; transform:none; filter:brightness(2.6) contrast(1.05); } }
@media (prefers-reduced-motion: reduce){ .hero__foto img{ animation:none; opacity:1; transform:none; filter:brightness(2.6) contrast(1.05); } }
.hero{ min-height:min(100vh, 62vw); min-height:min(100svh, 62vw); display:flex; align-items:center; }
.hero__grid{ width:100%; }
.hero__texto{ max-width:31rem; }
.hero h1{ font-size:clamp(2.1rem,3.5vw,3.3rem); font-weight:300; line-height:1.12; letter-spacing:-.02em; }
.hero .eyebrow{ margin-bottom:1.6rem; }
.hero__lead{ margin-top:1.4rem; font-size:1rem; max-width:40ch; }
.hero__acciones{ margin-top:2.2rem; }
.hero__datos{
  display:flex; flex-wrap:wrap; gap:.4rem 2.2rem; margin-top:3.2rem; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero__dato b{ display:inline; font-family:var(--display); font-size:.95rem; font-weight:400; color:#E6EDF3; letter-spacing:0; }
.hero__dato span{ display:block; margin-top:.2rem; }

@media (max-width: 960px){
  .hero{ display:block; min-height:0; padding-block:112px calc(52vw + 24px); }
  .hero__foto{ top:auto; bottom:0; width:100%; transform:none; }
  .hero__texto{ max-width:none; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__datos{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   MARQUEE CLIENTES
   ============================================================ */
.marquee{
  background:var(--niebla); border-bottom:var(--borde);
  padding-block:2.8rem; overflow:hidden;
}
.marquee__titulo{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gris); text-align:center; margin:0 0 2rem;
}
.marquee__mask{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__pista{
  display:flex; width:max-content; gap:clamp(2.6rem,6vw,5rem); align-items:center;
  animation:desliza 40s linear infinite;
}
@media (hover:hover) and (pointer:fine){ .marquee:hover .marquee__pista{ animation-play-state:paused; } }
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee__pista img{
  max-height:40px; max-width:150px; width:auto; flex:none;
  opacity:.72; transition:opacity var(--trans), transform var(--trans);
}
@media (hover:hover) and (pointer:fine){ .marquee__pista img:hover{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .marquee__pista{ animation:none; } }

/* ============================================================
   SERVICIOS
   ============================================================ */
.servicios{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
.servicio{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--blanco); border:var(--borde); border-radius:var(--radio-g);
  padding:2.4rem 2rem 2.6rem;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.servicio::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(420px 320px at var(--mx,50%) var(--my,0%), rgba(32,161,218,.14), transparent 70%);
  transition:opacity var(--trans);
}
@media (hover:hover) and (pointer:fine){ .servicio:hover{ transform:translateY(-6px); border-color:rgba(32,161,218,.4); box-shadow:0 26px 60px -30px rgba(7,11,16,.45); } }
@media (hover:hover) and (pointer:fine){ .servicio:hover::before{ opacity:1; } }
.servicio{ display:flex; flex-direction:column; padding:2.2rem 2rem 2rem; }
.servicio__num{
  position:absolute; top:1.3rem; right:1.6rem; z-index:-1;
  font-family:var(--display); font-weight:200; font-size:4.6rem; line-height:1;
  color:var(--niebla-2); letter-spacing:-.04em; transition:color var(--trans), transform var(--trans);
}
@media (hover:hover) and (pointer:fine){ .servicio:hover .servicio__num{ color:rgba(32,161,218,.22); transform:translateY(-4px); } }
.servicio__icono{
  width:56px; height:56px; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(32,161,218,.18), rgba(2,95,139,.08));
  border:1px solid rgba(32,161,218,.22);
  color:var(--azul-deep); border-radius:16px; margin-bottom:1.6rem;
  transition:transform var(--trans), background var(--trans), color var(--trans);
}
@media (hover:hover) and (pointer:fine){ .servicio:hover .servicio__icono{ transform:scale(1.08) rotate(-3deg); background:var(--azul); color:#fff; } }
.servicio__sub{
  margin:0 0 .45rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--azul-deep);
}
.servicio h3{ margin-bottom:.8rem; font-size:1.55rem; }
.servicio__desc{ color:var(--gris); font-size:.96rem; }
.servicio ul{
  list-style:none; margin:1.5rem 0 1.6rem; padding:1.4rem 0 0; border-top:var(--borde);
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.servicio li{
  font-size:.8rem; color:#31424F; padding:.38rem .8rem; border-radius:999px;
  background:var(--niebla); border:1px solid var(--niebla-2);
  transition:border-color var(--trans), background var(--trans);
}
@media (hover:hover) and (pointer:fine){ .servicio:hover li{ background:#fff; border-color:rgba(32,161,218,.28); } }
.servicio__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-weight:600; font-size:.9rem; color:var(--azul-deep);
}
.servicio__link svg{ transition:transform var(--trans); }
@media (hover:hover) and (pointer:fine){ .servicio__link:hover svg{ transform:translateX(5px); } }

.servicios__cta{
  margin-top:1.6rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:2rem 2.4rem; border-radius:var(--radio-g);
  background:linear-gradient(120deg, var(--tinta) 0%, #0F2433 100%); color:#C9D6E0;
  position:relative; overflow:hidden;
}
.servicios__cta::after{
  content:""; position:absolute; right:-80px; top:-120px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(32,161,218,.35), transparent 70%); pointer-events:none;
}
.servicios__cta h3{ color:#fff; font-size:1.4rem; margin-bottom:.3rem; }
.servicios__cta p{ margin:0; color:#AEBECB; max-width:48ch; }
.servicios__cta .btn{ position:relative; z-index:1; }
@media (max-width: 1100px){ .servicios{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px){ .servicios{ grid-template-columns:1fr; } .servicios__cta{ padding:1.6rem; } }

/* ============================================================
   DISEÑO WEB — bento
   ============================================================ */
.web__layout{
  display:grid; grid-template-columns:.88fr 1.12fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.web__aside{ position:sticky; top:118px; align-self:start; }
.web__aside h2{ font-size:clamp(1.95rem, 3.1vw, 2.9rem); }
.web__texto{ color:var(--gris-claro); font-size:1.04rem; margin-top:1.4rem; }
.web__cta{ margin-top:2rem; }

.bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.tile{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:var(--borde-oscuro); border-radius:var(--radio-g);
  padding:1.9rem 1.7rem 2rem;
  transition:transform var(--trans), border-color var(--trans);
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(400px 300px at var(--mx,50%) var(--my,0%), rgba(32,161,218,.18), transparent 68%);
  transition:opacity var(--trans);
}
@media (hover:hover) and (pointer:fine){ .tile:hover{ transform:translateY(-4px); border-color:rgba(32,161,218,.38); } }
@media (hover:hover) and (pointer:fine){ .tile:hover::before{ opacity:1; } }
.tile h3{ font-size:1.12rem; margin-bottom:.5rem; }
.tile p{ color:var(--gris-claro); font-size:.92rem; }
.tile > svg{ color:var(--azul); margin-bottom:1.2rem; }
.tile--2{ grid-column:span 1; }
.tile--3{ grid-column:span 2; }
.tile--foto{ padding:0; min-height:270px; }
.tile__img{ position:absolute; inset:0; overflow:hidden; z-index:-2; }
.tile__img img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%; opacity:.45;
  transition:transform 1200ms cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){ .tile--foto:hover .tile__img img{ transform:scale(1.08); } }
.tile__cuerpo{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.9rem 1.7rem 2rem;
  background:linear-gradient(180deg, transparent 18%, rgba(7,11,16,.86) 95%);
}
.tile--foto h3{ font-size:1.35rem; }
@media (max-width: 1040px){
  .web__layout{ grid-template-columns:1fr; gap:2.6rem; }
  .web__aside{ position:static; }
  .web__texto{ max-width:62ch; }
}
@media (max-width: 580px){
  .bento{ grid-template-columns:1fr; }
  .tile--2,.tile--3{ grid-column:span 1; }
}

/* ---------- hosting ---------- */
.hosting{
  margin-top:clamp(3rem,6vw,5rem); position:relative; overflow:hidden;
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  background:
    radial-gradient(700px 400px at 12% 0%, rgba(32,161,218,.2), transparent 62%),
    linear-gradient(140deg, rgba(2,95,139,.22), rgba(255,255,255,.03));
  border:var(--borde-oscuro); border-radius:20px;
  padding:clamp(2rem,4.5vw,3.4rem);
}
.hosting h3{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:300; letter-spacing:-.02em; margin-bottom:1.1rem; }
.hosting > div > p{ color:#B9C8D4; }
.hosting .btn{ margin-top:1.9rem; }
.hosting__lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; }
.hosting__lista li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:#D5E1EA; }
.hosting__lista svg{ flex:none; color:var(--azul); margin-top:.3em; }
@media (max-width: 960px){ .hosting{ grid-template-columns:1fr; } .hosting__lista{ grid-template-columns:1fr; } }

/* ============================================================
   EQUIPOS
   ============================================================ */
.equipos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; }
.equipo{
  background:var(--blanco); border:var(--borde); border-radius:var(--radio-g);
  padding:1.3rem 1.3rem 1.7rem; display:flex; flex-direction:column;
  transition:transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
@media (hover:hover) and (pointer:fine){ .equipo:hover{ transform:translateY(-6px); border-color:rgba(32,161,218,.4); box-shadow:0 26px 55px -30px rgba(7,11,16,.4); } }
.equipo__img{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:10px;
  margin-bottom:1.3rem; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 12%, #FFFFFF 0%, var(--niebla) 70%, var(--niebla-2) 100%);
}
.equipo__img img{
  max-height:86%; max-width:86%; width:auto; object-fit:contain;
  transition:transform 900ms cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){ .equipo:hover .equipo__img img{ transform:scale(1.1); } }
.equipo--foto .equipo__img{ background:#05080B; }
.equipo--foto .equipo__img img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; }
.equipo h3{ font-size:1.05rem; margin-bottom:.4rem; }
.equipo p{ font-size:.88rem; color:var(--gris); }

.camaras{
  margin-top:1.2rem; position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center;
  background:radial-gradient(600px 300px at 90% 0%, rgba(32,161,218,.2), transparent 65%), var(--tinta);
  color:#C9D6E0; border-radius:var(--radio-g); padding:clamp(1.6rem,3.5vw,2.4rem);
}
.camaras__icono{
  width:56px; height:56px; display:grid; place-items:center; flex:none;
  background:rgba(32,161,218,.16); border:1px solid rgba(32,161,218,.3);
  color:var(--azul-claro); border-radius:14px;
}
.camaras h3{ color:var(--blanco); font-size:1.25rem; margin-bottom:.35rem; }
.camaras p{ color:var(--gris-claro); font-size:.93rem; max-width:66ch; }
@media (max-width: 1040px){ .equipos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){
  .equipos{ grid-template-columns:1fr; }
  .camaras{ grid-template-columns:1fr; }
}

/* ---------- galería de trabajos realizados ---------- */
.galeria{ margin-top:3.4rem; }
.galeria__cab{ max-width:60ch; margin-bottom:1.6rem; }
.galeria__cab h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:.4rem 0 .5rem; }
.galeria__cab p{ color:var(--gris); font-size:.96rem; }

.galeria__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:190px; gap:.9rem;
}
.galeria__item{
  position:relative; grid-column:span 1; grid-row:span 1; overflow:hidden;
  border:0; padding:0; margin:0; border-radius:var(--radio-g); cursor:zoom-in;
  background:var(--tinta); display:block; width:100%; height:100%;
  transition:transform var(--trans), box-shadow var(--trans);
}
.galeria__item--grande{ grid-column:span 2; grid-row:span 2; }
@media (hover:hover) and (pointer:fine){ .galeria__item:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -28px rgba(7,11,16,.45); } }
.galeria__item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 900ms cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) and (pointer:fine){ .galeria__item:hover img{ transform:scale(1.08); } }
.galeria__item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(3,6,10,.72) 0%, rgba(3,6,10,0) 42%);
}
.galeria__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:1; text-align:left;
  padding:1rem 1.1rem; color:var(--blanco); font-size:.86rem; font-weight:500;
  letter-spacing:-.01em; line-height:1.3;
}
.galeria__play{
  position:absolute; top:50%; left:50%; z-index:1; width:56px; height:56px;
  translate:-50% -50%; border-radius:50%; display:grid; place-items:center;
  background:rgba(3,6,10,.5); border:1px solid rgba(255,255,255,.35);
  color:var(--blanco); backdrop-filter:blur(2px);
  transition:transform var(--trans), background var(--trans);
}
.galeria__play svg{ margin-left:3px; }
@media (hover:hover) and (pointer:fine){ .galeria__item--video:hover .galeria__play{ transform:translate(-50%,-50%) scale(1.1); background:var(--azul); } }
@media (max-width: 960px){
  .galeria__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:220px; }
  .galeria__item--grande{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width: 560px){
  .galeria__grid{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .galeria__item--grande{ grid-column:span 1; }
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity 280ms ease;
}
.lightbox.abierto{ opacity:1; pointer-events:auto; }
.lightbox__velo{ position:absolute; inset:0; background:rgba(3,6,10,.9); backdrop-filter:blur(6px); }
.lightbox__marco{
  position:relative; z-index:1; max-width:min(88vw,760px); max-height:86vh; margin:0;
  display:flex; flex-direction:column; align-items:center;
  transform:scale(.96); transition:transform 280ms cubic-bezier(.16,1,.3,1);
}
.lightbox.abierto .lightbox__marco{ transform:scale(1); }
.lightbox__marco img,
.lightbox__marco video{
  max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain;
  border-radius:10px; box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
}
.lightbox__marco video{ background:#000; display:none; }
.lightbox__marco.es-video img{ display:none; }
.lightbox__marco.es-video video{ display:block; }
.lightbox__marco figcaption{
  color:var(--gris-claro); font-size:.9rem; margin-top:.9rem; text-align:center; max-width:60ch;
}
.lightbox__cerrar{
  position:absolute; top:1.4rem; right:1.4rem; z-index:2; width:42px; height:42px;
  display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:var(--blanco); cursor:pointer; transition:background var(--trans);
}
@media (hover:hover) and (pointer:fine){ .lightbox__cerrar:hover{ background:rgba(255,255,255,.16); } }
.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2; width:46px; height:46px;
  display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:var(--blanco); cursor:pointer; transition:background var(--trans);
}
@media (hover:hover) and (pointer:fine){ .lightbox__nav:hover{ background:rgba(255,255,255,.16); } }
.lightbox__nav--prev{ left:1.4rem; }
.lightbox__nav--next{ right:1.4rem; }
@media (max-width: 620px){
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__nav--prev{ left:.6rem; }
  .lightbox__nav--next{ right:.6rem; }
  .lightbox__cerrar{ top:.9rem; right:.9rem; }
}

/* ============================================================
   BANDA BRANDING (parallax)
   ============================================================ */
.banda{ position:relative; overflow:hidden; color:var(--blanco); padding-block:clamp(90px,11vw,150px); background:var(--tinta); }
.banda__fondo{ position:absolute; inset:-22% 0; z-index:0; }
.banda__fondo img{ width:100%; height:100%; object-fit:cover; opacity:.38; }
.banda::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(800px 420px at 20% 40%, rgba(32,161,218,.24), transparent 62%),
    linear-gradient(90deg, rgba(7,11,16,.95) 0%, rgba(7,11,16,.75) 52%, rgba(7,11,16,.5) 100%);
}
.banda__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.25fr auto; gap:2.5rem; align-items:center; }
.banda h2{ max-width:17ch; }
.banda p{ margin-top:1.4rem; color:#C0CEDA; max-width:56ch; }
@media (max-width: 880px){ .banda__inner{ grid-template-columns:1fr; } }

/* ============================================================
   CLIENTES
   ============================================================ */
.clientes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.cliente{
  aspect-ratio:16/10; min-width:0; display:grid; place-items:center; padding:1.4rem;
  background:var(--blanco); border:var(--borde); border-radius:var(--radio-g);
  transition:transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
@media (hover:hover) and (pointer:fine){ .cliente:hover{ transform:translateY(-5px); border-color:rgba(32,161,218,.38); box-shadow:0 22px 46px -28px rgba(7,11,16,.4); } }
.cliente img{
  max-height:62px; max-width:74%; width:auto; object-fit:contain;
  opacity:.88; transition:opacity var(--trans), transform var(--trans);
}
@media (hover:hover) and (pointer:fine){ .cliente:hover img{ opacity:1; transform:scale(1.07); } }
.logo-insignia{ border-radius:7px; }

.cliente--cta{
  background:linear-gradient(150deg, var(--tinta) 0%, #0F1922 100%);
  border-color:transparent; color:var(--blanco); text-align:center; gap:.5rem;
  align-content:center;
}
.cliente--cta b{ font-family:var(--display); font-weight:400; font-size:1.15rem; letter-spacing:-.01em; }
.cliente--cta span{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--azul-claro);
}
@media (max-width: 960px){ .clientes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2.4rem,5vw,5rem); }
.datos{ list-style:none; margin:2.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.dato{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center;
  padding:1rem 1.1rem; border:var(--borde-oscuro); border-radius:var(--radio-g);
  background:rgba(255,255,255,.025);
  transition:border-color var(--trans), background var(--trans), transform var(--trans);
}
@media (hover:hover) and (pointer:fine){ .dato:hover{ border-color:rgba(32,161,218,.35); background:rgba(32,161,218,.06); transform:translateX(3px); } }
.dato__icono{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  border:1px solid rgba(32,161,218,.25); background:rgba(32,161,218,.1);
  border-radius:12px; color:var(--azul-claro);
}
.dato dt{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gris-claro); margin-bottom:.15rem;
}
.dato dd{ margin:0; font-size:1.02rem; color:var(--blanco); }
.dato dd a{ transition:color var(--trans); }
@media (hover:hover) and (pointer:fine){ .dato dd a:hover{ color:var(--azul-claro); } }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:var(--borde-oscuro); border-radius:20px; padding:clamp(1.6rem,3.5vw,2.4rem);
  align-content:start;
}
.campo{ display:flex; flex-direction:column; gap:.45rem; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris-claro);
}
.campo input,.campo select,.campo textarea{
  font-family:var(--body); font-size:16px; color:var(--blanco);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:.85rem .95rem; width:100%;
  transition:border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.campo textarea{ resize:vertical; min-height:118px; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); background:rgba(32,161,218,.08);
  box-shadow:0 0 0 4px rgba(32,161,218,.12);
}
.campo select option{ background:var(--tinta-2); color:var(--blanco); }
.form__acciones{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.8rem; }
.btn--wa{ background:#25D366; color:#052B13; }
@media (hover:hover) and (pointer:fine){ .btn--wa:hover{ background:#43E37E; transform:translateY(-2px); } }
.form__nota{ grid-column:1 / -1; font-size:.82rem; color:var(--gris-claro); margin:0; }
@media (max-width: 880px){ .contacto__grid{ grid-template-columns:1fr; } .form{ grid-template-columns:1fr; } }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa{
  position:fixed; right:18px; z-index:90;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:.6rem;
  background:#25D366; color:#052B13; font-weight:600; font-size:.9rem;
  padding:.85rem 1.15rem; border-radius:100px;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.55);
  transform:translateY(130%); opacity:0;
  transition:transform 420ms cubic-bezier(.16,1,.3,1), opacity 420ms, box-shadow var(--trans);
}
.wa.visible{ transform:none; opacity:1; }
@media (hover:hover) and (pointer:fine){ .wa:hover{ box-shadow:0 20px 44px -10px rgba(37,211,102,.7); } }
.wa svg{ flex:none; }
@media (max-width: 560px){ .wa span{ display:none; } .wa{ padding:.95rem; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#04070A; color:var(--gris-claro); padding-block:3.4rem 2.4rem; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__marca{ display:flex; align-items:center; gap:.8rem; }
.footer__marca img{ height:32px; width:auto; }
.footer__marca span{
  font-family:var(--display); letter-spacing:.3em; color:var(--blanco);
  text-transform:uppercase; font-size:.95rem;
}
.footer__links{ display:flex; flex-wrap:wrap; gap:1.5rem; list-style:none; margin:0; padding:0; font-size:.88rem; }
.footer__links a{ transition:color var(--trans); }
@media (hover:hover) and (pointer:fine){ .footer__links a:hover{ color:var(--azul-claro); } }
.footer__legal{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:.8rem; }
.footer__legal p{ margin:0; }

/* ============================================================
   Feedback al presionar (táctil y mouse)
   ============================================================ */
.btn:active, .btn:hover:active{ transform:scale(.97); transition-duration:100ms; }
.galeria__item:active, .galeria__item:hover:active{ transform:scale(.985); transition-duration:100ms; }
.cliente--cta:active, .cliente--cta:hover:active{ transform:scale(.97); transition-duration:100ms; }
.nav__toggle:active{ transform:scale(.92); }
.wa.visible:active{ transform:scale(.95); }
@media (prefers-reduced-motion: reduce){
  .btn:active, .galeria__item:active, .cliente--cta:active, .nav__toggle:active, .wa.visible:active{ transform:none; }
}