/* ============================================================
   VR Shopping — Main Stylesheet
   Verde e Branco | Modern Portal
   ============================================================ */

:root {
  --primary:        #00A651;
  --primary-dark:   #007A3D;
  --primary-darker: #004D26;
  --primary-light:  #E6F7EE;
  --primary-mid:    #00C661;
  --white:          #FFFFFF;
  --bg:             #F0FBF5;
  --text:           #111827;
  --text-muted:     #6B7280;
  --border:         #D1FAE5;
  --shadow-sm:      0 2px 8px rgba(0,166,81,.12);
  --shadow:         0 4px 24px rgba(0,166,81,.18);
  --shadow-lg:      0 20px 60px rgba(0,0,0,.18);
  --radius:         12px;
  --radius-lg:      20px;
  --radius-pill:    50px;
  --transition:     all .3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: linear-gradient(160deg, var(--primary-darker) 0%, var(--primary-dark) 35%, var(--primary) 75%, #00D968 100%);
  min-height:100vh;
  color:var(--text);
  line-height:1.6;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
img { max-width:100%; display:block; }

/* ── Header ── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(0,60,30,.25);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:0 24px;
}
.nav {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo {
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
}
.logo-img { filter:drop-shadow(0 2px 10px rgba(0,0,0,.3)); }
.logo-text-wrap { display:flex; flex-direction:column; }
.logo-name {
  font-size:20px; font-weight:800; color:#fff;
  letter-spacing:-.4px; line-height:1.1;
}
.logo-tagline {
  font-size:10px; font-weight:500; color:rgba(255,255,255,.65);
  letter-spacing:1.5px; text-transform:uppercase;
}
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-user-badge {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 16px; border-radius:var(--radius-pill);
  color:#fff; font-size:13px; font-weight:500;
}
.btn-nav-login {
  background:#fff; color:var(--primary-darker); border:none;
  padding:10px 24px; border-radius:var(--radius-pill);
  font-size:14px; font-weight:700; cursor:pointer;
  transition:var(--transition);
  box-shadow:0 2px 14px rgba(0,0,0,.15);
}
.btn-nav-login:hover { background:var(--primary-light); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-nav-out {
  background:transparent; color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.35);
  padding:9px 20px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:var(--transition);
}
.btn-nav-out:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

/* ── Hero ── */
.hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:100px 24px 80px;
  position:relative; overflow:hidden;
}
/* subtle grid overlay */
.hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-inner {
  max-width:900px; width:100%;
  text-align:center; color:#fff;
  position:relative;
}
.hero-logo-wrap {
  margin-bottom:36px;
  animation: floatY 3.5s ease-in-out infinite;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.35));
}
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
.hero-title {
  font-size:clamp(36px,6.5vw,76px);
  font-weight:800; line-height:1.05;
  letter-spacing:-1.5px;
  text-shadow:0 2px 24px rgba(0,0,0,.22);
  margin-bottom:22px;
}
.hero-title .hl {
  background:linear-gradient(90deg,#fff 0%,#A8FFCE 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub {
  font-size:18px; line-height:1.75; color:rgba(255,255,255,.82);
  max-width:600px; margin:0 auto 44px;
}

/* CTA */
.hero-cta { margin-bottom:60px; }
.btn-cta {
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; color:var(--primary-darker);
  padding:18px 52px; border-radius:var(--radius-pill);
  font-size:18px; font-weight:800; border:none; cursor:pointer;
  transition:var(--transition);
  box-shadow:0 8px 36px rgba(0,0,0,.22);
}
.btn-cta:hover { transform:translateY(-4px); box-shadow:0 18px 54px rgba(0,0,0,.3); background:var(--primary-light); }
.btn-cta .icon { font-size:22px; }
.hero-cta-note { margin-top:14px; font-size:14px; color:rgba(255,255,255,.68); }
.hero-cta-note a { color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.45); }
.hero-cta-note a:hover { border-color:#fff; }

/* Logged-in welcome */
.welcome-card {
  display:inline-flex; align-items:center; gap:20px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-lg); padding:24px 32px;
  margin-bottom:60px; text-align:left;
  max-width:520px; width:100%;
}
.welcome-icon { font-size:40px; flex-shrink:0; }
.welcome-body h3 { font-size:18px; font-weight:700; color:#fff; }
.welcome-body p { font-size:14px; color:rgba(255,255,255,.78); }
.welcome-body strong { color:#fff; }
.btn-out-main {
  flex-shrink:0; background:transparent; color:#fff;
  border:2px solid rgba(255,255,255,.6); padding:10px 22px;
  border-radius:var(--radius-pill); font-size:13px; font-weight:600;
  cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.btn-out-main:hover { background:#fff; color:var(--primary-darker); border-color:#fff; }

/* Features */
.features {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:16px;
}
.feat-card {
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg); padding:28px 24px;
  transition:var(--transition);
}
.feat-card:hover { background:rgba(255,255,255,.17); transform:translateY(-5px); }
.feat-icon { font-size:38px; margin-bottom:12px; }
.feat-card h3 { font-size:17px; font-weight:700; color:#fff; margin-bottom:7px; }
.feat-card p  { font-size:13px; color:rgba(255,255,255,.72); line-height:1.65; }

/* ── SEO Section ── */
.seo-sec {
  background:#fff; padding:70px 24px;
}
.seo-inner {
  max-width:840px; margin:0 auto; text-align:center;
}
.seo-inner h2 {
  font-size:32px; font-weight:800; color:var(--primary-darker);
  margin-bottom:18px; letter-spacing:-.5px;
}
.seo-inner p {
  font-size:16px; line-height:1.85; color:var(--text-muted);
  margin-bottom:30px;
}
.seo-inner p strong { color:var(--primary-dark); }
.seo-kw {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.seo-kw span {
  background:var(--primary-light); color:var(--primary-dark);
  border:1px solid var(--border); padding:8px 20px;
  border-radius:var(--radius-pill); font-size:13px; font-weight:600;
}

/* ── Footer ── */
.footer {
  background:var(--primary-darker); padding:36px 24px;
}
.footer-inner {
  max-width:1200px; margin:0 auto; text-align:center;
  color:rgba(255,255,255,.72);
}
.footer-logo {
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-bottom:12px; color:#fff; font-size:17px; font-weight:700;
}
.footer-inner p { font-size:13px; line-height:1.8; }
.footer-inner strong { color:rgba(255,255,255,.9); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; transition:var(--transition);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:#fff; border-radius:var(--radius-lg);
  width:100%; max-width:450px; position:relative;
  box-shadow:var(--shadow-lg);
  transform:scale(.92) translateY(24px); transition:var(--transition);
  max-height:92vh; overflow-y:auto;
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-close {
  position:absolute; top:14px; right:14px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.20); border:none; cursor:pointer;
  font-size:16px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.modal-close:hover { background:rgba(255,255,255,.35); }
.modal-head {
  background:linear-gradient(135deg, var(--primary-darker), var(--primary));
  padding:32px 32px 24px; text-align:center; color:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-head-logo { margin-bottom:12px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.25)); }
.modal-head h2 { font-size:22px; font-weight:800; margin-bottom:5px; }
.modal-head p  { font-size:13px; color:rgba(255,255,255,.78); }

/* Tabs */
.modal-tabs {
  display:flex; border-bottom:2px solid #F3F4F6; padding:0 40px;
}
.m-tab {
  flex:1; background:none; border:none; cursor:pointer;
  padding:15px 0; font-size:14px; font-weight:600;
  color:var(--text-muted); position:relative; transition:var(--transition);
}
.m-tab.active { color:var(--primary); }
.m-tab.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--primary); border-radius:2px;
}

/* Tab content */
.m-tab-content { display:none; padding:24px 40px 36px; }
.m-tab-content.active { display:block; }

/* Form direto dentro do modal (sem tabs) */
.modal > form { padding:24px 40px 36px; }

/* Forms */
.fgroup { margin-bottom:18px; }
.fgroup label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.fgroup input {
  width:100%; padding:12px 16px;
  border:2px solid #E5E7EB; border-radius:var(--radius);
  font-size:14px; background:#F9FAFB; outline:none;
  transition:var(--transition); font-family:inherit;
}
.fgroup input:focus {
  border-color:var(--primary); background:#fff;
  box-shadow:0 0 0 4px rgba(0,166,81,.10);
}
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:50px; }
.pw-toggle {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); line-height:1;
  padding:0; display:flex; align-items:center; justify-content:center;
  transition:color .2s;
}
.pw-toggle:hover { color:var(--primary); }
.pw-icon { display:block; width:20px; height:20px; flex-shrink:0; }
.fopts {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; flex-wrap:wrap; gap:8px;
}
.chk-label { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-muted); cursor:pointer; }
.forgot { font-size:13px; color:var(--primary); font-weight:500; }
.forgot:hover { text-decoration:underline; }
.ferr {
  background:#FEE2E2; border:1px solid #FECACA; color:#B91C1C;
  padding:10px 14px; border-radius:var(--radius); font-size:13px;
  margin-bottom:16px; display:none;
}
.fsuc {
  background:var(--primary-light); border:1px solid var(--border); color:var(--primary-darker);
  padding:10px 14px; border-radius:var(--radius); font-size:13px;
  margin-bottom:16px; display:none;
}
.btn-submit {
  width:100%; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; border:none; padding:15px; border-radius:var(--radius);
  font-size:15px; font-weight:700; cursor:pointer; transition:var(--transition);
  font-family:inherit; position:relative; overflow:hidden;
  margin-top:8px;
}
.btn-submit:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,166,81,.38); }
.btn-submit:disabled { opacity:.65; cursor:not-allowed; }

/* Spinner */
.spin {
  display:inline-block; width:15px; height:15px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:spinning .75s linear infinite;
  vertical-align:middle; margin-right:7px;
}
@keyframes spinning { to { transform:rotate(360deg); } }

/* ── Modal Esqueci a Senha ── */
.modal-forgot {
  max-width: 380px;
  border-radius: var(--radius-lg);
  overflow: visible;
}
.forgot-body {
  padding: 36px 32px 32px;
}
.forgot-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -.3px;
}

/* Input com ícone */
.fgroup-icon { position: relative; }
.finput-icon {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #9CA3AF;
  pointer-events: none;
  border-right: 1px solid #E5E7EB;
  background: #F3F4F6;
  border-radius: var(--radius) 0 0 var(--radius);
}
.fgroup-icon input {
  padding-left: 56px;
  background: #F9FAFB;
}
.fgroup-icon input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,166,81,.10);
}

/* Ações do modal forgot */
.forgot-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}
.btn-buscar {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary);
  color: #fff; border: none;
  padding: 12px 24px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 800; cursor: pointer;
  letter-spacing: .5px;
  transition: var(--transition);
  font-family: inherit;
}
.btn-buscar:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,166,81,.35);
}
.btn-buscar:disabled { opacity: .65; cursor: not-allowed; }
.back-login {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--primary); font-weight: 500;
  transition: var(--transition);
}
.back-login:hover { text-decoration: underline; }

/* ── Gradient text: fallback de cor para browsers sem suporte ── */
.hero-title .hl { color: #fff; }

/* ── Focus visível global (acessibilidade teclado) ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.modal-close:focus-visible,
.pw-toggle:focus-visible { outline-offset: 2px; }

/* ── Alvos de toque mínimos (44×44 px) ── */
.pw-toggle {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  right: 0;
}
.modal-close { width: 40px; height: 40px; }
.forgot { padding: 6px 4px; }

/* ── backdrop-filter: prefixo webkit nos elementos faltantes ── */
.modal-overlay {
  -webkit-backdrop-filter: blur(10px);
}
.feat-card, .welcome-card {
  -webkit-backdrop-filter: blur(20px);
}
@supports not (backdrop-filter: blur(1px)) {
  .feat-card    { background: rgba(0, 70, 40, .60); }
  .welcome-card { background: rgba(0, 70, 40, .55); }
}

/* ── Modal: scroll momentum no iOS ── */
.modal { -webkit-overflow-scrolling: touch; }

/* ── Animação: respeitar prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap { animation: none; }
}

/* ── Responsive ── */

/* Tablet landscape / notebook pequeno */
@media (max-width:1024px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* 768px — smartphones e tablets retrato */
@media (max-width:768px) {
  .features { grid-template-columns:1fr; }
  .logo-text-wrap { display:none; }
  .hero-title { letter-spacing:-.5px; }
  .welcome-card { flex-direction:column; text-align:center; gap:14px; }
}

/* 640px — smartphones médios / tablets pequenos */
@media (max-width:640px) {
  .nav { height: 64px; }
  .hero { padding: 90px 20px 60px; }
  .nav-user-badge {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .welcome-card { padding: 18px 20px; }
  .hero-sub { font-size: 16px; }
}

/* 480px — smartphones pequenos */
@media (max-width:480px) {
  .modal-head, .m-tab-content { padding-left:20px; padding-right:20px; }
  .modal-tabs  { padding:0 20px; }
  /* form direto no modal (login) — correção do padding esquecido */
  .modal > form  { padding-left:20px; padding-right:20px; }
  /* modal esqueci a senha */
  .forgot-body   { padding:24px 20px 20px; }
  .forgot-actions { gap:12px; }
  /* botão CTA hero */
  .btn-cta { padding:16px 36px; font-size:16px; }
  /* nav compacto em mobile */
  .nav-user-badge { max-width:100px; padding:6px 10px; font-size:12px; }
  .btn-nav-out    { padding:7px 14px; font-size:12px; }
  .btn-nav-login  { padding:9px 18px; font-size:13px; }
}

/* ── Header: safe-area para notch / Dynamic Island (iOS) ── */
.header {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ══════════════════════════════════════════
   HERO SUBTITLE (SEO tagline visível)
══════════════════════════════════════════ */
.hero-subtitle {
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: center;
}

/* ══════════════════════════════════════════
   SEÇÃO DE FEATURES / PROPOSTA DE VALOR
══════════════════════════════════════════ */
.features-section {
  background: #F8FAF9;
  padding: 72px 24px 80px;
}

.features-inner {
  max-width: 900px;
  margin: 0 auto;
}

.features-title {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  text-align: center;
  margin-bottom: 16px;
}

.features-desc {
  font-size: 16px;
  color: #4B5563;
  text-align: center;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 52px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  transition: box-shadow .25s, transform .25s;
}

.feature-card:hover {
  box-shadow: 0 8px 32px rgba(0,166,81,.12);
  transform: translateY(-3px);
}

.feature-icon {
  font-size: 38px;
  margin-bottom: 16px;
  display: block;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .features-section { padding: 48px 20px 56px; }
  .features-title { font-size: 22px; }
  .features-desc { font-size: 15px; }
  .hero-subtitle { font-size: 15px; }
}