/* ============================================
   CSS VARIABLES & RESET
============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --c-primary:       #6C5CE7;
  --c-primary-dk:    #5A4BD1;
  --c-primary-lt:    #A29BFE;
  --c-accent:        #00CEC9;
  --c-accent2:       #FD79A8;
  --c-bg:            #08081A;
  --c-surface:       #13132A;
  --c-card:          #1C1C3A;
  --c-border:        rgba(108,92,231,.18);
  --c-text:          #FFFFFF;
  --c-text-2:        #B0B0CC;
  --c-text-3:        #68688A;
  --c-success:       #00B894;
  --c-danger:        #E17055;
  --c-warning:       #FDCB6E;
  --grad-primary:    linear-gradient(135deg,#6C5CE7,#A29BFE);
  --grad-accent:     linear-gradient(135deg,#FD79A8,#FDCB6E);
  --grad-bg:         linear-gradient(180deg,#08081A,#13132A);
  --shadow-glow:     0 0 40px rgba(108,92,231,.25);
  --r:               14px;
  --r-sm:            10px;
  --transition:      .3s cubic-bezier(.4,0,.2,1);
  --font:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   SCREENS
============================================ */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* ============================================
   BACKGROUND BLOBS
============================================ */
.bg-effects {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .12;
  animation: blobFloat 22s ease-in-out infinite;
}
.blob-1 { width:520px;height:520px;background:var(--c-primary);top:-120px;right:-120px;animation-delay:0s; }
.blob-2 { width:420px;height:420px;background:var(--c-accent2);bottom:-120px;left:-120px;animation-delay:-8s; }
.blob-3 { width:320px;height:320px;background:var(--c-accent);top:50%;left:50%;animation-delay:-16s; }

@keyframes blobFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(40px,-40px) scale(1.05); }
  66%      { transform:translate(-30px,30px) scale(.95); }
}

/* ============================================
   HEADER
============================================ */
.site-header {
  text-align: center;
  padding: 44px 20px 20px;
  position: relative; z-index: 1;
}
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.9rem; font-weight: 700; margin-bottom: 10px;
}
.logo i {
  font-size: 2rem;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo strong {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-tagline { color:var(--c-text-2); font-size:.98rem; font-weight:300; }

/* ============================================
   FORM WRAPPER
============================================ */
.form-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  position: relative; z-index: 1;
}

/* ============================================
   STEP NAV
============================================ */
.step-nav {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 44px;
}
.step-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: .35; transition: opacity var(--transition);
}
.step-item.active, .step-item.done { opacity: 1; }
.step-dot {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-card); border: 2px solid var(--c-text-3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  transition: all var(--transition);
}
.step-item.active .step-dot {
  background: var(--grad-primary); border-color: var(--c-primary);
  box-shadow: var(--shadow-glow);
}
.step-item.done .step-dot {
  background: var(--c-success); border-color: var(--c-success);
}
.step-item span { font-size: .72rem; font-weight: 600; color: var(--c-text-2); }
.step-track {
  flex: 1; height: 2px; background: var(--c-card);
  margin: 0 8px; margin-bottom: 24px;
  transition: background var(--transition);
}
.step-track.done { background: var(--c-success); }

/* ============================================
   FORM STEPS
============================================ */
.form-step { display: none; }
.form-step.active { display: block; animation: slideUp .45s ease; }

@keyframes slideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

.step-heading { text-align: center; margin-bottom: 36px; }
.step-heading h2 {
  font-size: 1.5rem; font-weight: 800; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.step-heading h2 i { color: var(--c-primary-lt); }
.step-heading p { color: var(--c-text-2); font-size: .93rem; }

/* ============================================
   FIELDS
============================================ */
.field-group { margin-bottom: 22px; }
.field-group label {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; margin-bottom: 9px;
}
.field-group label i { color: var(--c-primary-lt); font-size: .82rem; }
.field {
  width: 100%; padding: 13px 16px;
  background: var(--c-card); border: 2px solid var(--c-border);
  border-radius: var(--r-sm); color: var(--c-text);
  font-family: var(--font); font-size: .93rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.field:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(108,92,231,.14);
  background: var(--c-surface);
}
.field::placeholder { color: var(--c-text-3); }
textarea.field { resize: vertical; line-height: 1.65; }
select.field {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A29BFE' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
select.field option { background: var(--c-card); }
.field-hint { display: block; font-size: .75rem; color: var(--c-text-3); margin-top: 6px; }
.field-row { display: flex; gap: 18px; }
.field-group.half { flex: 1; }
.price-wrap { position: relative; }
.currency-sign {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-primary-lt); font-weight: 700; font-size: 1.05rem;
}
.price-wrap .field { padding-left: 36px; font-size: 1.15rem; font-weight: 700; }

/* ============================================
   THEME SELECTOR
============================================ */
.theme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.theme-card {
  background: var(--c-card); border: 2px solid var(--c-border);
  border-radius: var(--r-sm); padding: 12px;
  text-align: center; cursor: pointer;
  transition: all var(--transition);
}
.theme-card:hover { border-color: var(--c-primary); transform: translateY(-2px); }
.theme-card.active {
  border-color: var(--c-primary);
  background: rgba(108,92,231,.1);
  box-shadow: var(--shadow-glow);
}
.theme-preview { width:100%; height:54px; border-radius:8px; margin-bottom:8px; }
.theme-professional { background:linear-gradient(135deg,#1a1a2e,#6C5CE7); }
.theme-bold        { background:linear-gradient(135deg,#E17055,#FDCB6E); }
.theme-elegant     { background:linear-gradient(135deg,#0a0a1a,#d4af37); }
.theme-vibrant     { background:linear-gradient(135deg,#6C5CE7,#00CEC9,#FD79A8); }
.theme-card span   { font-size:.78rem; font-weight:600; color:var(--c-text-2); }
.theme-card.active span { color:var(--c-text); }

/* ============================================
   BUTTONS
============================================ */
.btn-next {
  width:100%; padding:15px 28px;
  background: var(--grad-primary); color:#fff; border:none;
  border-radius:var(--r-sm); font-family:var(--font);
  font-size:.97rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all var(--transition); margin-top:8px;
}
.btn-next:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow); }

.btn-generate {
  flex:1; padding:18px 28px;
  background: var(--grad-accent); color:var(--c-bg); border:none;
  border-radius:var(--r-sm); font-family:var(--font);
  font-size:1.05rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all var(--transition); position:relative; overflow:hidden;
}
.btn-generate:hover { transform:translateY(-2px); filter:brightness(1.1); }
.btn-shine {
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shineAnim 3s ease-in-out infinite;
}
@keyframes shineAnim { 0%{left:-100%} 50%{left:100%} 100%{left:100%} }

.btn-back {
  padding:15px 22px;
  background:var(--c-card); color:var(--c-text-2);
  border:2px solid var(--c-border);
  border-radius:var(--r-sm); font-family:var(--font);
  font-size:.9rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  transition:all var(--transition);
}
.btn-back:hover { background:var(--c-surface); border-color:var(--c-primary); color:var(--c-text); }

.btn-row { display:flex; gap:12px; margin-top:8px; }
.btn-row .btn-next { flex:1; }

/* ============================================
   LOADING SCREEN
============================================ */
.loader-wrap {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:40px 20px; text-align:center;
}
.ai-icon {
  position:relative; width:110px; height:110px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:36px;
}
.ai-icon i {
  font-size:3.2rem;
  background:var(--grad-primary);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:brainPulse 2s ease-in-out infinite; position:relative; z-index:1;
}
@keyframes brainPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--c-primary);
  animation:ringPulse 2s ease-out infinite;
}
.ring-2 { animation-delay:.55s; }
.ring-3 { animation-delay:1.1s; }
@keyframes ringPulse { 0%{transform:scale(.8);opacity:1} 100%{transform:scale(2.1);opacity:0} }
.loader-wrap h2 {
  font-size:1.45rem; margin-bottom:28px;
  background:var(--grad-primary);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.loader-steps { list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:36px; text-align:left; }
.loader-steps li { display:flex; align-items:center; gap:12px; color:var(--c-text-3); font-size:.92rem; transition:all .4s; }
.loader-steps li i { font-size:.55rem; }
.loader-steps li.ls-active { color:var(--c-primary-lt); }
.loader-steps li.ls-active i { font-size:1rem; animation:fa-spin 1s linear infinite; }
.loader-steps li.ls-done { color:var(--c-success); }
.loader-steps li.ls-done i { font-size:.9rem; }
.loader-bar { width:280px; height:6px; background:var(--c-card); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.loader-fill { height:100%; width:0; background:var(--grad-primary); border-radius:10px; transition:width .5s ease; }
.loader-pct { color:var(--c-primary-lt); font-weight:700; font-size:.95rem; }

/* ============================================
   TOOLBAR
============================================ */
.toolbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(8,8,26,.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--c-border);
  padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.toolbar-left, .toolbar-right { display:flex; gap:8px; }
.ai-badge {
  background:var(--grad-primary); padding:6px 16px;
  border-radius:20px; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.tool-btn {
  padding:8px 14px; background:var(--c-card);
  border:1px solid var(--c-border); color:var(--c-text-2);
  border-radius:8px; font-family:var(--font);
  font-size:.82rem; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all var(--transition); white-space:nowrap;
}
.tool-btn:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.tool-btn.accent { background:var(--grad-primary); color:#fff; border:none; }

/* ============================================
   PAGE OUTPUT
============================================ */
.page-output {
  display:block; width:100%; height:calc(100vh - 57px);
  margin-top:57px; background:#fff; border:0;
}

/* ============================================
   TOAST
============================================ */
.toast {
  position:fixed; bottom:-80px; left:50%; transform:translateX(-50%);
  background:var(--c-success); color:#fff;
  padding:13px 26px; border-radius:var(--r-sm);
  font-weight:600; font-size:.9rem;
  display:flex; align-items:center; gap:10px;
  z-index:9999; transition:bottom .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 30px rgba(0,184,148,.3); white-space:nowrap;
}
.toast.show { bottom:28px; }
.toast.error { background:var(--c-danger); box-shadow:0 8px 30px rgba(225,112,85,.3); }

/* ============================================
   SHAKE ANIMATION
============================================ */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.shake { animation:shake .5s ease; border-color:var(--c-danger) !important; }



/* ============================================
   ACCOUNT, AUTH & CLOUD STORAGE
============================================ */
.hidden { display:none !important; }
.account-bar {
  max-width:1100px; margin:0 auto 26px;
  display:flex; justify-content:flex-end; align-items:center; gap:9px;
}
.account-btn {
  border:1px solid var(--c-border); background:rgba(28,28,58,.8); color:var(--c-text-2);
  border-radius:10px; padding:9px 13px; font:600 .8rem var(--font); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all var(--transition); text-decoration:none;
}
.account-btn:hover { color:#fff; border-color:var(--c-primary); transform:translateY(-1px); }
.account-btn.primary { background:var(--grad-primary); color:#fff; border-color:transparent; }
.user-email {
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--c-primary-lt); font-size:.78rem; font-weight:600;
}
.cloud-status {
  max-width:720px; margin:0 auto 18px; padding:10px 14px; border-radius:10px;
  background:rgba(253,203,110,.12); border:1px solid rgba(253,203,110,.3);
  color:var(--c-warning); font-size:.8rem;
}

/* Dashboard */
.dashboard-shell { min-height:100vh; padding:42px 24px 80px; background:var(--grad-bg); }
.dashboard-header {
  max-width:1100px; margin:0 auto 34px; display:flex; justify-content:space-between;
  align-items:flex-end; gap:24px;
}
.dashboard-logo { margin-bottom:18px; font-size:1.35rem; }
.dashboard-header h1 { font-size:clamp(1.8rem,4vw,2.7rem); margin-bottom:8px; }
.dashboard-header p { color:var(--c-text-2); }
.dashboard-actions { display:flex; gap:10px; flex-wrap:wrap; }
.pages-grid {
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
}
.page-card {
  background:var(--c-card); border:1px solid var(--c-border); border-radius:16px;
  overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.18); transition:all var(--transition);
}
.page-card:hover { transform:translateY(-4px); border-color:rgba(108,92,231,.55); }
.page-card-preview {
  height:145px; padding:24px; background:linear-gradient(135deg,rgba(108,92,231,.85),rgba(0,206,201,.65));
  display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden;
}
.page-card-preview::before {
  content:''; position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.1); right:-45px; top:-55px;
}
.page-card-preview span { font-size:.72rem; opacity:.8; text-transform:uppercase; letter-spacing:.08em; }
.page-card-preview h3 { position:relative; font-size:1.2rem; line-height:1.3; margin-top:6px; }
.page-card-body { padding:18px; }
.page-card-meta { color:var(--c-text-3); font-size:.76rem; margin-bottom:14px; }
.page-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.page-card-actions button {
  border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-2);
  border-radius:9px; padding:9px; font:600 .76rem var(--font); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.page-card-actions button:hover { border-color:var(--c-primary); color:#fff; }
.page-card-actions .danger:hover { border-color:var(--c-danger); color:#ff9d8b; }
.empty-state {
  max-width:680px; margin:70px auto; padding:50px 25px; text-align:center;
  border:1px dashed var(--c-border); border-radius:18px; color:var(--c-text-2);
}
.empty-state i { font-size:2.7rem; color:var(--c-primary-lt); margin-bottom:18px; }
.empty-state h2 { color:#fff; margin-bottom:9px; }
.empty-state p { margin-bottom:20px; }

/* Authentication modal */
.auth-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; }
.auth-backdrop { position:absolute; inset:0; background:rgba(3,3,15,.78); backdrop-filter:blur(8px); }
.auth-card {
  width:min(440px,100%); max-height:92vh; overflow:auto; position:relative; z-index:1;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:20px;
  padding:34px; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.auth-close {
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--c-border); background:var(--c-card); color:var(--c-text-2); cursor:pointer;
}
.auth-brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; margin-bottom:24px; }
.auth-brand i, .auth-brand strong { color:var(--c-primary-lt); }
.auth-card h2 { font-size:1.55rem; margin-bottom:8px; }
.auth-card > p { color:var(--c-text-2); font-size:.88rem; margin-bottom:22px; }
.auth-form { display:flex; flex-direction:column; gap:9px; }
.auth-form label { font-size:.8rem; font-weight:600; margin-top:5px; }
.auth-form input {
  width:100%; padding:12px 14px; border-radius:10px; border:2px solid var(--c-border);
  background:var(--c-card); color:#fff; outline:none; font:400 .9rem var(--font);
}
.auth-form input:focus { border-color:var(--c-primary); box-shadow:0 0 0 4px rgba(108,92,231,.12); }
.auth-submit {
  margin-top:10px; padding:13px; border:0; border-radius:10px; background:var(--grad-primary);
  color:#fff; font:700 .92rem var(--font); cursor:pointer;
}
.auth-submit:disabled { opacity:.55; cursor:wait; }
.auth-link { border:0; background:none; color:var(--c-primary-lt); cursor:pointer; font:600 .78rem var(--font); }
.auth-switch { text-align:center; color:var(--c-text-2); font-size:.82rem; margin-top:10px; }
.auth-switch button { border:0; background:none; color:var(--c-primary-lt); font-weight:700; cursor:pointer; }
.setup-notice {
  display:flex; flex-direction:column; gap:5px; padding:12px; margin-bottom:16px; border-radius:10px;
  background:rgba(253,203,110,.1); border:1px solid rgba(253,203,110,.28); color:var(--c-warning);
  font-size:.78rem;
}
.setup-notice code { color:#fff; }


/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:768px){
  .form-wrapper { padding:16px 14px 60px; }
  .step-heading h2 { font-size:1.25rem; flex-direction:column; gap:6px; }
  .field-row { flex-direction:column; gap:0; }
  .theme-grid { grid-template-columns:repeat(2,1fr); }
  .btn-row { flex-direction:column; }
  .btn-row .btn-next, .btn-generate { width:100%; }
  .toolbar { padding:8px 10px; }
  .toolbar-center { order:-1; width:100%; text-align:center; }
  .tool-btn { font-size:.75rem; padding:6px 10px; }
  .step-track { width:28px; }
}
@media(max-width:420px){
  .step-nav { transform:scale(.88); transform-origin:center; }
}


@media(max-width:768px){
  .account-bar { justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
  .user-email { order:-1; width:100%; max-width:none; }
  .dashboard-header { align-items:flex-start; flex-direction:column; }
  .dashboard-actions { width:100%; }
  .dashboard-actions .account-btn { flex:1; }
  .toolbar { flex-wrap:wrap; }
  .toolbar-left,.toolbar-right { flex-wrap:wrap; justify-content:center; }
  .page-output { margin-top:98px; height:calc(100vh - 98px); }
}
@media(max-width:480px){
  .auth-card { padding:28px 20px; }
  .dashboard-shell { padding:28px 14px 60px; }
  .pages-grid { grid-template-columns:1fr; }
  .page-card-actions { grid-template-columns:1fr; }
}

/* ============================================
   PUBLICACIÓN Y RUTAS PÚBLICAS
============================================ */
.publish-card { width:min(520px,100%); }
.public-url-preview {
  margin:10px 0 2px; padding:12px 14px; border-radius:10px;
  background:rgba(108,92,231,.1); border:1px solid rgba(108,92,231,.3);
  display:flex; flex-direction:column; gap:5px; overflow:hidden;
}
.public-url-preview span { color:var(--c-text-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.public-url-preview strong { color:var(--c-primary-lt); font-size:.82rem; overflow-wrap:anywhere; }
.unpublish-btn {
  margin-top:3px; padding:12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(225,112,85,.4); background:rgba(225,112,85,.08);
  color:#ff9d8b; font:700 .86rem var(--font);
}
.unpublish-btn:hover { background:rgba(225,112,85,.16); }
.published-badge {
  position:absolute; top:14px; left:14px; padding:5px 10px; border-radius:999px;
  background:rgba(0,184,148,.18); border:1px solid rgba(0,184,148,.45);
  color:#b9ffec; font-size:.68rem; font-weight:700; text-transform:uppercase;
}
.published-badge i { font-size:.45rem; margin-right:4px; color:var(--c-success); }
.page-public-path {
  margin:-3px 0 13px; padding:8px 10px; border-radius:8px;
  background:rgba(0,206,201,.07); color:var(--c-accent);
  font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.page-action-link {
  border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-2);
  border-radius:9px; padding:9px; font:600 .76rem var(--font); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
}
.page-action-link:hover { border-color:var(--c-accent); color:#fff; }
.public-page-screen { min-height:100vh; background:#fff; }
.public-page-frame { display:block; width:100%; min-height:100vh; border:0; background:#fff; }
.public-route-state {
  min-height:100vh; padding:30px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:var(--grad-bg); color:#fff;
}
.public-route-state i { font-size:3rem; color:var(--c-primary-lt); margin-bottom:20px; }
.public-route-state h1 { font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:9px; }
.public-route-state p { color:var(--c-text-2); margin-bottom:22px; }


/* ============================================
   PUBLICALATINO — PORTADA PRINCIPAL
============================================ */
.home-screen{background:#f7f8fc;color:#182033;min-height:100vh;--home-purple:#6c4ff8;--home-blue:#2368ff;--home-cyan:#13c8c2;--home-ink:#11162b;--home-muted:#687087;--home-line:#e6e8f0}
.home-container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.home-nav{height:76px;padding:0 max(20px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:0;z-index:300;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(21,25,48,.07)}
.brand-lockup{display:inline-flex;align-items:center;gap:10px;color:var(--home-ink);font-size:1.2rem;font-weight:900;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}.brand-lockup>span:last-child>span{color:var(--home-purple)}.brand-lockup small{font-size:.58em;color:var(--home-muted);letter-spacing:0}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--home-purple),var(--home-blue));box-shadow:0 9px 24px rgba(91,69,239,.28)}
.home-menu{display:flex;gap:26px;align-items:center}.home-menu a{color:#4c5368;text-decoration:none;font-size:.85rem;font-weight:650}.home-menu a:hover{color:var(--home-purple)}
.home-account{display:flex;align-items:center;gap:8px}.home-nav-btn{padding:10px 14px;border-radius:10px;border:1px solid var(--home-line);background:#fff;color:#353c51;font:700 .78rem var(--font);cursor:pointer;text-decoration:none}.home-nav-btn.primary{border:0;background:linear-gradient(135deg,var(--home-purple),var(--home-blue));color:#fff;box-shadow:0 8px 20px rgba(91,69,239,.2)}
.home-hero{position:relative;overflow:hidden;padding:92px 0 88px;background:radial-gradient(circle at 12% 8%,#f0ebff 0,transparent 32%),radial-gradient(circle at 85% 15%,#e8f7ff 0,transparent 30%),linear-gradient(180deg,#fff,#f8f8ff)}.home-orb{position:absolute;border-radius:50%;filter:blur(4px);opacity:.55;pointer-events:none}.home-orb-one{width:240px;height:240px;background:linear-gradient(135deg,#cbbdff,#8ce7e3);right:-80px;top:90px}.home-orb-two{width:90px;height:90px;background:#ffdf9d;left:-25px;bottom:40px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;position:relative;z-index:1}.hero-kicker,.section-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;background:#eeeaff;color:#5a42dc;font-size:.73rem;font-weight:800;letter-spacing:.02em}.hero-copy h1{font-size:clamp(2.65rem,5.2vw,4.8rem);line-height:1.03;letter-spacing:-.06em;color:var(--home-ink);margin:22px 0}.hero-copy h1 span{background:linear-gradient(100deg,var(--home-purple),var(--home-blue),var(--home-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{font-size:1.08rem;color:var(--home-muted);line-height:1.75;max-width:670px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}.home-cta{min-height:48px;padding:0 21px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:.86rem;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font)}.home-cta.primary{background:linear-gradient(135deg,var(--home-purple),var(--home-blue));color:#fff;box-shadow:0 14px 34px rgba(70,68,230,.25)}.home-cta.secondary{background:#fff;border-color:#dfe2ec;color:#30374b}.home-cta.dark{background:#171c31;color:#fff;border:0}.home-cta.white{background:#fff;color:#4e36da;box-shadow:0 12px 30px rgba(22,12,65,.22)}.home-cta.full{width:100%}.home-cta:disabled{opacity:.6;cursor:not-allowed}.hero-proof{display:flex;gap:18px;flex-wrap:wrap;color:#697087;font-size:.76rem;font-weight:650}.hero-proof i{color:#13a990;margin-right:5px}
.hero-product{position:relative;padding:25px 10px}.browser-shell{background:#fff;border:1px solid #dfe3ef;border-radius:18px;box-shadow:0 38px 90px rgba(39,36,89,.18);overflow:hidden;transform:rotate(1.1deg)}.browser-top{height:42px;background:#f1f3f8;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid #e4e6ed}.browser-top i{width:8px;height:8px;border-radius:50%;background:#ff7c79}.browser-top i:nth-child(2){background:#ffce67}.browser-top i:nth-child(3){background:#5bd39b}.browser-top span{margin-left:8px;background:#fff;border:1px solid #e1e4eb;border-radius:7px;padding:5px 12px;color:#888fa1;font-size:.62rem;flex:1}.browser-body{height:380px;display:grid;grid-template-columns:55px 1fr;background:linear-gradient(135deg,#11142b,#20265a 62%,#624bea);color:#fff}.mock-sidebar{background:rgba(4,6,20,.35);display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:18px}.mock-logo{width:28px;height:28px;border-radius:9px;background:#725af8;display:grid;place-items:center;font-size:.75rem}.mock-sidebar>span{width:20px;height:5px;border-radius:5px;background:rgba(255,255,255,.18)}.mock-sidebar>span.active{background:#75e3d6}.mock-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:45px}.mock-badge{font-size:.52rem;font-weight:800;padding:6px 10px;border-radius:20px;background:rgba(255,255,255,.12);margin-bottom:18px}.mock-title{height:22px;width:92%;border-radius:5px;background:#fff;margin-bottom:9px}.mock-title.short{width:68%}.mock-text{height:8px;width:78%;background:rgba(255,255,255,.35);border-radius:6px;margin-top:17px}.mock-text.medium{width:55%;margin-top:7px}.mock-button{margin-top:27px;background:linear-gradient(135deg,#ff779d,#ffbd62);color:#241526;font-size:.58rem;font-weight:900;padding:13px 23px;border-radius:30px}.mock-stats{display:flex;gap:15px;margin-top:25px;font-size:.55rem;color:rgba(255,255,255,.72)}.mock-stats b{font-weight:600}.floating-card{position:absolute;background:#fff;border:1px solid #e6e8f0;border-radius:13px;padding:12px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 45px rgba(31,31,70,.18)}.floating-card i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7257fa,#34bfc2)}.floating-card strong,.floating-card span{display:block}.floating-card strong{font-size:.72rem;color:#22283b}.floating-card span{font-size:.58rem;color:#858b9b;margin-top:2px}.card-ai{left:-35px;top:4px}.card-live{right:-30px;bottom:12px}.pulse-dot{width:11px;height:11px;border-radius:50%;background:#19bf8c;box-shadow:0 0 0 6px rgba(25,191,140,.12)}
.trust-bar{background:#fff;border-block:1px solid var(--home-line)}.trust-grid{min-height:82px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center}.trust-grid span{display:flex;align-items:center;justify-content:center;gap:9px;color:#5f6679;font-size:.75rem;border-right:1px solid var(--home-line)}.trust-grid span:last-child{border:0}.trust-grid i{color:#7257f4;font-size:1rem}
.home-section{padding:100px 0}.section-heading{text-align:center;max-width:760px;margin:0 auto 52px}.section-heading>span{color:#6b4ee8;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em}.section-heading h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;letter-spacing:-.045em;color:var(--home-ink);margin:12px 0 16px}.section-heading p{color:var(--home-muted);line-height:1.7;font-size:.96rem}.section-heading.light h2,.section-heading.light>span{color:#fff}.section-heading.light p{color:rgba(255,255,255,.7)}
.how-section{background:#fff}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.steps-grid article{position:relative;padding:30px 25px;border-radius:18px;border:1px solid var(--home-line);background:#fbfbfe;min-height:255px}.steps-grid em{position:absolute;right:20px;top:18px;color:#dfe1ea;font-size:1.65rem;font-weight:900;font-style:normal}.steps-grid i{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7056f5,#2782ff);font-size:1.05rem;margin-bottom:27px}.steps-grid h3{font-size:1.05rem;color:#20263a;margin-bottom:10px}.steps-grid p{color:#72798b;font-size:.82rem;line-height:1.65}
.product-section{background:linear-gradient(145deg,#10142a,#171d40 60%,#29215d)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.product-grid article{padding:24px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);border-radius:16px;color:#fff;transition:.25s}.product-grid article:hover{transform:translateY(-5px);background:rgba(255,255,255,.09);border-color:rgba(133,110,255,.55)}.product-grid i{font-size:1.25rem;color:#8c78ff;margin-bottom:18px}.product-grid h3{font-size:.95rem;margin-bottom:8px}.product-grid p{font-size:.75rem;color:rgba(255,255,255,.58);line-height:1.6}
.advantages-section{background:#fff}.advantages-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.dashboard-preview{padding:20px;border-radius:22px;background:linear-gradient(155deg,#151833,#22275a);box-shadow:0 35px 75px rgba(28,31,77,.23);transform:rotate(-1deg)}.dash-head{display:flex;align-items:center;justify-content:space-between;color:#fff;padding-bottom:18px}.dash-head span{font-size:.85rem;font-weight:800}.dash-head i{color:#8d77ff;margin-right:7px}.dash-head button{border:0;border-radius:8px;padding:8px 11px;background:#7259f3;color:#fff;font-size:.62rem;font-weight:800}.dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dash-cards>div{height:180px;border-radius:14px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(145deg,#654fea,#22b7b0)}.dash-cards>div:nth-child(2){background:linear-gradient(145deg,#ee6d93,#f6b65c)}.dash-cards span{font-size:.55rem;opacity:.8;font-weight:800}.dash-cards h4{font-size:.95rem;line-height:1.35;margin:7px 0 15px}.dash-cards small{font-size:.58rem}.dash-cards small i{font-size:.45rem;color:#7affcf}.dash-url{margin-top:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font-size:.67rem}.advantages-copy h2,.faq-layout h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.045em;color:var(--home-ink);margin:18px 0}.advantages-copy>p,.faq-layout>div:first-child>p{color:var(--home-muted);line-height:1.75}.advantages-copy ul{list-style:none;margin:30px 0}.advantages-copy li{display:flex;gap:13px;margin-bottom:18px}.advantages-copy li>i{color:#18ad91;margin-top:4px}.advantages-copy li strong,.advantages-copy li span{display:block}.advantages-copy li strong{font-size:.9rem;color:#252b3f}.advantages-copy li span{font-size:.75rem;color:#7a8191;line-height:1.55;margin-top:3px}
.audience-section{background:#f5f6fb}.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.audience-grid span{padding:18px;border-radius:13px;background:#fff;border:1px solid var(--home-line);color:#4a5267;font-size:.78rem;font-weight:750}.audience-grid i{width:30px;color:#6d50eb;font-size:.95rem}
.pricing-section{background:linear-gradient(145deg,#11142a,#251d58)}.pricing-grid{width:min(850px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}.price-card{border-radius:20px;padding:32px;background:#fff;position:relative}.price-card.featured{box-shadow:0 0 0 3px #765df2,0 30px 60px rgba(0,0,0,.25)}.price-card.soon{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#fff}.price-label{display:inline-block;padding:6px 10px;border-radius:99px;background:#ede9ff;color:#5d43d9;font-size:.6rem;font-weight:850;text-transform:uppercase}.price-card.soon .price-label{background:rgba(255,255,255,.1);color:#fff}.price-card h3{font-size:1.35rem;margin:19px 0 5px}.price{display:flex;align-items:flex-end;gap:7px;margin-bottom:24px}.price b{font-size:2.8rem;letter-spacing:-.06em}.price span{color:#848a99;font-size:.75rem;margin-bottom:8px}.price-card ul{list-style:none;margin:20px 0 28px}.price-card li{font-size:.78rem;padding:9px 0;border-bottom:1px solid #eef0f5}.price-card.soon li{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}.price-card li i{color:#13ae8d;margin-right:8px}.price-card.soon li i{color:#ad9dff}
.faq-section{background:#fff}.faq-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:75px;align-items:start}.faq-layout>div:first-child{position:sticky;top:110px}.faq-layout .home-cta{margin-top:25px}.home-faqs details{border-bottom:1px solid var(--home-line);padding:21px 0}.home-faqs summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;color:#242a3e;font-weight:780;font-size:.9rem}.home-faqs summary::-webkit-details-marker{display:none}.home-faqs summary i{color:#7357ed;transition:.2s}.home-faqs details[open] summary i{transform:rotate(45deg)}.home-faqs p{color:#777e90;font-size:.8rem;line-height:1.7;padding:13px 35px 0 0}
.final-home-cta{padding:90px 0;text-align:center;color:#fff;background:radial-gradient(circle at 15% 20%,rgba(74,213,205,.28),transparent 30%),radial-gradient(circle at 85% 10%,rgba(255,122,164,.25),transparent 32%),linear-gradient(135deg,#5b3de0,#283abf)}.final-home-cta span{font-size:.75rem;font-weight:800}.final-home-cta h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.08;letter-spacing:-.05em;max-width:820px;margin:15px auto}.final-home-cta p{color:rgba(255,255,255,.75);margin-bottom:28px}
.home-footer{background:#0c1022;color:#fff;padding:70px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:50px}.footer-brand{color:#fff;margin-bottom:17px}.footer-grid>div:first-child p{max-width:370px;color:rgba(255,255,255,.48);font-size:.76rem;line-height:1.7}.footer-grid h3{font-size:.78rem;margin-bottom:18px}.footer-grid a,.footer-grid button{display:block;color:rgba(255,255,255,.5);background:none;border:0;text-decoration:none;font:500 .72rem var(--font);padding:5px 0;cursor:pointer}.footer-grid a:hover,.footer-grid button:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.08);margin-top:50px;padding-top:22px;color:rgba(255,255,255,.35);font-size:.66rem}
.logo small{font-size:.48em;color:var(--c-text-3);margin-left:2px}
@media(max-width:1000px){.home-menu{display:none}.hero-grid,.advantages-grid{grid-template-columns:1fr;gap:55px}.hero-copy{text-align:center}.hero-copy>p{margin:auto}.hero-actions,.hero-proof{justify-content:center}.hero-product{width:min(650px,100%);margin:auto}.steps-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(3,1fr);padding:15px 0}.trust-grid span{min-height:40px}.trust-grid span:nth-child(3){border:0}.pricing-grid{max-width:760px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}}
@media(max-width:700px){.home-container{width:min(100% - 28px,1180px)}.home-nav{height:66px;padding:0 14px}.brand-lockup{font-size:1.05rem}.brand-mark{width:34px;height:34px}.home-account .home-nav-btn:not(.primary){display:none}.home-hero{padding:62px 0}.hero-copy h1{font-size:2.55rem}.hero-copy>p{font-size:.93rem}.hero-actions{flex-direction:column}.hero-actions .home-cta{width:100%}.browser-body{height:300px;grid-template-columns:42px 1fr}.mock-content{padding:28px}.floating-card{display:none}.trust-grid{grid-template-columns:1fr 1fr}.trust-grid span{border:0;justify-content:flex-start;padding-left:12px}.home-section{padding:72px 0}.steps-grid,.product-grid,.audience-grid,.pricing-grid{grid-template-columns:1fr}.steps-grid article{min-height:auto}.dash-cards{grid-template-columns:1fr}.dash-cards>div{height:150px}.faq-layout{grid-template-columns:1fr;gap:40px}.faq-layout>div:first-child{position:static}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column}.section-heading h2,.advantages-copy h2,.faq-layout h2{font-size:2.15rem}}
@media(max-width:430px){.home-account .home-nav-btn.primary{padding:9px 11px;font-size:.7rem}.hero-copy h1{font-size:2.15rem}.mock-content{padding:22px 18px}.home-section{padding:62px 0}.footer-grid{grid-template-columns:1fr}.footer-grid>div{grid-column:auto!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.blob,.ring,.btn-shine,.sp-cta-btn::after{animation:none!important}.browser-shell{transform:none}}


/* ============================================
   VISTA PREVIA Y FLUJO CORREGIDO
============================================ */
.preview-toolbar-center { display:flex; align-items:center; gap:8px; }
.preview-page-status {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:20px;
  background:rgba(255,255,255,.07); color:var(--c-text-2);
  font-size:.74rem; font-weight:700; white-space:nowrap;
}
.preview-page-status.published { background:rgba(0,184,148,.14); color:var(--c-success); }
.preview-state {
  min-height:calc(100vh - 57px); margin-top:57px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:12px; padding:40px 20px; text-align:center;
  background:linear-gradient(180deg,#101027,#08081a);
}
.preview-state.hidden { display:none; }
.preview-state > i { font-size:2.4rem; color:var(--c-primary-lt); }
.preview-state h2 { font-size:1.35rem; }
.preview-state p { max-width:520px; color:var(--c-text-2); }
.preview-state-actions { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.page-output.hidden { display:none; }

@media(max-width:980px){
  .preview-toolbar { position:sticky; }
  .preview-toolbar-center { order:-1; width:100%; justify-content:center; }
  .preview-toolbar .toolbar-left,.preview-toolbar .toolbar-right { flex:1; justify-content:center; }
  .preview-state { margin-top:0; min-height:calc(100vh - 120px); }
  .page-output { margin-top:0; height:calc(100vh - 120px); }
}
@media(max-width:600px){
  .preview-toolbar .tool-btn { flex:1 1 auto; justify-content:center; }
  .preview-toolbar .toolbar-left,.preview-toolbar .toolbar-right { width:100%; flex-basis:100%; }
  .page-output { height:calc(100vh - 180px); min-height:620px; }
  .preview-state { min-height:calc(100vh - 180px); }
}