:root{
      --bg: #0b0a10;
      --muted: #b6b3c3;
      --text: #f3f2f7;
      --line: rgba(255,255,255,.08);
      --brand-1:#5c17ff;
      --brand-2:#b93cff;
      --grad: linear-gradient(135deg,var(--brand-1),var(--brand-2));
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 80% -10%, rgba(185,60,255,.15), transparent 75%),
        radial-gradient(1000px 600px at -10% 0%, rgba(92,23,255,.25), transparent 80%),
        var(--bg);
      background-attachment: fixed;
      letter-spacing:.2px;
    }

    a{color:inherit; text-decoration:none}

    .container{width:min(1280px, 92%); margin:0 auto}

    /* Header fijo */
    header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      backdrop-filter:saturate(1.2) blur(10px);
      background:rgba(11,10,16,0.8);
      border-bottom:1px solid var(--line);
      transition:background .3s ease;
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      height:70px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
    }

    .brand img{height:30px}

    .brand .word{
      font-weight:800;
      font-size:1.25rem;
      letter-spacing:.3px;
    }

    .nav a{
      padding:.5rem .75rem;
      border-radius:10px;
      opacity:.9;
    }

    .nav a:hover{
      background:rgba(255,255,255,.06);
      opacity:1;
    }

    /* enlace activo (scroll spy) */
    .nav a.active{
      color:#fff;
      font-weight:600;
      position:relative;
    }

    .nav a.active::after{
      content:"";
      position:absolute;
      bottom:-4px;
      left:0;
      right:0;
      height:2px;
      border-radius:2px;
      background:var(--grad);
    }

    .cta{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.8rem 1rem;
      background:var(--grad);
      color:#fff;
      border:none;
      border-radius:14px;
      font-weight:700;
      box-shadow:var(--shadow);
    }

    .cta.ghost{
      background:transparent;
      border:1px solid var(--line);
      box-shadow:none;
    }

    /* Hero */
    .hero{
      position:relative;
      overflow:hidden;
      margin-top:90px; /* compensa la altura del header fijo */
    }

    .hero-wrap{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:2rem;
      align-items:center;
      padding:clamp(2.5rem, 5vw, 5rem) 0;
    }

    .hero h1{
      font-size:clamp(2rem, 3.6vw, 3.4rem);
      line-height:1.1;
      margin:.2rem 0 1rem;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.35rem .6rem;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--muted);
      font-size:.85rem;
    }

    .hero p{
      color:#d9d6e5;
      opacity:.95;
      font-size:1.05rem;
    }

    .hero-actions{
      display:flex;
      gap:.8rem;
      margin-top:1.4rem;
    }

    .hero-visual{
      position:relative;
      isolation:isolate;
    }

    .card3d{
      background:
        radial-gradient(250px 120px at 50% 0%, rgba(185,60,255,.2), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:1rem;
      box-shadow:var(--shadow);
    }

    .glass{backdrop-filter:blur(6px) saturate(1.1)}

    .ring{
      position:absolute;
      inset:-120px -120px auto auto;
      width:360px;
      height:360px;
      background:conic-gradient(from 90deg, transparent 0 30%, rgba(185,60,255,.45), rgba(92,23,255,.45), transparent 70%);
      border-radius:50%;
      filter:blur(30px);
      opacity:.6;
      z-index:-1;
    }

    .hero-visual img{
      width:100%;
      height:auto;
      border-radius:var(--radius);
    }

    /* Sección características */
    .features{
      padding:3rem 0;
      background-color:transparent;
      position:relative;
      z-index:1;
    }

    .features h2{
      font-size:clamp(1.6rem, 2.4vw, 2.2rem);
      margin:0 0 1rem;
    }

    .grid-4{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1.2rem;
    }

    .feat{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:1.1rem;
      min-height:160px;
    }

    .feat h3{
      margin:.2rem 0 .4rem;
      font-size:1.05rem;
    }

    .feat p{
      color:var(--muted);
      font-size:.95rem;
    }

    .icon{
      display:inline-flex;
      width:38px;
      height:38px;
      border-radius:10px;
      background:var(--grad);
      align-items:center;
      justify-content:center;
    }

    /* Sección split */
    .section{
      padding:4.5rem 0;
      border-top:1px solid var(--line);
      background:transparent;
    }

    .split{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:2rem;
      align-items:center;
    }

    .list{
      display:grid;
      gap:1rem;
    }

    .list li{
      display:grid;
      grid-template-columns:24px auto;
      gap:.8rem;
      align-items:start;
      color:#ddd;
    }

    .badge{
      width:24px;
      height:24px;
      border-radius:8px;
      background:rgba(185,60,255,.2);
      display:grid;
      place-items:center;
      border:1px solid var(--line);
    }

    /* Trustbar (opcional) */
    .trust{
      padding:2.6rem 0 1rem;
      opacity:.85;
    }

    .trust .row{
      display:flex;
      gap:1.2rem;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
    }

    .trust img{
      height:24px;
      opacity:.7;
      filter:grayscale(1);
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.2rem;
    }

    .card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      padding:1.2rem;
    }
    
    .card + .card {
     margin-top: 1rem; /* separa las tarjetas verticalmente */
    }

    /* Animaciones de aparición al hacer scroll */
     .reveal{
      opacity:0;
      transform: translateY(20px);
       filter: blur(4px);
       transition: opacity .6s ease-out, transform .6s ease-out, filter .6s ease-out;
    }

      .reveal.visible{
      opacity:1;
      transform: translateY(0);
     filter: blur(0);
    }

    /* Respeto a personas con reducción de movimiento */
      @media (prefers-reduced-motion: reduce){
      .reveal{
       opacity:1 !important;
       transform:none !important;
       filter:none !important;
       transition:none !important;
    }
  }

    /* Contacto */
    .contact{
      padding:4rem 0 5rem;
    }

    form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1rem;
    }

    form label{
      display:grid;
      gap:.4rem;
      font-size:.95rem;
    }

    input, textarea{
      background:#0f0e15;
      border:1px solid var(--line);
      border-radius:12px;
      color:var(--text);
      padding:.9rem 1rem;
      font:inherit;
    }

    textarea{
      grid-column:1/-1;
      min-height:140px;
    }

    /* Mensaje de estado del formulario */
    .form-status{
      margin-top:0.75rem;
      font-size:0.9rem;
      grid-column:1/-1;
    }

    .form-status.success{
      color:#4ade80;  /* verde */
    }

    .form-status.error{
      color:#fb7185;  /* rosado/rojo */
    }
      
    /* Footer */
    footer{
      border-top:1px solid var(--line);
      padding:2rem 0;
      color:#b8b5c8;
    }

    /* Responsive */
    @media (max-width:980px){
      .hero-wrap, .split{grid-template-columns:1fr}
      .grid-4{grid-template-columns:repeat(2,1fr)}
      .cards{grid-template-columns:1fr}
      .nav .hide-sm{display:none}
    }

    @media (max-width:560px){
      .grid-4{grid-template-columns:1fr}
      form{grid-template-columns:1fr}
    }
    
    /* Posicionar elementos hijos de hero-visual */
.hero-visual{ position: relative; }

/* Burbuja de diálogo estilo cómic */
.bot-bubble{
  position:absolute;
  top: -10px;      
  left: -40px;       
  right: auto;
  max-width: 260px;
  padding: .7rem 1.4rem;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 999px;          
  color: #111111;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 2;
  white-space: pre-line;
}

/* Burbuja de diálogo estilo cómic */
.bot-bubble{
  position:absolute;
  top: 10px;        
  left: -40px;       
  right: auto;
  max-width: 260px;
  padding: .7rem 1.4rem;
  background: #ffffff;
  border: 2px solid #111111;
  border-radius: 999px;       
  color: #111111;
  font-size: .95rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  white-space: pre-line;       
  z-index: 2;
}

/* --- Pricing Plans --- */
.pricing-section {
  padding: 2rem 0 4rem;
}

.pricing-title {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 4rem 0 3rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.pricing-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 1.8rem 1.5rem;
  backdrop-filter: blur(10px) saturate(1.2);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.pricing-card:hover {
  transform: translateY(-5px);
}

/* Neones */
.pricing-card.starter {
  border-color: rgba(92, 23, 255, 0.4);
  box-shadow: 0 10px 40px rgba(92, 23, 255, 0.15);
}
.pricing-card.starter:hover {
  border-color: rgba(92, 23, 255, 0.8);
  box-shadow: 0 10px 40px rgba(92, 23, 255, 0.3);
}

.pricing-card.business {
  border-color: rgba(185, 60, 255, 0.5);
  box-shadow: 0 10px 40px rgba(185, 60, 255, 0.2);
  transform: scale(1.05); /* Highlight */
  z-index: 1;
}
.pricing-card.business:hover {
  border-color: rgba(185, 60, 255, 0.9);
  box-shadow: 0 10px 40px rgba(185, 60, 255, 0.4);
  transform: scale(1.05) translateY(-5px);
}

.pricing-card.enterprise {
  border-color: rgba(255, 120, 80, 0.4); 
  box-shadow: 0 10px 40px rgba(255, 120, 80, 0.15);
}
.pricing-card.enterprise:hover {
  border-color: rgba(255, 120, 80, 0.8);
  box-shadow: 0 10px 40px rgba(255, 120, 80, 0.3);
}

.pricing-name {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-align: center;
}
.pricing-card.starter .pricing-name { color: #8e6aff; }
.pricing-card.business .pricing-name { color: #d68cff; }
.pricing-card.enterprise .pricing-name { color: #ff9e8c; }

.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  line-height: 1;
}
.pricing-price span {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--muted);
  align-self: flex-end;
  margin-bottom: 0.5rem;
}
.pricing-card.enterprise .pricing-price {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  color: #d9d6e5;
  font-size: 0.95rem;
  line-height: 1.4;
}

.pricing-features li.bold {
  font-weight: 700;
  color: #fff;
}

.pricing-features li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-2);
  margin-top: 2px;
}

.additional-costs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.cost-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(5px);
  min-width: 260px;
}

.cost-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  border: 1px solid rgba(255,255,255,.1);
}

.cost-info h4 {
  margin: 0 0 0.2rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.cost-info p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 2rem; padding: 1rem; }
  .pricing-card.business { transform: none; }
  .pricing-card.business:hover { transform: translateY(-5px); }
  .additional-costs { flex-direction: column; align-items: stretch; }
}