/* ══════════════════════════════════════════════════════════════
   W&B Studio — Estilos compartidos (ES)
   Versión: 1.0 | Aplica a todas las páginas en español
   ══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bg: #f7f6ff;
  --bg2: #eeecfb;
  --surface: #ffffff;
  --surface2: #f0eeff;
  --border: rgba(100,80,200,0.12);
  --border-glow: rgba(124,58,237,0.3);
  --v: #6d28d9;
  --vl: #7c3aed;
  --vd: #4c1d95;
  --cyan: #0891b2;
  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
  --white: #1e1340;
  --gray: #6b6897;
  --gray2: #4a4870;
  --text: #2d2a52;
  --ff: 'Cabinet Grotesk', sans-serif;
  --fm: 'Chivo Mono', monospace;
  --fb: 'Instrument Sans', sans-serif;
  --r: 10px;
  --transition: all .3s cubic-bezier(.16,1,.3,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

/* ── BASE ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

/* ── CUSTOM CURSOR ── */
#cursor { width:12px;height:12px;background:var(--v);opacity:.85;border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;will-change:transform; }
#cursor-ring { width:36px;height:36px;border:1.5px solid rgba(124,58,237,.5);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;will-change:transform; }
body:has(a:hover) #cursor, body:has(button:hover) #cursor { width:20px;height:20px;background:var(--vl); }
body:has(a:hover) #cursor-ring, body:has(button:hover) #cursor-ring { width:52px;height:52px;border-color:var(--vl); }

/* ── TOUCH: nascondi cursore custom ── */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none !important; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--v); }

/* ── NAV ── */
nav {
  position:fixed; z-index:1000;
  top:18px; left:50%; transform:translateX(-50%);
  height:52px;
  display:flex; align-items:center; gap:0;
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(109,40,217,.22);
  border-radius:100px;
  padding:0 8px 0 20px;
  box-shadow:0 6px 28px rgba(109,40,217,.12),0 0 0 1px rgba(109,40,217,.06) inset;
  transition:top .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
  white-space:nowrap;
  max-width:calc(100vw - 40px);
}
nav.scrolled { background:rgba(255,255,255,.97);box-shadow:0 10px 40px rgba(109,40,217,.18),0 0 0 1px rgba(109,40,217,.12) inset;border-color:rgba(109,40,217,.3); }
.logo { font-family:var(--ff);font-size:1.05rem;font-weight:900;letter-spacing:-.03em;color:var(--white);cursor:pointer;display:flex;align-items:center;text-decoration:none;user-select:none;margin-right:20px;flex-shrink:0; }
.logo .slash { color:var(--v);margin:0 1px; }
.logo img { transition:filter .3s ease; }
.logo:hover img { filter:contrast(1.18) saturate(1.4) drop-shadow(0 2px 12px rgba(109,40,217,0.45)); }
.nav-center { display:flex;align-items:center;gap:0;list-style:none; }
.nav-center li button { font-family:var(--fm);font-size:.72rem;letter-spacing:.07em;color:rgba(74,72,112,.7);background:none;border:none;cursor:pointer;padding:6px 14px;border-radius:100px;transition:var(--transition); }
.nav-center li button:hover { color:var(--white);background:rgba(109,40,217,.08); }
.nav-center li button.active { color:var(--vl);background:rgba(109,40,217,.1); }
.nav-center li a { font-family:var(--fm);font-size:.72rem;letter-spacing:.07em;color:rgba(74,72,112,.7);text-decoration:none;display:block;padding:6px 14px;border-radius:100px;transition:var(--transition); }
.nav-center li a:hover { color:var(--white);background:rgba(109,40,217,.08); }
.nav-center li a.active { color:var(--vl);background:rgba(109,40,217,.1); }
.nav-right { display:flex;align-items:center;gap:10px;margin-left:12px; }
.nav-phone { font-family:var(--fm);font-size:.69rem;letter-spacing:.06em;color:var(--gray);text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .2s;padding:0 4px; }
.nav-phone:hover { color:var(--vl); }
.btn-nav { font-family:var(--fm);font-size:.72rem;letter-spacing:.07em;background:var(--v);color:#fff;border:none;padding:9px 18px;border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:var(--transition);position:relative;overflow:hidden;flex-shrink:0;text-decoration:none; }
.btn-nav::after { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent);opacity:0;transition:opacity .2s; }
.btn-nav:hover { background:var(--vl);transform:translateY(-1px);box-shadow:0 6px 20px rgba(109,40,217,.35); }
.btn-nav:hover::after { opacity:1; }
.hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;margin-left:4px; }
.hamburger span { display:block;width:20px;height:1.5px;background:#2d2a52;border-radius:2px;transition:all .3s; }

/* ── LANG SWITCHER ── */
.wbs-lang-switcher { display:flex;align-items:center;gap:2px;margin-left:6px;padding-left:8px;border-left:1px solid rgba(109,40,217,.18);flex-shrink:0; }
.wbs-lang-btn { font-family:var(--fm);font-size:.63rem;letter-spacing:.07em;color:var(--gray);text-decoration:none;display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border-radius:100px;border:1px solid transparent;transition:all .2s;cursor:pointer;background:none;white-space:nowrap;line-height:1;opacity:.5; }
.wbs-lang-btn:hover { color:var(--vl);background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.2);opacity:1; }
html[lang="es"] .wbs-lang-btn[data-lang="es"],
html[lang="en"] .wbs-lang-btn[data-lang="en"],
html[lang="it"] .wbs-lang-btn[data-lang="it"],
.wbs-lang-active {
  color:#fff!important;
  background:rgba(109,40,217,.22)!important;
  border-color:rgba(109,40,217,.55)!important;
  font-weight:700;
  opacity:1!important;
}
.wbs-lang-btn img { display:inline-block;vertical-align:middle;border-radius:2px;flex-shrink:0; }
.wbs-lang-text { font-size:.63rem;letter-spacing:.07em; }

/* ── MOBILE MENU ── */
.mob-menu { display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(5,5,10,.98);backdrop-filter:blur(24px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:8px; }
.mob-menu.open { display:flex; }
.mob-menu button { font-family:var(--ff);font-size:1.8rem;font-weight:800;color:var(--white);background:none;border:none;cursor:pointer;padding:10px 24px;transition:color .2s; }
.mob-menu button:hover { color:var(--vl); }
.mob-menu a { font-family:var(--ff);font-size:1.8rem;font-weight:800;color:#fff;text-decoration:none;padding:10px 24px;transition:color .2s; }
.mob-menu a:hover { color:var(--vl); }
.mob-menu .btn-primary { font-size:.85rem!important;padding:13px 28px!important;font-weight:700!important;width:auto!important;color:#fff!important;background:var(--v)!important;border-radius:100px!important;display:inline-block!important;text-decoration:none!important; }
.mob-menu .mob-submenu { font-size:1.2rem!important;padding:6px 24px 6px 40px!important;color:rgba(255,255,255,.6)!important;font-weight:600!important; }
.mob-menu .mob-submenu:hover { color:var(--vl)!important; }

/* ── NAV DROPDOWN ── */
.nav-dropdown { position:relative; }
.nav-dropdown::after { content:"";position:absolute;bottom:-10px;left:0;right:0;height:10px; }
.nav-dropdown > a { display:flex;align-items:center;gap:4px; }
.nav-dropdown-menu { display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:rgba(255,255,255,.97);border:1px solid rgba(109,40,217,.2);border-radius:14px;padding:6px;list-style:none;min-width:130px;box-shadow:0 8px 28px rgba(109,40,217,.14);z-index:100; }
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-menu li a { display:block;padding:7px 14px;border-radius:8px;font-family:var(--fm);font-size:.7rem;letter-spacing:.07em;color:rgba(74,72,112,.8);text-decoration:none;white-space:nowrap;transition:all .2s; }
.nav-dropdown-menu li a:hover { color:var(--vl);background:rgba(109,40,217,.06); }

/* ── COMMON ── */
section { padding:120px 5vw; }
.container { max-width:1240px;margin:0 auto; }
.label { font-family:var(--fm);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--vl);display:flex;align-items:center;gap:10px;margin-bottom:18px; }
.label::before { content:'//';color:var(--v); }
h1,h2,h3,h4 { font-family:var(--ff);color:var(--white); }
h1 { font-size:clamp(3rem,7.5vw,6rem);line-height:.95;letter-spacing:-.05em;font-weight:900; }
h2 { font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1;letter-spacing:-.04em;font-weight:800; }
h3 { font-size:clamp(1.1rem,2vw,1.45rem);font-weight:700;line-height:1.2; }
h4 { font-size:1rem;font-weight:700; }
p { color:var(--gray2);line-height:1.78; }
.hl { color:var(--vl); }
.hl-c { color:var(--cyan); }
.stroke { -webkit-text-stroke:1.5px rgba(109,40,217,.25);color:transparent; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex;align-items:center;gap:10px;background:var(--v);color:#fff;font-family:var(--fm);font-size:.8rem;letter-spacing:.06em;padding:14px 28px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;transition:var(--transition);position:relative;overflow:hidden; }
.btn-primary::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .2s; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 12px 32px rgba(109,40,217,.3); }
.btn-primary:hover::before { opacity:1; }
.btn-ghost { display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--gray2);font-family:var(--fm);font-size:.8rem;letter-spacing:.06em;padding:14px 28px;border-radius:8px;border:1px solid var(--border);cursor:pointer;text-decoration:none;transition:var(--transition); }
.btn-ghost:hover { border-color:var(--v);color:var(--vl);background:rgba(124,58,237,.06); }

/* ── ANIMATIONS ── */
.reveal { opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1;transform:none; }
.rd1 { transition-delay:.1s; } .rd2 { transition-delay:.2s; } .rd3 { transition-delay:.3s; } .rd4 { transition-delay:.4s; }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatGlow { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes countPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden;border-top:1px solid rgba(109,40,217,.1);border-bottom:1px solid rgba(109,40,217,.1);background:#eeeafd;position:relative;z-index:1; }
.marquee-track { display:flex;white-space:nowrap;animation:marquee 30s linear infinite; }
.marquee-item { display:inline-flex;align-items:center;gap:14px;padding:18px 40px;font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);border-right:1px solid var(--border);flex-shrink:0; }
.marquee-item .dot { width:4px;height:4px;border-radius:50%;background:var(--v); }
.marquee-item .dot-cyan { width:4px;height:4px;border-radius:50%;background:var(--cyan); }

/* ── FAQ ── */
.faq-list { margin-top:56px;display:flex;flex-direction:column;gap:1px; }
.faq-item { background:var(--surface);border-radius:var(--r);overflow:hidden; }
.faq-q { width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;background:none;border:none;cursor:pointer;font-family:var(--ff);font-size:1.05rem;font-weight:700;color:var(--white);text-align:left;gap:20px;transition:background .2s; }
.faq-q:hover { background:rgba(255,255,255,.03); }
.faq-icon { width:28px;height:28px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--vl);transition:transform .3s,background .3s; }
.faq-item.open .faq-icon { transform:rotate(45deg);background:rgba(124,58,237,.15); }
.faq-a { max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.faq-a p { padding:0 32px 24px;font-size:.93rem; }

/* ── CTA BIG ── */
.cta-big { margin:0 5vw 120px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:100px 80px;text-align:center;position:relative;overflow:hidden; }
.cta-big::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(109,40,217,.10) 0%,transparent 65%); }
.cta-big::after { content:'w//b';position:absolute;font-family:var(--ff);font-size:18rem;font-weight:900;color:rgba(109,40,217,.05);right:-40px;bottom:-60px;letter-spacing:-.08em;pointer-events:none;line-height:1; }
.cta-big > * { position:relative;z-index:1; }
.cta-big h2 { margin-bottom:18px; }
.cta-big p { font-size:1.1rem;margin-bottom:44px;max-width:540px;margin-left:auto;margin-right:auto; }
.cta-actions { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }
.cta-note { font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;color:var(--gray);margin-top:20px; }

/* ── FOOTER ── */
footer { border-top:1px solid rgba(109,40,217,.12);background:#eeeafd;padding:80px 5vw 40px;position:relative;z-index:1; }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px; }
.footer-brand .logo-text { font-family:var(--ff);font-size:1.2rem;font-weight:900;color:var(--white);margin-bottom:14px;display:block;cursor:pointer; }
.footer-brand p { font-size:.87rem;color:var(--gray);max-width:260px;line-height:1.8; }
.f-socials { display:flex;gap:10px;margin-top:24px; }
.f-social { width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gray);text-decoration:none;font-size:.82rem;transition:all .2s; }
.f-social:hover { background:rgba(124,58,237,.15);border-color:var(--v);color:var(--vl); }
.f-col h5 { font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:18px; }
.f-col ul { list-style:none; }
.f-col li { margin-bottom:10px;font-size:.87rem;color:var(--gray); }
.f-col li a, .f-col li button { font-size:.87rem;color:var(--gray);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;text-align:left;display:block;transition:color .2s; }
.f-col li a:hover, .f-col li button:hover { color:var(--vl); }
.footer-bottom { display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid rgba(109,40,217,.1);flex-wrap:wrap;gap:16px; }
.footer-bottom p,.footer-bottom a { font-family:var(--fm);font-size:.75rem;color:var(--gray);text-decoration:none; }
.footer-bottom a:hover { color:var(--vl); }

/* ── FLOAT CTA ── */
.float-cta { position:fixed;bottom:28px;right:28px;z-index:500; }
.float-btn { display:flex;align-items:center;gap:10px;background:var(--v);color:white;font-family:var(--fm);font-size:.76rem;letter-spacing:.08em;padding:13px 20px;border-radius:100px;border:none;cursor:pointer;box-shadow:0 8px 28px rgba(109,40,217,.35);transition:var(--transition);white-space:nowrap;text-decoration:none; }
.float-btn:hover { background:var(--vl);transform:translateY(-2px) scale(1.02); }
.float-btn .ft-icon { width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem; }
.float-btn .ft-icon i { color:white;font-size:.9rem; }

/* ── NOTIFICATION ── */
.notif { position:fixed;bottom:32px;left:32px;z-index:9999;background:var(--surface);border:1px solid var(--v);border-radius:14px;padding:22px 28px;font-size:.9rem;color:var(--white);box-shadow:0 12px 40px rgba(109,40,217,.18);transform:translateX(-120%);transition:transform .45s cubic-bezier(.16,1,.3,1);max-width:340px; }
.notif.show { transform:translateX(0); }
.notif strong { color:var(--vl);font-family:var(--ff);font-size:1rem;display:block;margin-bottom:6px; }

/* ── RESPONSIVE COMÚN ── */
@media (max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  section { padding:64px 5vw; }
  nav { top:12px;left:12px;right:12px;transform:none;border-radius:16px;padding:0 6px 0 14px;max-width:unset; }
  nav.scrolled { top:8px; }
  .nav-center, .nav-right { display:none; }
  .hamburger { display:flex; }
  .wbs-lang-text { display:none; }
  .wbs-lang-switcher { margin-left:2px;padding-left:4px;gap:1px; }
  .footer-top { grid-template-columns:1fr;gap:28px; }
  footer { padding:52px 5vw 28px; }
  .footer-bottom { flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px; }
  .footer-bottom p { width:100%; }
  .float-cta { bottom:16px;right:16px; }
  .float-btn { padding:11px 16px;font-size:.72rem; }
  .cta-big { padding:48px 22px;margin:0 0 72px;border-radius:16px; }
  .cta-big::after { display:none; }
  .cta-big h2 { font-size:clamp(1.8rem,6vw,2.4rem); }
  .cta-big p { font-size:.95rem;margin-bottom:28px; }
  .cta-actions { flex-direction:column;align-items:center; }
  .cta-actions a, .cta-actions .btn-primary, .cta-actions .btn-ghost { width:100%;justify-content:center;text-align:center; }
  .marquee-track { animation-duration:20s; }
  .marquee-item { padding:14px 22px;font-size:.62rem; }
  .faq-q { padding:16px 18px;font-size:.92rem; }
  .faq-a p { padding:0 18px 16px; }
  .notif { left:16px;right:16px;max-width:unset;bottom:16px; }
}