/* ==========================================================================
   Sistemas VMP - Sistema de diseno v2
   --------------------------------------------------------------------------
   Reglas aplicadas (taste-skill + impeccable + emil-design-eng):
   - Acento unico: morado de marca #7C1FD1. Override documentado de la LILA RULE:
     el morado proviene del logotipo del cliente, no es eleccion por defecto.
   - Sin texto morado en titulares, sin gradiente de texto, sin glows de color.
   - Sombras neutras. Borde definido o sombra, nunca ambos con blur amplio.
   - Escala de radios: botones pill, tarjetas 16px, paneles 20px, inputs 10px.
   - Escala tipografica: cuerpo 17px, h3 25.6px, h2 33.6px, h1 43.2px.
   - Easing propio, transiciones por propiedad, :active en todo lo pulsable.
   ========================================================================== */

:root{
  /* acento de marca (unico) */
  --accent:#7C1FD1;
  --accent-hi:#8F2EE6;
  --accent-tint:rgba(124,31,209,.14);
  --accent-line:rgba(124,31,209,.42);

  /* neutros frios, una sola familia */
  --bg:#0B0A0F;
  --bg-2:#100F15;
  --surface:#16151C;
  --surface-2:#1D1C24;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);

  /* texto (contraste verificado sobre --bg) */
  --tx:#F5F4F7;   /* 17.5:1 */
  --tx-2:#B7B3C2; /* 9.1:1  */
  --tx-3:#94909F; /* 5.6:1  */
  --ok:#3FCF8E;
  --wa:#25D366;

  /* elevacion neutra (sin color) */
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 16px -8px rgba(0,0,0,.7);
  --sh-3:0 14px 28px -14px rgba(0,0,0,.8);

  /* radios */
  --r-btn:999px; --r-card:16px; --r-panel:20px; --r-input:10px;

  --max:1180px;
  --ff:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fh:"Outfit",var(--ff);

  /* movimiento */
  --e-out:cubic-bezier(.22,.72,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--ff);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tx);text-decoration:none;transition:color 160ms var(--e-out)}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--fh);font-weight:600;line-height:1.14;margin:0 0 .5em;letter-spacing:-.02em;color:var(--tx)}
/* escala: cuerpo 17px · h3 25.6px · h2 33.6px · h1 43.2px */
h1{font-size:2.7rem;font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700}
h2{font-size:2.1rem;font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.6rem}
p{margin:0 0 1em;color:var(--tx-2);max-width:66ch}
strong{color:var(--tx);font-weight:650}
ul{margin:0}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,6vw,88px) 0}
.section + .section{padding-top:clamp(30px,3.4vw,50px)}
.section--alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead{font-size:1.04rem;color:var(--tx-2);max-width:56ch}
.muted{color:var(--tx-3);font-size:.9rem}
.stack{display:grid;gap:clamp(40px,5vw,68px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* eyebrow: etiqueta de seccion, usar con moderacion */
.eyebrow{display:inline-block;font:600 .73rem/1 var(--ff);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:650 .96rem/1 var(--ff);padding:14px 24px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color 160ms var(--e-out),border-color 160ms var(--e-out),
             transform 120ms var(--e-out),color 160ms var(--e-out);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:active{transform:scale(.97)}
.btn--p{background:var(--accent);color:#fff}
.btn--p:hover{background:var(--accent-hi);color:#fff}
.btn--s{border-color:var(--line-2);color:var(--tx);background:transparent}
.btn--s:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.btn--wa{background:var(--wa);color:#06270f}
.btn--wa:hover{background:#38e07a;color:#06270f}
.btn--sm{padding:11px 19px;font-size:.9rem}
.btn--block{width:100%}

/* ---------- barra superior ---------- */
.topbar{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.85rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--tx-2)}
.topbar a:hover{color:var(--tx)}
.topbar svg{width:16px;height:16px;color:var(--tx-3)}
.topbar__l{display:flex;flex-wrap:wrap;gap:20px}

/* ---------- encabezado ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,10,15,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:13px;padding-bottom:13px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:50px;height:auto}
.brand__t{display:block;font:700 1.06rem/1.15 var(--fh);color:var(--tx);letter-spacing:-.01em}
.brand__s{display:block;font:600 .78rem/1.4 var(--ff);letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
.menu{display:flex;align-items:center;gap:2px;list-style:none;padding:0}
.menu>li{position:relative}
.menu>li>a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--tx-2);
  font:600 .84rem/1 var(--ff);letter-spacing:.045em;text-transform:uppercase;
  transition:color 160ms var(--e-out),background-color 160ms var(--e-out);
}
.menu>li>a:hover,.menu>li.is-active>a{color:var(--tx);background:rgba(255,255,255,.06)}
.menu>li>a.has-sub::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
}
.sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:238px;list-style:none;padding:8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-4px);transform-origin:top left;
  transition:opacity 150ms var(--e-out),transform 150ms var(--e-out),visibility 150ms;
}
.menu>li:hover .sub,.menu>li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:10px 12px;border-radius:8px;color:var(--tx-2);font-size:.88rem}
.sub a:hover{background:rgba(255,255,255,.07);color:var(--tx)}
.nav__end{display:flex;align-items:center;gap:10px}
.burger{
  display:none;width:44px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-input);
  background:transparent;cursor:pointer;padding:0;
  transition:background-color 160ms var(--e-out),transform 120ms var(--e-out);
}
.burger:hover{background:rgba(255,255,255,.06)}
.burger:active{transform:scale(.96)}
.burger span{display:block;width:18px;height:1.5px;background:var(--tx);margin:4px auto;transition:transform 180ms var(--e-out),opacity 120ms}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile{border-top:1px solid var(--line);background:var(--bg-2)}
.mobile ul{list-style:none;padding:10px 0;margin:0}
.mobile>ul>li{border-bottom:1px solid var(--line)}
.mobile>ul>li:last-child{border-bottom:0}
.mobile a{display:block;padding:15px 24px;color:var(--tx-2);font:600 .93rem/1 var(--ff);letter-spacing:.03em;text-transform:uppercase}
.mobile a:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.mobile .sub-m{list-style:none;padding:0 0 12px 14px}
.mobile .sub-m a{padding:11px 24px;text-transform:none;letter-spacing:0;font-weight:500;font-size:.92rem;color:var(--tx-3)}

@media(max-width:1080px){
  .menu,.topbar__r{display:none}
  .burger{display:block}
}
@media(max-width:560px){
  .nav{min-height:64px;padding-top:10px;padding-bottom:10px}
  .brand img{width:42px}
  .brand__s{display:none}
  .topbar{font-size:.8rem}
  .topbar .wrap{justify-content:center;gap:2px 16px;padding-top:9px;padding-bottom:9px}
  .nav__end .btn--p{display:none}
}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,5.5vw,84px) 0 clamp(44px,5vw,76px)}
.hero__g{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,58px);align-items:center}
.hero h1{margin-bottom:.55em;max-width:19ch}
.hero__sub{font-size:clamp(1rem,1.5vw,1.1rem);color:var(--tx-2);max-width:46ch;margin-bottom:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__shot{position:relative}
.hero__shot img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:58% 42%;border-radius:var(--r-panel);box-shadow:var(--sh-3)}
.hero__cap{margin-top:12px;font-size:.86rem;color:var(--tx-3);max-width:44ch}
@media(max-width:900px){
  .hero__g{grid-template-columns:1fr;gap:30px}
  .hero__shot{order:-1}
  .hero h1{max-width:none}
}

/* ---------- bento de servicios ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color 180ms var(--e-out),background-color 180ms var(--e-out),transform 180ms var(--e-out);
}
.tile:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-2px)}
.tile__media{position:relative;overflow:hidden;background:var(--bg-2)}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform 380ms var(--e-out)}
.tile__media--fit{background:#E9E6EF}
.tile__media--fit img{object-fit:contain;padding:18px}
.tile:hover .tile__media img{transform:scale(1.03)}
.tile__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:8px}
.tile h3{display:flex;align-items:center;gap:9px;margin:0;font-size:1.28rem}
.tile h3 svg{width:19px;height:19px;flex:0 0 auto;color:var(--tx-3);transition:color 180ms var(--e-out)}
.tile:hover h3 svg{color:var(--accent-hi)}
.tile p{margin:0;font-size:.95rem;color:var(--tx-2);max-width:none}
.tile__more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font:650 .86rem/1 var(--ff);color:var(--tx-3)}
.tile:hover .tile__more{color:var(--tx)}
.tile__more svg{width:15px;height:15px}

.tile--xl{grid-column:span 6}
.tile--xl .tile__media{height:230px}
.tile--md{grid-column:span 3}
.tile--md .tile__media{height:150px}
.tile--typo{grid-column:span 4;background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.tile--pool{grid-column:span 7;flex-direction:row;align-items:stretch}
.tile--pool .tile__media{width:42%;flex:0 0 42%;height:auto}
.tile--tint{grid-column:span 5;background:var(--accent-tint);border-color:var(--accent-line)}

@media(max-width:1000px){
  .tile--xl{grid-column:span 12}
  .tile--md,.tile--typo{grid-column:span 6}
  .tile--pool,.tile--tint{grid-column:span 12}
}
@media(max-width:700px){
  .bento{gap:14px}
  .tile--md,.tile--typo{grid-column:span 12}
  .tile--pool{flex-direction:column}
  .tile--pool .tile__media{width:100%;flex:none;height:170px}
  .tile--xl .tile__media{height:190px}
}

/* ---------- pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;padding:0;counter-reset:s}
.steps li{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:-14px;left:0;background:var(--bg);padding-right:12px;
  font:700 .8rem/1 var(--fh);letter-spacing:.1em;color:var(--tx-3)
}
.steps h3{margin-bottom:.35em;font-size:1.4rem}
.steps p{margin:0;font-size:.95rem}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}

/* ---------- carril horizontal (scroll-snap) ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:border-color 180ms var(--e-out),transform 180ms var(--e-out)}
.rail__item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.rail__item img{width:100%;height:140px;object-fit:cover}
.rail__img--fit{background:#E9E6EF;object-fit:contain!important;padding:14px}
.rail__item div{padding:16px 18px 18px}
.rail__item h3{margin:0 0 .3em;font-size:1.28rem}
.rail__item p{margin:0;font-size:.9rem;color:var(--tx-3)}
@media(max-width:700px){.rail{grid-auto-columns:minmax(210px,78%)}}

/* ---------- numeros ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat strong{display:block;font:700 clamp(1.7rem,3vw,2.3rem)/1 var(--fh);color:var(--tx)}
.stat span{display:block;margin-top:6px;font-size:.9rem;color:var(--tx-3)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:22px}}

/* ---------- checklist ---------- */
.checks{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--tx-2);font-size:.99rem}
.checks svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--ok)}
@media(max-width:700px){.checks{grid-template-columns:1fr}}

/* ---------- split imagen + texto ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.split--rev .split__media{order:2}
.split__media img{width:100%;border-radius:var(--r-panel)}
.split__media--fit img{background:#E9E6EF;object-fit:contain;padding:22px}
.split ul{list-style:none;padding:0;display:grid;gap:12px;margin-top:20px}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:26px}
  .split--rev .split__media{order:0}
}


/* ---------- franja de capacidades (lo que ya se puede hacer) ---------- */
.caps__head h2{max-width:30ch}
.caps__head .lead{margin-top:14px}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3vw,38px)}
.cap{padding:clamp(20px,2.2vw,26px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.cap h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1.18rem}
.cap h3 svg{width:22px;height:22px;flex:0 0 auto;color:var(--ok)}
.cap p{margin:0;color:var(--tx-2);font-size:.97rem;max-width:38ch}
.caps__nota{margin:24px 0 0;color:var(--tx-3);font-size:.93rem;max-width:62ch}
@media(max-width:880px){.caps{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{padding:clamp(38px,4.6vw,60px) clamp(24px,4vw,52px);text-align:center;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-panel)}
.cta h2{max-width:26ch;margin-inline:auto}
.cta p{max-width:52ch;margin:0 auto 26px}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.cta__tel{display:inline-flex;align-items:center;gap:9px;font:600 1rem/1 var(--ff);color:var(--tx-2)}
.cta__tel svg{width:18px;height:18px;flex:0 0 auto}
.cta__tel:hover{color:var(--tx)}

/* ---------- pie ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:56px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.foot h3{font-family:var(--ff);font-weight:650;font-size:1.05rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px}
.foot ul{list-style:none;padding:0;display:grid;gap:10px}
.foot a{color:var(--tx-2);font-size:.95rem}
.foot a:hover{color:var(--tx)}
.foot p{font-size:.95rem;color:var(--tx-3);max-width:44ch}
.foot__b{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot__b img{width:54px}
.foot__b b{font:700 1.06rem/1 var(--fh);color:var(--tx)}
.foot__row{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.foot__row svg{width:17px;height:17px;color:var(--tx-3);flex:0 0 auto;margin-top:3px}
.foot__row a,.foot__row span{font-size:.95rem;color:var(--tx-2)}
.foot__bottom{margin-top:42px;padding:20px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;color:var(--tx-3);font-size:.88rem}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.foot{grid-template-columns:1fr}}

/* ---------- flotante WhatsApp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;display:grid;place-items:center;width:56px;height:56px;
  border-radius:var(--r-btn);background:var(--wa);box-shadow:var(--sh-2);
  transition:transform 160ms var(--e-out),background-color 160ms var(--e-out);
}
.wa-float svg{width:28px;height:28px;color:#06270f}
.wa-float:hover{background:#38e07a;transform:translateY(-2px)}
.wa-float:active{transform:scale(.95)}
@media(max-width:560px){.wa-float{right:16px;bottom:16px;width:52px;height:52px}}

/* ---------- pagina interior ---------- */
.page-hero{padding:clamp(40px,5vw,68px) 0 clamp(30px,3.6vw,46px);border-bottom:1px solid var(--line)}
.crumbs{font-size:.88rem;color:var(--tx-3);margin-bottom:16px}
.crumbs a{color:var(--tx-2)}
.crumbs a:hover{color:var(--tx)}
.page-hero h1{max-width:24ch;margin-bottom:.4em}
.page-hero .lead{font-size:1.06rem}
.page-hero__media{margin-top:30px}
.page-hero__media img{width:100%;max-height:380px;object-fit:cover;border-radius:var(--r-panel)}
.page-hero__media--natural img{width:100%;height:auto;max-height:none;object-fit:fill}
.page-hero__media--ancha{max-width:960px}
.page-hero__media--ancha img{width:100%;height:auto;max-height:none;object-fit:fill;background:#141419}
.page-hero__media--fit{max-width:860px}
.page-hero__media--fit img{background:#E9E6EF;object-fit:contain;padding:22px;max-height:320px}
.prose{max-width:64ch}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.4em}
.prose ul{display:grid;gap:10px;padding-left:20px;color:var(--tx-2)}
.prose a{color:var(--tx);border-bottom:1px solid var(--accent-line)}
.prose a:hover{border-color:var(--accent-hi);color:#fff}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(22px,3vw,34px)}

/* ---------- galeria de capturas ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;
  background:#E9E6EF;border:1px solid var(--line);border-radius:var(--r-card)}
.galeria figcaption{margin-top:10px;font-size:.9rem;color:var(--tx-3);max-width:68ch}
.galeria__item--ancho{grid-column:1/-1}
.galeria__item--ancho img{aspect-ratio:auto;object-fit:fill;background:#141419}
.galeria--2{grid-template-columns:repeat(2,1fr)}
.galeria__item--fit img{object-fit:contain;padding:14px;background:#F2F0F6}
@media(max-width:860px){.galeria,.galeria--2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.galeria{grid-template-columns:1fr}}

/* ---------- aparicion (Emil: corta, con curva, sin scale(0)) ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity 420ms var(--e-out),transform 420ms var(--e-out)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}