/* =========================
   PALETA TOTALMENTE NUEVA (no usada antes)
   Primario:   #FF6B00  (naranja fuerte)
   Secundario: #00D084  (turquesa brillante)
   Fondo:      #0A0F1E  (azul petróleo oscuro)
   Superficie: #111A33
   Texto:      #F7F9FF
   Acento 1:   #00A2FF  (azul eléctrico)
   Acento 2:   #FF4D8D  (rosa intenso)
   Acento 3:   #B4FF3B  (lima)
========================= */

:root{
  --primary:#FF6B00;
  --secondary:#00D084;
  --bg:#0A0F1E;
  --surface:#111A33;
  --text:#F7F9FF;
  --blue:#00A2FF;
  --pink:#FF4D8D;
  --lime:#B4FF3B;

  --radius:18px;
  --shadow:0 14px 32px 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;
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 0% -10%, rgba(255,107,0,.22) 0%, transparent 60%),
    radial-gradient(1000px 600px at 105% 0%, rgba(0,208,132,.22) 0%, transparent 55%),
    radial-gradient(900px 700px at 55% 115%, rgba(0,162,255,.18) 0%, transparent 60%),
    var(--bg);
  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,107,0,.22), rgba(0,208,132,.22));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.lead{ font-size:1.15rem; max-width:62ch; color:#dfe7ff; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(8px) saturate(140%);
  background:rgba(10,15,30,.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(--blue), var(--secondary), var(--lime), var(--primary));
  color:#07111e; 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,107,0,.30), rgba(0,208,132,.30));
  border:1px solid rgba(255,255,255,.14);
}

/* Hero Ads */
.hero{ padding:4.5rem 0 3rem; }
.hero-ads{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(0,208,132,.20), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(255,77,141,.25), 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; }

.trust-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.trust-pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:.35rem .6rem; border-radius:999px; font-weight:900; font-size:.9rem;
}

/* Collage */
.hero-collage{
  margin-top:1.6rem;
  display:grid; grid-template-columns:repeat(4,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:#041b14; }
.btn-contrast{
  background:linear-gradient(90deg, var(--blue), var(--lime));
  color:#041628;
}

/* Cards / grids */
.cards-grid{ display:grid; gap:1rem; margin-top:1.2rem; }
.cards-3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.glow-card{ position:relative; overflow:hidden; }
.glow-card::before{
  content:""; position:absolute; inset:-35% auto auto -35%;
  width:240px; height:240px; filter:blur(55px); opacity:.65;
}
.glow-card.coral::before{ background:var(--primary); }
.glow-card.mint::before{ background:var(--secondary); }
.glow-card.sun::before{ background:var(--blue); }

.big-checklist{ padding-left:1.1rem; font-size:1.05rem; }
.big-checklist li::marker{ color:var(--lime); }
.checklist{ padding-left:1.1rem; }
.checklist li::marker{ color:var(--blue); }

/* 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(--pink));
  color:white; font-weight:1000; margin-bottom:.6rem;
}

/* Image strip */
.img-strip{
  margin-top:1.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
}

/* 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(--lime); 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);
}

/* 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:#0b1530; 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(--primary);
  background:linear-gradient(180deg, rgba(255,107,0,.12), transparent), var(--surface);
}
.stars{ color:var(--primary); letter-spacing:1px; font-size:1.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{ margin-top:1.6rem; }

/* FAQ */
.faq-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem;
}
.faq{
  background:var(--surface); padding:1rem; border-radius:14px;
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--shadow);
}
.faq summary{ cursor:pointer; font-weight:900; }

/* CTA */
.cta-ads{
  background:linear-gradient(90deg, rgba(255,107,0,.30), rgba(0,162,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:#050815;
  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-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-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; }
  .faq-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-collage{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .cards-3, .steps-grid, .products-3, .team-grid, .cases-grid, .testimonials-grid{
    grid-template-columns:1fr;
  }
  .hero-collage{ grid-template-columns:1fr; }
  .img-strip{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:2.15rem; }
}
