/* ============================================
   GuauGuauCars — Custom CSS
   Paleta corporativa: AppColors (Flutter)
     accentGreen  #44A682
     deepTeal     #3B5954
     darkBg       #121212
     darkSurface  #1E1E1E
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

html { scroll-behavior: smooth; }

/* ── Gradiente hero: dark con tinte teal sutil ── */
.gradient-hero {
  background: linear-gradient(135deg, #121212 0%, #182820 55%, #121212 100%);
}

/* ── Navbar blur ── */
.navbar-blur {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ══════════════════════════════════════════
   PHONE MOCKUP
══════════════════════════════════════════ */

.phone-wrapper {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}

/* Botones físicos (decorativos) */
.phone-btn {
  position: absolute;
  background: linear-gradient(to bottom, #333333, #1E1E1E);
  border-radius: 3px;
  z-index: 0;
}
.phone-btn-vol-up  { left: -5px; top: 96px;  width: 5px; height: 30px; border-radius: 2px 0 0 2px; }
.phone-btn-vol-dn  { left: -5px; top: 138px; width: 5px; height: 30px; border-radius: 2px 0 0 2px; }
.phone-btn-power   { right: -5px; top: 118px; width: 5px; height: 48px; border-radius: 0 2px 2px 0; }

/* Marco del teléfono */
.phone-frame {
  position: relative;
  width: 280px;
  height: 586px;
  background: linear-gradient(145deg, #252525 0%, #121212 100%);
  border-radius: 50px;
  border: 2px solid #333333;
  box-shadow:
    0 0 0 1px #121212,
    0 50px 120px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(68, 166, 130, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  z-index: 1;
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 30px;
  background: #000;
  border-radius: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  gap: 4px;
}
.dynamic-island::before {
  content: '';
  width: 10px;
  height: 10px;
  background: #111;
  border-radius: 50%;
  border: 1.5px solid #1f1f1f;
}
.dynamic-island::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #0d1f14;
  border-radius: 50%;
  border: 1.5px solid #1a3a22;
  box-shadow: 0 0 4px rgba(68, 166, 130, 0.6);
}

/* Zona de pantalla */
.phone-screen-inner {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  overflow: hidden;
}

/* Reflejo de cristal */
.screen-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 35%,
    transparent 65%,
    rgba(255, 255, 255, 0.02) 100%
  );
  z-index: 5;
  pointer-events: none;
  border-radius: 50px;
}

/* ── Screens ── */
.app-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, opacity;
}
.app-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ── Tap ripple ── */
.tap-ripple {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%) scale(0);
  animation: tap-ripple-anim 0.65s ease-out forwards;
}
@keyframes tap-ripple-anim {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.8; }
  40%  { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; }
}

/* ── Step info ── */
.demo-step-wrapper {
  width: 280px;
  text-align: center;
}
.step-label-badge {
  display: inline-block;
  background: rgba(68, 166, 130, 0.15);
  border: 1px solid rgba(68, 166, 130, 0.3);
  color: #44A682;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
}
.step-title-text {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  transition: all 0.3s ease;
  min-height: 22px;
}
.step-desc-text {
  font-size: 12px;
  color: #757575;
  line-height: 1.5;
  transition: all 0.3s ease;
  min-height: 36px;
}

/* Dots del demo */
.demo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #333333;
  transition: all 0.35s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.demo-dot.active {
  background: #44A682;
  width: 18px;
  border-radius: 4px;
}

/* Nav arrows */
.demo-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1E1E1E;
  border: 1px solid #333333;
  color: #9E9E9E;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-nav-btn:hover {
  background: #44A682;
  border-color: #44A682;
  color: white;
}
.demo-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */

.benefit-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(68, 166, 130, 0.12);
}

/* Tier cards */
.tier-card { transition: transform 0.3s ease; }
.tier-card:hover { transform: translateY(-4px); }
.tier-card.featured {
  border-color: #44A682;
  position: relative;
}
.tier-card.featured::before {
  content: '⭐ Más popular';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #44A682;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* CTA pulse — verde corporativo */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(68, 166, 130, 0.45); }
  50%       { box-shadow: 0 0 0 14px rgba(68, 166, 130, 0); }
}
.btn-pulse { animation: pulse-green 2.5s infinite; }

/* Float */
@keyframes float-phone {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.float-phone { animation: float-phone 4s ease-in-out infinite; }

/* Fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Paw icons en botones — fuerza el color del texto (emoji no hereda CSS color) ── */
.btn-paw {
  display: inline-block;
  filter: brightness(0) invert(1); /* negro → blanco para que coincida con text-white */
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #388E3C;
  color: white;
  padding: 14px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(56, 142, 60, 0.3);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #121212; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #44A682; }

/* ══════════════════════════════════════════
   LIGHT MODE — prefers-color-scheme: light
   El diseño base ES oscuro. Este bloque lo
   invierte sólo cuando el sistema lo pide.
══════════════════════════════════════════ */
@media (prefers-color-scheme: light) {

  /* ── Base ── */
  body {
    background-color: #FAFAFA !important;
    color: #212121;
  }

  /* ── Hero gradient ── */
  .gradient-hero {
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 55%, #f0fdf4 100%) !important;
  }

  /* ── Tailwind backgrounds sólidos ── */
  .bg-slate-950 { background-color: #FAFAFA !important; }
  .bg-slate-900 { background-color: #FFFFFF !important; }
  .bg-slate-800 { background-color: #FFFFFF !important; }
  .bg-slate-700 { background-color: rgba(68, 166, 130, 0.12) !important; }

  /* ── Fondos de sección por ID — alternando blanco / tinte marca ── */
  #como-funciona,
  #protectoras-aliadas,
  #contacto   { background-color: rgba(68, 166, 130, 0.05) !important; }

  #protectoras,
  #apoya      { background-color: #FFFFFF !important; }

  /* ── Texto ── */
  .text-white     { color: #212121 !important; }
  .text-slate-100 { color: #212121 !important; }
  .text-slate-200 { color: #2d2d2d !important; }
  .text-slate-300 { color: #424242 !important; }
  .text-slate-400 { color: #5a6e68 !important; } /* teal-gris — contrasta bien sobre fondos verdes */
  .text-slate-500 { color: #6b8078 !important; }

  /* Restaurar texto blanco en fondos de marca */
  .bg-brand,
  .bg-brand *,
  [class*="bg-brand"] { color: #FFFFFF !important; }

  /* text-emerald-400 es verde muy claro — en modo claro necesita oscurecer */
  .text-emerald-400 { color: #0f7a54 !important; }

  /* ── Badge "Beta privada · Próximamente" ── */
  /* bg-brand/15 (verde claro) + text-brand (#44A682) = bajo contraste → texto oscuro */
  .bg-brand\/15.text-brand { color: #1a4a3a !important; }

  /* ── Chip "Prototipo interactivo" — dark pill para que el texto blanco funcione ── */
  /* Selector de 3 clases → mayor especificidad que .bg-slate-800\/80 (1 clase) */
  .bg-slate-800\/80.text-slate-400.backdrop-blur-sm {
    background-color: rgba(26, 74, 58, 0.88) !important;
    border-color: rgba(68, 166, 130, 0.50) !important;
    color: #FFFFFF !important;
  }

  /* ── Bordes ── */
  .border-slate-700           { border-color: rgba(68, 166, 130, 0.22) !important; }
  .border-slate-800           { border-color: rgba(68, 166, 130, 0.14) !important; }
  .border-slate-600           { border-color: rgba(68, 166, 130, 0.30) !important; }
  .divide-slate-700 > * + *   { border-color: rgba(68, 166, 130, 0.22) !important; }

  /* ── Formulario ── */
  input, select, textarea {
    background-color: #FFFFFF !important;
    color: #212121 !important;
    border-color: rgba(68, 166, 130, 0.35) !important;
  }
  input::placeholder, textarea::placeholder { color: #9E9E9E !important; }

  /* ── Componentes custom ── */
  .step-title-text { color: #212121; }
  .step-desc-text  { color: #5a6e68; }

  .demo-nav-btn {
    background: #FFFFFF;
    border-color: rgba(68, 166, 130, 0.20);
    color: #616161;
  }
  .demo-dot { background: rgba(68, 166, 130, 0.40); }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar-track { background: #F5F5F5; }
  ::-webkit-scrollbar-thumb { background: rgba(68, 166, 130, 0.40); }

  /* ── Navbar scrolled ── */
  #navbar.bg-white\/95 {
    background-color: rgba(250, 250, 250, 0.95) !important;
  }
  #navbar.shadow-xl {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  }

  /* ════════════════════════════════════════════════════════════
     CARDS — tintes del color de marca #44A682
     Texto oscuro (#212121 / #5a6e68) garantiza contraste WCAG AA
     ════════════════════════════════════════════════════════════ */

  /* Cards principales (Cómo funciona, tier-cards, formulario) */
  .bg-slate-800\/50 {
    background-color: rgba(68, 166, 130, 0.12) !important;
    border: 1px solid rgba(68, 166, 130, 0.30) !important;
  }

  /* Cards placeholder protectoras aliadas */
  .bg-slate-800\/40 {
    background-color: rgba(68, 166, 130, 0.10) !important;
    border: 1px solid rgba(68, 166, 130, 0.28) !important;
  }

  /* Hover placeholders */
  .hover\:bg-slate-800\/60:hover {
    background-color: rgba(68, 166, 130, 0.20) !important;
  }

  /* bg-slate-800/80 genérico (badges, chips sin backdrop-blur) */
  .bg-slate-800\/80 {
    background-color: rgba(68, 166, 130, 0.16) !important;
  }

  /* Stats "Sin comisión / 24h" dentro de Protectora Aliada */
  .bg-slate-900\/60 {
    background-color: rgba(68, 166, 130, 0.14) !important;
    border: 1px solid rgba(68, 166, 130, 0.30) !important;
  }
  /* Texto dentro de los stats — mismo color familia, necesita oscurecer */
  .bg-slate-900\/60 .text-brand    { color: #1a4a3a !important; }
  .bg-slate-900\/60 .text-emerald-400 { color: #0f7a54 !important; }
  .bg-slate-900\/60 .text-slate-400   { color: #3d5f56 !important; }

  /* Menú móvil — neutro */
  .bg-slate-900\/98 {
    background-color: rgba(250, 250, 250, 0.98) !important;
  }

  /* ── Bordes con opacidad ── */
  .border-slate-700\/50 { border-color: rgba(68, 166, 130, 0.28) !important; }

  /* ── Gradientes (CSS custom props de Tailwind) ── */
  /* Tarjeta "Protectora Aliada" */
  .from-slate-800 { --tw-gradient-from: rgba(68, 166, 130, 0.16) !important; }
  .to-slate-900   { --tw-gradient-to:   rgba(68, 166, 130, 0.06) !important; }
  /* Header interno de las placeholders */
  .from-slate-700\/40 { --tw-gradient-from: rgba(68, 166, 130, 0.18) !important; }
  .to-slate-800\/40   { --tw-gradient-to:   rgba(68, 166, 130, 0.08) !important; }

  /* ── Íconos en placeholders ── */
  .bg-slate-700\/80 { background-color: rgba(68, 166, 130, 0.22) !important; }

  /* ── Bordes dashed ── */
  .border-dashed.border-slate-700 {
    border-color: rgba(68, 166, 130, 0.42) !important;
  }
  .hover\:border-brand\/60:hover {
    border-color: rgba(68, 166, 130, 0.65) !important;
  }

  /* ── Clases custom de cards ── */
  .benefit-card {
    background-color: rgba(68, 166, 130, 0.12) !important;
    border: 1px solid rgba(68, 166, 130, 0.30) !important;
  }
  .tier-card {
    background-color: rgba(68, 166, 130, 0.12) !important;
    border: 1px solid rgba(68, 166, 130, 0.30) !important;
  }

  /* ── Botones dentro de tier-cards (bg-slate-700 text-white) ── */
  .tier-card button {
    background-color: #44A682 !important;
    color: #FFFFFF !important;
    border: none !important;
  }
  .tier-card button:hover {
    background-color: #3B9073 !important;
  }

  /* ── Anillos de foco ── */
  *:focus-visible { outline-color: #44A682; }

  /* ── Navbar páginas legales (bg-slate-900/95 — clase distinta a bg-slate-900) ── */
  .bg-slate-900\/95 {
    background-color: rgba(250, 250, 250, 0.97) !important;
    border-color: rgba(68, 166, 130, 0.20) !important;
  }

  /* ── Banner "Borrador preliminar" — amber sobre fondo claro ── */
  /* En dark mode amber-900/40 + text-amber-300 funciona; en claro el texto desaparece */
  .bg-amber-900\/40 {
    background-color: rgba(251, 191, 36, 0.12) !important;
  }
  .border-amber-700\/50 { border-color: rgba(180, 83, 9, 0.35) !important; }
  .text-amber-300        { color: #92400e !important; }       /* amber-800 — contrasta sobre fondo claro */

  /* ── Separadores tabla cookies (border-slate-800/60) ── */
  .border-slate-800\/60 { border-color: rgba(68, 166, 130, 0.18) !important; }

  /* ── Card destacada en Términos (bg-slate-800/60) ── */
  .bg-slate-800\/60 {
    background-color: rgba(68, 166, 130, 0.10) !important;
    border-color: rgba(68, 166, 130, 0.25) !important;
  }

  /* ── Hover links footer páginas legales ── */
  /* hover:text-slate-300 genera clase distinta a text-slate-300 — sin override queda gris claro */
  .hover\:text-slate-300:hover { color: #1a3a35 !important; }

}