/* =========================================
   Reset y base
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: #E6E9EF;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(800px 480px at 88% -8%, rgba(34,211,238,0.18), transparent 60%),
    #0B1220;
  line-height: 1.6;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

/* =========================================
   (variables)
   ========================================= */
:root{
  --bg: #0B1220;
  --bg-elev: #0F172A;
  --text: #E6E9EF;
  --muted: #A3B0C2;
  --border: #1E293B;
  --blue: #22D3EE;
  --purple: #8B5CF6;
  --primary: linear-gradient(135deg, #8B5CF6, #22D3EE);
  --radius: 18px;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
  --container: 1120px;
}

/* =========================================
   Layout base
   ========================================= */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

/* =========================================
   Header / Nav
   ========================================= */
.header{
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px) saturate(120%);
  background: rgba(9,13,24,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-container{
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo{ display: flex; align-items: center; gap: 12px; }
.logo img{ height: 48px; width: auto; }
.brand-name{ font-weight: 800; letter-spacing: .2px; color: #BDA6FF; }

.nav{ display: flex; gap: 28px; }
.nav a{
  color: var(--muted); padding: 8px 10px; border-radius: 10px;
  transition: color .15s, background .15s;
}
.nav a:hover{ color: var(--text); background: rgba(255,255,255,.06); }

.nav-toggle{ display: none; background: none; border: none; font-size: 2rem; color: #BDA6FF; cursor: pointer; }
@media (max-width: 860px){
  .nav{ display: none; }
  .nav.active{
    display: flex; flex-direction: column;
    position: absolute; right: 18px; top: 70px;
    background: #0E1628; border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 10px; width: 200px; gap: 4px;
    box-shadow: var(--shadow);
  }
  .nav a{ padding: 12px; }
  .nav-toggle{ display: block; }
}

/* =========================================
   Utilidades
   ========================================= */
.text-gradient{
  background: var(--primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.glow{ box-shadow: 0 0 0 2px rgba(139,92,246,.18), 0 18px 60px rgba(34,211,238,.14); }
.small{ font-size: .95rem; }
.muted{ color: var(--muted); }

/* =========================================
   Hero
   ========================================= */
.hero{
  padding: 96px 0 56px;
  position: relative;
}
.hero::before{
  content: ""; position: absolute; inset: auto 0 0 0; height: 180px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(139,92,246,.12), transparent 70%);
  pointer-events: none;
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: nowrap;
}
.hero-text {
  flex: 1 1 520px;
  min-width: 0;
}
.hero h1{
  margin: 0 0 12px; line-height: 1.08; font-weight: 800;
  font-size: clamp(28px, 5vw, 54px);
  background: var(--primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle{ color: var(--muted); font-size: clamp(16px, 2vw, 20px); margin: 0 0 22px; }

.hero-image {
  flex: 0 0 auto;
  width: 380px;       
  height: auto;
  display: block;
  border-radius: 18px;
}
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column-reverse; /* Imagen arriba del texto */
    text-align: center;
  }
  .hero-image {
    width: 100%;
    max-width: 280px;   /* Ajuste visual en móviles */
    margin-bottom: 16px;
  }
  .hero-text {
    flex: unset;
  }
}
/* =========================================
   Botones
   ========================================= */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 12px 26px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02); color: var(--text);
  transition: transform .12s, box-shadow .18s, background .18s;
}
.btn:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.btn-primary{
  background: var(--primary); color: #071018; border: none;
  box-shadow: 0 12px 34px rgba(139,92,246,.25), 0 8px 28px rgba(34,211,238,.18);
}
.btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn-lg{ padding: 14px 30px; font-size: 1.06rem; }
.btn-whatsapp{
  background: linear-gradient(135deg, #25D366, #22D3EE); color: #081C12; border: none;
  box-shadow: 0 12px 34px rgba(34,211,238,.18), 0 8px 24px rgba(37,211,102,.22);
}
.btn-whatsapp:hover{ filter: brightness(1.05); }

/* =========================================
   Servicios (index.html)
   ========================================= */
.services{ padding: 76px 0 50px; position: relative; }
.services .section-title{
  text-align: center; margin: 0 0 38px; font-weight: 800;
  font-size: clamp(22px, 3.2vw, 36px);
  background: var(--primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Grid */
.services-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; align-items: stretch;
}
@media (max-width: 980px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }

/* Tarjeta */
.service-card{
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 320px;
  padding: 28px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  overflow: hidden; isolation: isolate;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.service-card::before{
  content: ""; position: absolute; inset: -25% -15% auto -15%; height: 70%;
  background:
    radial-gradient(55% 60% at 15% 10%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(45% 60% at 85% 30%, rgba(34,211,238,.16), transparent 70%);
  z-index: -1; opacity: .85; transition: opacity .2s ease, transform .2s ease;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(139,92,246,.22), 0 14px 38px rgba(34,211,238,.16);
  border-color: rgba(139,92,246,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.service-card:hover::before{ opacity: 1; transform: translateY(-6px); }

.service-card svg{
  display: block; margin-bottom: 14px; width: 42px; height: 42px;
  filter: drop-shadow(0 6px 16px rgba(34,211,238,.15))
          drop-shadow(0 4px 14px rgba(139,92,246,.12));
  transition: transform .18s ease;
}
.service-card:hover svg{ transform: translateY(-2px) scale(1.03); }

.service-card h3{
  margin: 6px 0 10px; font-size: 1.22rem; font-weight: 800;
  background: var(--primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.service-card p:first-of-type{
  font-weight: 600; color: #E9F0FF; opacity: .9; font-size: 1.05rem; letter-spacing: .1px;
  text-shadow: 0 0 10px rgba(34,211,238,.18);
}
.service-card p:last-of-type{
  color: var(--muted); font-size: 1rem; line-height: 1.6; margin-top: 8px;
}
.service-card br{ display: none; }

@media (max-width: 640px){
  .service-card{ min-height: auto; padding: 24px 18px; }
}

/* =========================================
   Stack
   ========================================= */
.stack{ padding: 80px 0 60px; position: relative; }
.stack::before{
  content: ""; position: absolute; left: 0; top: -60px; width: 60%; height: 220px;
  background: radial-gradient(40% 60% at 10% 40%, rgba(139,92,246,.20), transparent 70%);
  pointer-events: none;
}
.stack .section-title{
  text-align: center; margin-bottom: 36px; font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  background: var(--primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stack-card{
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(34,211,238,.08));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  padding: 36px 24px; text-align: center; backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stack-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,92,246,.20), 0 12px 40px rgba(34,211,238,.15);
}
.stack-icons{
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px;
}
.stack-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text); font-weight: 600; font-size: 1rem;
  transition: transform .18s ease, opacity .18s ease;
}
.stack-item img{
  width: 56px; height: 56px;
  filter: drop-shadow(0 4px 12px rgba(34,211,238,.2))
          drop-shadow(0 3px 10px rgba(139,92,246,.2));
  transition: transform .18s ease;
}
.stack-item:hover img{ transform: translateY(-4px) scale(1.05); }
.stack-item:hover{ opacity: 1; transform: translateY(-2px); }
@media (max-width: 700px){
  .stack-icons{ gap: 28px; }
  .stack-item img{ width: 48px; height: 48px; }
}

/* =========================================
   Contacto y Footer
   ========================================= */
.contact{ padding: 64px 0 36px; }
.contact-content{ text-align: center; max-width: 520px; margin: 0 auto; }
.contact-note{ color: var(--muted); margin-top: 10px; }

.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
  padding: 26px 0 34px; margin-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
/*
.footer-content{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
  */
.footer-content {
  display: flex;
  align-items: center;
  justify-content: center; 
  text-align: center;     
  gap: 12px;
  flex-wrap: wrap;
}

 
.footer-links{ display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a:hover{ color: #D7E5FF; }
@media (max-width: 600px){
  .footer-content{ flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================
   Precios (precios.html)
   ========================================= */
.hero-pricing{ padding: 78px 0 34px; }

.pricing{
  padding-top: 24px;
  padding-bottom: 8px;   /* no se pisa el padding lateral del .container */
}
.pricing-grid{
  display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px){ .pricing-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .pricing-grid{ grid-template-columns: 1fr; } }

.price-card{
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 440px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 24px 18px 18px;
  box-shadow: var(--shadow);
  overflow: hidden; isolation: isolate;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s;
}
.price-card::before{
  content: ""; position: absolute; inset: -25% -15% auto -15%; height: 70%;
  background:
    radial-gradient(55% 60% at 15% 10%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(45% 60% at 85% 30%, rgba(34,211,238,.16), transparent 70%);
  z-index: -1; opacity: .85; transition: opacity .2s, transform .2s;
}
.price-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(139,92,246,.22), 0 14px 38px rgba(34,211,238,.16);
  border-color: rgba(139,92,246,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.price-card:hover::before{ opacity: 1; transform: translateY(-6px); }

.price-card--featured{
  border-color: rgba(139,92,246,.38);
  background: linear-gradient(180deg, rgba(139,92,246,.08), rgba(34,211,238,.05));
  box-shadow: 0 22px 60px rgba(139,92,246,.26), 0 16px 40px rgba(34,211,238,.18);
}

.price-head .pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #DDE3EE; font-size: .88rem; font-weight: 600;
}
.price-head h3{
  margin: 10px 0 2px; font-weight: 800;
  font-size: clamp(18px, 2.5vw, 24px);
  background: var(--primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price{ margin: 6px 0 6px; }
.price .price-amount{ font-size: 2rem; font-weight: 800; }
.price .price-period{ color: var(--muted); margin-left: 6px; }

.price-features{ margin: 12px 0 16px; padding-left: 18px; color: #C6D0E0; }
.price-features li{ margin: 6px 0; }

.price-cta{ margin-top: auto; }

/* =========================================
   FAQ
   ========================================= */
.faq{ padding: 62px 0 40px; }
.faq .section-title{
  text-align: center; margin-bottom: 22px; font-weight: 800; font-size: clamp(20px, 3vw, 30px);
  background: var(--primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faq-list{
  max-width: 820px; margin: 0 auto;
  display: grid; gap: 12px;
}
.faq-list details{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 14px 16px; cursor: pointer;
}
.faq-list summary{ font-weight: 700; }
.faq-list p{ color: var(--muted); margin: 8px 0 0; }

/* =========================================
   Accesibilidad
   ========================================= */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}