/* ============================================================
   PEGASUS REAL ESTATE AI — Replica fiel de pegasusrealestateai.com
   Dark mode, sin frameworks, vanilla CSS
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --black:       #000000;
  --gray-900:    #111827;
  --gray-800:    #1f2937;
  --gray-700:    #374151;
  --gray-600:    #4b5563;
  --gray-500:    #6b7280;
  --gray-400:    #9ca3af;
  --gray-300:    #d1d5db;
  --white:       #ffffff;
  --green:       #9afebe;
  --green-dark:  #052e16;
  --green-hover: #7efcb0;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-w: 1280px;
  --max-w-md: 896px;
  --transition: 0.25s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: rgba(154,254,190,0.25); color: var(--white); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gray-700); border-radius: 3px; }

/* ── Tech grid background ──────────────────────────────────── */
.tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,254,190,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,254,190,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── Animated border glow ──────────────────────────────────── */
@keyframes border-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(154,254,190,0.1), inset 0 0 12px rgba(154,254,190,0.02); }
  50%       { box-shadow: 0 0 28px rgba(154,254,190,0.22), inset 0 0 20px rgba(154,254,190,0.05); }
}

/* ── Neon flicker ──────────────────────────────────────────── */
@keyframes neon-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%            { opacity: 0.85; }
  97%            { opacity: 1; }
  98%            { opacity: 0.9; }
}

/* ── Shimmer scan ──────────────────────────────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ── Float animation ───────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Counter number ────────────────────────────────────────── */
.counter-num {
  display: inline-block;
  animation: count-in 0.5s ease forwards;
}

/* ── Animated gradient text ────────────────────────────────── */
.text-gradient-anim {
  background: linear-gradient(90deg, var(--green), #4ade80, var(--green));
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Focus ─────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 640px)  { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

.container--md { max-width: var(--max-w-md); }

.text-green { color: var(--green); }

/* ── Animations ────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--black);
  font-weight: 700;
  border-radius: 9999px;
  padding: 14px 32px;
  font-size: 15px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--green-hover);
  transform: scale(1.04);
  box-shadow: 0 0 24px rgba(154,254,190,0.35);
}

.btn-hero {
  font-size: 17px;
  padding: 18px 40px;
  box-shadow: 0 0 20px rgba(154,254,190,0.3);
}

.btn-outline {
  display: inline-block;
  color: var(--green);
  border: 1px solid rgba(154,254,190,0.3);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
  margin-top: 20px;
}
.btn-outline:hover { background: rgba(154,254,190,0.08); border-color: var(--green); }

.btn-nav {
  display: none;
  background: var(--green);
  color: var(--black);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 9999px;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-nav:hover { background: var(--green-hover); }
@media (min-width: 768px) { .btn-nav { display: inline-block; } }

/* ── Section headers ───────────────────────────────────────── */
.section-head { margin-bottom: 48px; }
.section-head--center { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; }
.section-sub { color: var(--gray-400); font-size: clamp(16px, 2vw, 20px); margin-top: 12px; }

/* ── Grids ─────────────────────────────────────────────────── */
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Card icon ─────────────────────────────────────────────── */
.card-icon {
  width: 56px;
  height: 56px;
  background: rgba(154,254,190,0.08);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.card-icon-lg {
  width: 48px;
  height: 48px;
  background: rgba(154,254,190,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background var(--transition);
}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.nav-header.scrolled {
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--gray-800);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (min-width: 640px) { .nav-inner { padding: 0 28px; } }
@media (min-width: 1024px) { .nav-inner { padding: 0 40px; } }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo-img {
  width: 62px;
  height: 62px;
  transition: opacity var(--transition);
  border-radius: 0;
  background: transparent;
}
.nav-logo:hover .nav-logo-img { opacity: 0.85; }
.nav-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  transition: color var(--transition);
  letter-spacing: -0.2px;
}
.nav-logo:hover .nav-logo-text { color: var(--accent); }

.nav-links {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-400);
  padding: 6px 14px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover, .nav-link--active { color: var(--white); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav open */
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.97);
  border-bottom: 1px solid var(--gray-800);
  padding: 20px 24px;
  gap: 4px;
  align-items: flex-start;
  backdrop-filter: blur(12px);
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  padding: 120px 0 100px;
  background: linear-gradient(to bottom, var(--black), rgba(5,46,22,0.12), var(--black));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* Grid tecnológico en el hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,254,190,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,254,190,0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events: none;
  z-index: 0;
}
/* Radial glow central */
.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(154,254,190,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
#hero canvas { opacity: 0.35; pointer-events: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}
@media (min-width: 1024px) {
  /* Empujar el texto hacia el centro visual respecto al teléfono */
  .hero-content { padding-top: 48px; }
}

.hero-content {
  text-align: center;
}
@media (min-width: 1024px) { .hero-content { text-align: left; } }

.hero-title {
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--gray-400);
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.hero-typewriter {
  white-space: nowrap;
  overflow: hidden;
}

/* Móvil: separar en 2 líneas fijas para que el typing no desplace el layout */
@media (max-width: 1023px) {
  .hero-typewriter {
    white-space: normal;
    overflow: visible;
    text-align: left;
    min-height: 3.4em;    /* 2 líneas fijas: la etiqueta + el texto escrito */
  }
  .typewriter-label {
    display: block;
    margin-bottom: 1px;
  }
}
@media (min-width: 1024px) { .hero-desc { margin-left: 0; } }

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 1024px) { .hero-ctas { align-items: flex-start; } }

.hero-badge {
  font-size: 13px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #22c55e;
  font-size: 14px;
  font-weight: 500;
  transition: opacity var(--transition);
}
.hero-phone:hover { opacity: 0.8; }

/* ── Hero orbital animation ──────────────────────────────── */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.orbit-container {
  position: relative;
  width: 460px;
  height: 460px;
}

.orbit-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  background: rgba(154,254,190,0.04);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

/* Central circle */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, var(--gray-800), var(--black));
  border: 1px solid rgba(154,254,190,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 50px rgba(154,254,190,0.12);
  z-index: 20;
  overflow: hidden;
  animation: pulse-center 3s ease-in-out infinite;
}
@keyframes pulse-center {
  0%, 100% { box-shadow: 0 0 50px rgba(154,254,190,0.12); }
  50%       { box-shadow: 0 0 70px rgba(154,254,190,0.22); }
}

.orbit-center-lines {
  position: absolute;
  inset: 0;
  opacity: 0.18;
}
.orbit-center-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--green);
  animation: scan-line 2.5s linear infinite;
}
.orbit-center-lines span:nth-child(1) { top: 20%; animation-delay: 0s; }
.orbit-center-lines span:nth-child(2) { top: 35%; animation-delay: 0.5s; }
.orbit-center-lines span:nth-child(3) { top: 50%; animation-delay: 1s; }
.orbit-center-lines span:nth-child(4) { top: 65%; animation-delay: 1.5s; }
.orbit-center-lines span:nth-child(5) { top: 80%; animation-delay: 2s; }
@keyframes scan-line {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.orbit-logo {
  position: relative;
  z-index: 10;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
}

/* Orbital arms */
.orbit-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  animation: orbit-spin 8s linear infinite;
}
.orbit-arm--0 { transform: rotate(0deg);   animation-delay: 0s; }
.orbit-arm--1 { transform: rotate(120deg); animation-delay: 0s; }
.orbit-arm--2 { transform: rotate(240deg); animation-delay: 0s; }

/* Counter-rotation of node */
.orbit-arm--0 .orbit-node { animation: counter-spin-0 8s linear infinite; }
.orbit-arm--1 .orbit-node { animation: counter-spin-1 8s linear infinite; }
.orbit-arm--2 .orbit-node { animation: counter-spin-2 8s linear infinite; }
@keyframes orbit-spin { from { transform: rotate(var(--start, 0deg)); } to { transform: rotate(calc(var(--start, 0deg) + 360deg)); } }
.orbit-arm--0 { --start: 0deg; }
.orbit-arm--1 { --start: 120deg; }
.orbit-arm--2 { --start: 240deg; }

.orbit-node {
  position: absolute;
  right: 0;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(50%, -50%);
  background: rgba(17,24,39,0.85);
  border: 1px solid var(--gray-700);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: border-color var(--transition);
  z-index: 10;
}
.orbit-node--ai {
  font-weight: 700;
  font-size: 18px;
  color: var(--gray-400);
}
@keyframes counter-spin-0 { from { transform: translate(50%, -50%) rotate(0deg);    } to { transform: translate(50%, -50%) rotate(-360deg); } }
@keyframes counter-spin-1 { from { transform: translate(50%, -50%) rotate(-120deg); } to { transform: translate(50%, -50%) rotate(-480deg); } }
@keyframes counter-spin-2 { from { transform: translate(50%, -50%) rotate(-240deg); } to { transform: translate(50%, -50%) rotate(-600deg); } }

.orbit-line {
  position: absolute;
  top: 50%;
  left: 80px;
  right: 72px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, transparent, rgba(154,254,190,0.1), transparent);
  overflow: visible;
}

.orbit-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--green);
  animation: travel-dot 2s linear infinite;
}
.orbit-dot--1 { animation-delay: 0.67s; }
.orbit-dot--2 { animation-delay: 1.33s; }
@keyframes travel-dot {
  0%   { left: 0%;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ══════════════════════════════════════
   RETOS
══════════════════════════════════════ */
.section-retos {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--gray-900), var(--black));
  position: relative;
  overflow: hidden;
}

.reto-card {
  background: rgba(17,24,39,0.5);
  border: 1px solid var(--gray-800);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.reto-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(154,254,190,0.04), transparent);
  transform: translateX(-100%);
  transition: none;
}
.reto-card:hover::after {
  animation: shimmer 0.7s ease forwards;
}
.reto-card:hover {
  border-color: rgba(154,254,190,0.3);
  box-shadow: 0 0 30px rgba(154,254,190,0.08), 0 20px 40px rgba(0,0,0,0.3);
  transform: translateY(-4px);
}
.reto-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--white); transition: color 0.3s; }
.reto-card:hover h3 { color: var(--green); }
.reto-card p  { font-size: 14px; color: var(--gray-400); line-height: 1.6; }

/* ══════════════════════════════════════
   DEMO / LEADS
══════════════════════════════════════ */
.section-demo {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--gray-900), var(--black));
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) { .demo-grid { grid-template-columns: 1fr 1fr; } }

/* ── Typing indicator ──────────────────────────────────────── */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: rgba(55,65,81,0.5);
  border: 1px solid rgba(55,65,81,0.3);
  border-radius: 0 12px 12px 12px;
  width: fit-content;
  align-self: flex-start;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  background: var(--gray-400);
  border-radius: 50%;
  animation: typing-dot 1.4s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Chat input mock ───────────────────────────────────────── */
.chat-footer {
  border-top: 1px solid var(--gray-800);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17,24,39,0.4);
}
.chat-input-mock {
  flex: 1;
  background: rgba(31,41,55,0.6);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--gray-400);
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.chat-cursor {
  color: var(--green);
  animation: blink-cursor 0.9s step-end infinite;
  font-weight: 300;
  line-height: 1;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.chat-send {
  width: 34px;
  height: 34px;
  background: var(--green);
  color: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.chat-send:hover { transform: scale(1.1); box-shadow: 0 0 14px rgba(154,254,190,0.5); }

/* ── Chat badge ────────────────────────────────────────────── */
.chat-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green);
  background: rgba(154,254,190,0.08);
  border: 1px solid rgba(154,254,190,0.2);
  border-radius: 4px;
  padding: 3px 8px;
  text-transform: uppercase;
  animation: pulse-badge 2.5s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.chat-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  margin: 0 3px;
  animation: pulse-green 2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* Chat */
.chat-demo {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  overflow: hidden;
}

.chat-header {
  background: var(--gray-800);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--gray-700);
}
.chat-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.chat-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--gray-800);
}
.chat-header-info strong { display: block; font-size: 14px; font-weight: 600; }
.chat-header-info span  { font-size: 12px; color: var(--gray-400); }

.chat-messages {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
}

.chat-msg { max-width: 85%; transition: opacity 0.4s ease, transform 0.4s ease; }
.chat-hidden { opacity: 0; transform: translateY(10px); }
.chat-visible { opacity: 1; transform: translateY(0); }

.chat-msg--bot {
  align-self: flex-start;
}
.chat-msg--user {
  align-self: flex-end;
}

.chat-msg--bot p {
  background: rgba(55,65,81,0.6);
  color: #e5e7eb;
  padding: 12px 16px;
  border-radius: 0 12px 12px 12px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid rgba(55,65,81,0.4);
}
.chat-msg--user p {
  background: rgba(154,254,190,0.12);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 12px 12px 0 12px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid rgba(154,254,190,0.2);
}
.chat-msg--success p {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.25);
  color: #dcfce7;
}
.chat-msg {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.chat-msg.chat-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.chat-msg.chat-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Demo steps */
.demo-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.demo-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.demo-step-icon {
  width: 40px;
  height: 40px;
  background: rgba(154,254,190,0.08);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.demo-step h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.demo-step p  { font-size: 14px; color: var(--gray-400); line-height: 1.55; }

/* ══════════════════════════════════════
   SERVICIOS
══════════════════════════════════════ */
.section-servicios {
  padding: 100px 0;
  background: var(--black);
  position: relative;
}

.servicio-card {
  background: rgba(17,24,39,0.6);
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.servicio-card:hover {
  border-color: rgba(154,254,190,0.25);
  box-shadow: 0 20px 40px rgba(154,254,190,0.06);
}
.servicio-card:hover .card-icon-lg { background: rgba(154,254,190,0.15); }

.servicio-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--white);
  transition: color var(--transition);
}
.servicio-card:hover h3 { color: var(--green); }
.servicio-card > p { font-size: 15px; color: var(--gray-400); line-height: 1.65; margin-bottom: 24px; flex: 1; }

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
.benefit-list li {
  font-size: 13px;
  color: var(--gray-300);
  display: flex;
  align-items: center;
  gap: 10px;
}
.benefit-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   POR QUÉ PEGASUS
══════════════════════════════════════ */
.section-porque {
  padding: 100px 0;
  background: linear-gradient(to top, rgba(154,254,190,0.05), var(--black));
}

.grid-4-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.porque-card {
  background: rgba(31,41,55,0.5);
  border: 1px solid rgba(55,65,81,0.5);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  transition: border-color var(--transition), transform var(--transition);
}
@media (min-width: 640px)  { .porque-card { width: calc(50% - 12px); } }
@media (min-width: 1024px) { .porque-card { width: calc(33.333% - 16px); } }

.porque-card:hover {
  border-color: rgba(154,254,190,0.25);
  transform: translateY(-4px);
}
.porque-card:hover .card-icon-lg { background: rgba(154,254,190,0.15); }
.porque-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.porque-card p  { font-size: 14px; color: var(--gray-400); line-height: 1.6; }

/* ══════════════════════════════════════
   CÓMO TRABAJAMOS
══════════════════════════════════════ */
.section-como {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--gray-900), var(--black));
}

.pasos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .pasos-grid { grid-template-columns: repeat(3, 1fr); } }

.paso-card {
  background: rgba(17,24,39,0.5);
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.paso-card:hover {
  border-color: rgba(154,254,190,0.3);
  box-shadow: 0 0 40px rgba(154,254,190,0.08);
  transform: translateY(-4px);
}
/* Corner accent */
.paso-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(225deg, rgba(154,254,190,0.06), transparent);
  border-radius: 0 16px 0 80px;
  transition: opacity 0.3s;
  opacity: 0;
}
.paso-card:hover::before { opacity: 1; }
.paso-card .card-icon-lg { margin: 0 auto 20px; }

.paso-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 52px;
  font-weight: 800;
  color: rgba(154,254,190,0.12);
  line-height: 1;
  user-select: none;
}
.paso-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.paso-card p  { font-size: 14px; color: var(--gray-400); line-height: 1.65; }

/* ══════════════════════════════════════
   TESTIMONIOS
══════════════════════════════════════ */
.section-testimonios {
  padding: 100px 0;
  background: var(--black);
  position: relative;
  overflow: hidden;
}

.hero-glow-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  height: 33%;
  background: rgba(154,254,190,0.04);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-glow-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33%;
  height: 33%;
  background: rgba(154,254,190,0.04);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.grid-4-testimonios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px)  { .grid-4-testimonios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4-testimonios { grid-template-columns: repeat(4, 1fr); } }

.testimonio-card {
  background: rgba(17,24,39,0.7);
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.testimonio-card::before {
  content: '"';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 80px;
  color: rgba(154,254,190,0.06);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.testimonio-card:hover {
  box-shadow: 0 0 40px rgba(154,254,190,0.1), 0 20px 40px rgba(0,0,0,0.3);
  transform: translateY(-5px);
  border-color: rgba(154,254,190,0.2);
}

.stars { color: var(--green); font-size: 14px; letter-spacing: 2px; }
.testimonio-card blockquote {
  font-size: 14px;
  color: var(--gray-400);
  line-height: 1.65;
  font-style: italic;
  flex: 1;
}
.testimonio-autor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.autor-avatar {
  width: 40px;
  height: 40px;
  background: rgba(154,254,190,0.15);
  color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonio-autor strong { display: block; font-size: 13px; font-weight: 600; }
.testimonio-autor span   { font-size: 12px; color: var(--gray-500); }

/* ══════════════════════════════════════
   SEGURIDAD
══════════════════════════════════════ */
.section-seguridad {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--gray-900), var(--black));
  position: relative;
  overflow: hidden;
}

.seguridad-card {
  background: rgba(17,24,39,0.5);
  border: 1px solid var(--gray-800);
  border-radius: 12px;
  padding: 28px;
  transition: border-color var(--transition);
}
.seguridad-card:hover { border-color: rgba(154,254,190,0.2); }
.seguridad-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.seguridad-card p  { font-size: 14px; color: var(--gray-400); line-height: 1.6; }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.section-faq {
  padding: 100px 0;
  background: var(--black);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--gray-800);
}
.faq-item:first-child { border-top: 1px solid var(--gray-800); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  transition: color var(--transition);
}
.faq-q:hover { color: var(--green); }

.faq-icon {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--gray-400);
}
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--green); }
.faq-item.open .faq-q { color: var(--green); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p {
  padding-bottom: 20px;
  font-size: 14px;
  color: var(--gray-400);
  line-height: 1.7;
}

/* ══════════════════════════════════════
   CTA FINAL
══════════════════════════════════════ */
/* ── Spotlight mouse-follow en cards ───────────────────────── */
.servicio-card,
.porque-card,
.paso-card {
  --mx: 50%;
  --my: 50%;
}
.servicio-card::after,
.porque-card::after,
.paso-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(154,254,190,0.04) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.servicio-card:hover::after,
.porque-card:hover::after,
.paso-card:hover::after { opacity: 1; }

/* ── Línea verde animada al top de las secciones ───────────── */
.section-demo,
.section-servicios,
.section-como,
.section-testimonios {
  position: relative;
}
.section-demo::before,
.section-servicios::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154,254,190,0.25), transparent);
}

.section-cta-final {
  padding: 120px 0;
  background: linear-gradient(to top, rgba(154,254,190,0.08), var(--black));
  position: relative;
  overflow: hidden;
}
.section-cta-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: rgba(154,254,190,0.04);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.cta-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
}
.cta-desc {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--gray-400);
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background: var(--black);
  border-top: 1px solid var(--gray-900);
  padding: 32px 0;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
@media (min-width: 640px) {
  .footer-inner { padding: 0 32px; flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 1024px) { .footer-inner { padding: 0 48px; } }

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
@media (min-width: 640px) { .footer-brand { flex-direction: row; gap: 12px; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--transition);
}
.footer-logo:hover { opacity: 0.8; }
.footer-logo img { width: 28px; height: 28px; border-radius: 4px; filter: grayscale(1); transition: filter var(--transition); }
.footer-logo:hover img { filter: grayscale(0); }
.footer-logo span { font-size: 13px; font-weight: 500; color: var(--gray-400); transition: color var(--transition); }
.footer-logo:hover span { color: var(--white); }

.footer-divider { color: var(--gray-700); display: none; }
@media (min-width: 640px) { .footer-divider { display: inline; } }

.footer-copy { font-size: 12px; color: var(--gray-500); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
@media (min-width: 640px) { .footer-nav { justify-content: flex-end; } }

.footer-nav a {
  font-size: 13px;
  color: var(--gray-500);
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--green); text-decoration: underline; text-decoration-color: rgba(154,254,190,0.4); text-underline-offset: 3px; }

/* ══════════════════════════════════════
   TYPEWRITER
══════════════════════════════════════ */
.typewriter-label {
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #9afebe;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: tw-blink 0.85s step-end infinite;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ══════════════════════════════════════
   TILT CARDS
══════════════════════════════════════ */
.servicio-card,
.porque-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.servicio-card .vanilla-tilt-glare-inner,
.porque-card  .vanilla-tilt-glare-inner {
  background: linear-gradient(
    0deg,
    rgba(154, 254, 190, 0) 0%,
    rgba(154, 254, 190, 0.12) 100%
  ) !important;
}

/* ══════════════════════════════════════
   LEAD TIMELINE
══════════════════════════════════════ */
.lead-timeline {
  margin: 0 0 64px;
}

/* ── Mobile: vertical ───────────────── */
.lt-steps {
  display: flex;
  flex-direction: column;
  position: relative;
}
.lt-fill { display: none; }

.lt-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 20px;
  align-items: start;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: relative;
  padding-bottom: 8px;
}
.lt-step.lt-visible {
  opacity: 1;
  transform: none;
}
.lt-step:nth-child(2) { transition-delay: 0s; }
.lt-step:nth-child(3) { transition-delay: 0.12s; }
.lt-step:nth-child(4) { transition-delay: 0.24s; }
.lt-step:nth-child(5) { transition-delay: 0.36s; }
.lt-step:nth-child(6) { transition-delay: 0.48s; }

.lt-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(154,254,190,0.07);
  border: 1.5px solid rgba(154,254,190,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 0.3s, border-color 0.3s;
}
.lt-step.lt-visible .lt-icon-circle {
  background: rgba(154,254,190,0.12);
  border-color: rgba(154,254,190,0.4);
}

/* Vertical connector line */
.lt-step:not(:last-child) .lt-icon-circle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  background: linear-gradient(to bottom, rgba(154,254,190,0.35), rgba(154,254,190,0.05));
  transition: height 0.45s ease 0.35s;
}
.lt-step.lt-visible:not(:last-child) .lt-icon-circle::after {
  height: 48px;
}

.lt-body {
  padding: 6px 0 40px;
}
.lt-step-num {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(154,254,190,0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lt-body h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.lt-body p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.42);
  line-height: 1.55;
}

/* ── Desktop: horizontal ─────────────── */
@media (min-width: 768px) {
  .lt-steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .lt-fill {
    display: block;
    position: absolute;
    top: 24px;
    left: calc(10% + 24px);
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #9afebe, rgba(154,254,190,0.25));
    transition: width 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
    z-index: 0;
    border-radius: 2px;
  }
  .lt-steps.lt-animated .lt-fill {
    width: calc(80% - 48px);
  }
  /* Track background */
  .lt-steps::before {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(10% + 24px);
    width: calc(80% - 48px);
    height: 2px;
    background: rgba(154,254,190,0.08);
    border-radius: 2px;
    z-index: 0;
  }

  .lt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 8px;
    grid-template-columns: unset;
  }
  /* Hide mobile connector */
  .lt-step:not(:last-child) .lt-icon-circle::after { display: none; }

  .lt-body {
    padding: 12px 0 0;
  }
}

/* ══════════════════════════════════════
   CUSTOM CURSOR (desktop only)
══════════════════════════════════════ */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"],
  .servicio-card, .porque-card,
  .reto-card, .option-card { cursor: none; }

  #custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(154, 254, 190, 0.12);
    border: 1.5px solid rgba(154, 254, 190, 0.45);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease,
                background 0.18s ease, border-color 0.18s ease,
                opacity 0.3s ease;
    will-change: left, top;
  }
  #custom-cursor.cursor-hover {
    width: 48px;
    height: 48px;
    background: rgba(154, 254, 190, 0.18);
    border-color: rgba(154, 254, 190, 0.7);
  }
  #custom-cursor.cursor-hidden {
    opacity: 0;
  }
}

/* ══════════════════════════════════════
   HERO ANIMATIONS — entrada escalonada
══════════════════════════════════════ */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-scale-in {
  from { opacity: 0; transform: scale(0.82) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Cada línea del h1 */
.hero-line {
  display: block;
  opacity: 0;
  animation: hero-fade-up 0.65s ease forwards;
  animation-delay: var(--hd, 0s);
}

/* Subtítulo y teléfono */
.hero-anim {
  opacity: 0;
  animation: hero-fade-up 0.65s ease forwards;
  animation-delay: var(--hd, 0s);
}

/* Bloque CTA — scale + fade */
.hero-anim-scale {
  opacity: 0;
  animation: hero-scale-in 0.55s cubic-bezier(0.34,1.2,0.64,1) forwards;
  animation-delay: var(--hd, 0s);
}

/* ══════════════════════════════════════
   PHONE MOCKUP HERO
══════════════════════════════════════ */
.phone-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: phone-float 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(154,254,190,0.1));
}
@keyframes phone-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

.phone-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(154,254,190,0.07);
  border: 1px solid rgba(154,254,190,0.18);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.phone-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: phone-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes phone-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(154,254,190,0.55); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(154,254,190,0); }
}

.phone-frame {
  width: 235px;
  background: #0b1421;
  border: 1.5px solid rgba(154,254,190,0.22);
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(154,254,190,0.04),
    0 24px 64px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.04);
  height: 430px;
}

.phone-notch-row {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.phone-notch {
  width: 68px;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 9999px;
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.phone-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(154,254,190,0.1);
  border: 1px solid rgba(154,254,190,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.phone-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}
.phone-online-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--green);
}
.phone-online-dot {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: phone-dot-pulse 1.8s ease-in-out infinite;
}
.phone-header-dots {
  color: var(--gray-600);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.phone-msgs-area {
  flex: 1;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  min-height: 0;
}

.phone-msg {
  max-width: 82%;
  font-size: 11px;
  line-height: 1.5;
  padding: 7px 11px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.phone-msg.pm-visible {
  opacity: 1;
  transform: translateY(0);
}
.phone-msg--user {
  align-self: flex-end;
  background: rgba(90,100,130,0.35);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.phone-msg--bot {
  align-self: flex-start;
  background: rgba(154,254,190,0.13);
  color: #c8ffe3;
  border: 1px solid rgba(154,254,190,0.18);
  border-bottom-left-radius: 4px;
}

.phone-typing-row {
  padding: 0 14px 6px;
  flex-shrink: 0;
}
.phone-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(154,254,190,0.08);
  border: 1px solid rgba(154,254,190,0.14);
  border-radius: 14px;
  padding: 7px 11px;
}
.phone-typing-bubble span {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  opacity: 0.45;
  animation: phone-typing-dot 1.1s ease-in-out infinite;
}
.phone-typing-bubble span:nth-child(2) { animation-delay: 0.18s; }
.phone-typing-bubble span:nth-child(3) { animation-delay: 0.36s; }
@keyframes phone-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

.phone-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.phone-input-mock {
  flex: 1;
  font-size: 10px;
  color: var(--gray-600);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 6px 10px;
}
.phone-send-btn {
  width: 26px;
  height: 26px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   CARD STAGGER (scroll-in individual)
══════════════════════════════════════ */
.card-stagger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s ease, transform 0.55s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-stagger.cs-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover mejorado en servicio-card */
.servicio-card.cs-visible:hover {
  border-color: rgba(154,254,190,0.35);
  box-shadow: 0 0 0 1px rgba(154,254,190,0.08), 0 20px 48px rgba(154,254,190,0.1);
}

/* Icon bounce al hover */
.servicio-card:hover .card-icon-lg,
.porque-card:hover .card-icon-lg {
  animation: icon-bounce 0.42s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@keyframes icon-bounce {
  0%   { transform: scale(1)    translateY(0); }
  30%  { transform: scale(1.22) translateY(-6px); }
  60%  { transform: scale(0.94) translateY(-1px); }
  100% { transform: scale(1)    translateY(0); }
}

/* ══════════════════════════════════════
   AREA BADGE
══════════════════════════════════════ */
.area-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(154,254,190,0.07);
  border: 1px solid rgba(154,254,190,0.18);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.area-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(154,254,190,0.35), transparent);
  animation: badge-shimmer 3.5s ease-in-out infinite;
}
@keyframes badge-shimmer {
  0%   { left: -120%; }
  35%  { left: 160%; }
  100% { left: 160%; }
}
/* Entrada de badge al hacerse visible la card */
.card-stagger .area-badge {
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.3s ease 0.28s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.28s;
}
.card-stagger.cs-visible .area-badge {
  opacity: 1;
  transform: scale(1);
}

/* ══════════════════════════════════════
   SECCIÓN MÉTRICAS
══════════════════════════════════════ */
.section-metricas {
  padding: 56px 0;
  background: linear-gradient(to bottom,
    rgba(5,46,22,0.18),
    rgba(5,46,22,0.28),
    rgba(5,46,22,0.18));
  border-top: 1px solid rgba(154,254,190,0.07);
  border-bottom: 1px solid rgba(154,254,190,0.07);
}
.metricas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.metrica-item {
  flex: 1 1 120px;
  min-width: 120px;
  text-align: center;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.metrica-num {
  display: block;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  letter-spacing: -1px;
}
.metrica-label {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.metrica-divider {
  width: 1px;
  height: 52px;
  background: rgba(154,254,190,0.1);
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 639px) {
  .metrica-divider { display: none; }
  .metrica-item { min-width: calc(50% - 16px); }
}

/* ══════════════════════════════════════
   TIMELINE — icon pop al aparecer
══════════════════════════════════════ */
.lt-step.lt-visible .lt-icon-circle {
  animation: lt-icon-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.lt-step:nth-child(2).lt-visible .lt-icon-circle { animation-delay: 0s; }
.lt-step:nth-child(3).lt-visible .lt-icon-circle { animation-delay: 0.12s; }
.lt-step:nth-child(4).lt-visible .lt-icon-circle { animation-delay: 0.24s; }
.lt-step:nth-child(5).lt-visible .lt-icon-circle { animation-delay: 0.36s; }
.lt-step:nth-child(6).lt-visible .lt-icon-circle { animation-delay: 0.48s; }
@keyframes lt-icon-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ══════════════════════════════════════
   CTA FINAL — botón pulse
══════════════════════════════════════ */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(154,254,190,0.28), 0 4px 20px rgba(0,0,0,0.25); }
  50%       { box-shadow: 0 0 38px rgba(154,254,190,0.52), 0 4px 20px rgba(0,0,0,0.25); }
}
.section-cta-final .btn-hero {
  animation: cta-pulse 3s ease-in-out infinite;
}

/* ── Ajustes móvil para el showcase hero ─────────────────────── */
@media (max-width: 1023px) {
  /* Eliminar float: en móvil el teléfono está en flujo normal con las tarjetas */
  .phone-wrapper { animation: none !important; }

  /* Teléfono más pequeño para no ocupar toda la pantalla */
  .phone-frame { width: 200px; height: 368px; border-radius: 32px; }

  /* hero-visual no desborda */
  .hero-visual { overflow: hidden; }

  /* Reducir padding del hero en móvil */
  .hero { padding: 90px 0 70px; }
}

/* ══════════════════════════════════════
   prefers-reduced-motion
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-line,
  .hero-anim,
  .hero-anim-scale {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .phone-wrapper { animation: none !important; }
  .phone-badge-dot,
  .phone-online-dot,
  .phone-typing-bubble span { animation: none !important; opacity: 1 !important; }
  .area-badge::after { animation: none !important; }
  .card-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  }
  .card-stagger .area-badge { opacity: 1 !important; transform: none !important; }
  .lt-step.lt-visible .lt-icon-circle { animation: none !important; }
  .section-cta-final .btn-hero { animation: none !important; }
  .fade-up { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════
   SHOWCASE ROTATIVO HERO
══════════════════════════════════════ */
.showcase-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Badge dinámico */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(154,254,190,0.07);
  border: 1px solid rgba(154,254,190,0.18);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--green);
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

/* Flip 3D */
@keyframes sc-flip-out {
  from { transform: perspective(700px) rotateY(0deg);  }
  to   { transform: perspective(700px) rotateY(90deg); }
}
@keyframes sc-flip-in {
  from { transform: perspective(700px) rotateY(-90deg); }
  to   { transform: perspective(700px) rotateY(0deg);   }
}
.sc-flip-out { animation: sc-flip-out 0.26s ease-in  forwards; }
.sc-flip-in  { animation: sc-flip-in  0.26s ease-out forwards; }

/* Panels container */
.sc-panels-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.sc-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  inset: 0;
}
.sc-panel.sc-active { display: flex; }

/* Área de mensajes */
.sc-msgs-area {
  flex: 1;
  min-height: 0;
  padding: 8px 11px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.sc-msg {
  max-width: 86%;
  font-size: 10px;
  line-height: 1.45;
  padding: 5px 9px;
  border-radius: 11px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  word-break: break-word;
}
.sc-msg.sc-msg--visible { opacity: 1; transform: translateY(0); }
.sc-msg--user {
  align-self: flex-end;
  background: rgba(55,65,81,0.75);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.sc-msg--bot {
  align-self: flex-start;
  background: var(--green);
  color: #071612;
  font-weight: 500;
  border-bottom-left-radius: 3px;
}
.sc-bot-star { font-size: 8px; margin-right: 3px; opacity: 0.6; }

/* Typing dentro del panel */
.sc-typing { padding: 2px 11px 3px; flex-shrink: 0; }

/* Barra de estado */
.sc-status-bar {
  margin: 4px 11px 7px;
  padding: 5px 9px;
  background: rgba(154,254,190,0.07);
  border: 1px solid rgba(154,254,190,0.14);
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--green);
  text-align: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sc-status-bar.sc-visible { opacity: 1; }

/* Notificación (escenario 2) */
.sc-notif {
  margin: 4px 11px 7px;
  padding: 7px 9px;
  background: rgba(154,254,190,0.09);
  border: 1px solid rgba(154,254,190,0.18);
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--green);
  text-align: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sc-notif.sc-visible { opacity: 1; }

/* ── Dashboard ───────────────────────── */
.sc-panel--dash { padding: 10px 11px 8px; gap: 8px; }

.dash-hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(154,254,190,0.1);
  flex-shrink: 0;
}
.dash-title { font-size: 11.5px; font-weight: 700; color: #fff; }
.dash-date  { font-size: 9.5px; color: var(--gray-500); }

.dash-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex-shrink: 0;
}
.dash-metric {
  background: rgba(154,254,190,0.05);
  border: 1px solid rgba(154,254,190,0.1);
  border-radius: 7px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.dash-metric.dash-visible { opacity: 1; transform: scale(1); }
.dash-mval {
  font-size: 22px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-mlbl { font-size: 8.5px; color: var(--gray-500); white-space: nowrap; }

.dash-leads-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}
.dash-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 5px 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dash-lead.dash-visible { opacity: 1; }
.dash-lead-name { font-size: 10px; font-weight: 600; color: #fff; }
.dash-lead-tag  {
  font-size: 8.5px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 2px 6px;
}
.dash-tag--ok {
  background: rgba(154,254,190,0.13);
  color: var(--green);
}
.dash-tag--pending {
  background: rgba(234,179,8,0.13);
  color: #facc15;
  animation: sc-pending-blink 1.4s ease-in-out infinite;
}
@keyframes sc-pending-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ── Barra de progreso ───────────────── */
.sc-progress-track {
  width: 235px;
  height: 2px;
  background: rgba(154,254,190,0.1);
  border-radius: 2px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .sc-progress-track { width: 200px; }
}
.sc-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: 2px;
}

/* ── Puntos indicadores ──────────────── */
.sc-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-dot {
  height: 8px;
  width: 8px;
  border-radius: 9999px;
  background: var(--gray-700);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.34,1.2,0.64,1), background 0.25s ease;
}
.sc-dot.sc-dot--active {
  width: 24px;
  background: var(--green);
}

/* reduced-motion overrides for showcase */
@media (prefers-reduced-motion: reduce) {
  .sc-flip-out, .sc-flip-in { animation: none !important; }
  .sc-msg { transition: none !important; opacity: 1 !important; transform: none !important; }
  .dash-metric { transition: none !important; opacity: 1 !important; transform: none !important; }
  .dash-lead { transition: none !important; opacity: 1 !important; }
  .sc-tag--pending { animation: none !important; }
}

/* ── Tarjetas flotantes de estadísticas ─────────────────────── */
.sc-phone-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card-wrap {
  position: absolute;
  z-index: 10;
  transition: opacity 0.35s ease;
}
.stat-card-wrap--a {
  left: calc(100% + 10px);
  top: 55px;
  animation: stat-float-a 3.8s ease-in-out infinite;
}
.stat-card-wrap--b {
  right: calc(100% + 10px);
  bottom: 75px;
  animation: stat-float-b 5.1s ease-in-out infinite;
}
@keyframes stat-float-a {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}
@keyframes stat-float-b {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(8px); }
}
.stat-card-wrap.stat-fade-out { opacity: 0; }

.stat-card {
  background: rgba(11, 20, 33, 0.88);
  border: 1px solid rgba(154, 254, 190, 0.22);
  border-radius: 14px;
  padding: 11px 14px;
  width: 148px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(154,254,190,0.06);
}
.stat-icon {
  font-size: 17px;
  line-height: 1;
  margin-bottom: 3px;
}
.stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.stat-text {
  font-size: 11px;
  font-weight: 500;
  color: #e5e7eb;
  line-height: 1.3;
}
.stat-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  line-height: 1.3;
}

/* en pantallas <1280px: tarjetas debajo del teléfono en fila */
@media (max-width: 1279px) {
  .sc-phone-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* fila 2 altura fija: evita que el cambio de texto desplace el layout */
    grid-template-rows: auto 96px;
    column-gap: 10px;
    row-gap: 14px;
    justify-items: center;
  }
  .phone-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .stat-card-wrap--a {
    grid-column: 1;
    grid-row: 2;
    position: static;
    animation: none;
    display: flex;
    width: 100%;
    height: 96px;
  }
  .stat-card-wrap--b {
    grid-column: 2;
    grid-row: 2;
    position: static;
    animation: none;
    display: flex;
    width: 100%;
    height: 96px;
  }
  .stat-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
  }
}

/* reduced-motion para stat cards */
@media (prefers-reduced-motion: reduce) {
  .stat-card-wrap--a, .stat-card-wrap--b { animation: none !important; }
}