:root{
      --bg:#0b0f19; --panel:#141a2c; --text:#f1f4ff; --muted:#c0c8e0;
      --primary:#4c8dff; --secondary:#7a5eff; --stroke:#1c2135;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#0b0f19; color:var(--text)}
    a{color:var(--text); text-decoration:none}
    .container{width:min(1100px,92vw); margin-inline:auto}
    header{position:sticky; top:0; z-index:20; backdrop-filter:saturate(130%) blur(8px); background:rgba(11,15,25,.78); border-bottom:1px solid var(--stroke)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
    .brand{font-weight:800; letter-spacing:.3px; color:var(--primary)}
    .nav > nav a{margin-left:18px; opacity:.9} /*RESPONSIVE*/
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; font-weight:700; border:1px solid transparent; cursor:pointer}
    .btn-primary{background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 0 24px rgba(76,141,255,.35)}
    .btn-ghost{border-color:#24304f}

    /* TRANSICIÓN Y PREPASACIÓN DE HOVER */
    .btn,
    .btn-primary,
    button {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        transform-origin: center;
        will-change: transform;
    }

    /* Desplazamiento suave para anclas */
    html {
      scroll-behavior: smooth;
    }

    /* Compensar el header sticky para que los títulos no queden ocultos
      al llegar a una sección mediante ancla */
    section[id] {
      scroll-margin-top: 90px; /* ajusta si cambias la altura real del header */
    }

    /* Respeto a usuarios con reducción de movimiento */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }


    /* EXPANSIÓN AL PASAR EL RATÓN */
    .btn:hover,
    .btn-primary:hover,
    button:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 30px rgba(76, 141, 255, 55);
    }

    /* TACTO/CLICK PARA SENSACIÓN DE CLICK */
    .btn:active,
    .btn-primary:active,
    button:active {
        transform: scale(1.02);
    }  

    .hero{padding:96px 0 64px; background:radial-gradient(1600px 800px at 100% -20%, rgba(122,94,255,.25), transparent 50%)}
    .hero h2{font-size:clamp(34px,4.6vw,56px); line-height:1.08; margin:0 0 14px; color:var(--primary)}
    .hero p{max-width:640px; color:var(--muted)}
    .hero .cta{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}

    .section{padding:72px 0}
    .section h3{font-size:32px; margin:0 0 10px; color:#aab8ff}
    .subtitle{color:var(--muted); margin:0 0 28px}

    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
    .card{background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:22px}
    .card h4{margin:8px 0 6px; color:var(--primary); font-size: 1.2rem;}

    /* Testimonios */
    .testimonials .card{position:relative}
    .quote{font-size:16px; color:#dbe3ff; line-height:1.6}
    .author{display:flex; align-items:center; gap:12px; margin-top:16px; color:#c9d3ff}
    .avatar{width:36px; height:36px; border-radius:50%; display: inline-block; object-fit: cover; flex-shrink: 0; background: none;}
    .stars{font-size:14px; color:#ffd76b}
    .author .avatar{ border: 1px solid #1f2a44; }
    .author .avatar:hover{ box-shadow: 0 0 0 2px rgba(124,94,255,.35); }


    /* Formulario */
    form{background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:24px; max-width:620px}
    label{font-size:14px; color:#b9c4e8}
    input, textarea, select{width:100%; margin-top:6px; margin-bottom:14px; padding:12px 14px; border-radius:12px; border:1px solid #223055; background:#0b1022; color:#eef2ff; outline:none}
    input:focus, textarea:focus, select:focus{border-color:rgba(124,94,255,.6); box-shadow:0 0 0 3px rgba(124,94,255,.18)}

    footer{padding:56px 0 72px; border-top:1px solid var(--stroke); color:#b7c2e6}

    /*RESPONSIVE*/
    /* Tablet: 2 columnas */
    @media (max-width: 1024px){
      .cards{ grid-template-columns: repeat(2, 1fr); }
    }
    /* Móvil: 1 columna */
    @media (max-width: 640px){
      .cards{ grid-template-columns: 1fr; }
    }


    /* ====== FIXES DE CENTRADO Y CONTRASTE ====== */

/* Centrado global de secciones y tipografía secundaria más clara */
.section { text-align: center; }
.section .subtitle,
.card p { color: #e2e8ff; }

/* HERO centrado + título con degradado */
.hero .container{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero{
  /* degradado más visible como en la captura */
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(122,94,255,.35), transparent 60%),
    linear-gradient(180deg, #0b0f19 0%, #0b0f19 65%, #0a0e17 100%);
}
.hero h2{
  /* degradado de texto estilo neon azul-morado */
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p{ color:#d7def7; }

/* Botonera centrada */
.hero .cta{ justify-content: center; }
.btn-primary{ box-shadow: 0 0 12px rgba(76,141,255,.25); }

/* Tarjetas con más contraste y centradas */
.cards { justify-items: center; }
.card{
  background: #10172a;
  border: 1px solid #1f2a44;
  text-align: center;
}

/* Testimonios centrados */
.testimonials .cards{ justify-items: center; }
.author{
  justify-content: center;
  color:#e6ecff;
}

/* Formulario centrado y botón centrado */
form{ margin: 0 auto; }
form button{ display:inline-block; margin-inline:auto; }

/* Footer legible */
footer{ color:#cbd5ff; }
footer a{ color: var(--primary); }
/*Centrar el footer*/
#contacto .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

#contacto .container p{
    margin: 6px 0;
    max-width: 720px;
}

#contacto .container a{
    display: inline-block;
}

/* BENEFICIOS en fila horizontal */
.benefits {
  display: flex;
  flex-direction: row;      /* en línea */
  justify-content: center;  /* centradas */
  gap: 20px;                /* separación entre cuadros */
  flex-wrap: wrap;          /* que bajen a segunda línea en móvil */
}

/* TESTIMONIOS en fila horizontal */
.testimonials {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.testimonial {
  flex: 1 1 300px;   /* ancho flexible, mínimo 300px */
  max-width: 320px;
  text-align: center;
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce){
    .btn, .btn-primary, button {
        transition: none;
    }
    .btn:hover, .btn-primary:hover, button:hover,
    .btn:active, .btn-primary:active, button:active {
        transform: none;
    }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__logo {
  width: 40px;   /* ajusta tamaño del logo */
  height: auto;
  display: block;
}

.brand__text {
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 1.2rem;
  color: var(--primary);  /* o usa var(--text) si lo quieres blanco */
}

.icon svg {
  width: 36px;
  height: 36px;
  stroke: #fff;         /* bordes blancos */
  fill: none;           /* sin relleno */
  stroke-width: 2;      /* grosor del borde */
  display: block;
  margin: 0 auto 10px;  /* centrado encima del título */
}

/*RESPONSIVE*/
/* Header responsive */
@media (max-width: 820px){
  .nav{
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .brand{
    flex: 1 1 100%;
    justify-content: center;     /* centra logo+texto */
  }
  .nav > nav{
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .nav > nav a{
    margin-left: 0;              /* ya usamos gap */
    text-align: center;
    padding: 10px 12px;          /* mejor área táctil */
  }
  .brand__logo{ width: 36px; }
  .brand__text{ font-size: 1.1rem; }
}

/* Hero responsive */
@media (max-width: 640px){
  .hero .container{ padding: 0 8px; }
  .hero p{ max-width: 92vw; }
  .hero .cta{
    width: 100%;
    flex-direction: column;   /* CTA uno debajo del otro */
    align-items: stretch;
  }
  .hero .cta .btn,
  .hero .cta a.btn{           /* por si usas <a class="btn"> */
    width: 100%;
    text-align: center;
  }
}

/* Form responsive */
@media (max-width: 640px){
  form{
    width: 100%;
    max-width: none;
    padding: 18px;
  }
  input, textarea, select{
    font-size: 16px; /* evita zoom en iOS al enfocar */
  }
  form button.btn-primary{
    width: 100%;
  }
}

@media (max-width: 640px){
  #contacto .container{
    padding: 0 12px;
  }
}

@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .section h3{ font-size: 1.6rem; }
  .card h4{ font-size: 1.15rem; }
}

.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* centra el texto en el botón */
  text-align: center;
}

.video-demo {
  width: 100%;
  max-width: 820px;   /* controla el ancho máximo */
  border-radius: 16px;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  display: block;
  margin: 0 auto;
}

.cookie-banner{
  position: fixed; inset:auto 16px 16px 16px;
  background: #111827; color:#fff; padding:14px 16px;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  z-index: 9999; font-size:14px;
}
.cookie-banner .actions{ display:flex; gap:8px; }
.cookie-banner button{
  padding:8px 12px; border-radius:8px; border:1px solid #334155; background:#1f2937; color:#fff; cursor:pointer;
}
#cookie-accept{ background:#2563eb; border-color:#2563eb; }