@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
@import 'variables.css';

:root {
  --promo-h: 28px;
  --nav-h: 70px;
}

/* ── Promo Bar ── */
.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--promo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mid);
  color: rgba(255,255,255,.82);
  font-size: 0.65rem;
  z-index: 9999;
}

.promo-bar-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.promo-bar strong {
  color: #e64be7;
}

/* Compensação do topo (evita sobreposição) */
body {
  padding-top: calc(var(--promo-h) + var(--nav-h));
}

body.menu-open{
  overflow: hidden;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--cream);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 2rem}

/* ── Tipografia ── */
.serif{font-family:var(--font-display)}
.section-label{display:inline-block;font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--p);margin-bottom:0.8rem}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.12;color:var(--mid)}
.section-title em{font-style:italic;color:var(--p)}

/* ── Botões ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 32px;border-radius:var(--r-pill);font-size:0.82rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;border:none;transition:all var(--t) var(--ease)}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover{background:var(--p-dark);transform:translateY(-2px);box-shadow:0 10px 28px rgba(158,90,81,0.28)}
.btn-outline{background:transparent;color:var(--p);border:1.5px solid var(--p)}
.btn-outline:hover{background:var(--p);color:#fff}
.btn-dark{background:var(--mid);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.3)}
.btn-ghost:hover{background:rgba(255,255,255,0.18)}
.btn:disabled{opacity:0.55;cursor:not-allowed;transform:none!important}


/* ── Nav ── */
.site-nav {
  position: fixed;
  top: var(--promo-h); /* 🔥 CORREÇÃO AQUI */
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t), box-shadow var(--t);
}
.site-nav.scrolled{background:rgba(250,248,245,0.96);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border)}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:0.06em;color:#fff;transition:color var(--t)}
.site-nav.scrolled .nav-logo{color:var(--mid)}
.nav-logo em{font-style:italic;color:var(--p-light)}
.site-nav.scrolled .nav-logo em{color:var(--p)}
.nav-links{display:flex;align-items:center;gap:2rem}

.nav-links a{font-size:0.8rem;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:#9E5A51;transition:color var(--t);position:relative}

.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--p-light);transform:scaleX(0);transition:transform var(--t);transform-origin:left}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.site-nav.scrolled .nav-links a{color:var(--muted)}
.site-nav.scrolled .nav-links a:hover{color:var(--p)}
.site-nav.scrolled .nav-links a::after{background:var(--p)}
.nav-cta-btn{background:var(--p)!important;color:#fff!important;padding:9px 22px;border-radius:var(--r-pill);font-size:0.78rem!important;letter-spacing:0.1em!important}
.nav-cta-btn::after{display:none!important}
.nav-cta-btn:hover{background:var(--p-dark)!important}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background-color: #f3f0ef;;border:none;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:#000000;transition:var(--t)}
.site-nav.scrolled .nav-hamburger span{background:var(--mid)}

/* ── Forms globais ── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:1rem}
.field label{font-size:0.75rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted)}
.field label .opt{font-weight:400;text-transform:none;color:var(--muted);opacity:0.7}
.input-wrap{position:relative}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:0.88rem;color:var(--muted);pointer-events:none;transition:color var(--t)}
.input-wrap:focus-within .input-icon{color:var(--p)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],textarea,select{width:100%;padding:13px 13px 13px 40px;border:1.5px solid var(--border);border-radius:var(--r);background:#fff;font-family:var(--font-body);font-size:0.9rem;color:var(--text);outline:none;transition:border-color var(--t),box-shadow var(--t);appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(201,132,122,0.12)}
input.error{border-color:var(--error)}
.field-error{font-size:0.73rem;color:var(--error);min-height:14px}
.field-hint{font-size:0.73rem;color:var(--muted);min-height:14px}

/* ── Alerts ── */
.alert{padding:12px 16px;border-radius:var(--r);font-size:0.85rem;display:none;align-items:center;gap:8px;margin-bottom:1rem}
.alert.show{display:flex}
.alert-error{background:#FDF0EF;color:var(--error);border:1px solid rgba(192,57,43,0.18)}
.alert-success{background:#EAF7F2;color:var(--success);border:1px solid rgba(29,158,117,0.18)}
.alert-warning{background:#FFF8EC;color:#7B4D00;border:1px solid rgba(239,159,39,0.25)}

/* ── Spinner ── */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.loading .btn-label{display:none}
.loading .spinner{display:block}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s var(--ease),transform 0.65s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Footer ── */
.site-footer{background:#0F0A09;padding:4.5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3.5rem}
.footer-brand-name{font-family:var(--font-display);font-size:1.7rem;font-weight:400;color:#fff;margin-bottom:0.8rem}
.footer-tagline{font-size:0.84rem;color:rgba(255,255,255,0.35);line-height:1.85;margin-bottom:1.6rem}
.footer-social{display:flex;gap:8px}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:rgba(255,255,255,0.4);transition:var(--t)}
.footer-social a:hover{border-color:var(--p);color:var(--p-light)}
.footer-col h4{font-size:0.7rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:1.2rem}
.footer-col ul li{margin-bottom:0.65rem}
.footer-col ul li a{font-size:0.85rem;color:rgba(255,255,255,0.32);transition:color var(--t)}
.footer-col ul li a:hover{color:var(--p-light)}
.footer-contact-item{display:flex;gap:9px;margin-bottom:0.8rem;font-size:0.83rem;color:rgba(255,255,255,0.32)}
.footer-contact-icon{color:var(--p);flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:1.8rem;display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:0.75rem;color:rgba(255,255,255,0.2)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:0.75rem;color:rgba(255,255,255,0.2);transition:color var(--t)}
.footer-bottom-links a:hover{color:var(--p-light)}

/* ── Ribbon ── */
.ribbon{background:var(--p);overflow:hidden;padding:9px 0}
.ribbon-track{display:flex;gap:2.5rem;white-space:nowrap;animation:ribbonScroll 24s linear infinite}
.ribbon-track span{font-size:0.72rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.85);flex-shrink:0}
.ribbon-dot{color:rgba(255,255,255,0.4);letter-spacing:0}
@keyframes ribbonScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Modal global ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,10,8,0.6);backdrop-filter:blur(6px);z-index:300;display:none;align-items:center;justify-content:center;padding:1rem;animation:fadeIn 0.22s ease}
.modal-backdrop.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--cream);border-radius:var(--r-lg);padding:2.2rem 2rem;width:100%;max-width:420px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.18);animation:slideUp 0.28s var(--ease)}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:14px;right:14px;background:var(--beige);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--muted);transition:var(--t)}
.modal-close:hover{background:var(--border);color:var(--p)}

/* ── Navbar pública — estilos extras ────────── */
.nav-active { color: var(--p) !important; }
.nav-active::after { transform: scaleX(1) !important; }

.nav-user-link {
  display: flex !important;
  align-items: center;
  gap: 7px;
}

.nav-avatar-mini {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-light), var(--p));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #fff; font-weight: 500;
  flex-shrink: 0;
}

.nav-logout-link {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all var(--t) !important;
}
.nav-logout-link:hover {
  color: var(--error) !important;
  border-color: var(--error) !important;
}
.nav-logout-link::after { display: none !important; }

/* Compatibilidade com classe antiga btn-login */

.btn-login {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all var(--t) !important;
}
.btn-login:hover {
  border-color: var(--p) !important;
  color: var(--p) !important;
}
.btn-login::after { display: none !important; }

/*Icones Fontawesome*/

.fa-instagram {
  font-size: 24px;
  color: #E4405F; /* cor oficial do Instagram */
}

.fa-whatsapp {
  font-size: 24px;
  color: #25D366; /* cor oficial do WhatsApp */
}

.fa-tiktok {
  font-size: 24px;
  color: #69C9D0; /* cor oficial do TikTok */
}

.fa-phone {
  font-size: 16px;
  color: var(--p); /* cor do tema para o ícone de telefone */
}

.fa-location-dot {
  font-size: 16px;
  color: var(--p); /* cor do tema para o ícone de localização */
}

.fa-clock {
  font-size: 16px;
  color: var(--p); /* cor do tema para o ícone de horário */
}

.nav-logo {
  display: flex;              /* coloca imagem e texto lado a lado */
  align-items: center;        /* alinha verticalmente */
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
  transition: color var(--t);
}

.site-nav.scrolled .nav-logo {
  color: var(--mid);
}

.nav-logo em {
  font-style: italic;
  color: var(--p-light);
}

.site-nav.scrolled .nav-logo em {
  color: var(--p);
}

/* nova regra para a imagem */
.nav-logo-img {
  height: 32px;      /* controla altura da imagem */
  width: auto;       /* mantém proporção */
  margin-right: 8px; /* espaço entre imagem e texto */
}
/* ── MOBILE NAV FIX ── */
@media (max-width: 768px){

  .nav-links{
    position: fixed;
    top: var(--nav-h);
    right: -100%;
    width: 100%;
    height: calc(100vh - var(--nav-h));
    background: rgba(13,6,8,0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transition: right 0.3s ease;
    z-index: 200;
  }

  .nav-links.active{
    right: 0;
  }

  .nav-links a{
    font-size: 0.9rem;
    color: #fff !important;
  }

  .nav-hamburger{
    display: flex;
    z-index: 300;
  }

  /* quando navbar estiver scrollada */
  .site-nav.scrolled .nav-links{
    background: rgba(250,248,245,0.98);
  }

  .site-nav.scrolled .nav-links a{
    color: var(--mid) !important;
  }

}