/* ============================================================
   Falando de Foto — falandodefoto.com.br
   Paleta: Preto (#0d0d0d) e dourado âmbar (#d4a017)
   Layout: Dark/Editorial — galeria escura com molduras douradas
   Fontes: Nanum Myeongjo (títulos serifados) / Rethink Sans (texto) / Ovo (acentos)
   ============================================================ */

:root {
    --cor-primaria: #0d0d0d;
    --cor-secundaria: #d4a017;
    --cor-fundo: #181818;
    --cor-texto: #eaeaea;
    --cor-fundo-footer: #0d0d0d;
    --cor-texto-footer: #ffffff;
    --cor-borda: #2e2c28;
    --dourado-suave: #e6c25c;
    --fonte-titulo: "Nanum Myeongjo", Georgia, serif;
    --fonte-corpo: "Rethink Sans", "Segoe UI", Arial, sans-serif;
    --fonte-acento: "Ovo", "Nanum Myeongjo", serif;
}

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

body {
    font-family: var(--fonte-corpo);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.75;
}

.container { width: 90%; max-width: 1100px; margin: 0 auto; }

a { color: var(--dourado-suave); }
strong { color: #fff; }

/* ---------- Cabeçalho ---------- */
.site-header {
    background: var(--cor-primaria);
    border-bottom: 1px solid var(--cor-borda);
    padding: .9rem 0;
}
.site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.portal-name { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.aperture {
    color: var(--cor-secundaria);
    font-size: 1.5rem;
    line-height: 1;
}
.portal-words {
    font-family: var(--fonte-titulo);
    color: #f3f0e8;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.portal-words em { color: var(--dourado-suave); font-family: var(--fonte-acento); font-weight: 400; font-style: normal; }
.main-navigation ul { list-style: none; display: flex; gap: 1.2rem; }
.main-navigation a {
    color: #b9b4a8;
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    letter-spacing: .03em;
}
.main-navigation a:hover { color: var(--dourado-suave); }

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(700px 340px at 20% 0%, rgba(212,160,23,.14), transparent 65%),
        linear-gradient(160deg, #0d0d0d 0%, #1b1a17 100%);
    color: #f3f0e8;
    padding: 5rem 0 4.6rem;
    border-bottom: 1px solid var(--cor-borda);
}
.hero-edition {
    font-family: var(--fonte-acento);
    font-size: .92rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dourado-suave);
    margin-bottom: 1.1rem;
}
.hero h1 {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.3;
    max-width: 880px;
    margin-bottom: 1.2rem;
}
.hero-subtitle { font-size: 1.08rem; max-width: 790px; color: #c9c4b8; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.gold-btn, .ghost-btn {
    display: inline-block;
    padding: .78rem 1.8rem;
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .05em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gold-btn { background: var(--cor-secundaria); color: #141208; }
.gold-btn:hover { background: var(--dourado-suave); }
.ghost-btn { border: 1px solid #56524a; color: #e5e0d4; }
.ghost-btn:hover { border-color: var(--dourado-suave); color: var(--dourado-suave); }

/* ---------- Conteúdo ---------- */
.main-content { padding: 3.6rem 0 3rem; }
.content-section { margin-bottom: 3.2rem; }
.content-section > h2 {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    color: #f3f0e8;
    font-size: 1.7rem;
    margin-bottom: 1.2rem;
}
.content-section > h2::before {
    content: "—";
    color: var(--cor-secundaria);
    margin-right: .6rem;
}
.content-section p { margin-bottom: 1.1rem; max-width: 840px; color: #cfcabf; }

/* Trilhas — molduras de galeria */
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.frame-card {
    border: 1px solid var(--cor-borda);
    background: #141311;
    padding: 1.5rem 1.3rem 1.3rem;
    position: relative;
    transition: border-color .2s ease;
}
.frame-card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(212,160,23,.18);
    pointer-events: none;
}
.frame-card:hover { border-color: var(--cor-secundaria); }
.frame-num {
    font-family: var(--fonte-acento);
    color: var(--dourado-suave);
    font-size: .95rem;
    letter-spacing: .18em;
    display: block;
    margin-bottom: .5rem;
}
.frame-card h3 { font-family: var(--fonte-titulo); font-size: 1.15rem; color: #f3f0e8; margin-bottom: .45rem; }
.frame-card p { font-size: .93rem; margin: 0; color: #b5b0a5; }

/* Começando — passos */
.start-steps { list-style: none; counter-reset: cli; max-width: 840px; }
.start-steps li {
    counter-increment: cli;
    padding: 1.05rem 0 1.05rem 3.6rem;
    border-bottom: 1px solid var(--cor-borda);
    position: relative;
    color: #cfcabf;
}
.start-steps li:first-child { border-top: 1px solid var(--cor-borda); }
.start-steps li::before {
    content: counter(cli, decimal-leading-zero);
    position: absolute;
    left: .2rem;
    top: 1.05rem;
    font-family: var(--fonte-acento);
    color: var(--cor-secundaria);
    font-size: 1.35rem;
}
.start-steps strong { display: block; font-family: var(--fonte-titulo); font-size: 1.05rem; margin-bottom: .15rem; }

/* FAQ */
.faq-roll { max-width: 840px; }
.faq-roll details {
    border: 1px solid var(--cor-borda);
    background: #141311;
    margin-bottom: .75rem;
    padding: 1.05rem 1.3rem;
}
.faq-roll summary {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: #e9e4d8;
    cursor: pointer;
}
.faq-roll details[open] { border-color: rgba(212,160,23,.5); }
.faq-roll details[open] summary { color: var(--dourado-suave); margin-bottom: .5rem; }
.faq-roll p { margin: 0; font-size: .96rem; }

/* ---------- Rodapé ---------- */
.site-footer {
    background: var(--cor-fundo-footer);
    color: var(--cor-texto-footer);
    padding: 2.8rem 0 1.4rem;
    border-top: 1px solid var(--cor-borda);
}
.footer-frames { display: grid; grid-template-columns: 1.8fr 1fr 1.4fr; gap: 2rem; margin-bottom: 1.9rem; }
.footer-mark {
    display: block;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--dourado-suave);
    margin-bottom: .55rem;
}
.footer-note-col p { color: #a7a296; font-size: .92rem; max-width: 330px; }
.site-footer h4 {
    font-family: var(--fonte-acento);
    font-size: .82rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cor-secundaria);
    margin-bottom: .75rem;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #c9c4b8; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--dourado-suave); }
.footer-legal {
    border-top: 1px solid var(--cor-borda);
    padding-top: 1.2rem;
    text-align: center;
    font-size: .85rem;
    color: #7d7869;
}