/* Landing page enhancements: reveal animations, hover states, subtle parallax helpers */

/* Reveal base */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero overlay */
.landing-hero { position: relative; overflow: hidden; }
.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* CTA pulse tweaks */
.animate-pulse-blue { animation: pulseBlue 2s ease-in-out infinite; }
@keyframes pulseBlue {
  0% { box-shadow: 0 0 0 0 rgba(4,93,138,0.6); }
  70% { box-shadow: 0 0 0 14px rgba(4,93,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(4,93,138,0); }
}

/* Feature cards hover */
.feature-card { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, box-shadow, filter; }
.feature-card:hover { transform: translateY(-10px) scale(1.03); filter: brightness(1.08) saturate(1.08); box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.12); }
.feature-card:hover .feature-icon { transform: translateY(-4px) scale(1.08); text-shadow: 0 6px 18px rgba(0,0,0,0.4); transition: transform 260ms ease, text-shadow 260ms ease; }

/* Parallax hint on hero background image wrapper (applied inline via JS) */
.parallax-bg { will-change: background-position; }

/* Body modern gradient background */
body.modern-gradient {
  /* Layered gradient for depth and subtle color accents */
  background: 
    radial-gradient(1200px circle at 10% 0%, rgba(14,165,233,0.18) 0%, rgba(14,165,233,0) 60%), /* accent blue glow */
    radial-gradient(800px circle at 90% 20%, rgba(255,193,7,0.14) 0%, rgba(255,193,7,0) 55%),   /* accent amber glow */
    linear-gradient(135deg, #0b1f2f 0%, #1a2c3d 35%, #2d4c63 100%); /* base gradient using primary palette */
  background-attachment: fixed;
}

/* Recursos (features) cards themes and icon sizes */
.feature-card { color: #f8fafc; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.feature-card h3 { color: #fff; }
.feature-card .feature-desc { color: #e5e7eb; }
.feature-icon { font-size: clamp(2.75rem, 6vw, 3.75rem); line-height: 1; display: inline-block; }
.feature-icon-wrapper { display: flex; align-items: center; justify-content: center; }

.card-theme-1 { background: linear-gradient(135deg, #1a2c3d 0%, #2d4c63 100%); }
.card-theme-2 { background: linear-gradient(135deg, #2d4c63 0%, #3a6080 100%); }
.card-theme-3 { background: linear-gradient(135deg, #2d4c63 0%, #ffcd38 100%); }
.card-theme-4 { background: linear-gradient(135deg, #1a2c3d 0%, #2ba304 100%); }

.card-theme-1 .feature-icon,
.card-theme-2 .feature-icon,
.card-theme-4 .feature-icon { color: #fff; }
.card-theme-3 .feature-icon { color: #1a2c3d; }

/* Glow acentuado por tema no hover */
.card-theme-1:hover { box-shadow: 0 20px 46px rgba(0,0,0,0.55), 0 0 24px rgba(45,76,99,0.28); }
.card-theme-2:hover { box-shadow: 0 20px 46px rgba(0,0,0,0.55), 0 0 24px rgba(58,96,128,0.28); }
.card-theme-3:hover { box-shadow: 0 20px 46px rgba(0,0,0,0.55), 0 0 24px rgba(255,193,7,0.38); }
.card-theme-4:hover { box-shadow: 0 20px 46px rgba(0,0,0,0.55), 0 0 24px rgba(43,163,4,0.30); }

/* Plans: visual emphasis */
.plan-card { will-change: transform, box-shadow, filter; }
.plan-card .bg-glass { position: relative; border: 1px solid rgba(255,255,255,0.08); background: rgba(26,44,61,0.55); }
.plan-card:hover .bg-glass { filter: brightness(1.06) saturate(1.06); box-shadow: 0 22px 50px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.10); }
.plan-card .bg-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; background: radial-gradient(120% 120% at 50% -20%, rgba(var(--accent-rgb,102,126,234),0.65) 0%, rgba(0,0,0,0) 60%); }
.plan-card:hover { transform: translateY(-10px) scale(1.02); }
.plan-card:hover .bg-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(var(--accent-rgb,102,126,234),0.45), 0 14px 36px rgba(var(--accent-rgb,102,126,234),0.28); pointer-events: none; }

.plan-card .plan-price-amount { text-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.plan-card.plan-theme-3 .plan-price-amount { color: #ffcd38; }
.plan-card.plan-theme-4 .plan-price-amount { color: #2ba304; }

.plan-card .btn-subscribe { box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: transform 220ms ease, box-shadow 220ms ease; }
.plan-card:hover .btn-subscribe { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--accent-rgb,102,126,234),0.35); }

/* Plan themes: define accent colors */
.plan-theme-1 { --accent-rgb: 102,126,234; }
.plan-theme-2 { --accent-rgb: 118,75,162; }
.plan-theme-3 { --accent-rgb: 255,205,56; }
.plan-theme-4 { --accent-rgb: 43,163,4; }

/* Recommended Plan synergy */
.plan-card--recommended .bg-glass { box-shadow: 0 14px 44px rgba(102,126,234,0.30); border-color: rgba(102,126,234,0.55); }
.plan-card--recommended .bg-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(102,126,234,0.55), 0 18px 42px rgba(102,126,234,0.32); pointer-events: none; }

/* Recommended Plan Highlight */
.plan-card--recommended { position: relative; }
.plan-card--recommended .bg-glass {
  box-shadow: 0 12px 40px rgba(102,126,234,0.25);
  border-color: rgba(102,126,234,0.6);
}
.plan-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.2px;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(102,126,234,1) 0%, rgba(118,75,162,1) 100%);
  box-shadow: 0 6px 20px rgba(102,126,234,0.35);
}

/* Billing Toggle */
#billing-toggle .billing-option { background: transparent; color: #cbd5e0; border: none; outline: none; transition: all 180ms ease; }
#billing-toggle .billing-option.active { background: rgba(102,126,234,0.15); color: #ffffff; }
#billing-toggle .billing-option:hover { background: rgba(102,126,234,0.25); color: #ffffff; }

/* FAQ: improved styles */
.faq-item { transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.faq-item:hover { border-color: rgba(6,182,212,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(6,182,212,0.20); transform: translateY(-2px); }

.faq-question { color: #e5e7eb; cursor: pointer; }
.faq-question:hover { color: #ffffff; }
.faq-question:focus { outline: none; box-shadow: 0 0 0 2px rgba(6,182,212,0.35); border-radius: 0.75rem; }

.faq-icon { color: #94a3b8; transition: transform 200ms ease, color 200ms ease; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); color: #06b6d4; }

.faq-answer { color: #cbd5e1; }
.faq-answer p { margin-top: 0.25rem; }

/* Contact form styles */
.contact-card { position: relative; }
.contact-card::before { content: ""; position: absolute; inset: 0; border-radius: 0.75rem; pointer-events: none; opacity: 0.18; background: radial-gradient(120% 120% at 10% 0%, rgba(6,182,212,0.45) 0%, rgba(0,0,0,0) 65%); }
.contact-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(6,182,212,0.25); border-color: rgba(6,182,212,0.35); }

.input-modern, .textarea-modern {
  background: rgba(26,44,61,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.input-modern::placeholder, .textarea-modern::placeholder { color: #9ca3af; }
.input-modern:focus, .textarea-modern:focus { outline: none; border-color: rgba(6,182,212,0.45); box-shadow: 0 0 0 2px rgba(6,182,212,0.25); background: rgba(26,44,61,0.65); }

.btn-send {
  background: linear-gradient(135deg, rgba(6,182,212,0.95) 0%, rgba(56,189,248,0.95) 100%);
  color: #0b1f2f;
  box-shadow: 0 10px 24px rgba(6,182,212,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-send:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(56,189,248,0.35); }
.btn-send:active { transform: translateY(1px); }

/* Toast notifications */
.toast-container{
  position:fixed;
  bottom:1rem;
  right:1rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.toast{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-radius:.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  transform:translateY(12px);
  opacity:0;
  animation:toast-in .25s ease forwards;
}
.toast-success{
  background:rgba(16,185,129,.15);
  border-color:#10b981;
  color:#d1fae5;
}
.toast-error{
  background:rgba(244,63,94,.15);
  border-color:#f43f5e;
  color:#fee2e2;
}
.toast .icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@keyframes toast-in{
  to{ transform:translateY(0); opacity:1; }
}
.toast.hide{ animation:toast-out .2s ease forwards; }
@keyframes toast-out{
  to{ transform:translateY(12px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .toast{ animation:none; opacity:1; transform:none; }
  .toast.hide{ animation:none; }
}