/* Agência Venone — Marketing Digital, Branding e Publicidade Editorial */
/* Editorial escuro: preto profundo, dourado clássico, serifadas */
/* Fontes: Cormorant Garamond (display), EB Garamond (texto), Italiana (labels) */

:root {
    --bg: #0B0B0D;
    --surface: #16161A;
    --gold: #D4AF37;
    --gold-dark: #A67C00;
    --cream: #F5EFE0;
    --muted: #B3AC9C;
    --line: rgba(212, 175, 55, 0.30);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'EB Garamond', Georgia, serif;
    background: var(--bg);
    color: var(--cream);
    line-height: 1.85;
    font-size: 1.05rem;
}

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.2; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Header ---------- */
.main-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(11, 11, 13, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.navbar {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.5rem;
}
.logo {
    font-family: 'Italiana', 'Cormorant Garamond', serif;
    font-size: 1.5rem; letter-spacing: 0.22em;
    color: var(--cream); text-decoration: none; text-transform: uppercase;
}
.logo span { color: var(--gold); }
.nav-menu { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.nav-menu a {
    color: var(--muted); text-decoration: none; font-size: 0.98rem;
    letter-spacing: 0.05em; transition: color 0.3s ease;
}
.nav-menu a:hover { color: var(--gold); }
.nav-cta { border: 1px solid var(--gold); color: var(--gold) !important; padding: 0.45rem 1.1rem; }
.nav-cta:hover { background: var(--gold); color: var(--bg) !important; }
.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.mobile-toggle span { width: 26px; height: 2px; background: var(--gold); }

/* ---------- Hero ---------- */
.hero {
    max-width: 1180px; margin: 0 auto;
    padding: 9rem 1.5rem 4rem;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center;
}
.hero-edition {
    font-family: 'Italiana', serif; font-size: 0.82rem;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
    border-bottom: 1px solid var(--line); display: inline-block;
    padding-bottom: 0.5rem; margin-bottom: 1.6rem;
}
.hero h1 { font-size: 3rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero-deck { color: var(--muted); font-size: 1.12rem; margin: 1.6rem 0 2.4rem; max-width: 36rem; }
.hero-actions { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.btn {
    display: inline-block; padding: 0.8rem 2rem; text-decoration: none;
    font-family: 'Italiana', serif; letter-spacing: 0.18em; text-transform: uppercase;
    font-size: 0.82rem; transition: all 0.35s ease;
}
.btn-gold { background: var(--gold); color: var(--bg); border: 1px solid var(--gold); }
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn-line { border: 1px solid var(--line); color: var(--cream); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.hero-figure img { border: 1px solid var(--line); box-shadow: 24px 24px 0 -8px rgba(212, 175, 55, 0.14); }

/* ---------- Capítulos ---------- */
.chapter { max-width: 1080px; margin: 0 auto; padding: 4.5rem 1.5rem; }
.chapter-alt {
    max-width: none; background: var(--surface);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.chapter-alt .chapter-inner, .chapter-alt .services-list,
.chapter-alt .accordion, .chapter-alt .chapter-head { max-width: 1080px; margin-left: auto; margin-right: auto; }
.chapter-num {
    font-family: 'Italiana', serif; font-size: 0.82rem; color: var(--gold);
    letter-spacing: 0.32em; text-transform: uppercase; display: block; margin-bottom: 0.7rem;
}
.chapter h2 { font-size: 2.3rem; margin-bottom: 2.4rem; }
.chapter-head { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; }

.two-col { column-count: 2; column-gap: 3.5rem; }
.two-col p { margin-bottom: 1.25rem; color: var(--muted); }
.drop-cap::first-letter {
    font-family: 'Cormorant Garamond', serif; font-size: 4.6rem;
    color: var(--gold); float: left; line-height: 0.78;
    padding: 0.1rem 0.6rem 0 0;
}

/* ---------- Serviços ---------- */
.services-list { padding: 0 1.5rem; }
.service-row {
    display: grid; grid-template-columns: 90px 1fr; gap: 1.8rem;
    padding: 1.9rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.service-row:last-child { border-bottom: 0; }
.service-roman {
    font-family: 'Cormorant Garamond', serif; font-size: 2.4rem;
    color: var(--gold); line-height: 1;
}
.service-row h3 { font-size: 1.35rem; margin-bottom: 0.45rem; }
.service-row p { color: var(--muted); }

/* ---------- Portfólio ---------- */
.portfolio-grid {
    max-width: 1080px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem;
}
.portfolio-item img {
    border: 1px solid var(--line);
    transition: transform 0.5s ease, filter 0.5s ease;
}
.portfolio-item:hover img { transform: scale(1.025); filter: brightness(1.12); }
.portfolio-item figcaption { padding-top: 0.9rem; }
.portfolio-item strong {
    font-family: 'Cormorant Garamond', serif; font-size: 1.25rem;
    color: var(--gold); display: block;
}
.portfolio-item span { color: var(--muted); font-size: 0.95rem; }

/* ---------- Acordeão editorial ---------- */
.accordion { padding: 0 1.5rem; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary {
    cursor: pointer; list-style: none;
    font-family: 'Cormorant Garamond', serif; font-size: 1.3rem;
    padding: 1.3rem 0; color: var(--cream);
    display: flex; justify-content: space-between; align-items: center;
    transition: color 0.3s ease;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after {
    content: '+'; font-family: 'Italiana', serif; color: var(--gold); font-size: 1.4rem;
}
.acc-item[open] summary::after { content: '−'; }
.acc-item summary:hover { color: var(--gold); }
.acc-body { padding: 0 0 1.4rem; }
.acc-body p { color: var(--muted); }

/* ---------- Citação rotativa ---------- */
.quote-box {
    max-width: 780px; margin: 3.5rem auto 0; padding: 0 1.5rem; text-align: center;
}
.quote-box blockquote {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.7rem; color: var(--cream); min-height: 3.4em;
    transition: opacity 0.6s ease;
}
.quote-box blockquote.fading { opacity: 0; }
.quote-box figcaption {
    font-family: 'Italiana', serif; font-size: 0.85rem;
    letter-spacing: 0.25em; color: var(--gold); margin-top: 1.1rem;
}

/* ---------- Depoimentos ---------- */
.testimonials-grid {
    max-width: 1080px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem;
}
.testimonial blockquote {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1.18rem; line-height: 1.6; color: var(--cream);
    border-top: 1px solid var(--line); padding-top: 1.2rem; margin-bottom: 1.5rem;
}
.testimonial figcaption { display: flex; gap: 1rem; align-items: center; }
.testimonial figcaption img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    filter: sepia(0.35); border: 1px solid var(--line);
}
.testimonial strong { display: block; font-size: 0.98rem; }
.testimonial span { color: var(--muted); font-size: 0.86rem; }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; padding: 6rem 1.5rem; background: var(--surface); border-top: 1px solid var(--line); }
.cta-final h2 { font-size: 2.2rem; margin-bottom: 1.2rem; }
.cta-final p { color: var(--muted); max-width: 600px; margin: 0 auto 2.2rem; }

/* ---------- Autoridade ---------- */
.authority { text-align: center; padding: 3.5rem 1.5rem; }
.authority h3 {
    font-family: 'Italiana', serif; font-size: 0.85rem; font-weight: 400;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 1.3rem;
}
.authority-links { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.authority-links a {
    color: var(--muted); text-decoration: none; font-size: 0.92rem;
    border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease;
}
.authority-links a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Footer ---------- */
.main-footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer-grid {
    max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem 2rem;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem;
}
.footer-brand .logo { font-size: 1.3rem; }
.footer-brand p { color: var(--muted); font-size: 0.95rem; margin-top: 0.8rem; }
.footer-links, .footer-authority { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a, .footer-authority a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.footer-links a:hover, .footer-authority a:hover { color: var(--gold); }
.footer-bottom { text-align: center; color: var(--muted); font-size: 0.88rem; padding: 1.4rem; border-top: 1px solid var(--line); }

/* ---------- WhatsApp ---------- */
.whatsapp-float {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1100;
    background: #0B0B0D; color: var(--gold); text-decoration: none;
    font-family: 'Italiana', serif; letter-spacing: 0.12em;
    font-size: 0.8rem; padding: 0.85rem 1.3rem;
    border: 1px solid var(--gold);
    transition: background 0.3s ease, color 0.3s ease;
}
.whatsapp-float:hover { background: var(--gold); color: var(--bg); }

/* ---------- Hooks de JS (main.js / components.js) ---------- */
.reading-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    z-index: 1200;
}
.chapter-head { position: relative; }
.chapter-head::after {
    content: ''; position: absolute; left: 0; bottom: -1px; height: 1px;
    width: 0; background: var(--gold); transition: width 1.2s ease;
}
.chapter-head.lit::after { width: 100%; }
.drop-cap { transition: color 1s ease; }
.drop-cap.inked::first-letter { color: var(--cream); }