:root{
    --bg:#0C0C0C;            /* negro carbón */
    --text:#FFFFFF;          /* blanco puro */
    --silver:#BFBFBF;        /* plata */
    --silver-bright:#D9D9D9; /* plata brillante */
    --accent:#5C6BC0;        /* azul acero (acento) */
    --glass: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.15);
    --muted:#9DA3AE;
    --ok:#21C07A;
    --shadow: 0 10px 30px rgba(0,0,0,.5);
    --radius: 16px;
    --radius-lg: 24px;
    --maxw: 1200px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Poppins, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;height:auto;display:block}
  section{padding:72px 20px}
  .container{max-width:var(--maxw);margin:0 auto}

  /* Header */
  .header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(140%) blur(8px);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    border-bottom:1px solid var(--border);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
  .brand{
    display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em
  }
  .brand .logo{
    width:36px;height:36px;border-radius:12px;
    background:linear-gradient(135deg, #2A2A2A, #5B5B5B);
    border:1px solid #8E8E8E; box-shadow: inset 0 0 12px rgba(255,255,255,.15);
    display:grid;place-items:center;
    position:relative;overflow:hidden;
  }
  .brand .logo::after{
    content:"";position:absolute;inset:-40% -40% auto auto;
    width:120%;height:120%;
    background:radial-gradient(ellipse at top left, rgba(255,255,255,.15), transparent 50%);
    transform:rotate(25deg);
  }
  .brand span{font-size:18px}
  .navlinks{display:flex;gap:22px;align-items:center}
  .navlinks a{color:var(--silver-bright);font-weight:600;opacity:.9}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 18px;border-radius:999px;border:1px solid var(--silver);
    background:linear-gradient(180deg, #1a1a1a, #141414);
    color:var(--silver-bright);font-weight:700;letter-spacing:.02em;
    box-shadow:var(--shadow);
    transition:all .2s ease;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(0,0,0,.6);border-color:#E0E0E0}
  .btn-accent{
    border:1px solid transparent;
    background:linear-gradient(180deg, var(--accent), #3b4fbd);
    color:white;
  }
  .btn-accent:hover{filter:brightness(1.08)}
  .btn-ghost{
    background:transparent;border:1px solid var(--border);color:var(--silver-bright)
  }
  .mobile-hide{display:none}
  @media(min-width:900px){.mobile-hide{display:inline-flex}}

  /* Hero */
  .hero{
    padding:110px 20px 80px;
    background:
      radial-gradient(1200px 600px at 60% -10%, rgba(92,107,192,.16), transparent 55%),
      radial-gradient(900px 500px at 0% 0%, rgba(255,255,255,.05), transparent 45%);
    position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  }
  .hero::after{
    content:"";position:absolute;inset:auto -10% -40% -10%;
    height:45%;background:radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
    filter:blur(30px);
  }
  .hero-grid{display:grid;gap:30px;grid-template-columns:1fr}
  @media(min-width:980px){.hero-grid{grid-template-columns:1.2fr .8fr;align-items:center}}
  .kicker{color:var(--silver);letter-spacing:.2em;font-weight:700;font-size:12px;text-transform:uppercase}
  .title{font-size: clamp(36px, 6vw, 60px);line-height:1.05;margin:10px 0 14px;font-weight:800}
  .subtitle{color:var(--silver-bright);font-size: clamp(16px, 2vw, 18px);opacity:.9;max-width:720px}
  .hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
  .card-hero{
    border:1px solid var(--border);border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    padding:20px;box-shadow:var(--shadow)
  }
  .stat{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--silver-bright)}
  .chip{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 12px;border-radius:999px;border:1px solid var(--border);
    background:var(--glass);color:var(--silver-bright);font-weight:600;font-size:13px
  }

  /* Steps */
  .steps{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
  .section-title{font-size: clamp(26px,4vw,36px);margin:0 0 14px}
  .section-sub{color:var(--muted);max-width:780px}
  .steps-grid{margin-top:28px;display:grid;gap:18px}
  @media(min-width:900px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
  .step{
    border:1px solid var(--border);border-radius:var(--radius);
    padding:22px;background:var(--glass);
    transition:transform .2s ease, border-color .2s ease;
  }
  .step:hover{transform:translateY(-2px);border-color:#CFCFCF}
  .step .num{
    width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;
    background:linear-gradient(135deg, #2c2c2c, #5b5b5b);border:1px solid #8E8E8E;color:white;margin-bottom:10px
  }
  .step h4{margin:8px 0 6px}
  .step p{margin:0;color:var(--silver-bright)}

  /* Pricing (cards) */
  .cards{margin-top:28px;display:grid;gap:18px}
  @media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
  .card{
    border:1px solid var(--border);border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;gap:18px
  }
  .card:hover{border-color:#D9D9D9}
  .card .tag{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
    color:var(--silver);border:1px solid var(--border);padding:6px 10px;border-radius:999px
  }
  .price{font-family:Montserrat, Poppins; font-size:34px;font-weight:800}
  .sub{color:var(--muted)}
  .features{display:grid;gap:8px;margin:6px 0 4px}
  .features li{list-style:none;display:flex;align-items:center;gap:10px;color:var(--silver-bright)}
  .features svg{flex:0 0 18px}
  .card .cta{display:flex;gap:10px;flex-wrap:wrap}

  /* Testimonios */
  .testis{display:grid;gap:18px;margin-top:26px}
  @media(min-width:900px){.testis{grid-template-columns:repeat(3,1fr)}}
  .testi{
    border:1px solid var(--border);border-radius:var(--radius);
    background:var(--glass);padding:18px
  }
  .testi .who{margin-top:10px;color:var(--silver)}

  /* FAQ */
  .faq{max-width:900px;margin:28px auto 0}
  details{
    border:1px solid var(--border);border-radius:14px;background:var(--glass);
    padding:14px 16px;margin:10px 0
  }
  summary{cursor:pointer;font-weight:700}
  details p{color:var(--silver-bright);margin:10px 0 0}

  /* Footer */
  footer{
    padding:40px 20px;border-top:1px solid var(--border);
    background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0))
  }
  .footgrid{max-width:var(--maxw);margin:0 auto;display:grid;gap:16px}
  @media(min-width:900px){.footgrid{grid-template-columns:1fr auto}}
  .footlinks{display:flex;flex-wrap:wrap;gap:16px;color:var(--silver)}
  .copyright{color:var(--muted)}
  .sep{opacity:.15;margin:0 4px}


  .coupon-box {
border:1px solid var(--border);
padding:10px;
border-radius:10px;
margin-top:10px;
background:rgba(255,255,255,0.03);
}

.coupon-row {
display:flex;
justify-content:space-between;
align-items:center;
margin-top:6px;
}

.coupon-code {
font-weight:700;
color:#D9D9D9;
}

.btn-apply-coupon {
padding:6px 12px;
background:linear-gradient(180deg, var(--accent), #3b4fbd);
border:none;
border-radius:20px;
color:white;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

.btn-apply-coupon:hover {
filter:brightness(1.1);
}
/* Animación para el precio nuevo */
@keyframes priceFadeUp {
0% {
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  filter: brightness(0.5);
}
60% {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.3);
}
100% {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: brightness(1);
}
}

.price-animated {
animation: priceFadeUp 0.5s ease-out forwards;
}
/* Cuando el precio antiguo se reduce */
.price-old-small {
transition: all 0.35s ease;
transform: scale(0.75);
opacity: 0.4;
text-decoration: line-through;
}

/* Animación premium para el precio nuevo */
@keyframes popPrice {
0% {
  opacity: 0;
  transform: scale(0.5) translateY(10px);
}
60% {
  opacity: 1;
  transform: scale(1.15) translateY(-2px);
}
100% {
  opacity: 1;
  transform: scale(1) translateY(0);
}
}

.price-new-anim {
animation: popPrice 0.5s ease-out forwards;
}
.coupon-desc {
font-size: 12px;
font-style: italic;
color: var(--silver);
opacity: 0.75;
margin-top: 2px;
}
.coupon-code-box {
display: flex;
flex-direction: column;
line-height: 1.1;
}

.coupon-code {
font-weight: 700;
color: #D9D9D9;
font-size: 15px;
}

.coupon-desc {
font-size: 11px;
font-style: italic;
color: var(--silver);
opacity: 0.7;
margin-top: 2px;
}
/* Estilo panel de detalles del plan */
.plan-details {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255,255,255,0.03);
padding: 14px 16px;
color: var(--silver-bright);
box-shadow: var(--shadow);
}

.plan-details summary {
cursor: pointer;
font-weight: 700;
font-size: 15px;
list-style: none;
}

.plan-details summary::-webkit-details-marker {
display: none;
}

.plan-details-content {
margin-top: 12px;
line-height: 1.6;
color: var(--silver);
font-size: 14px;
}

.plan-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}

.plan-row:last-child {
border-bottom: none;
}

/* Animación */
details[open] summary {
color: #21C07A;
}
details[open] .plan-details-content {
animation: fadeDown .3s ease forwards;
}

@keyframes fadeDown {
0% { opacity: 0; transform: translateY(-5px); }
100% { opacity: 1; transform: translateY(0); }
}
/* MODAL OVERLAY */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}

/* MODAL BOX */
.modal-content {
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border: 1px solid var(--border);
border-radius: 18px;
max-width: 480px;
width: 90%;
padding: 30px;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
animation: modalPop 0.3s ease;
}

@keyframes modalPop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.modal-close {
background: none;
border: none;
font-size: 30px;
color: white;
cursor: pointer;
position: absolute;
top: 12px;
right: 18px;
}

.modal-grid {
margin-top: 12px;
display: grid;
gap: 12px;
}

.modal-row {
display: flex;
justify-content: space-between;
color: var(--silver-bright);
border-bottom: 1px solid rgba(255,255,255,0.07);
padding-bottom: 6px;
}