:root {
  --ui-violet: #7167ff;
  --ui-violet-deep: #5147dc;
  --ui-cyan: #28d7e8;
  --ui-ink: #0b1020;
  --ui-muted: #6f778b;
  --ui-line: rgba(126, 136, 165, .2);
  --ui-shadow: 0 26px 80px rgba(6, 10, 25, .18);
  --ui-radius: 24px;
}

html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { max-width: 100%; overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body:not(.cp-page) { min-height: 100vh; }
button, input, textarea, select, a { -webkit-tap-highlight-color: transparent; }
button, .btn, a { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-cyan) 80%, white); outline-offset: 3px; }

/* Entrada de página y revelados progresivos */
.ui-js body:not(.cp-page) { opacity: 0; }
.ui-js body.ui-ready:not(.cp-page) { opacity: 1; transition: opacity .38s ease; }
.ui-reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s cubic-bezier(.2,.75,.25,1), transform .72s cubic-bezier(.2,.75,.25,1); }
.ui-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Navegación del estudio */
.studio-nav,
.editor-nav {
  border-bottom-color: rgba(135, 145, 175, .18) !important;
  box-shadow: 0 12px 36px rgba(4, 7, 18, .12);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.brand span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(92,76,240,.22); }
.studio-nav .brand { min-width: max-content; white-space: nowrap; letter-spacing: -.015em; }
.studio-nav > div { display: flex; align-items: center; gap: 18px; }
.studio-nav a:hover { color: var(--ui-cyan); }

/* Acceso y registro */
.auth-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 16%, rgba(45,215,232,.18), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(113,103,255,.25), transparent 30%),
    linear-gradient(145deg, #090d1a 0%, #11162a 56%, #0a1120 100%) !important;
}
.auth-page::before,
.auth-page::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; transform: rotate(-18deg);
  border: 1px solid rgba(255,255,255,.05); background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent);
}
.auth-page::before { width: 52vw; height: 240px; left: -14vw; bottom: 8vh; }
.auth-page::after { width: 48vw; height: 180px; right: -12vw; top: 17vh; }
.auth-brand { position: relative; z-index: 3; }
.auth-shell {
  width: min(1160px, calc(100% - 48px)) !important;
  min-height: calc(100vh - 112px);
  margin-inline: auto !important;
  gap: clamp(44px, 7vw, 110px) !important;
}
.auth-copy { max-width: 580px; }
.auth-copy h1 { text-wrap: balance; letter-spacing: -.045em; }
.auth-copy p { max-width: 520px; color: rgba(235,240,255,.7) !important; }
.auth-card {
  width: 100%; max-width: 480px !important; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.42) !important; border-radius: var(--ui-radius) !important;
  background: rgba(255,255,255,.96) !important; box-shadow: 0 34px 100px rgba(0,0,0,.35) !important;
}
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ui-violet), var(--ui-cyan)); }
.auth-card h2 { letter-spacing: -.035em; }
.auth-card label { font-weight: 750; color: #2f3546; }
.auth-card input {
  width: 100%; border-radius: 12px !important; border: 1px solid #d9ddec !important; background: #f8f9fd !important;
  box-shadow: inset 0 1px 2px rgba(13,19,38,.03); transition: border-color .25s, box-shadow .25s, background .25s;
}
.auth-card input:hover { border-color: #b8bfd5 !important; }
.auth-card input:focus { border-color: var(--ui-violet) !important; background: white !important; box-shadow: 0 0 0 4px rgba(113,103,255,.12) !important; }
.auth-card .btn { position: relative; overflow: hidden; border-radius: 12px !important; box-shadow: 0 13px 34px rgba(92,76,240,.28); }
.auth-card .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(92,76,240,.36); }
.auth-card > small { display: block; margin-top: 20px; text-align: center; }

/* Panel */
.dashboard-page,
.pricing-page {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 88% 5%, rgba(113,103,255,.14), transparent 31%), #090b11 !important;
  background-size: 44px 44px, 44px 44px, auto !important;
}
.dashboard { padding-block: clamp(54px, 7vw, 94px) !important; }
.dash-head h1 { letter-spacing: -.055em; text-wrap: balance; }
.dash-head .btn { box-shadow: 0 16px 38px rgba(217,168,77,.2); }
.dash-head .btn:hover { transform: translateY(-3px); box-shadow: 0 21px 48px rgba(217,168,77,.3); }
.cards-list { display: grid; gap: 14px; }
.cards-list article,
.plan-banner,
.empty-state {
  position: relative; overflow: hidden; border-color: rgba(255,255,255,.11) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.15); transition: transform .34s cubic-bezier(.2,.8,.2,1), border-color .34s, box-shadow .34s;
}
.cards-list article::before,
.plan-banner::before,
.empty-state::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--ui-x, 50%) var(--ui-y, 50%), rgba(109,96,255,.12), transparent 44%); opacity: 0; transition: opacity .35s;
}
.cards-list article:hover { transform: translateY(-4px); border-color: rgba(113,103,255,.42) !important; box-shadow: 0 25px 70px rgba(0,0,0,.26); }
.cards-list article:hover::before,
.plan-banner:hover::before,
.empty-state:hover::before { opacity: 1; }
.mini-card { box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.mini-card::after { content: ""; position: absolute; inset: -40% -80%; transform: rotate(22deg) translateX(-55%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transition: transform .8s ease; }
.cards-list article:hover .mini-card::after { transform: rotate(22deg) translateX(55%); }
.mini-card.has-preview { padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#080a0f; }
.mini-card.has-preview::after { display:none; }
.mini-card.has-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.card-plan-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #a6a9b7; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.card-plan-badge.is-covered { color: #77f0ba; border-color: rgba(55,215,149,.28); background: rgba(55,215,149,.08); }
.card-expiry { display:block; margin-top:8px; color:#a6a9b7; font-size:11px; }
.plan-card-link { padding:9px 12px; border:1px solid rgba(113,103,255,.45); border-radius:8px; color:#b9b3ff; font-weight:800; }
.card-actions { position: relative; z-index: 2; }
.card-actions a:not(.btn), .whatsapp-share { border-radius: 999px; padding: 10px 15px !important; }
.whatsapp-share:hover { transform: translateY(-2px); }
.plan-banner { background: linear-gradient(120deg, rgba(25,23,16,.98), rgba(25,20,38,.96)) !important; }
.empty-state h2 { font-family: Manrope, sans-serif !important; letter-spacing: -.04em; }

/* Planes */
.pricing-page .pricing { padding-block: clamp(56px, 8vw, 110px); }
.pricing-page .section-head h2 { letter-spacing: -.045em; }
.pricing-page .plan-status { border-radius: 18px !important; background: linear-gradient(130deg, rgba(214,170,88,.12), rgba(113,103,255,.08)) !important; }
.pricing-page .price-grid article {
  position: relative; overflow: hidden; border-radius: 24px !important; border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,.23); transition: transform .32s ease, border-color .32s, box-shadow .32s;
}
.pricing-page .price-grid article::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(113,103,255,.2), transparent 68%); pointer-events: none; }
.pricing-page .price-grid article:hover { transform: translateY(-7px); border-color: rgba(113,103,255,.5) !important; box-shadow: 0 34px 84px rgba(0,0,0,.35); }
.pricing-page .price-grid .featured { border-color: rgba(214,170,88,.62) !important; }
.pricing-page .account-scope { border-color: rgba(113,103,255,.5) !important; background: linear-gradient(130deg, rgba(113,103,255,.16), rgba(34,211,238,.07)) !important; }
.pricing-page .current-plan-note { margin-top: 22px; padding: 14px 16px; border: 1px solid rgba(55,215,149,.28); border-radius: 10px; color: #77f0ba; background: rgba(55,215,149,.08); text-align: center; font-size: 13px; font-weight: 800; }

/* Editor y tarjetas */
.editor-page { background: #0c0f16 !important; }
.editor-nav { background: rgba(10,12,18,.88) !important; }
.editor-sidebar { box-shadow: 18px 0 55px rgba(0,0,0,.19); }
.editor-tabs { backdrop-filter: blur(12px); }
.editor-tabs button { position: relative; }
.editor-tabs button::after { height: 3px !important; border-radius: 99px 99px 0 0; }
.template-option {
  overflow: hidden; border-radius: 14px !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s !important;
}
.template-option:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(21,26,45,.14); }
.template-option.active { box-shadow: 0 0 0 2px rgba(219,166,68,.18), 0 14px 34px rgba(21,26,45,.15); }
.template-thumb { position: relative; overflow: hidden; }
.template-thumb::after { content: ""; position: absolute; inset: -100% -80%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.36) 50%, transparent 58%); transform: translateX(-35%); transition: transform .75s ease; }
.template-option:hover .template-thumb::after { transform: translateX(35%); }
.editor-workspace {
  background:
    radial-gradient(circle at 54% 44%, rgba(112,102,255,.08), transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), #12151c !important;
  background-size: auto, 28px 28px, 28px 28px, auto !important;
}
.canvas-wrap { perspective: 1200px; }
.business-card {
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.38));
  transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .4s ease !important;
}
.canvas-wrap:hover .business-card { filter: drop-shadow(0 36px 46px rgba(0,0,0,.48)); }
.worktop button, .editor-nav .btn, .editor-nav a { border-radius: 10px; }
.field-group, .repeat-card { border-radius: 14px !important; }
.editor-panel input, .editor-panel textarea, .editor-panel select { border-radius: 10px !important; transition: border-color .2s, box-shadow .2s; }
.editor-panel input:focus, .editor-panel textarea:focus, .editor-panel select:focus { border-color: var(--ui-violet) !important; box-shadow: 0 0 0 3px rgba(113,103,255,.1); }

/* Perfiles y estados */
.profile-page { background: radial-gradient(circle at 50% 12%, rgba(113,103,255,.16), transparent 35%), #090c14 !important; }
.profile-missing { border: 1px solid rgba(255,255,255,.12); border-radius: 26px; box-shadow: var(--ui-shadow); }
.profile-section,
.contact-grid a,
.social-links a,
.project-card,
.video-card,
.qr-panel { transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease; }
.profile-section:hover { box-shadow: 0 30px 90px rgba(10,15,35,.16); }
.social-section { margin-bottom: clamp(42px, 6vw, 82px) !important; }
.social-links { gap: clamp(14px, 2vw, 24px) !important; }
.contact-grid a:hover,
.social-links a:hover,
.project-card:hover,
.video-card:hover { transform: translateY(-5px); }

/* Brillo controlado en componentes interactivos */
.btn, .cp-button { position: relative; overflow: hidden; }
.btn::after, .cp-button::after {
  content: ""; position: absolute; inset: -120% auto -120% -45%; width: 36%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); transition: left .55s ease; pointer-events: none;
}
.btn:hover::after, .cp-button:hover::after { left: 115%; }

@media (max-width: 820px) {
  .auth-brand { margin: 20px 20px 0 !important; }
  .auth-shell { width: min(100% - 28px, 560px) !important; min-height: auto; padding: 34px 0 42px !important; display: block !important; }
  .auth-copy { margin-bottom: 30px; }
  .auth-copy h1 { font-size: clamp(36px, 10vw, 54px) !important; }
  .auth-card { max-width: none !important; padding: 28px 22px !important; }
  .studio-nav { padding-inline: 18px !important; }
  .pricing-page .studio-nav .brand { font-size: 12px; }
  .pricing-page .studio-nav > a:last-child { font-size: 12px; white-space: nowrap; }
  .studio-nav > div > span { display: none; }
  .dash-head { align-items: flex-start !important; gap: 22px; }
  .cards-list article { gap: 18px !important; }
  .card-actions { width: 100%; justify-content: flex-start !important; flex-wrap: wrap; }
  .editor-nav { gap: 8px; }
  .editor-nav .brand b { display: none; }
  .business-card { filter: drop-shadow(0 18px 26px rgba(0,0,0,.38)); }
}

@media (max-width: 520px) {
  .auth-shell { padding-top: 22px !important; }
  .auth-copy { margin-bottom: 22px; }
  .auth-copy p { font-size: 15px !important; }
  .dashboard { padding-inline: 16px !important; }
  .dash-head .btn { width: 100%; text-align: center; }
  .cards-list article { border-radius: 18px !important; }
  .mini-card { width: 100% !important; min-height: 124px; }
  .card-actions > * { flex: 1 1 auto; text-align: center; }
  .pricing-page .pricing { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .ui-reveal { opacity: 1; transform: none; }
}