/* Identidad visual compartida con el Home de ID-AZ */
:root {
  --idaz-orange: #e66110;
  --idaz-coral: #e3462d;
  --idaz-amber: #f08a24;
  --idaz-ink: #24201e;
  --idaz-surface: #312824;
  --idaz-surface-soft: #3b302a;
  --idaz-cream: #f8f4ef;
  --idaz-muted: #d8cec5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #24201e;
  background: #f5f2ee;
  font-family: "Century Gothic", "CenturyGothic", "AppleGothic", Montserrat, Arial, sans-serif;
  letter-spacing: .01em;
}

.topbar, header, .top {
  background: rgba(17, 14, 13, .97) !important;
  border-bottom: 1px solid rgba(230, 97, 16, .45) !important;
  backdrop-filter: blur(12px);
}
.topbar img, header img, .top img, .brand img { filter: brightness(0) invert(1) !important; opacity: .98; }
.topbar a, header a { font-family: inherit; }

.hero, .hero-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(230, 97, 16, .18), transparent 34%),
    linear-gradient(135deg, #2a211d 0%, #4a3329 52%, #211a17 100%) !important;
  border-radius: 0 0 32px 32px;
}
.hero h1, .hero h2, .section-title { letter-spacing: -.025em; }
.hero .gradient, .gradient, h1 .gradient { background-image: linear-gradient(100deg, var(--idaz-coral), var(--idaz-amber)) !important; }
.hero p, .intro, .lead { color: #5b514a !important; }
.hero .lead { color: #eee4da !important; }
.hero-image img { object-fit: contain !important; border-radius: 18px; }

section { background: transparent !important; }
.section-title { color: #201b18 !important; }
.card {
  color: var(--idaz-ink) !important;
  background: linear-gradient(145deg, #fffdfa 0%, #eee8e1 100%) !important;
  border: 1px solid rgba(230, 97, 16, .24) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--idaz-orange) !important; box-shadow: 0 18px 38px rgba(230, 97, 16, .18) !important; }
.card h3 { color: #111 !important; font-family: inherit; }
.card p, .card li { color: #5b514a !important; }
.icon {
  display: inline-grid !important;
  place-items: center !important;
  font-size: 0 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--idaz-coral), var(--idaz-orange)) !important;
  box-shadow: 0 8px 18px rgba(230, 97, 16, .24);
}
.icon::before { font-size: 1.55rem; line-height: 1; font-family: Arial, sans-serif; font-weight: 700; color: #fff; }
.icon-light::before { content: '✦'; }
.icon-world::before { content: '◎'; }
.icon-bolt::before { content: '↯'; }
.icon-meta::before { content: 'M'; font-size: 1.35rem; }
.icon-search::before { content: '⌕'; }
.icon-money::before { content: '$'; font-size: 1.35rem; }
.icon-brain::before { content: '◉'; }
.icon-tools::before { content: '⌘'; }
.icon-calendar::before { content: '□'; }
.icon-fire::before { content: '△'; }
.icon-spark::before { content: '✧'; }
.price { color: var(--idaz-orange) !important; }
.price small { color: #77685e !important; }
.feature { color: #5b514a !important; border-bottom-color: rgba(36,32,30,.12) !important; }
.feature:before { color: var(--idaz-orange) !important; }
.country strong { color: #201b18 !important; }
.country span { color: #5b514a !important; }
.country a { color: var(--idaz-orange) !important; }
.notice, .notice span { color: #5b514a !important; }
.notice strong { color: #201b18 !important; }
.btn, button {
  font-family: inherit;
  border-radius: 9px !important;
}
.btn.primary, .btn[data-wa], a[href*="wa.me"] {
  background: linear-gradient(100deg, var(--idaz-coral), var(--idaz-orange)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.notice { background: rgba(230, 97, 16, .1) !important; border-color: rgba(230, 97, 16, .45) !important; color: var(--idaz-cream) !important; }
.footer { background: #211a17 !important; border-top: 1px solid rgba(230, 97, 16, .35) !important; }
.footer img { filter: brightness(0) invert(1); }
.support-visual { margin-top: 28px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(230,97,16,.25); box-shadow: 0 18px 46px rgba(26,20,17,.14); }
.support-visual img { width: 100%; max-height: 330px; display: block; object-fit: cover; }
.hidden { display: none !important; }

@media (max-width: 700px) {
  .hero { padding-top: 92px !important; }
  .hero-image img { max-height: 420px; }
  .card { border-radius: 15px !important; }
}