/* Paleta principal - Azul Profesional */
:root {
  --wine-primary: #3b82f6;
  --wine-secondary: #60a5fa;
  --wine-dark: #0f172a;
  --wine-light: #93c5fd;
  --wine-lighter: #bfdbfe;
  --spotify-green: #3b82f6;
  --spotify-green-light: #60a5fa;
  --cream: #f8fafc;
}

* { box-sizing: border-box; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto; margin: 0; color: var(--wine-dark); background:
  radial-gradient(1200px 800px at 0% -10%, rgba(59,130,246,.06), transparent 80%),
  radial-gradient(1200px 800px at 100% -10%, rgba(96,165,250,.05), transparent 80%),
  var(--cream);
}

/* Header */
.header { position: fixed; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; z-index: 20; background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.95)); box-shadow: 0 10px 24px rgba(15,23,42,.3); backdrop-filter: saturate(1.1) blur(6px); transition: transform .25s ease; will-change: transform }
.header--hidden{ transform: translateY(-120%) }
.brand { display:flex; gap:10px; align-items:center; color:#fff; font-weight:800; letter-spacing:.3px }
.brand-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,.2) }
.brand-icon img{ width:100%; height:100%; object-fit:cover; border-radius:10px }
.cta-top { background:#fff; color:var(--wine-primary); font-weight:700; border:none; padding:10px 14px; border-radius:10px; cursor:pointer }
.cta-top:hover{ filter:brightness(0.96) }

/* Hero */
.hero{ min-height:100vh; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; padding:120px 56px 64px;
  background:
    radial-gradient(60% 120% at 10% 10%, rgba(147,197,253,.08), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,58,138,.92)),
    url('/front/assets/images/background/background-1.jpg') center/cover no-repeat;
}
.hero h1{ color:#fff; font-size:56px; line-height:1.1; margin:0 0 16px }
.hero p.subtitle{ color:#F8FAFC; font-size:18px; margin:0 0 28px; max-width:740px }
.bullets{ display:grid; gap:10px; color:#fff; margin-top:12px }
.bullet{ display:flex; gap:10px; align-items:center }
.bullet svg{ color:#FDE047 }

/* Form card */
.card{ position:relative; background:#fff; padding:28px; border-radius:16px; box-shadow:0 30px 60px rgba(2,6,23,.35); overflow:hidden }
.card:before{ content:''; position:absolute; inset:0; background:url('/front/assets/images/background/background-1.jpg') center/cover no-repeat; opacity:.06; pointer-events:none }
.card h3{ margin:0 0 12px; color:var(--wine-primary) }
.input{ width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:12px; font-size:16px; background:#fff; outline:none }
.input:focus{ border-color:var(--wine-secondary); box-shadow:0 0 0 4px rgba(193,18,31,.12) }
.btn{ background:linear-gradient(135deg,var(--wine-primary),var(--wine-secondary)); border:none; color:#fff; padding:12px 16px; border-radius:10px; font-weight:800; cursor:pointer; width:100%; letter-spacing:.3px; margin-top:10px; transition:transform .05s ease, filter .2s ease }
.btn:hover{ filter:saturate(1.05) }
.btn:active{ transform:translateY(1px) }
.btn{ background-size:200% 100%; background-position:0 0 }
.btn:hover{ background-position:100% 0 }
.muted{ font-size:12px; color:#64748b; margin-top:8px }

/* Secciones genéricas */
.section{ padding:56px 22px }
.section--light{ background:
  radial-gradient(900px 600px at 10% 0%, rgba(59,130,246,.06), transparent 60%),
  #fff;
}
.section--roadmap{ padding-top:72px; padding-bottom:80px }
.section--muted{ background:#f8fafc }
.section-title{ text-align:center; color:var(--wine-dark); font-size:34px; margin:0 0 32px; font-weight:800 }
.note{ text-align:center; color:#94a3b8; margin-top:12px }
.success{ padding-top:12px; color:#16a34a; font-weight:700 }
.hidden{ display:none }
/* OK animation */
.ok-anim{ display:grid; place-items:center; gap:8px; padding:18px 0 }
.ok-anim__svg{ width:80px; height:80px }
.ok-anim__circle{ stroke:#22c55e; stroke-width:3; stroke-linecap:round; opacity:.3; animation:ok-circle .6s ease forwards }
.ok-anim__check{ stroke:#22c55e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:ok-check .5s .4s ease forwards }
.ok-anim__title{ color:var(--wine-dark); font-weight:800 }
.ok-anim__desc{ color:#475569; font-size:14px }
@keyframes ok-circle{ from{ stroke-dasharray:0 999 } to{ stroke-dasharray:999 0 } }
@keyframes ok-check{ to{ stroke-dashoffset:0 } }
/* Roadmap */
.roadmap{ max-width:1100px; margin:0 auto }
.rm-steps{ position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px }
.rm-steps:before{ content:''; position:absolute; top:40px; left:0; right:0; height:4px; background:linear-gradient(90deg, rgba(59,130,246,.18), rgba(96,165,250,.35), rgba(59,130,246,.18)); border-radius:999px; filter:blur(.2px) }
.rm-step{ position:relative; padding-top:34px }
.rm-node{ position:absolute; top:24px; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--wine-primary),var(--wine-secondary)); box-shadow:0 10px 18px rgba(59,130,246,.28) }
.rm-step:nth-child(1) .rm-node{ left:6px }
.rm-step:nth-child(2) .rm-node{ right:6px }
.rm-badge{ display:inline-block; background:linear-gradient(135deg,var(--wine-primary),var(--wine-secondary)); color:#fff; font-weight:800; font-size:13px; padding:7px 12px; border-radius:999px; margin-bottom:12px }
.rm-badge.upcoming{ background:linear-gradient(135deg,#1e40af,#3b82f6) }
.rm-card{ background:#fff; border:1px solid #dbeafe; border-radius:16px; padding:20px; box-shadow:0 12px 26px rgba(15,23,42,.09), 0 4px 10px rgba(15,23,42,.06) }
.rm-icon{ display:grid; place-items:center; width:56px; height:56px; border-radius:14px; margin-bottom:10px; background:linear-gradient(135deg,#dbeafe,#bfdbfe); border:1px solid #bfdbfe }
.rm-icon .iconify{ width:28px; height:28px; color:var(--wine-primary) }
.rm-card:hover{ box-shadow:0 14px 30px rgba(15,23,42,.12), 0 6px 12px rgba(15,23,42,.08); transform:translateY(-1px) }
.rm-title{ font-weight:800; color:var(--wine-dark); margin-bottom:6px }
.rm-desc{ color:#475569 }

/* Roadmap responsive: en móviles, 1 columna y cards al 100% */
@media (max-width: 640px){
  .rm-steps{ grid-template-columns: 1fr; gap:16px }
  .rm-steps:before{ display:none }
  .rm-step{ padding-top: 0 }
  .rm-node{ display:none }
  .rm-card{ padding:16px }
}

/* Benefits */
.benefits-wrap { margin:0 auto; position:relative; padding-inline:28px; overflow:visible }
.benefit-track{ display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; padding:6px; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none }
.benefit-track::-webkit-scrollbar{ display:none }
.bcard{ min-width:320px; scroll-snap-align:start; background:
  radial-gradient(600px 400px at -10% -10%, rgba(59,130,246,.06), transparent 65%),
  radial-gradient(500px 300px at 110% 120%, rgba(96,165,250,.05), transparent 60%),
  #fff; border:1px solid #dbeafe; border-radius:16px; padding:18px; box-shadow:0 10px 20px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.06) ; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden }
.bcard::before{ content:''; position:absolute; left:12px; right:12px; top:12px; height:44px; background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.12)); border-radius:12px; pointer-events:none; filter:blur(.2px) }
.bcard::after{ content:''; position:absolute; inset:auto 18px 18px 18px; height:2px; background:linear-gradient(90deg, transparent, rgba(59,130,246,.15), transparent) }
.bcard:hover{ box-shadow:0 16px 36px rgba(15,23,42,.12), 0 8px 18px rgba(15,23,42,.10); transform:translateY(-2px) }
.bcard:focus-within{ outline:3px solid rgba(59,130,246,.15); outline-offset:2px }
.bicon{ height:110px; border-radius:14px; background:
  linear-gradient(135deg, rgba(59,130,246,.18), rgba(96,165,250,.12)),
  linear-gradient(135deg,#dbeafe,#bfdbfe); display:grid; place-items:center; border:1px solid #bfdbfe; position:relative; overflow:hidden }
.bicon .iconify{ width:48px; height:48px; color:var(--wine-primary); filter: drop-shadow(0 6px 10px rgba(59,130,246,.15)) }
.bcard:hover .iconify{ transform:translateY(-1px); }
.bicon::after{ content:''; position:absolute; top:-10%; left:-150%; width:40%; height:150%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation:shine 3s infinite }
@keyframes shine { to { left: 150%; } }
.btitle{ font-weight:800; color:var(--wine-dark); font-size:18px }
.bdesc{ color:#475569; line-height:1.6 }
.navBtn{ position:absolute; top:42%; background:linear-gradient(135deg, rgba(59,130,246,.85), rgba(96,165,250,.85)); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:50%; width:48px; height:48px; cursor:pointer; box-shadow:0 10px 20px rgba(59,130,246,.22); z-index:20; opacity:.85; transition:opacity .2s ease, transform .15s ease, background .2s ease }
.navBtn:hover{ opacity:1; transform:scale(1.03) }
.navBtn.left{ left:0 } .navBtn.right{ right:0 }
@media (max-width:640px){
  .navBtn{ display:block; width:32px; height:32px; top:46%; opacity:.6; background:rgba(15,23,42,.55); box-shadow:0 8px 14px rgba(15,23,42,.18) }
  .navBtn.left{ left:4px }
  .navBtn.right{ right:4px }
}

/* Plans */
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; max-width:1200px; margin:0 auto }
.pcard{ background:#fff; border:1px solid #dbeafe; border-radius:16px; padding:22px; box-shadow:0 10px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.06); position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease }
.pcard::before{ content:''; position:absolute; inset:0; background:radial-gradient(120px 80px at 10% -20%, rgba(59,130,246,.06), transparent 60%); pointer-events:none }
.pcard .badge{ position:absolute; top:14px; right:14px; background:linear-gradient(135deg,var(--spotify-green),#60a5fa); color:#fff; font-weight:800; font-size:12px; padding:6px 10px; border-radius:999px; box-shadow:0 8px 16px rgba(59,130,246,.25) }
.pcard.featured{ border:2px solid var(--spotify-green); box-shadow:0 20px 30px rgba(59,130,246,.18) }
.plan-title{ font-weight:800; font-size:20px; margin-bottom:8px }
.plan-title--primary{ color:var(--wine-primary) }
.plan-title--accent{ color:var(--wine-secondary) }
.plan-title--blue{ color:#0b52f7 }
.plan-subtitle{ color:#64748b; margin:10px 0 14px }
.plan-features{ color:#334155; line-height:1.8; padding-left:18px }
.price{ font-size:36px; font-weight:800 }
.toggle{ color:var(--wine-dark); text-align:center; margin-bottom:18px }
.toggle label{ margin-left:8px }
.toggle input[type="radio"]{ transform:scale(1.15); margin-right:6px; cursor:pointer }
.toggle input[type="radio"][value="ARS"]{ accent-color: var(--wine-secondary) }
.toggle input[type="radio"][value="USD"]{ accent-color: #0b52f7 }
.toggle small{ color:#9aa4b2 }

/* Interacciones */
.bcard:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(15,23,42,.14) }
.pcard:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(15,23,42,.12) }

/* Removed custom cursor */

/* Footer */
.footer{ padding:28px 22px; text-align:center; background:linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color:#fff; font-family: 'Poppins', sans-serif; }
.footer a{ color:#93c5fd; text-decoration: none; font-weight: 600; transition: color 0.2s; }
.footer a:hover{ color:#ffffff; }

/* reCAPTCHA */
.g-recaptcha{ transform:scale(0.96); transform-origin:left top }
.g-recaptcha:empty:before{ content:'reCAPTCHA no cargó. Verificá tu conexión o recargá la página.'; color:#991b1b; font-size:12px }

@media (max-width:1100px){ .plans{ grid-template-columns:1fr }; .bcard{ min-width:260px } }
@media (max-width:1024px){ .hero{ grid-template-columns:1fr; padding:100px 22px 48px } }


/* Responsive: reducir tamaño del título principal en móviles */
@media (max-width: 640px){
  .hero h1{ font-size: 36px }
}
@media (max-width: 380px){
  .hero h1{ font-size: 32px }
}

/* Benefits responsive */
@media (max-width: 640px){
  .benefits-wrap{ padding-inline:0 }
  .benefit-track{ gap:12px; padding:0 16px; scroll-padding-inline:16px }
  .bcard{ min-width:100%; scroll-snap-align:center }
  .bicon{ height:96px }
  .bicon .iconify{ width:40px; height:40px }
}