/* ============================================
   BarEasy Landing V2 — Section Styles
   ============================================ */

/* ===== NAVIGATION ===== */
.nav-v2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 0;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.nav-v2.nav-hidden { transform: translateY(-100%); }

.nav-v2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-v2-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.nav-v2-logo:hover { opacity: 0.8; }

.nav-v2-logo svg {
  width: auto;
  height: 36px;
}

.nav-v2-logo svg path {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-v2-logo .logo-line {
  width: 52px;
  height: 2px;
  background: var(--text-primary);
  opacity: 0.8;
  border-radius: 999px;
  transform: scaleX(0);
  animation: line-appear 1.4s ease-out 0.3s forwards;
}

@keyframes line-appear {
  to { transform: scaleX(1); }
}

.nav-v2-logo .logo-wordmark {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.8;
}

.nav-v2-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-v2-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color 0.2s ease;
}

.nav-v2-links a:hover { color: var(--text-primary); }

.nav-v2-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-v2-cta .btn-v2 {
  padding: 0.6rem 1.25rem;
  font-size: var(--text-sm);
  border-radius: 8px;
}

@media (max-width: 768px) {
  .nav-v2-links { display: none; }
  .nav-v2-inner { padding: 0 1.25rem; }
  .nav-v2-cta .btn-v2 {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
  }
}


/* ===== HERO ===== */
.hero-v2 {
  min-height: 85vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: clamp(140px, 15vh, 180px) 0 var(--space-section) 0;
  overflow: hidden;
}

/* Glow orb top-left */
.hero-v2::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-bg), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-v2-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-v2-content h1 {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  text-align: left;
}

.hero-v2-content .hero-sub {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 2rem;
  max-width: 620px;
  text-align: left;
}

.hero-v2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-v2-badge:hover {
  border-color: var(--border-hover);
  box-shadow: 0 0 16px var(--glow-subtle);
}

.hero-v2-badge i { font-size: 1rem; }

.hero-v2-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero-v2 {
    min-height: 70vh;
    padding-top: 120px;
  }

  .hero-v2-content {
    padding: 0 1.25rem;
  }

  .hero-v2-content h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    text-align: center;
  }

  .hero-v2-content .hero-sub {
    text-align: center;
    font-size: var(--text-base);
  }

  .hero-v2-badges {
    justify-content: center;
  }

  .hero-v2-actions {
    flex-direction: column;
    align-items: center;
  }
}


/* ===== DEMO INTERACTIVO ===== */
.demo-section {
  padding: var(--space-section) 0;
  text-align: center;
  position: relative;
}

/* Layout: phone + steps side by side on desktop */
.demo-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.demo-phone {
  position: relative;
  width: 300px;
  border-radius: 40px;
  background: #0a0a0f;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-lg);
  padding: 0.8rem;
}

.demo-phone-notch {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.demo-phone-screen {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #0c0c0f;
  aspect-ratio: 9 / 19.5;
}

/* Multi-screen system */
.demo-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.97);
  pointer-events: none;
}

.demo-screen.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.demo-phone-screen iframe {
  border: none;
  background: #0c0c0f;
}

/* iPhone 13 dimensions (390×844) scaled to fit the mockup screen */
.demo-menu-iframe {
  width: 390px;
  height: 844px;
  transform-origin: top left;
  transform: scale(var(--iframe-scale, 0.697));
  overflow: hidden;
}

/* QR tap interaction */
.demo-scan-qr {
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.demo-scan-qr:hover {
  opacity: 1 !important;
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 0 60px rgba(37,211,102,0.12);
}
.demo-scan-qr.demo-scanned {
  opacity: 1 !important;
  transform: scale(1.08);
  box-shadow:
    0 0 0 2px #25D366,
    0 0 40px rgba(37,211,102,0.5);
}
.demo-scan-label i {
  animation: demo-tap-hint 1.5s ease-in-out infinite;
}
@keyframes demo-tap-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* WhatsApp composer interactive */
.demo-wa-composer {
  cursor: pointer;
}

/* WhatsApp bubble pop animation (JS-triggered) */
.demo-wa-pop {
  animation: demo-wa-pop 0.35s ease forwards;
}

/* Menu link clickable */
.demo-wa-link {
  cursor: pointer;
  transition: color 0.2s ease;
}
.demo-wa-link:hover {
  color: #7dd3fc !important;
  text-decoration: underline;
}

/* === Screen 1: QR Scan === */
.demo-scan-scene {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.03) 0%, #0c0c0f 70%);
}

.demo-scan-viewfinder {
  position: relative;
  width: 160px;
  height: 160px;
}

.demo-scan-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid #25D366;
}
.demo-scan-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.demo-scan-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.demo-scan-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.demo-scan-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.demo-scan-line {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #25D366, transparent);
  animation: demo-scan-sweep 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  z-index: 2;
  pointer-events: none;
}

@keyframes demo-scan-sweep {
  0%, 100% { top: 10%; }
  50% { top: 85%; }
}

.demo-scan-qr {
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.demo-qr-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.demo-tap-hand {
  position: absolute;
  bottom: -4px;
  right: -4px;
  z-index: 3;
  font-size: 1.6rem;
  color: #fff;
  pointer-events: none;
  animation: demo-tap-bounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transform-origin: center center;
}

@keyframes demo-tap-bounce {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(-6px, -6px) scale(0.9); opacity: 0.7; }
}

.demo-scan-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* === Screen 2: WhatsApp (matches buzon.html monochrome theme) === */
.demo-wa-scene {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000000;
}

.demo-wa-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #0f0f0f;
  flex-shrink: 0;
}

.demo-wa-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-wa-contact {
  display: flex;
  flex-direction: column;
}

.demo-wa-contact strong {
  font-size: 0.72rem;
  color: #ffffff;
}

.demo-wa-contact span {
  font-size: 0.55rem;
  color: #737373;
}

.demo-wa-chat {
  flex: 1;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  background-color: #080808;
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Ccircle cx='25' cy='25' r='8'/%3E%3Ccircle cx='22' cy='23' r='1'/%3E%3Ccircle cx='28' cy='23' r='1'/%3E%3Cpath d='M22 27 Q25 31 28 27'/%3E%3Cpath d='M75 29 C70 26 67 22 70 19 C73 16 75 20 75 29 C75 20 77 16 80 19 C83 22 80 26 75 29Z'/%3E%3Cpath d='M117 18 Q117 16 119 16 H133 Q135 16 135 18 V29 Q135 31 133 31 H128 L126 34 L126 31 H119 Q117 31 117 29Z'/%3E%3Cpath d='M175 17 L177 22 H183 L178 25 L180 31 L175 28 L170 31 L172 25 L167 22 H173Z'/%3E%3Cpath d='M227 17 L221 25 H226 L222 33 L231 25 H226Z'/%3E%3Cpath d='M274 31 V20 L282 17 V28'/%3E%3Ccircle cx='274' cy='31' r='2.5'/%3E%3Ccircle cx='282' cy='28' r='2.5'/%3E%3Crect x='20' y='66' width='10' height='18' rx='3'/%3E%3Crect x='22' y='69' width='6' height='9' rx='1'/%3E%3Ccircle cx='25' cy='82' r='1'/%3E%3Cpath d='M75 67 Q74.5 74.5 67 75 Q74.5 75.5 75 83 Q75.5 75.5 83 75 Q75.5 74.5 75 67Z'/%3E%3Ccircle cx='125' cy='75' r='8'/%3E%3Ccircle cx='122' cy='73' r='1'/%3E%3Ccircle cx='128' cy='73' r='1'/%3E%3Cpath d='M122 77 Q125 81 128 77'/%3E%3Cpath d='M175 79 C170 76 167 72 170 69 C173 66 175 70 175 79 C175 70 177 66 180 69 C183 72 180 76 175 79Z'/%3E%3Cpath d='M217 68 Q217 66 219 66 H233 Q235 66 235 68 V79 Q235 81 233 81 H228 L226 84 L226 81 H219 Q217 81 217 79Z'/%3E%3Cpath d='M275 67 L277 72 H283 L278 75 L280 81 L275 78 L270 81 L272 75 L267 72 H273Z'/%3E%3Cpath d='M27 117 L21 125 H26 L22 133 L31 125 H26Z'/%3E%3Cpath d='M74 131 V120 L82 117 V128'/%3E%3Ccircle cx='74' cy='131' r='2.5'/%3E%3Ccircle cx='82' cy='128' r='2.5'/%3E%3Crect x='120' y='116' width='10' height='18' rx='3'/%3E%3Crect x='122' y='119' width='6' height='9' rx='1'/%3E%3Ccircle cx='125' cy='132' r='1'/%3E%3Cpath d='M175 117 Q174.5 124.5 167 125 Q174.5 125.5 175 133 Q175.5 125.5 183 125 Q175.5 124.5 175 117Z'/%3E%3Ccircle cx='225' cy='125' r='8'/%3E%3Ccircle cx='222' cy='123' r='1'/%3E%3Ccircle cx='228' cy='123' r='1'/%3E%3Cpath d='M222 127 Q225 131 228 127'/%3E%3Cpath d='M275 129 C270 126 267 122 270 119 C273 116 275 120 275 129 C275 120 277 116 280 119 C283 122 280 126 275 129Z'/%3E%3Cpath d='M17 168 Q17 166 19 166 H33 Q35 166 35 168 V179 Q35 181 33 181 H28 L26 184 L26 181 H19 Q17 181 17 179Z'/%3E%3Cpath d='M75 167 L77 172 H83 L78 175 L80 181 L75 178 L70 181 L72 175 L67 172 H73Z'/%3E%3Cpath d='M127 167 L121 175 H126 L122 183 L131 175 H126Z'/%3E%3Cpath d='M174 181 V170 L182 167 V178'/%3E%3Ccircle cx='174' cy='181' r='2.5'/%3E%3Ccircle cx='182' cy='178' r='2.5'/%3E%3Crect x='220' y='166' width='10' height='18' rx='3'/%3E%3Crect x='222' y='169' width='6' height='9' rx='1'/%3E%3Ccircle cx='225' cy='182' r='1'/%3E%3Cpath d='M275 167 Q274.5 174.5 267 175 Q274.5 175.5 275 183 Q275.5 175.5 283 175 Q275.5 174.5 275 167Z'/%3E%3Ccircle cx='25' cy='225' r='8'/%3E%3Ccircle cx='22' cy='223' r='1'/%3E%3Ccircle cx='28' cy='223' r='1'/%3E%3Cpath d='M22 227 Q25 231 28 227'/%3E%3Cpath d='M75 229 C70 226 67 222 70 219 C73 216 75 220 75 229 C75 220 77 216 80 219 C83 222 80 226 75 229Z'/%3E%3Cpath d='M117 218 Q117 216 119 216 H133 Q135 216 135 218 V229 Q135 231 133 231 H128 L126 234 L126 231 H119 Q117 231 117 229Z'/%3E%3Cpath d='M175 217 L177 222 H183 L178 225 L180 231 L175 228 L170 231 L172 225 L167 222 H173Z'/%3E%3Cpath d='M227 217 L221 225 H226 L222 233 L231 225 H226Z'/%3E%3Cpath d='M274 231 V220 L282 217 V228'/%3E%3Ccircle cx='274' cy='231' r='2.5'/%3E%3Ccircle cx='282' cy='228' r='2.5'/%3E%3Crect x='20' y='266' width='10' height='18' rx='3'/%3E%3Crect x='22' y='269' width='6' height='9' rx='1'/%3E%3Ccircle cx='25' cy='282' r='1'/%3E%3Cpath d='M75 267 Q74.5 274.5 67 275 Q74.5 275.5 75 283 Q75.5 275.5 83 275 Q75.5 274.5 75 267Z'/%3E%3Ccircle cx='125' cy='275' r='8'/%3E%3Ccircle cx='122' cy='273' r='1'/%3E%3Ccircle cx='128' cy='273' r='1'/%3E%3Cpath d='M122 277 Q125 281 128 277'/%3E%3Cpath d='M175 279 C170 276 167 272 170 269 C173 266 175 270 175 279 C175 270 177 266 180 269 C183 272 180 276 175 279Z'/%3E%3Cpath d='M217 268 Q217 266 219 266 H233 Q235 266 235 268 V279 Q235 281 233 281 H228 L226 284 L226 281 H219 Q217 281 217 279Z'/%3E%3Cpath d='M275 267 L277 272 H283 L278 275 L280 281 L275 278 L270 281 L272 275 L267 272 H273Z'/%3E%3C/g%3E%3C/svg%3E");
}

.demo-wa-bubble {
  max-width: 85%;
  padding: 4px 6px 5px 7px;
  border-radius: 7.5px;
  font-size: 0.68rem;
  line-height: 1.35;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
}

.demo-wa-bubble.incoming {
  background: #141414;
  color: #ffffff;
  align-self: flex-start;
  border-top-left-radius: 0;
}
.demo-wa-bubble.incoming::before {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  border-width: 0 6px 6px 0;
  border-style: solid;
  border-color: transparent #141414 transparent transparent;
}

.demo-wa-bubble.outgoing {
  background: #262626;
  color: #ffffff;
  align-self: flex-end;
  border-top-right-radius: 0;
}
.demo-wa-bubble.outgoing::before {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  border-width: 0 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent transparent #262626;
}

.demo-wa-bubble p { margin: 0; }
.demo-wa-small { font-size: 0.58rem; color: #737373; margin-top: 0.15rem !important; }
.demo-wa-link { color: #d4d4d4; }

.demo-wa-time {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  float: right;
  font-size: 0.48rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.1rem;
  padding-left: 8px;
}

@keyframes demo-wa-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Composer — matches backoffice buzon monochrome style */
.demo-wa-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #0f0f0f;
  flex-shrink: 0;
  position: relative;
}

.demo-wa-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #1a1a1a;
  border-radius: 8px;
  font-size: 0.63rem;
  color: #737373;
  position: relative;
  min-height: 0;
}

/* Static input text */
.demo-input-text {
  color: rgba(255,255,255,.7);
}

.demo-wa-send-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.demo-wa-send-circle:hover {
  background: #e5e5e5;
}
.demo-wa-send-circle i {
  color: #000000;
  font-size: 0.7rem;
}

/* CTA con glow sobre el botón de enviar */
.demo-wa-cta {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #000;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  white-space: nowrap;
  animation: demo-cta-glow 2s ease-in-out infinite;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.15);
}
.demo-wa-cta::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}
@keyframes demo-cta-glow {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); box-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.15); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(-3px); box-shadow: 0 0 24px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.25); }
}

/* Allow boom to escape phone frame on WhatsApp step */
.demo-screen[data-step="1"].active .demo-wa-scene {
  overflow: visible;
}
.demo-screen[data-step="1"].active {
  overflow: visible;
}

/* Boom effect — scales up and STAYS until user clicks */
.demo-screen[data-step="1"].active .demo-wa-composer {
  z-index: 10;
  animation: demo-input-boom 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes demo-input-boom {
  0%   { transform: scale(1); box-shadow: none; }
  40%  { transform: scale(2.0) translateY(-24px); box-shadow: 0 0 40px rgba(255, 255, 255, 0.3), 0 0 80px rgba(255, 255, 255, 0.1); }
  100% { transform: scale(1.8) translateY(-20px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.25), 0 0 60px rgba(255, 255, 255, 0.08); }
}

/* === Step Indicators === */
.demo-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.demo-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  text-align: left;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.demo-step:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.demo-step.active {
  background: var(--surface-elevated);
  border-color: rgba(16, 185, 129, 0.25);
}

.demo-step-num {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: all 0.3s ease;
}

.demo-step.active .demo-step-num {
  background: var(--glow-subtle);
  border-color: var(--border-glow);
  color: var(--text-primary);
}

.demo-step-content {
  grid-row: 1;
}

.demo-step-content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.15rem;
  transition: color 0.3s ease;
}

.demo-step.active .demo-step-content h4 { color: var(--text-primary); }

.demo-step-content p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Step completed indicator */
.demo-step.completed .demo-step-num {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

/* Mobile */
@media (max-width: 768px) {
  .demo-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
  }
  .demo-phone { width: min(100%, 300px); }
  .demo-steps { width: 100%; }
}


/* ===== METRICS ===== */
.metrics-v2 {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark-2);
}

.metrics-v2-quote {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem;
  font-size: var(--text-3xl);
  font-weight: 650;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.metrics-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.metric-v2 {
  padding: 2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  transition: border-color 0.2s ease;
}

.metric-v2:hover { border-color: var(--border-hover); }

.metric-v2-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

.metric-v2-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0.5rem 0 0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .metrics-v2-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}


/* ===== LOGO STRIP (MARQUEE) ===== */
.logo-strip-v2 {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.logo-strip-v2-title {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}

.logo-marquee-track {
  display: flex;
  gap: 4rem;
  align-items: center;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.logo-marquee-track img {
  max-height: 48px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.logo-marquee-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.logo-marquee-svg {
  height: 40px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.logo-marquee-svg:hover {
  opacity: 1;
}

.logo-marquee-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 1px dashed var(--border-hover);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.logo-marquee-cta:hover {
  border-color: var(--glow);
  color: var(--text-secondary);
}


/* ===== FEATURE HIGHLIGHT ===== */
.feature-hl-v2 {
  padding: var(--space-section-lg) 0;
  text-align: center;
}

.feature-hl-v2-steps {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 3rem;
  position: relative;
}

/* Connecting line */
.feature-hl-v2-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-hover), transparent);
  z-index: 0;
}

.hl-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  max-width: 240px;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.hl-step:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
}

.hl-step-icon {
  font-size: 1.5rem;
  color: var(--text-secondary);
}

.hl-step-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.hl-step-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .feature-hl-v2-steps {
    flex-direction: column;
    align-items: center;
  }
  .feature-hl-v2-steps::before { display: none; }
}


/* ===== COMPARADOR VISUAL ===== */
/* ===== TODO EN UNO (módulos) ===== */
.todo-en-uno-section {
  padding: var(--space-section) 0;
  background: var(--bg-dark-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.modulos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 720px;
  margin: 2.5rem auto 0;
}

.modulo-card {
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.modulo-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
}

.modulo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.modulo-icon i {
  font-size: 1.15rem;
  color: #25D366;
}

.modulo-card h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.modulo-card p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 640px) {
  .modulos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .modulo-card { padding: 1rem; }
}


/* ===== SOCIAL PROOF ===== */
.social-proof-v2 {
  padding: var(--space-section) 0;
}

.social-proof-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.social-proof-number {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.social-proof-label {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  font-weight: 500;
}

.social-ticker {
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.social-ticker-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.social-ticker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.social-ticker-item i {
  color: var(--text-secondary);
  font-size: 1rem;
}


/* ===== TESTIMONIALS ===== */
.testimonials-v2 {
  padding: var(--space-section-lg) 0;
  text-align: center;
}

.testimonials-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}

.testimonial-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.testimonial-v2:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
}

.testimonial-v2-stars {
  color: #f59e0b;
  font-size: var(--text-sm);
  margin-bottom: 1rem;
}

.testimonial-v2-quote {
  font-size: var(--text-lg);
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 1.5rem;
  font-weight: 400;
}

.testimonial-v2-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.testimonial-v2-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.testimonial-v2-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.testimonial-v2-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}


/* ===== PRICING ===== */
.pricing-v2 {
  padding: var(--space-section-lg) 0;
  text-align: center;
}

.pricing-v2-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  margin-bottom: 3rem;
}

.pricing-v2-toggle button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
}

.pricing-v2-toggle button.active {
  background: var(--text-primary);
  color: var(--bg-dark);
}

.pricing-v2-toggle .discount-tag {
  font-size: var(--text-xs);
  color: #22c55e;
  font-weight: 700;
}

.pricing-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  max-width: 780px;
  margin: 0 auto;
}

.plan-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: left;
  position: relative;
  transition: border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.plan-v2:hover { border-color: var(--border-hover); }

/* Featured plan with rotating border */
.plan-v2.featured {
  border-color: transparent;
  overflow: visible;
}

.plan-v2.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 70%, transparent);
  background-size: 200% 100%;
  z-index: -1;
  animation: wave-border 5s ease-in-out infinite;
}

.plan-v2-badge-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 14rem;
  height: 14rem;
  overflow: hidden;
  border-radius: 0 24px 0 0;
  z-index: 2;
  pointer-events: none;
}

.plan-v2-badge {
  position: absolute;
  top: 1.6rem;
  right: -4.2rem;
  width: 13rem;
  background: linear-gradient(
    90deg,
    #6b5310 0%,
    #8a6a14 5%,
    #b8911e 12%,
    #d4af37 22%,
    #f0d55c 38%,
    #fff1a8 50%,
    #f0d55c 62%,
    #d4af37 78%,
    #b8911e 88%,
    #8a6a14 95%,
    #6b5310 100%
  );
  color: #2c1f00;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0 0.4rem 0.12em;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: center center;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 241, 168, 0.6);
  border-bottom: 1px solid rgba(138, 106, 20, 0.4);
}

.plan-v2-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.plan-v2-price {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.plan-v2-period {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.plan-v2-iva {
  font-size: 0.75em;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.plan-v2-billing {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

.plan-v2-blurb {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 1.5rem 0;
  line-height: 1.5;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.plan-v2 ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex: 1;
}

.plan-v2 ul li {
  padding: 0.5rem 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

.plan-v2 ul li::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
  flex-shrink: 0;
}

.plan-v2 ul li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.plan-v2 .btn-v2 {
  width: 100%;
  justify-content: center;
}


/* ===== FAQ ===== */
.faq-v2 {
  padding: var(--space-section) 0;
  background: var(--bg-dark-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-v2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.faq-v2-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-v2-item.is-open { border-color: var(--border-hover); }

.faq-v2-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font);
}

.faq-v2-icon {
  color: var(--text-muted);
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.faq-v2-item.is-open .faq-v2-icon {
  transform: rotate(45deg);
}

.faq-v2-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-v2-answer p {
  margin: 0 0 1.15rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .faq-v2-grid { grid-template-columns: 1fr; }
}


/* ===== CTA ===== */
.cta-v2 {
  padding: var(--space-section-lg) 0;
  text-align: center;
  position: relative;
}

/* Glow orb bottom-right */
.cta-v2::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-bg), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cta-v2-content {
  position: relative;
  z-index: 1;
}

.cta-v2-form {
  max-width: 560px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.cta-v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.cta-v2-form-grid .full { grid-column: 1 / -1; }

.cta-v2-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.cta-v2-input,
.cta-v2-select {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: var(--font);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-v2-input::placeholder { color: var(--text-muted); }

.cta-v2-input:focus,
.cta-v2-select:focus {
  outline: none;
  border-color: rgba(84, 214, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(84, 214, 255, 0.12);
}

.cta-v2-select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.cta-v2-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-v2-actions .btn-v2 {
  width: 100%;
  justify-content: center;
}

.cta-v2-helper {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.cta-v2-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.2);
  color: #25d366;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-v2-wa:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.35);
  color: #25d366;
}

.cta-v2-wa i { font-size: 1.2rem; }

.cta-btn-loading[hidden] { display: none; }
.cta-btn-loading { display: inline-flex; align-items: center; gap: 0.5rem; }
.cta-btn-loading svg { animation: cta-spin 1s linear infinite; }
@keyframes cta-spin { to { transform: rotate(360deg); } }
.cta-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.cta-v2-message {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.cta-v2-message-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #d1fae5;
}

.cta-v2-message-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fee2e2;
}

/* CTA success state */
.cta-v2-success {
  text-align: center;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-v2-success-icon {
  font-size: 3rem;
  color: #25D366;
  line-height: 1;
}

.cta-v2-success h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cta-v2-success p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
  max-width: 360px;
}

.cta-v2-calendly-btn {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cta-v2-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Slot picker */
.cta-v2-slots,
.cta-v2-booked {
  max-width: 560px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
}

.cta-v2-slots-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.cta-v2-slots-header p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 1.5rem;
}

.cta-v2-slots-dates {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.cta-v2-slots-date-tab {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cta-v2-slots-date-tab:hover {
  border-color: rgba(84, 214, 255, 0.4);
  color: var(--text-primary);
}

.cta-v2-slots-date-tab.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.cta-v2-slots-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cta-v2-slots-time-btn {
  padding: 0.6rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cta-v2-slots-time-btn:hover {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.1);
}

.cta-v2-slots-time-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cta-v2-slots-time-btn.booking {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
}

.cta-v2-slots-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-family: var(--font);
  cursor: pointer;
  transition: color 0.2s ease;
}

.cta-v2-slots-back:hover {
  color: var(--text-primary);
}

.cta-v2-slots-loading {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: 2rem 0;
}
.cta-v2-slots-loading:not([hidden]) {
  display: flex;
}

.cta-v2-slots-loading svg {
  animation: cta-spin 1s linear infinite;
}

.cta-v2-slots-error {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Booked confirmation */
.cta-v2-booked {
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
}
.cta-v2-booked:not([hidden]) {
  display: flex;
}

.cta-v2-booked-time {
  font-size: 1.1rem;
  font-weight: 700;
  color: #6ee7b7;
  margin: 0;
}

.cta-v2-booked p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 360px;
}

.cta-v2-booked-meet {
  margin-top: 0.5rem;
  align-items: center;
  gap: 0.5rem;
}
.cta-v2-booked-meet:not([hidden]) {
  display: inline-flex;
}

@media (max-width: 768px) {
  .cta-v2-form-grid { grid-template-columns: 1fr; }
  .cta-v2-form { padding: 1.5rem; }
  .cta-v2-slots, .cta-v2-booked { padding: 1.5rem; }
  .cta-v2-slots-times { grid-template-columns: repeat(3, 1fr); }
}


/* ===== FOOTER ===== */
.footer-v2 {
  background: var(--bg-dark);
  padding: 3.5rem 0 2rem;
  border-top: 1px solid var(--border);
}

.footer-v2-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
}

.footer-v2-logo svg {
  width: auto;
  height: 28px;
}

.footer-v2-logo svg path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-v2-columns {
  display: flex;
  gap: 5rem;
}

.footer-v2-col h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

.footer-v2-col a {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.footer-v2-col a:hover { color: var(--text-secondary); }

@media (max-width: 768px) {
  .footer-v2-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-v2-columns {
    gap: 3rem;
    flex-wrap: wrap;
  }
}