/* Winglo — gabinete de naturalista: madera oscura, pergamino, dorados e IM Fell */
@font-face { font-family: "Fell"; font-display: swap; src: url("/apps/winglo/fonts/IMFellEnglish_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Garamond"; font-display: swap; src: url("/apps/winglo/fonts/EBGaramond_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Garamond"; font-style: italic; font-display: swap; src: url("/apps/winglo/fonts/EBGaramond_400Regular_Italic.ttf") format("truetype"); }

:root {
  --accent: #2F5240; --accent-ink: #F3E7C9;
  --gold: #B8913A; --gold-soft: #F1E3BE;
  --ink: #33251A; --muted: #7a6650; --bg: #F4EAD0; --bg-2: #EADBB5; --line: #DCC79C;
  --radius: 14px; --radius-sm: 10px;
  --font-head: "Fell", Georgia, "Times New Roman", serif;
  --font-body: "Garamond", Georgia, "Times New Roman", serif;
  --placeholder: url("/apps/winglo/img/icon.png");
}
body { background: var(--bg); font-size: 18px; }
h1, h2 { font-weight: 400; letter-spacing: -.01em; }
.kicker { color: #8C2F23; letter-spacing: .18em; }
.feat .fi { background: var(--bg-2); color: var(--accent); }

.app-hero { position: relative; overflow: hidden; color: #F3E7C9;
  background: radial-gradient(ellipse at 30% 10%, #5a3c22, #3B2716 45%, #24170D 100%); }
.app-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(176deg, rgba(233,197,143,.05) 0 2px, transparent 2px 38px); }
.app-hero > .wrap { position: relative; z-index: 1; }
.app-hero .tagline, .app-hero .platforms li { color: #E9D9B0; }
.app-hero h1 { color: #F3E7C9; }
.app-hero .icon { border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.app-hero .status-pill { background: rgba(216,181,101,.16); color: #D8B565; }
.hero-visual { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: center; }
.hero-visual .phone { width: 280px; transform: rotate(4deg); box-shadow: 0 40px 80px rgba(0,0,0,.6); }
.hero-visual .mascot { position: absolute; left: 2%; bottom: 4%; width: 190px; filter: drop-shadow(0 18px 20px rgba(0,0,0,.45)); animation: wg-sway 4s ease-in-out infinite alternate; }
@keyframes wg-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hero-visual .mascot { animation: none; } }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; max-width: 860px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: #FBF4E2; }
.plan.pro { background: linear-gradient(160deg, #6E2A1F, #4E1C14); color: #F3E7C9; border-color: #B8913A; position: relative; overflow: hidden; }
.plan.pro::after { content: "❦"; position: absolute; right: 22px; top: 4px; font-size: 90px; color: #D8B565; opacity: .14; }
.plan.pro .crown { color: #D8B565; }
.plan h3 { font-family: var(--font-head); font-weight: 400; font-size: 24px; display: flex; gap: 8px; align-items: center; }
.plan .price { font-family: var(--font-head); font-size: 42px; margin: 8px 0 4px; }
.plan .price small { font-family: var(--font-body); font-size: 16px; opacity: .75; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; color: var(--accent); }
.plan.pro li::before { color: #D8B565; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.legal h1, .legal h2 { font-family: var(--font-head); }
.lang-switch { display: flex; gap: 12px; margin: 6px 0 24px; font-size: 16px; }

.status-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 4px; background: rgba(216,181,101,.16); color: #D8B565; font-size: 16px; padding: 8px 16px; border-radius: 999px; }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #D8B565; animation: wg-pulse 1.8s infinite; }
@keyframes wg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.app-hero .platforms li { background: rgba(243,231,201,.12); color: #F3E7C9; font-family: var(--font-body); font-weight: 400; }
.pill-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: #E9D9B0; margin-top: 18px; }
.app-hero h1 { font-size: clamp(38px, 6vw, 72px); overflow-wrap: break-word; }

#capturas .wrap { position: relative; }
.gallery-nav { position: absolute; right: 20px; top: 52px; display: flex; gap: 10px; }
.gallery-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #FBF4E2; color: var(--accent); box-shadow: 0 10px 24px -12px rgba(51,37,26,.45); cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.gallery-nav button:hover { transform: scale(1.08); }
.gallery-nav svg { width: 22px; height: 22px; }
@media (max-width: 760px), (hover: none) { .gallery-nav { display: none; } }

@media (max-width: 880px) {
  .app-hero h1 br { display: none; }
  .hero-visual { min-height: 560px; }
  .hero-visual .phone { width: 240px; }
  .hero-visual .mascot { width: 140px; left: 0; }
}

.app-footer { background: #2A1C12; border-top-color: #4a3423; color: #CDB894; }
.app-footer a:hover { color: #F3E7C9; }