/* ==========================================================================
   OnDev — Sistema visual
   Turquesa · Negro · Blanco · Metal
   ========================================================================== */

:root{
  /* Marca */
  --cyan:        #1FD4F5;
  --cyan-soft:   #7DE8FB;
  --cyan-deep:   #0B8FA8;
  --cyan-glow:   rgba(31, 212, 245, .35);

  /* Base */
  --black:       #050607;
  --ink:         #0A0C0E;
  --ink-2:       #0F1215;
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  /* Metal */
  --metal-1: #15181C;
  --metal-2: #23282E;
  --metal-3: #2E343B;
  --metal-4: #101315;

  /* Texto */
  --white:  #FFFFFF;
  --text:   #D7DDE3;
  --muted:  #8D97A1;
  --dim:    #616B75;

  /* Layout */
  --max: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --r:   16px;
  --r-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  color:var(--white);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:600;
}
p{ margin:0 0 1em; }
::selection{ background:var(--cyan); color:#04181D; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#08090A; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--cyan-deep),#1a2126);
  border-radius:10px; border:2px solid #08090A;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--cyan),var(--cyan-deep)); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding:clamp(80px,11vw,150px) 0; }
.section--tight{ padding:clamp(60px,8vw,100px) 0; }

.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); border:0; margin:0; }

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:28px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan));
}
.h-xl{ font-size:clamp(2.4rem,7vw,5rem); }
.h-lg{ font-size:clamp(2rem,4.6vw,3.4rem); }
.h-md{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--muted); max-width:62ch; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.center .eyebrow::after{
  content:''; width:28px; height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}
.cyan{ color:var(--cyan); }
/* Nombre de marca dentro de un titular: misma fuente que el logotipo */
.font-brand{
  font-family:'Poppins','Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--white);
}
/* Iniciales O y D en turquesa, igual que el logotipo del nav */
.light-band .font-brand,.aqua-band .font-brand{ color:#080A0C; }
.light-band .font-brand > .cyan,.aqua-band .font-brand > .cyan{ color:#0A7E96; }
.grad-text{
  background:linear-gradient(100deg,#fff 10%,var(--cyan-soft) 45%,var(--cyan) 70%,#fff 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--cyan);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; border:1px solid transparent;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-3px); }
.btn--primary{
  background:linear-gradient(135deg,var(--cyan-soft),var(--cyan) 45%,var(--cyan-deep));
  color:#03181E; box-shadow:0 8px 30px -8px var(--cyan-glow);
}
.btn--primary:hover{ box-shadow:0 16px 46px -10px var(--cyan-glow); }
.btn--ghost{
  background:rgba(255,255,255,.02); color:var(--white);
  border-color:var(--line-strong); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(31,212,245,.06); }
.btn--sm{ padding:11px 22px; font-size:.86rem; }
.btn--block{ width:100%; }
.btn svg{ width:17px; height:17px; flex:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.center .btn-row{ justify-content:center; }

/* ---------- Superficies ---------- */
.metal{
  position:relative;
  background:
    linear-gradient(158deg,var(--metal-2) 0%,var(--metal-1) 26%,var(--metal-3) 52%,var(--metal-4) 78%,var(--metal-2) 100%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.metal::before{ /* veta metálica */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.12),transparent 55%);
  opacity:.55; mix-blend-mode:overlay;
}
.metal::after{ /* filo superior */
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.metal > *{ position:relative; z-index:1; }
.metal > .orb{ z-index:0; }
.metal-band{ position:relative; overflow:hidden; }
.metal-band::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,#0A0C0E 0%,#181C21 22%,#22272D 50%,#161A1E 78%,#0A0C0E 100%);
}
.metal-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
}

/* ==========================================================================
   SECCIONES CLARAS
   .light-band → blanco con vetas diagonales plateadas
   .aqua-band  → blanco con gradiente turquesa muy sutil, sin vetas
   Ambas comparten los mismos ajustes de texto y tarjetas.
   ========================================================================== */

/* ---------- Fondos ---------- */
.light-band{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FA 55%,#EEF1F4 100%);
  color:#4A545D;
}
.light-band::before{ /* vetas diagonales plateadas */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(112deg,
      rgba(120,140,158,.16) 0 1px,
      transparent 1px 6px),
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.9) 1px 2px,
      transparent 2px 6px);
}

.aqua-band{
  background:
    linear-gradient(168deg,
      #FFFFFF 0%,
      #F6FCFD 28%,
      #E9F7FB 58%,
      #DDF2F8 82%,
      #EAF7FA 100%);
  color:#4A545D;
}
.aqua-band::before{ /* halos turquesa difusos, sin líneas */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 12% 8%,rgba(31,212,245,.20),transparent 62%),
    radial-gradient(60% 55% at 92% 88%,rgba(11,143,168,.16),transparent 60%),
    radial-gradient(90% 70% at 50% 120%,rgba(31,212,245,.12),transparent 65%);
}

/* Costuras de luz arriba y abajo — funden con las secciones oscuras */
.light-band::after,
.aqua-band::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,6,7,.5),transparent 9%),
    linear-gradient(0deg,rgba(5,6,7,.5),transparent 9%);
}
.light-band::after{
  background:
    linear-gradient(180deg,rgba(5,6,7,.5),transparent 9%),
    linear-gradient(0deg,rgba(5,6,7,.5),transparent 9%),
    radial-gradient(80% 55% at 50% 0%,rgba(31,212,245,.1),transparent 60%);
}

/* Dos bandas claras seguidas: se quita la costura oscura del punto de unión
   para que se lean como un único bloque claro y no como dos recortes pegados.
   — la de arriba conserva solo su costura superior
   — la de abajo conserva solo su costura inferior */
.light-band:has(+ .light-band)::after,
.light-band:has(+ .aqua-band)::after,
.aqua-band:has(+ .aqua-band)::after,
.aqua-band:has(+ .light-band)::after{
  background:linear-gradient(180deg,rgba(5,6,7,.5),transparent 9%);
}
.light-band + .light-band::after,
.light-band + .aqua-band::after,
.aqua-band + .aqua-band::after,
.aqua-band + .light-band::after{
  background:linear-gradient(0deg,rgba(5,6,7,.5),transparent 9%);
}

.light-band > .wrap,
.aqua-band > .wrap{ position:relative; z-index:1; }

/* ---------- Texto sobre claro ---------- */
.light-band h1,.light-band h2,.light-band h3,.light-band h4,
.aqua-band h1,.aqua-band h2,.aqua-band h3,.aqua-band h4{ color:#080A0C; }
.light-band .lead,.aqua-band .lead{ color:#5C666F; }
.light-band .eyebrow,.aqua-band .eyebrow{ color:#0A7E96; }
.light-band .eyebrow::before,.aqua-band .eyebrow::before{ background:linear-gradient(90deg,transparent,#0A7E96); }
.light-band .eyebrow::after,.aqua-band .eyebrow::after{ background:linear-gradient(90deg,#0A7E96,transparent); }
.light-band strong,.aqua-band strong{ color:#080A0C; }
.light-band .rule,.aqua-band .rule{ background:linear-gradient(90deg,transparent,rgba(0,0,0,.14),transparent); }
.light-band .cyan,.aqua-band .cyan{ color:#0A7E96; }

/* ---------- Tarjetas sobre claro ---------- */
.light-band .card,.aqua-band .card{
  background:linear-gradient(165deg,#FFFFFF,#F1F4F6);
  border-color:rgba(10,14,18,.1);
}
.aqua-band .card{
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(233,247,251,.85));
  border-color:rgba(11,143,168,.16);
  backdrop-filter:blur(6px);
}
.light-band .card p,.aqua-band .card p{ color:#5C666F; }
.light-band .card:hover,.aqua-band .card:hover{
  border-color:rgba(10,126,150,.45);
  box-shadow:0 26px 60px -30px rgba(10,20,30,.45);
}
.aqua-band .card:hover{ box-shadow:0 26px 60px -30px rgba(8,80,100,.5); }
.light-band .card::after,.aqua-band .card::after{ background:radial-gradient(70% 55% at 50% 0%,rgba(31,212,245,.16),transparent 70%); }

/* ---------- Iconos y listas sobre claro ---------- */
.light-band .ico,.aqua-band .ico{
  background:linear-gradient(150deg,rgba(31,212,245,.2),rgba(31,212,245,.05));
  border-color:rgba(11,143,168,.28); color:#0A7E96;
}
.light-band .plan__list li,.aqua-band .plan__list li{ color:#3E474F; }
.light-band .plan__list li::before,.aqua-band .plan__list li::before{ border-color:#0A7E96; }
.light-band .plan__tier,.aqua-band .plan__tier,
.light-band .stat__label,.aqua-band .stat__label{ color:#78838D; }
.light-band .plan__price,.aqua-band .plan__price,
.light-band .stat__num,.aqua-band .stat__num{ color:#080A0C; }
.light-band .plan__price small,.aqua-band .plan__price small{ color:#78838D; }

/* ---------- Bloques de dolor ---------- */
.light-band .pain,.aqua-band .pain{ border-bottom-color:rgba(10,14,18,.1); }
.light-band .pain p,.aqua-band .pain p{ color:#5C666F; }
.light-band .pain__x,.aqua-band .pain__x{
  background:rgba(214,60,60,.08); border-color:rgba(214,60,60,.22); color:#C63A3A;
}

/* ---------- Proceso / stats sobre claro ---------- */
.light-band .steps,.aqua-band .steps{ border-color:rgba(10,14,18,.1); }
.light-band .steps{ background:rgba(10,14,18,.1); }
.aqua-band .steps{ background:rgba(11,143,168,.16); }
.light-band .step{ background:#F7F9FA; }
.aqua-band .step{ background:rgba(255,255,255,.9); }
.light-band .step:hover,.aqua-band .step:hover{ background:#FFFFFF; }
.light-band .step p,.aqua-band .step p{ color:#5C666F; }
.light-band .step__n,.aqua-band .step__n{ -webkit-text-stroke-color:rgba(10,126,150,.55); }
.light-band .stats,.aqua-band .stats{ border-color:rgba(10,14,18,.1); background:rgba(10,14,18,.1); }
.light-band .stat{ background:#F7F9FA; }
.aqua-band .stat{ background:rgba(255,255,255,.9); }
.light-band .stat:hover,.aqua-band .stat:hover{ background:#FFFFFF; }
.light-band .stat__num small,.aqua-band .stat__num small{ color:#0A7E96; }

/* ---------- Portafolio sobre claro ---------- */
.light-band .work__shot,.aqua-band .work__shot{ border-bottom-color:rgba(10,14,18,.1); }
.light-band .work__tag,.aqua-band .work__tag,
.light-band .work__url,.aqua-band .work__url{ color:#0A7E96; }
.light-band .work__desc,.aqua-band .work__desc{ color:#5C666F; }
.light-band .work__logo,.aqua-band .work__logo{
  box-shadow:0 10px 26px -12px rgba(8,40,55,.6), 0 0 0 1px rgba(10,14,18,.08);
}
.light-band .work:hover .work__logo,.aqua-band .work:hover .work__logo{
  box-shadow:0 16px 34px -14px rgba(8,40,55,.7), 0 0 0 1px rgba(11,143,168,.5);
}
.light-band .chip,.aqua-band .chip{
  border-color:rgba(10,14,18,.14); background:rgba(255,255,255,.7); color:#3E474F;
}
.light-band .chip:hover,.aqua-band .chip:hover{
  border-color:#0A7E96; color:#0A7E96; background:rgba(31,212,245,.1);
}

/* ---------- FAQ sobre claro ---------- */
.light-band .faq__item,.aqua-band .faq__item{ border-bottom-color:rgba(10,14,18,.12); }
.light-band .faq__q,.aqua-band .faq__q{ color:#080A0C; }
.light-band .faq__q:hover,.aqua-band .faq__q:hover{ color:#0A7E96; }
.light-band .faq__q i,.aqua-band .faq__q i{ border-color:rgba(10,14,18,.2); background:rgba(255,255,255,.6); }
.light-band .faq__q i::before,.aqua-band .faq__q i::before,
.light-band .faq__q i::after,.aqua-band .faq__q i::after{ background:#0A7E96; }
.light-band .faq__item.is-open .faq__q i,.aqua-band .faq__item.is-open .faq__q i{ border-color:#0A7E96; }
.light-band .faq__a p,.aqua-band .faq__a p{ color:#5C666F; }

/* Marcas de dato pendiente sobre claro */
.light-band .todo,.aqua-band .todo{
  color:#8A5300; background:rgba(200,130,20,.12); border-color:rgba(160,105,15,.45);
}

/* ---------- Botones sobre claro ---------- */
.light-band .btn--ghost,.aqua-band .btn--ghost{
  background:rgba(10,14,18,.03); color:#080A0C; border-color:rgba(10,14,18,.16);
}
.light-band .btn--ghost:hover,.aqua-band .btn--ghost:hover{
  border-color:#0A7E96; color:#0A7E96; background:rgba(31,212,245,.08);
}

/* ---------- Panel metálico ---------- */
/* Debe ir DESPUÉS de .card para ganar en `class="card metal"` (misma especificidad) */
.light-band .metal{
  background:
    linear-gradient(158deg,#FFFFFF 0%,#E8ECF0 24%,#FBFCFD 48%,#DFE4E9 74%,#F4F6F8 100%);
  border-color:rgba(10,14,18,.12);
  box-shadow:0 22px 50px -34px rgba(10,20,30,.5);
}
.light-band .metal::before{
  background:
    repeating-linear-gradient(112deg,rgba(120,140,158,.14) 0 1px,transparent 1px 5px),
    radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.95),transparent 55%);
  mix-blend-mode:normal; opacity:.9;
}

/* Versión aqua del panel: cristal turquesa, sin vetas */
.aqua-band .metal{
  background:
    linear-gradient(158deg,#FFFFFF 0%,#F2FBFD 30%,#E4F5FA 62%,#F7FCFE 100%);
  border-color:rgba(11,143,168,.2);
  box-shadow:0 22px 50px -34px rgba(8,80,100,.55);
}
.aqua-band .metal::before{
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(255,255,255,.95),transparent 58%),
    radial-gradient(80% 70% at 88% 100%,rgba(31,212,245,.16),transparent 62%);
  mix-blend-mode:normal; opacity:1;
}

.light-band .metal::after,.aqua-band .metal::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);
}

.light-band .pain{ border-bottom-color:rgba(10,14,18,.1); }
.light-band .pain p{ color:#5C666F; }
.light-band .pain__x{
  background:rgba(214,60,60,.08); border-color:rgba(214,60,60,.22); color:#C63A3A;
}

.light-band .btn--ghost{ background:rgba(10,14,18,.03); color:#080A0C; border-color:rgba(10,14,18,.16); }
.light-band .btn--ghost:hover{ border-color:#0A7E96; color:#0A7E96; background:rgba(31,212,245,.08); }

.card{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease), background .4s;
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(70% 55% at 50% 0%,rgba(31,212,245,.14),transparent 70%);
  transition:opacity .5s var(--ease);
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(31,212,245,.4);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(31,212,245,.08);
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

.grid{ display:grid; gap:clamp(16px,2vw,24px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Fondos decorativos ---------- */
.bg-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at 50% 35%,#000 5%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 35%,#000 5%,transparent 72%);
}
.orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); opacity:.5;
}
.orb--cyan{ background:radial-gradient(circle,rgba(31,212,245,.55),transparent 68%); }
.orb--steel{ background:radial-gradient(circle,rgba(150,175,195,.3),transparent 68%); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .45s var(--ease-soft), backdrop-filter .45s, border-color .45s, padding .45s var(--ease-soft);
  border-bottom:1px solid transparent;
  padding:16px 0;
}
.nav.is-stuck{
  background:rgba(6,8,9,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  padding:9px 0;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height:38px; width:auto; border-radius:9px; transition:height .45s var(--ease-soft); }
.nav.is-stuck .brand img{ height:32px; }
.brand__txt{
  /* Poppins: geométrica de trazo circular, es la que más se acerca al logotipo */
  font-family:'Poppins','Space Grotesk',sans-serif; font-weight:700;
  font-size:1.18rem; color:#fff; letter-spacing:-.01em;
}
.brand__txt span{ color:var(--cyan); }

/* Logotipo del nav: solo texto, O y D en turquesa */
.nav .brand__txt{
  font-size:1.52rem; letter-spacing:-.005em;
  transition:font-size .45s var(--ease-soft);
}
.nav.is-stuck .brand__txt{ font-size:1.34rem; }
.nav .brand__txt span{ color:var(--cyan); }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  position:relative; padding:9px 15px; border-radius:100px;
  font-size:.9rem; color:var(--muted); font-weight:500;
  transition:color .3s, background .3s;
}
.nav__links a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.nav__links a.is-active{ color:var(--cyan); }
.nav__links a.is-active::after{
  content:''; position:absolute; left:15px; right:15px; bottom:3px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.nav__cta{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
  cursor:pointer; padding:0; place-items:center;
}
.burger span{ display:block; width:19px; height:1.5px; background:#fff; margin:4px auto; transition:transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 90px; overflow:hidden;
}
.hero__inner{ position:relative; z-index:2; max-width:960px; }
.hero .h-xl{ margin-bottom:26px; }
.hero__price{
  display:inline-block; position:relative; white-space:nowrap;
}
.hero__price::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:.35; border-radius:4px;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px;
  font-size:.85rem; color:var(--dim); font-family:'Space Grotesk',sans-serif; letter-spacing:.06em;
}
.hero__meta span{ display:flex; align-items:center; gap:8px; }
.hero__meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.hero__scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim);
}
.hero__scroll i{ display:block; width:1px; height:44px; background:linear-gradient(180deg,var(--cyan),transparent); animation:drop 2.1s var(--ease-soft) infinite; }
@keyframes drop{ 0%{ transform:scaleY(.15); transform-origin:top; opacity:0 } 45%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(.15); transform-origin:bottom; opacity:0 } }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 12px; border-radius:100px; margin-bottom:26px;
  background:rgba(31,212,245,.07); border:1px solid rgba(31,212,245,.24);
  font-size:.78rem; color:var(--cyan-soft); font-weight:500;
}
.badge b{ color:#fff; font-weight:600; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 var(--cyan-glow); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(31,212,245,.55) } 70%{ box-shadow:0 0 0 11px rgba(31,212,245,0) } 100%{ box-shadow:0 0 0 0 rgba(31,212,245,0) } }

/* ---------- Page header (subpáginas) ---------- */
.phead{
  position:relative; padding:170px 0 clamp(60px,8vw,100px); overflow:hidden;
  border-bottom:1px solid var(--line);
}
.phead__inner{ position:relative; z-index:2; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:#0A0C0E; padding:clamp(26px,3.6vw,42px) clamp(18px,2vw,28px); text-align:center; transition:background .4s; }
.stat:hover{ background:#0F1418; }
.stat__num{
  font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1; color:var(--white);
}
.stat__num small{ color:var(--cyan); font-size:.55em; margin-left:2px; }
.stat__label{ margin-top:12px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* ---------- Problema ---------- */
.pain{ display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line); }
.pain:last-child{ border-bottom:0; }
.pain__x{
  flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,90,90,.08); border:1px solid rgba(255,90,90,.2); color:#FF7A7A; font-size:.9rem;
}
.pain h4{ margin:0 0 4px; font-size:1.02rem; }
.pain p{ margin:0; font-size:.93rem; color:var(--muted); }

/* ---------- Icono ---------- */
.ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg,rgba(31,212,245,.16),rgba(31,212,245,.03));
  border:1px solid rgba(31,212,245,.24); color:var(--cyan);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.ico svg{ width:24px; height:24px; }
.card:hover .ico{ transform:scale(1.08) rotate(-4deg); box-shadow:0 0 26px -6px var(--cyan-glow); }

/* ---------- Planes ---------- */
.plan{ display:flex; flex-direction:column; }
.plan__tier{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.plan__name{ font-size:1.32rem; margin-bottom:14px; }
.plan__price{
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff;
  font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.15; letter-spacing:-.02em;
}
.plan__price small{ display:block; font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:7px; }
.plan__list{ list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:11px; }
.plan__list li{ position:relative; padding-left:26px; font-size:.92rem; color:var(--text); }
.plan__list li::before{
  content:''; position:absolute; left:0; top:.52em; width:13px; height:7px;
  border-left:1.8px solid var(--cyan); border-bottom:1.8px solid var(--cyan);
  transform:rotate(-45deg);
}
.plan .btn{ margin-top:auto; }
.plan--featured{
  background:linear-gradient(165deg,rgba(31,212,245,.1),rgba(31,212,245,.015));
  border-color:rgba(31,212,245,.35);
}
.plan__flag{
  position:absolute; top:0; right:0;
  background:linear-gradient(135deg,var(--cyan-soft),var(--cyan));
  color:#03181E; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 16px; border-radius:0 var(--r) 0 var(--r);
}

/* ---------- Portafolio ---------- */
.work{ display:flex; flex-direction:column; padding:0; overflow:hidden; }

/* Marco de la captura */
.work__shot{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#0C0F11; border-bottom:1px solid var(--line);
}
.work__shot-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  transition:object-position 1.8s var(--ease-soft), filter .6s var(--ease);
  filter:saturate(.92) contrast(1.02);
}
.work:hover .work__shot-img{ object-position:center bottom; filter:saturate(1) contrast(1.04); }

.work__shot::before{ /* velo inferior para que respire el logo */
  content:''; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:1;
  background:linear-gradient(0deg,rgba(4,6,8,.88) 0%,rgba(4,6,8,.35) 45%,transparent 100%);
  pointer-events:none;
}
.work__shot::after{ /* destello diagonal al hover */
  content:''; position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 32%,rgba(31,212,245,.28) 50%,transparent 68%);
  transform:translateX(-100%); transition:opacity .3s;
}
.work:hover .work__shot::after{ opacity:1; animation:sheen 1.1s var(--ease) forwards; }
@keyframes sheen{ to{ transform:translateX(100%); } }

/* Chip con el logo del cliente */
.work__logo{
  position:absolute; left:16px; bottom:16px; z-index:2;
  height:44px; padding:0 13px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFFFFF; border-radius:11px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.work__logo img{ max-height:24px; max-width:130px; width:auto; height:auto; }
.work:hover .work__logo{
  transform:translateY(-4px);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(31,212,245,.45);
}

/* Texto de la tarjeta */
.work__body{ padding:22px clamp(18px,2.2vw,26px) 26px; display:flex; flex-direction:column; flex:1; }
.work__tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:9px; }
.work h3{ font-size:1.18rem; margin-bottom:10px; }
.work__desc{ font-size:.88rem; line-height:1.6; color:var(--muted); margin:0 0 16px; flex:1; }
.work__url{
  font-size:.82rem; color:var(--cyan); word-break:break-all;
  display:inline-flex; align-items:center; gap:5px;
  transition:gap .35s var(--ease);
}
.work:hover .work__url{ gap:9px; }

.sectors{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.chip{
  padding:10px 20px; border-radius:100px; border:1px solid var(--line-strong);
  background:rgba(255, 255, 255, 0); font-size:.87rem; color:var(--text);
  transition:border-color .35s, color .35s, transform .35s var(--ease), background .35s;
}
.chip:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px); background:rgba(31,212,245,.05); }


.chip-aqua{
  padding:10px 20px; border-radius:100px; border:1px solid #bfd6db;
  background:rgba(255,255,255,.02); font-size:.87rem; color:#0b6b7e;
  transition:border-color .35s, color .35s, transform .35s var(--ease), background .35s;
}
.chip-aqua:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px); background:rgba(31,212,245,.05); }

/* ---------- Proceso ---------- */
.steps{ position:relative; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:repeat(4,1fr); }
.step{ background:#0A0C0E; padding:clamp(26px,3vw,36px); transition:background .45s; }
.step:hover{ background:#0E1317; }
.step__n{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(31,212,245,.45); margin-bottom:18px;
}
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--muted); margin:0; }

/* Paso en blanco — para destacar cajas concretas sobre una sección oscura */
.step--light{ background:linear-gradient(168deg,#FFFFFF 0%,#EDF1F4 100%); }
.step--light h3{ color:#080A0C; }
.step--light p{ color:#5C666F; }
.step--light .step__n{ -webkit-text-stroke-color:rgba(10,126,150,.6); }
.step--light:hover{ background:linear-gradient(168deg,#FFFFFF 0%,#F8FAFB 100%); }

/* Paso de acento — cierra la serie sin romper el ritmo visual */
.step--accent{ background:linear-gradient(168deg,#0D191E 0%,#0A0C0E 100%); }
.step--accent h3{ color:var(--cyan); }
.step--accent .step__n{ -webkit-text-stroke-color:rgba(31,212,245,.8); }
.step--accent:hover{ background:linear-gradient(168deg,#112229 0%,#0C0F11 100%); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; font-family:'Space Grotesk',sans-serif; font-size:1.03rem; font-weight:500; color:#fff;
  transition:color .3s;
}
.faq__q:hover{ color:var(--cyan); }
.faq__q i{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; position:relative; transition:transform .4s var(--ease), border-color .3s;
}
.faq__q i::before,.faq__q i::after{ content:''; position:absolute; background:var(--cyan); border-radius:2px; }
.faq__q i::before{ width:11px; height:1.5px; }
.faq__q i::after{ width:1.5px; height:11px; transition:transform .4s var(--ease); }
.faq__item.is-open .faq__q i{ transform:rotate(180deg); border-color:var(--cyan); }
.faq__item.is-open .faq__q i::after{ transform:scaleY(0); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.faq__a p{ padding-bottom:24px; margin:0; color:var(--muted); font-size:.95rem; max-width:70ch; }
.faq__a a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:opacity .3s; }
.faq__a a:hover{ opacity:.7; }

/* ---------- Formulario ---------- */
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong); color:#fff;
  font-family:inherit; font-size:.95rem; transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--cyan); background:rgba(31,212,245,.04);
  box-shadow:0 0 0 3px rgba(31,212,245,.12);
}
.field input::placeholder,.field textarea::placeholder{ color:#4E585F; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:#0F1215; color:#fff; }
.form__note{ font-size:.8rem; color:var(--dim); }

/* ---------- Contacto directo ---------- */
.contact-line{
  display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);
}
.contact-line:last-child{ border-bottom:0; }
.contact-line__ico{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(31,212,245,.08); border:1px solid rgba(31,212,245,.2); color:var(--cyan);
}
.contact-line__ico svg{ width:19px; height:19px; }
.contact-line small{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:3px; }
.contact-line b{ font-weight:500; color:#fff; font-size:1rem; }

.todo{
  color:#FFC46B; background:rgba(255,196,107,.09); border:1px dashed rgba(255,196,107,.35);
  padding:1px 9px; border-radius:6px; font-size:.88em; font-family:'Space Grotesk',sans-serif;
}

/* ---------- CTA final ---------- */
.cta-final{ position:relative; text-align:center; padding:clamp(48px,7vw,80px) clamp(24px,5vw,64px); }
.cta-final .h-lg{ margin-bottom:18px; }

/* ---------- Footer ---------- */
.footer{
  position:relative; overflow:hidden; isolation:isolate;
  border-top:1px solid var(--line); background:#06080A; padding:70px 0 34px;
}

/* Marca de agua: trama del monograma OnDev */
.footer::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('../tramaOnDev2.png');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:.6;
  mix-blend-mode:screen;
  /* se disuelve progresivamente hacia el final: nunca hay un corte de imagen */
  -webkit-mask-image:
    linear-gradient(180deg,
      #000 0%,
      rgba(0,0,0,.82) 20%,
      rgba(0,0,0,.5) 58%,
      rgba(0,0,0,.2) 78%,
      rgba(0,0,0,.05) 91%,
      transparent 100%);
  mask-image:
    linear-gradient(180deg,
      #000 0%,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.5) 54%,
      rgba(0,0,0,.2) 78%,
      rgba(0,0,0,.05) 98%,
      transparent 100%);
}

/* Halo turquesa que tiñe la trama */
.footer::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% 0%,rgba(31,212,245,.14),transparent 62%),
    radial-gradient(60% 70% at 10% 100%,rgba(11,143,168,.1),transparent 65%);
}

.footer > .wrap{ position:relative; z-index:1; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; margin-bottom:52px; }
.footer h5{ font-family:'Space Grotesk',sans-serif; color:#fff; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 18px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer a{ color:var(--muted); font-size:.92rem; transition:color .3s, padding-left .3s; }
.footer a:hover{ color:var(--cyan); padding-left:4px; }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:.83rem; color:var(--dim); }
.footer__brand p{ color:var(--muted); font-size:.92rem; max-width:38ch; margin-top:16px; }

/* ---------- Reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease), transform .95s var(--ease), filter .85s var(--ease);
  filter:blur(6px);
  transition-delay:calc(var(--i,0) * 90ms);
}
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.94) translateY(20px); }
[data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }

/* ---------- Parallax ---------- */
[data-parallax]{ will-change:transform; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
}
@media (max-width:860px){
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; padding:96px 24px 32px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(6,8,9,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-101%); transition:transform .5s var(--ease);
    z-index:-1;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ padding:15px 12px; font-size:1.05rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__links a.is-active::after{ display:none; }
  .burger{ display:grid; }
  .nav__cta .btn{ display:none; }
  .g-3,.g-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .g-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:34px; }
  .hero{ min-height:auto; padding:130px 0 80px; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; filter:none; }
}