/* =========================
   PALETA ULTRA VIVA (llamativa)
   Primario:   #FF1E8A  (fucsia intenso)
   Secundario: #00E5FF  (cian eléctrico)
   Fondo:      #070A1A  (azul noche)
   Superficie: #0F1636
   Texto:      #F8FAFF
   Acento 1:   #FFD60A  (amarillo neón)
   Acento 2:   #7CFF6B  (verde neón)
   Acento 3:   #8B5CF6  (violeta)
========================= */

:root{
  --primary:#FF1E8A;
  --secondary:#00E5FF;
  --bg:#070A1A;
  --surface:#0F1636;
  --text:#F8FAFF;
  --yellow:#FFD60A;
  --green:#7CFF6B;
  --violet:#8B5CF6;

  --radius:18px;
  --shadow:0 14px 30px rgba(0,0,0,.45);
  --container:1140px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,.20) 0%, transparent 60%),
    radial-gradient(1100px 700px at 110% 0%, rgba(255,30,138,.25) 0%, transparent 55%),
    radial-gradient(900px 700px at 60% 120%, rgba(139,92,246,.22) 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
}

img{ max-width:100%; display:block; border-radius:calc(var(--radius) - 6px); }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.9; }

.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

.section{ padding:4.2rem 0; }
.section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-block:1px solid rgba(255,255,255,.08);
}

.two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
}

.page-hero{
  padding:3.2rem 0 2rem;
  background:linear-gradient(135deg, rgba(255,30,138,.22), rgba(0,229,255,.22));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.page-hero-vivo h1{ text-shadow:0 8px 24px rgba(0,0,0,.55); }

.lead{ font-size:1.15rem; max-width:62ch; color:#dbe4ff; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(8px) saturate(140%);
  background:rgba(7,10,26,.88);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; }
.brand-mark{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:conic-gradient(from 140deg, var(--primary), var(--secondary), var(--yellow), var(--violet), var(--primary));
  color:#050814; font-weight:1000;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
}

.main-nav ul{
  display:flex; flex-wrap:wrap; list-style:none;
  gap:.7rem; padding:0; margin:0;
}
.main-nav a{
  padding:.48rem .75rem; border-radius:12px; font-weight:800;
}
.main-nav a.active,
.main-nav a:hover{
  background:linear-gradient(90deg, rgba(255,30,138,.28), rgba(0,229,255,.28));
  border:1px solid rgba(255,255,255,.14);
}

/* Hero impacto */
.hero{ padding:4.5rem 0 3rem; }
.hero-impacto{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(0,229,255,.20), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(255,30,138,.30), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.hero-copy h1{ font-size:2.8rem; margin:0 0 .8rem; }
.hero-actions{ display:flex; gap:.8rem; margin:1.2rem 0; flex-wrap:wrap; }

.hero-highlights{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.2rem;
}
.highlight{
  background:var(--surface); padding:.9rem; border-radius:14px; text-align:center;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.highlight strong{ font-size:1.6rem; color:var(--green); display:block; }

/* Collage */
.hero-collage{
  margin-top:1.6rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
}
.hero-collage img{
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; border-radius:14px;
  font-weight:900; border:2px solid transparent;
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-2px); filter:saturate(130%); }
.btn-primary{ background:var(--primary); color:white; }
.btn-secondary{ background:var(--secondary); color:#00131a; }
.btn-contrast{
  background:linear-gradient(90deg, var(--yellow), var(--green));
  color:#050814;
}

/* Cards / grids */
.cards-grid{
  display:grid; gap:1rem; margin-top:1.2rem;
}
.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.neon-card{
  position:relative;
  overflow:hidden;
}
.neon-card::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width:220px; height:220px; filter:blur(50px); opacity:.6;
  transform:rotate(25deg);
}
.neon-card.pink::before{ background:var(--primary); }
.neon-card.cyan::before{ background:var(--secondary); }
.neon-card.yellow::before{ background:var(--yellow); }
.neon-card.green::before{ background:var(--green); }

/* Steps */
.steps-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.2rem;
}
.step{
  background:var(--surface);
  padding:1.1rem; border-radius:16px; border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow);
}
.step-num{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:white; font-weight:1000; margin-bottom:.6rem;
}

/* Products */
.products-grid{
  display:grid; gap:1.1rem; margin-top:1.2rem;
}
.products-3{ grid-template-columns:repeat(3,1fr); }

.product-card{
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden; border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.product-body{ padding:1rem 1rem 1.1rem; }
.price{ font-weight:1000; color:var(--green); margin:.6rem 0 0; }

/* Team */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.2rem;
}
.team-card{
  background:var(--surface);
  padding:1rem; border-radius:16px; text-align:center;
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow);
}
.team-card h3{ margin:.7rem 0 .2rem; }

/* Contact */
.contact-form{
  background:var(--surface);
  padding:1.2rem; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  display:grid; gap:.7rem; box-shadow:var(--shadow);
}
.contact-form input, .contact-form textarea{
  width:100%; padding:.8rem .9rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:#0a1230; color:var(--text); font-size:1rem;
}
.info-list{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.4rem; }
.social-links{ list-style:none; padding:0; margin:0; display:flex; gap:.6rem; flex-wrap:wrap; }
.social-links a{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:.45rem .7rem; border-radius:999px; font-weight:900;
}
.contact-photos{ display:grid; gap:.8rem; margin:1rem 0; }

/* Testimonials / cases */
.testimonials-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.2rem;
}
.testimonial-card{
  background:var(--surface);
  padding:1.2rem; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow);
}
.testimonial-card.featured{
  outline:2px solid var(--yellow);
  background:
    linear-gradient(180deg, rgba(255,214,10,.10), transparent),
    var(--surface);
}
.stars{ color:var(--yellow); letter-spacing:1px; font-size:1.1rem; }
.testimonial-author{ margin-top:.8rem; color:#d6e2ff; display:grid; gap:.1rem; }

.cases-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem;
}
.case-card{
  background:var(--surface);
  padding:1rem; border-radius:16px; border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow);
}

/* Wide figure */
.wide-figure{ margin-top:1.6rem; }

/* CTA */
.cta-impacto{
  background:linear-gradient(90deg, rgba(255,30,138,.30), rgba(0,229,255,.30));
}
.cta-inner{
  background:var(--surface);
  padding:2rem; border-radius:22px; text-align:center;
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow);
}

/* Footer */
.site-footer{
  background:#040611;
  color:#cfe0ff;
  padding:2.6rem 0 1.2rem;
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.5rem;
}
.footer-title{ margin:0 0 .3rem; }
.footer-links{
  list-style:none; padding:0; margin:0; display:grid; gap:.4rem;
}
.footer-links a{ color:#cfe0ff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1.5rem; padding-top:1rem;
  font-size:.9rem; color:#9fb4e9;
  display:flex; justify-content:space-between; align-items:center;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid, .two-col{ grid-template-columns:1fr; }
  .cards-4{ grid-template-columns:1fr 1fr; }
  .cards-3{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .products-3{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .cases-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .cards-4, .cards-3, .steps-grid, .products-3, .team-grid, .cases-grid, .testimonials-grid{
    grid-template-columns:1fr;
  }
  .hero-copy h1{ font-size:2.15rem; }
  .hero-collage{ grid-template-columns:1fr; }
}