/* ===== RESET & TOKENS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;
  --bg-alt:#0e0e18;
  --surface:#14141f;
  --surface-2:#1b1b2b;
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --text:#ececf3;
  --muted:#9a9ab0;
  --primary:#7c5cff;
  --primary-2:#5b8bff;
  --accent:#22d3ee;
  --grad:linear-gradient(120deg,#7c5cff 0%,#5b8bff 45%,#22d3ee 100%);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6);
  --maxw:1160px;
  --grid-line:rgba(255,255,255,.032);
  --grid-size:58px;
  /* Velo translúcido para las bandas alternas: se ven como antes pero
     dejan pasar la cuadrícula. Lo que tiene que quedar plano (footer,
     marquee, tarjetas) sigue usando --bg-alt, que es opaco y la tapa. */
  --veil:rgba(255,255,255,.022);
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Cuadrícula de fondo. Va fija para que no se arrastre con el scroll ni
     se corte entre secciones. Las tarjetas siguen siendo opacas, así que
     la grilla se ve solo en los espacios entre ellas. */
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.container--narrow{max-width:800px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-weight:600;font-size:15px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:.2s ease;white-space:nowrap;
  padding:12px 22px;
}
.btn--sm{padding:9px 18px;font-size:14px}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--block{width:100%}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px -8px rgba(124,92,255,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(124,92,255,.75)}
.btn--ghost{background:rgba(255,255,255,.05);border-color:var(--border-2);color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--outline{background:transparent;border-color:var(--border-2);color:var(--text)}
.btn--outline:hover{border-color:var(--primary);color:#fff;background:rgba(124,92,255,.1)}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);
  background:rgba(10,10,15,.65);border-bottom:1px solid transparent;transition:.3s}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(10,10,15,.9)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px}
.brand__mark{width:34px;height:34px;border-radius:9px;display:block}
.brand__dot{color:var(--muted);font-weight:600}
.nav__menu{display:flex;align-items:center;gap:30px}
.nav__links{display:flex;gap:28px;font-size:15px;font-weight:500}
.nav__links a{color:var(--muted);transition:.2s}
.nav__links a:hover{color:var(--text)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;padding:72px 0 90px;overflow:hidden}
.hero__glow{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(600px 380px at 78% 12%,rgba(124,92,255,.28),transparent 70%),
    radial-gradient(520px 360px at 12% 30%,rgba(34,211,238,.16),transparent 70%);
  pointer-events:none}
.hero__particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:54px;align-items:center}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--border);
  padding:6px 14px;border-radius:999px}
.badge--ai{background:linear-gradient(120deg,rgba(124,92,255,.18),rgba(34,211,238,.14));
  border-color:rgba(124,92,255,.4);color:#fff}
.badge__ico{width:14px;height:14px;color:#c7b8ff;flex:none}
.hero__ai{font-size:.95rem;color:var(--muted);margin:-18px 0 30px;
  padding-left:14px;border-left:2px solid var(--primary)}
.badge__dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 0 4px rgba(61,220,132,.2);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(61,220,132,0)}}
.hero__title{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.08;font-weight:900;
  letter-spacing:-.02em;margin-bottom:20px}
.hero__sub{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--muted);max-width:540px;margin-bottom:32px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero__trust{display:flex;gap:38px;flex-wrap:wrap}
.hero__trust div{display:flex;flex-direction:column}
.hero__trust strong{font-size:1.7rem;font-weight:800;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__trust span{font-size:13px;color:var(--muted)}

/* code window */
.code-window{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;transform:rotate(.4deg)}
.code-window__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.dot{width:12px;height:12px;border-radius:50%}
.dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840}
.code-window__file{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.code-window__body{padding:22px 20px;font-family:'JetBrains Mono',monospace;
  font-size:14px;line-height:1.85;overflow-x:auto}
.c-key{color:#c792ea}.c-var{color:#82aaff}.c-fn{color:#22d3ee}
.c-prop{color:#f78c6c}.c-str{color:#c3e88d}.c-com{color:#6a6a80;font-style:italic}

/* ===== MARQUEE ===== */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:20px 0;overflow:hidden;background:var(--bg-alt);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:56px;width:max-content;animation:scroll 26s linear infinite}
.marquee__track span{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;
  color:var(--muted);white-space:nowrap}
.marquee__cat{font-weight:700;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  border-left:2px solid rgba(124,92,255,.5);padding-left:18px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ===== SECTIONS ===== */
.section{padding:86px 0}
.section--alt{background:var(--veil)}
.section__head{text-align:center;max-width:640px;margin:0 auto 52px}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary-2);margin-bottom:14px}
.section__head h2{font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.section__head p{color:var(--muted);font-size:1.08rem}

.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;transition:.25s}
.card:hover{transform:translateY(-6px);border-color:var(--border-2);
  box-shadow:0 24px 50px -24px rgba(124,92,255,.35)}
.card__icon{width:60px;height:60px;display:grid;place-items:center;color:#a9b6ff;
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(34,211,238,.08));
  border:1px solid var(--border-2);border-radius:14px;margin-bottom:18px}
.card__icon svg{width:28px;height:28px}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.97rem}

/* grupos de servicios */
.svc-group__title{font-size:1.15rem;font-weight:700;margin:0 0 20px;
  padding-left:14px;border-left:3px solid var(--primary)}
.svc-group__head{margin:46px 0 20px}
.svc-group__head .svc-group__title{margin-bottom:8px}
.svc-group__sub{color:var(--muted);font-size:.98rem;max-width:640px}

/* tarjeta de servicio clickeable */
.card--service{cursor:pointer}
/* complementos: más compactas y secundarias */
.card--addon{padding:24px 22px;background:var(--bg-alt)}
.card--addon .card__icon{width:48px;height:48px;margin-bottom:14px}
.card--addon .card__icon svg{width:22px;height:22px}
.card--addon h3{font-size:1.1rem}
.card--addon p{font-size:.92rem}
.card--service:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.card__more{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:600;
  color:var(--primary-2);opacity:.85;transition:.2s}
.card--service:hover .card__more{opacity:1;transform:translateX(3px)}

/* ===== PANEL DE DETALLE (la tarjeta se agranda y lo muestra adentro) ===== */
.card--service.active{grid-column:1 / -1;cursor:default;border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary),0 20px 50px -24px rgba(124,92,255,.5)}
.card--service.active:hover{transform:none}
/* el detalle ya repite ícono/título/descripción: ocultamos el resumen para no duplicar y no alargar la tarjeta */
.card--service.active>.card__icon,
.card--service.active>h3,
.card--service.active>p,
.card--service.active>.card__more{display:none}
.svc-detail{position:relative;min-width:0;max-width:100%;
  animation:detailIn .4s cubic-bezier(.22,.61,.36,1)}
.svc-detail__close-bottom{display:block;width:100%;text-align:center;margin-top:14px;padding:10px;
  background:none;border:0;color:var(--primary-2);font-size:.9rem;font-weight:600;
  opacity:.85;cursor:pointer;transition:.2s}
.svc-detail__close-bottom:hover{opacity:1}
@keyframes detailIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.svc-detail__close{position:absolute;top:18px;right:0;background:none;border:0;color:var(--muted);
  font-size:30px;line-height:1;cursor:pointer;transition:.2s}
.svc-detail__close:hover{color:var(--text)}
.svc-detail__head{display:flex;gap:16px;align-items:center;margin-bottom:16px;padding-right:30px}
.svc-detail__icon{width:64px;height:64px;flex:none;display:grid;place-items:center;color:#a9b6ff;
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(34,211,238,.08));
  border:1px solid var(--border-2);border-radius:16px}
.svc-detail__icon svg{width:30px;height:30px}
.svc-detail__head h3{font-size:1.6rem;margin-bottom:4px}
.svc-detail__price{color:var(--accent);font-weight:700;font-size:1rem}
.svc-detail__desc{color:var(--muted);font-size:1.05rem;margin-bottom:26px;max-width:80ch}
.svc-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:26px}
.svc-detail__grid.one-col{grid-template-columns:1fr}
.svc-detail__grid h4{font-size:1.05rem;margin-bottom:14px}
.svc-detail__features{list-style:none}
.svc-detail__features li{padding:8px 0 8px 28px;position:relative;color:var(--muted);font-size:.98rem}
.svc-detail__features li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.svc-detail__note{margin-top:14px;padding:12px 14px;border-left:3px solid var(--primary);
  background:rgba(124,92,255,.08);border-radius:8px;font-size:.9rem;color:var(--muted)}
.svc-detail__projects{display:flex;flex-direction:column;gap:10px}
.svc-detail__project{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:var(--bg);transition:.2s}
a.svc-detail__project:hover{border-color:var(--primary);transform:translateX(3px)}
.svc-detail__project .mp__dot{width:9px;height:9px;border-radius:50%;flex:none}
.mp--live{background:#10b981}.mp--use{background:#3b82f6}.mp--wip{background:#f59e0b}
.svc-detail__project .mp__name{font-weight:600;font-size:.96rem}
.svc-detail__project .mp__desc{color:var(--muted);font-size:.85rem}
.svc-detail__empty{color:var(--muted);font-size:.92rem;font-style:italic}
@media(max-width:640px){
  .svc-detail__grid{grid-template-columns:1fr;gap:24px}
  /* deja lugar para que el botón flotante de WhatsApp no tape "Ocultar detalle" en tarjetas cortas */
  .svc-detail{padding-bottom:70px}
}

/* products */
.product{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;display:flex;flex-direction:column;transition:.25s;position:relative}
.product:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:0 24px 50px -24px rgba(124,92,255,.35)}
.product--featured{border-color:var(--primary);
  background:linear-gradient(180deg,rgba(124,92,255,.1),var(--surface));
  box-shadow:0 24px 60px -30px rgba(124,92,255,.5)}
.product__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.product__icon{width:52px;height:52px;display:grid;place-items:center;color:#a9b6ff;
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(34,211,238,.08));
  border:1px solid var(--border-2);border-radius:13px}
.product__icon svg{width:26px;height:26px}
.product:hover .product__icon{transform:translateY(-3px) rotate(-4deg);transition:.3s}
.product__tag{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary-2);background:rgba(91,139,255,.12);
  padding:5px 12px;border-radius:999px}
.product__tag--hot{color:#fff;background:var(--grad)}
.product h3{font-size:1.5rem;margin-bottom:8px}
.product p{color:var(--muted);font-size:.97rem;flex:1}
.product__modes{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px}
.product__modes span{font-size:12.5px;font-weight:600;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--border-2);
  padding:6px 12px;border-radius:999px}
.product__actions{display:flex;gap:10px}
.product__actions .btn{flex:1}

/* portfolio */
.work{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);transition:.25s}
.work:hover{transform:translateY(-6px);border-color:var(--border-2)}
.work__img{aspect-ratio:16/10;display:grid;place-items:center;position:relative}
.work__img span:not(.work__count){font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.9);background:rgba(0,0,0,.28);padding:6px 14px;border-radius:999px;
  backdrop-filter:blur(4px)}
.work__status{position:absolute;top:12px;right:12px;font-style:normal;font-size:11px;
  font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:999px;
  backdrop-filter:blur(6px);color:#fff}
.work__status--live{background:rgba(16,185,129,.9)}
.work__status--use{background:rgba(59,130,246,.9)}
.work__status--wip{background:rgba(245,158,11,.92)}
.work__img--1{background:linear-gradient(135deg,#7c5cff,#22d3ee)}
.work__img--2{background:linear-gradient(135deg,#ff6b6b,#feca57)}
.work__img--3{background:linear-gradient(135deg,#0abde3,#48dbfb)}
.work__img--4{background:linear-gradient(135deg,#5f27cd,#7c5cff)}
.work__img--5{background:linear-gradient(135deg,#ee5253,#ff9f43)}
.work__img--6{background:linear-gradient(135deg,#8e9eab,#485563)}
.work__img--7{background:linear-gradient(135deg,#4b6cb7,#182848)}
.work__img--8{background:linear-gradient(135deg,#f0932b,#6ab04c)}
.work__body{padding:20px 22px}
.work__body h3{font-size:1.2rem;margin-bottom:5px}
.work__body p{color:var(--muted);font-size:.93rem}
/* tarjetas con captura real del sitio */
.work__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;z-index:0;transition:transform .4s ease}
.work:hover .work__thumb{transform:scale(1.04)}
.work__img--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,15,.05) 0%,transparent 24%,transparent 60%,rgba(10,10,15,.55) 100%)}
.work__img--photo span:not(.work__count){position:absolute;left:12px;bottom:12px;z-index:2}
.work__img--photo .work__status{z-index:2}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;position:relative}
.step__num{font-family:'JetBrains Mono',monospace;font-size:2.4rem;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;line-height:1}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem}

/* pricing — banner de tarjetas (scroll horizontal) */
.pricing-banner{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:22px 4px 26px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
.pricing-banner::-webkit-scrollbar{height:8px}
.pricing-banner::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px}
.pricing-banner::-webkit-scrollbar-thumb:hover{background:var(--primary)}
.pricing-banner .plan{flex:0 0 300px;scroll-snap-align:start}
@media(max-width:640px){.pricing-banner .plan{flex:0 0 84%}}

/* pricing */
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px 28px;display:flex;flex-direction:column;position:relative;transition:.25s}
.plan:hover{transform:translateY(-4px)}
.plan--featured{border-color:var(--primary);box-shadow:0 24px 60px -30px rgba(124,92,255,.6)}
.plan__ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;
  padding:5px 16px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:1.35rem;margin-bottom:14px}
.plan__price{font-size:2.1rem;font-weight:800;margin-bottom:22px}
.plan__price small{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin-bottom:26px;flex:1}
.plan li{padding:9px 0 9px 28px;position:relative;color:var(--muted);
  border-bottom:1px solid var(--border);font-size:.96rem}
.plan li:last-child{border-bottom:0}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}

/* faq */
.faq{display:flex;flex-direction:column;gap:14px}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 22px}
.faq__item summary{cursor:pointer;padding:18px 0;font-weight:600;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.5rem;color:var(--primary-2);font-weight:400;transition:.2s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--muted);padding:0 0 20px;font-size:.98rem}

/* cta */
.cta__box{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(34,211,238,.08));
  border:1px solid var(--border-2);border-radius:24px;padding:48px;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.cta__text h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;line-height:1.15;margin-bottom:12px}
.cta__text p{color:var(--muted);font-size:1.08rem}
.cta__form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex}.field--full{grid-column:1/-1}
.cta__form input,.cta__form textarea{width:100%;background:var(--bg);border:1px solid var(--border-2);
  border-radius:var(--radius-sm);padding:14px 16px;color:var(--text);font-family:inherit;font-size:15px;resize:vertical}
.cta__form input:focus,.cta__form textarea:focus{outline:none;border-color:var(--primary)}
.cta__form button{grid-column:1/-1}
.cta__note{grid-column:1/-1;text-align:center;font-size:.9rem;color:var(--accent);min-height:1em}

/* footer */
.footer{border-top:1px solid var(--border);background:var(--bg-alt);padding:56px 0 26px}
.footer__inner{display:grid;grid-template-columns:1.4fr 2fr;gap:40px;padding-bottom:40px}
.footer__brand p{color:var(--muted);margin-top:14px;max-width:280px;font-size:.95rem}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer__cols h4{font-size:.95rem;margin-bottom:14px}
.footer__cols a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0;transition:.2s}
.footer__cols a:hover{color:var(--text)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--border);color:var(--muted);font-size:.88rem;flex-wrap:wrap;gap:10px}

/* ===== LIGHTBOX / GALERÍA ===== */
.work--gallery{cursor:pointer}
.work__count{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;
  letter-spacing:.03em;padding:4px 10px;border-radius:999px;color:#fff;
  background:rgba(10,10,15,.55);backdrop-filter:blur(6px);border:1px solid var(--border-2)}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:70px 16px;background:rgba(6,6,10,.92);backdrop-filter:blur(10px);animation:fadeIn .25s ease}
.lightbox[hidden]{display:none}
.lightbox__stage{max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox__img{max-width:100%;max-height:70vh;width:auto;border-radius:12px;
  border:1px solid var(--border-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lightbox__cap{color:var(--muted);font-size:.95rem;text-align:center;max-width:70ch}
.lightbox__visit{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:999px;border:1px solid var(--border-2);color:#fff;
  background:rgba(255,255,255,.06);transition:.2s}
.lightbox__visit:hover{background:rgba(124,92,255,.18);border-color:var(--primary)}
.lightbox__visit[hidden]{display:none}
.lightbox__close{position:fixed;top:18px;right:22px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;opacity:.85;transition:.2s;z-index:2}
.lightbox__close:hover{opacity:1}
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid var(--border-2);background:rgba(255,255,255,.06);
  color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.2s;backdrop-filter:blur(6px)}
.lightbox__nav:hover{background:rgba(255,255,255,.14)}
.lightbox__nav--prev{left:20px}.lightbox__nav--next{right:20px}
.lightbox__dots{display:flex;gap:8px}
.lightbox__dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.3);transition:.2s}
.lightbox__dots button.active{background:var(--primary);width:22px;border-radius:999px}
@media(max-width:640px){
  .lightbox{padding:60px 8px}
  .lightbox__nav{width:42px;height:42px;font-size:24px}
  .lightbox__nav--prev{left:8px}.lightbox__nav--next{right:8px}
}

/* whatsapp float */
.wa{position:fixed;bottom:24px;right:24px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.6);transition:.2s}
.wa:hover{transform:scale(1.08)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Inclinación 3D de la ventana de código */
.hero__visual{perspective:1000px}

/* ===== MORE ANIMATIONS ===== */
/* Entrada del hero (al cargar) */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero__badges,.hero__title,.hero__sub,.hero__ai,.hero__actions,.hero__trust{
  opacity:0;animation:fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards}
.hero__badges{animation-delay:.05s}
.hero__title{animation-delay:.15s}
.hero__sub{animation-delay:.3s}
.hero__ai{animation-delay:.42s}
.hero__actions{animation-delay:.54s}
.hero__trust{animation-delay:.66s}
.hero__visual{opacity:0;animation:fadeUp 1s cubic-bezier(.22,.61,.36,1) .35s forwards}

/* Texto con degradé animado */
.grad{background-size:220% auto;animation:gradShift 6s linear infinite}
@keyframes gradShift{to{background-position:220% center}}

/* Ventana de código flotando (fallback si no hay JS/mouse) */
.code-window{animation:floaty 6s ease-in-out infinite;will-change:transform}
@keyframes floaty{
  0%,100%{transform:rotate(.4deg) translateY(0)}
  50%{transform:rotate(.4deg) translateY(-12px)}
}
/* Cuando el JS toma control (hay puntero fino), desactiva la animación */
.tilt-active .code-window{animation:none}

/* Glow del hero en movimiento */
.hero__glow{animation:glowDrift 14s ease-in-out infinite}
@keyframes glowDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3%,3%) scale(1.08)}
}

/* Brillo que cruza el botón principal.
   Sin overflow:hidden: recortaba el fondo 1px adentro del borde y dejaba
   un halo oscuro en las curvas. El brillo se mueve por background-position
   dentro del propio pseudo-elemento, que hereda el radio. */
.btn--primary{position:relative}
.btn--primary::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);
  background-size:260% 100%;background-position:170% 0}
.btn--primary:hover::after{animation:shine .8s ease}
@keyframes shine{to{background-position:-70% 0}}

/* Pulso suave del badge de IA */
.badge--ai{animation:aiGlow 3s ease-in-out infinite}
@keyframes aiGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.0)}
  50%{box-shadow:0 0 18px -2px rgba(124,92,255,.55)}
}

/* Ícono de tarjeta que reacciona al hover */
.card:hover .card__icon{transform:translateY(-4px) rotate(-4deg);transition:.3s}

/* Subrayado animado en links del nav */
.nav__links a{position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--grad);transition:width .25s ease}
.nav__links a:hover::after{width:100%}

/* ===== NAV: página activa ===== */
.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a[aria-current="page"]::after{width:100%}

/* ===== HERO DE SUBPÁGINA (portafolio / precios) ===== */
.page-hero{position:relative;padding:54px 0 44px;overflow:hidden;text-align:center;
  border-bottom:1px solid var(--border)}
.page-hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(620px 300px at 50% 0%,rgba(124,92,255,.22),transparent 70%)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;letter-spacing:-.02em;
  line-height:1.12;margin-bottom:14px}
.page-hero p{color:var(--muted);font-size:1.08rem;max-width:640px;margin:0 auto}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);transition:.2s}
.crumbs a:hover{color:var(--text)}
.crumbs span{opacity:.5;margin:0 7px}

/* ===== GRILLA FLUIDA (centra la última fila incompleta) ===== */
.grid--fluid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.grid--fluid>*{flex:1 1 300px;max-width:calc((100% - 44px)/3)}

/* ===== TIRA "POR QUÉ PEYCODE" ===== */
.why-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 28px}
.why-strip>div{display:flex;flex-direction:column;gap:6px}
.why-strip h3{font-size:1.02rem;display:flex;align-items:center;gap:9px}
.why-strip svg{width:19px;height:19px;flex:none;color:var(--primary-2)}
.why-strip p{color:var(--muted);font-size:.9rem;line-height:1.5}

/* ===== TABLA RESUMEN DE PRECIOS ===== */
.ptable{display:flex;flex-direction:column;gap:10px}
.ptable__row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr auto auto;
  align-items:center;gap:18px;padding:18px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);transition:.2s}
.ptable__row:hover{border-color:var(--primary);transform:translateX(4px);
  background:rgba(124,92,255,.06)}
.ptable__row--featured{border-color:var(--primary);
  background:linear-gradient(90deg,rgba(124,92,255,.12),var(--surface))}
.ptable__name{font-weight:700;font-size:1.08rem;display:flex;align-items:center;gap:10px}
.ptable__badge{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--grad);color:#fff;padding:3px 9px;border-radius:999px}
.ptable__desc{color:var(--muted);font-size:.93rem}
.ptable__time{color:var(--muted);font-size:.85rem;font-family:'JetBrains Mono',monospace;
  white-space:nowrap}
.ptable__price{font-weight:800;font-size:1.15rem;white-space:nowrap;text-align:right;min-width:130px}
@media(max-width:820px){
  .ptable__row{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 18px}
  .ptable__name{grid-column:1}
  .ptable__price{grid-column:2;grid-row:1}
  .ptable__desc{grid-column:1/-1}
  .ptable__time{grid-column:1/-1}
  .ptable__price{text-align:right;min-width:0}
}

/* ===== PROCESO COMPACTO ===== */
.steps--compact{grid-template-columns:repeat(4,1fr);gap:18px}
.steps--compact .step{padding:22px 20px}
.steps--compact .step__num{font-size:1.5rem;margin-bottom:8px}
.steps--compact .step h3{font-size:1.05rem;margin-bottom:6px}
.steps--compact .step p{font-size:.9rem;line-height:1.5}

/* ===== CTA AL PIE DE UNA SECCIÓN ===== */
.section__cta{display:flex;justify-content:center;margin-top:34px}

/* ===== PÁGINA DE PROYECTO ===== */
.page-hero .badge{margin-bottom:16px}
.badge--wip{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.45);color:#fbbf24}
.badge__dot--wip{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.badge--use{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.45);color:#60a5fa}
.badge__dot--use{background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.shot{max-width:940px;margin:0 auto 40px}
.shot img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border-2);
  box-shadow:var(--shadow)}
.shot figcaption{color:var(--muted);font-size:.92rem;text-align:center;margin-top:14px}
.wip-note{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid #f59e0b;border-radius:var(--radius);padding:28px 30px}
.wip-note h2{font-size:1.35rem;margin-bottom:12px}
.wip-note p{color:var(--muted);font-size:1rem}
.wip-note p+p{margin-top:12px}

/* ===== CIERRE SIMPLE DE SUBPÁGINA ===== */
.closer{text-align:center;max-width:620px;margin:0 auto}
.closer h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;margin-bottom:12px}
.closer p{color:var(--muted);font-size:1.05rem;margin-bottom:26px}
.closer__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .grid--fluid>*{max-width:calc((100% - 22px)/2)}
  .why-strip{grid-template-columns:1fr 1fr;padding:26px 24px}
  .steps.steps--compact{grid-template-columns:1fr 1fr}
  .page-hero{padding:40px 0 34px}
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__visual{order:-1;max-width:520px}
  .grid--3,.steps,.footer__inner,.cta__box{grid-template-columns:1fr}
  .cta__box{padding:32px 24px}
  .nav__menu{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__menu{display:flex;flex-direction:column;align-items:stretch;gap:16px;
    position:absolute;top:68px;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--border);padding:20px 22px}
  .nav.open .nav__links{flex-direction:column;gap:16px}
  .nav.open .nav__cta .btn{width:100%;padding:13px}
}
@media(max-width:640px){
  .section{padding:60px 0}
  .grid--3{grid-template-columns:1fr}
  .cta__form,.steps{grid-template-columns:1fr}
  .grid--fluid>*{max-width:100%}
  .why-strip{grid-template-columns:1fr;gap:18px}
  .steps.steps--compact{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .hero__trust{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
  /* badges en una sola línea */
  .hero__badges{flex-wrap:nowrap;gap:6px}
  .hero__badges .badge{font-size:8.5px;padding:4px 8px;gap:4px;white-space:nowrap}
  .badge__ico{width:10px;height:10px}
  .badge__dot{width:6px;height:6px}
  /* botones del hero en una sola línea */
  .hero__actions{flex-wrap:nowrap;gap:10px}
  .hero__actions .btn{flex:1;min-width:0;padding:13px 10px;font-size:13.5px;white-space:nowrap}
  /* banner de lenguajes más compacto */
  .marquee{padding:14px 0}
  .marquee__track{gap:34px}
  .marquee__track span{font-size:13px}
  .marquee__cat{font-size:11px;padding-left:12px}
}
@media(max-width:380px){
  .hero__badges .badge{font-size:7.5px;padding:3px 7px}
  .marquee__track span{font-size:12px}
}
/* ===== FIX: linea de 1px con el color opuesto del degradé =====
   En cajas con border-radius y ancho fraccionario, Chrome muestrea el tile
   siguiente del gradiente y pinta 1px del color del extremo contrario: se
   veia una linea cyan pegada al borde izquierdo de los botones violetas.
   Fijando el tile al tamaño exacto de la caja y sin repetir, desaparece.
   Va al final del archivo porque cada regla usa el atajo `background`, que
   resetea repeat/size a sus valores iniciales.
   `.grad` queda afuera a proposito: anima background-position sobre un tile
   del 220% y necesita repetir. */
.btn--primary,
.plan__ribbon,
.product__tag--hot,
.ptable__badge,
.nav__links a::after,
.lightbox__dots button.active,
.step__num,
.hero__trust strong{
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.btn--primary::after{background-repeat:no-repeat;background-size:260% 100%}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero__badges,.hero__title,.hero__sub,.hero__ai,.hero__actions,.hero__trust,.hero__visual{
    opacity:1;transform:none}
}