/* =====================================================================
   Lucas Bassetti Fotografia — styles.css
   Direção: "Galeria escura / cinema" — letterbox, filmstrip, legendas
   de crédito. Paleta da spec com preto dominante; fontes mantidas:
   Della Respira (display) · Monda (texto) · Meddon (assinaturas).
   Sem queries de mídia neste arquivo (breakpoints em responsive.css).
   ===================================================================== */

:root {
    --preto: #0D0D0D;
    --dourado: #D4AF5A;
    --cinza: #8C8C8C;
    --off: #FAFAF7;
    --verde: #26302E;

    --fonte-display: "Della Respira", serif;
    --fonte-corpo: "Monda", sans-serif;
    --fonte-assinatura: "Meddon", cursive;

    --regra: 1px solid rgba(212, 175, 90, 0.28);
    --regra-fraca: 1px solid rgba(250, 250, 247, 0.12);
    --sombra: 0 30px 60px rgba(0, 0, 0, 0.55);
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--preto);
    color: var(--off);
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--dourado); color: var(--preto); }

img { display: block; max-width: 100%; height: auto; }

a { color: var(--dourado); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 3px;
}

.container {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container.narrow { max-width: 860px; }

h1, h2 {
    font-family: var(--fonte-display);
    font-weight: 400;
    letter-spacing: 0.045em;
    line-height: 1.12;
    color: var(--off);
}

h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.1rem; }

h3 { font-weight: 700; letter-spacing: 0.02em; }

section { padding-block: clamp(4rem, 9vw, 7rem); }

.eyebrow {
    font-family: var(--fonte-assinatura);
    font-size: 1.05rem;
    color: var(--dourado);
    margin-bottom: 0.9rem;
}

.section-intro {
    color: var(--cinza);
    max-width: 62ch;
    margin-bottom: 2.6rem;
}

/* ---- Reveal on scroll (classes adicionadas por components.js) ---- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* =====================================================================
   HEADER — barra translúcida, marca central, quase invisível
   ===================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    background: rgba(13, 13, 13, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease;
}

.site-header.is-scrolled {
    background: rgba(13, 13, 13, 0.88);
    border-bottom-color: var(--regra);
}

.header-inner {
    max-width: 1240px;
    margin-inline: auto;
    padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.brand {
    grid-column: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    color: var(--off);
}

.brand:hover { text-decoration: none; }

.brand-mark {
    font-family: var(--fonte-assinatura);
    font-size: 1.15rem;
    color: var(--dourado);
    border: 1px solid var(--regra);
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.brand-name {
    font-family: var(--fonte-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.82rem;
    white-space: nowrap;
}

.brand-name em {
    font-style: normal;
    color: var(--cinza);
}

.nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: clamp(1rem, 2.2vw, 1.9rem);
}

.nav a {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cinza);
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.nav a:hover {
    color: var(--dourado);
    text-decoration: none;
    border-bottom-color: var(--dourado);
}

.menu-toggle {
    grid-column: 1;
    grid-row: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.6rem;
    height: 2.6rem;
    background: none;
    border: 1px solid var(--regra);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    align-self: center;
}

.menu-toggle span {
    display: block;
    width: 1rem;
    height: 1px;
    background: var(--off);
    margin-inline: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   HERO — tela de cinema com letterbox
   ===================================================================== */
.hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: #000;
}

.hero-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.55rem clamp(1.25rem, 4vw, 3rem);
    background: #000;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cinza);
    flex: none;
}

.film-counter { color: var(--dourado); }

.hero-screen {
    position: relative;
    flex: 1;
    min-height: 62vh;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.04);
}

.hero-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13, 13, 13, 0.62) 0%, rgba(13, 13, 13, 0.08) 34%, rgba(13, 13, 13, 0.88) 100%);
}

.hero-copy {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 5rem) clamp(2.2rem, 5vw, 3.6rem);
    max-width: 780px;
}

.hero-copy h1 {
    font-size: clamp(2.4rem, 6.2vw, 4.6rem);
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero-copy .lead {
    color: rgba(250, 250, 247, 0.86);
    max-width: 56ch;
    font-size: 1.02rem;
}

.hero-bar-bottom { flex-wrap: wrap; row-gap: 0.5rem; }

.hero-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cinza);
}

.hero-badges li { position: relative; }

.hero-badges li + li::before {
    content: "·";
    position: absolute;
    left: -1.05rem;
    color: var(--dourado);
}

/* CTA como crédito fotográfico — sem botão no canto */
.hero-credit {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    color: var(--off);
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-credit:hover { text-decoration: none; color: var(--dourado); }

.credit-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dourado));
    transition: width 0.35s ease;
}

.hero-credit:hover .credit-line { width: 130%; }

/* =====================================================================
   GALERIA — filmstrip horizontal com perfurações
   ===================================================================== */
.gallery { background: var(--preto); }

.gallery .container { margin-bottom: 3rem; }

.strip {
    position: relative;
    background: var(--verde);
    padding: 3.4rem clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
    border-block: var(--regra-fraca);
}

/* perfurações do rolo de filme */
.strip::before,
.strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(13, 13, 13, 0.85) 0 12px,
        transparent 12px 30px
    );
    background-size: auto 8px;
    background-repeat: repeat-x;
    background-position: center;
}

.strip::before { top: 14px; }
.strip::after { bottom: 14px; }

.frame {
    position: relative;
    width: min(340px, 82vw);
    background: rgba(13, 13, 13, 0.35);
    border: var(--regra-fraca);
    cursor: zoom-in;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.frame:hover {
    border-color: var(--dourado);
    transform: translateY(-4px);
}

.frame-number {
    display: block;
    padding: 0.7rem 0.9rem 0.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dourado);
}

.frame img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: saturate(0.95);
}

.frame figcaption {
    padding: 1rem 0.9rem 1.3rem;
}

.frame figcaption strong {
    font-family: var(--fonte-display);
    font-weight: 400;
    letter-spacing: 0.08em;
    font-size: 1.12rem;
    display: block;
    margin-bottom: 0.45rem;
}

.frame figcaption p {
    color: var(--cinza);
    font-size: 0.86rem;
    margin-bottom: 0.7rem;
}

.frame figcaption ul {
    list-style: none;
    border-top: var(--regra-fraca);
    padding-top: 0.7rem;
}

.frame figcaption li {
    font-size: 0.78rem;
    color: rgba(250, 250, 247, 0.75);
    padding-left: 1rem;
    position: relative;
}

.frame figcaption li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    background: var(--dourado);
}

/* =====================================================================
   SOBRE — página de programa impressa (seção clara)
   ===================================================================== */
.about { background: var(--off); color: var(--preto); }

.about .eyebrow { color: var(--verde); }

.about h2 { color: var(--preto); }

.about-grid {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.about-photo { position: relative; padding: 1.4rem; }

.about-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(0.18) contrast(1.05);
}

/* marcas de registro de corte nos cantos */
.about-photo::before,
.about-photo::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: var(--verde);
    border-style: solid;
}

.about-photo::before {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px;
}

.about-photo::after {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0;
}

.about-meta {
    position: absolute;
    bottom: -0.4rem;
    right: 1.6rem;
    background: var(--off);
    padding: 0.15rem 0.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--verde);
}

.about-copy p { margin-bottom: 1.15rem; max-width: 66ch; }

.about-copy a { color: var(--verde); text-decoration: underline; text-underline-offset: 4px; }

.about-copy p:first-of-type::first-letter {
    font-family: var(--fonte-display);
    font-size: 3.2em;
    float: left;
    line-height: 0.82;
    padding: 0.08em 0.16em 0 0;
    color: var(--verde);
}

/* =====================================================================
   A LUZ — prova de contato em faixa verde
   ===================================================================== */
.light { background: var(--verde); }

.light-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    margin-bottom: 2.8rem;
}

.light-photo {
    border: var(--regra-fraca);
    padding: 0.7rem;
    background: rgba(13, 13, 13, 0.3);
    cursor: zoom-in;
    transition: border-color 0.3s ease;
}

.light-photo:hover { border-color: var(--dourado); }

.light-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.light-photo figcaption {
    padding-top: 0.65rem;
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--dourado);
}

.light-text {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    color: rgba(250, 250, 247, 0.88);
}

.light-text p { margin-bottom: 1.15rem; break-inside: avoid; }

.light-text strong {
    color: var(--dourado);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* =====================================================================
   SESSÕES — tabs como letreiro de cinéma
   ===================================================================== */
.sessions { background: var(--preto); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2.2rem;
    border-bottom: var(--regra-fraca);
    margin-bottom: 2.6rem;
}

.tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cinza);
    padding: 0.9rem 0;
    position: relative;
    transition: color 0.25s ease;
}

.tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 1px;
    background: var(--dourado);
    transition: right 0.35s ease;
}

.tab:hover { color: var(--off); }

.tab.is-active { color: var(--dourado); }

.tab.is-active::after { right: 0; }

.tab-panel {
    border-left: 2px solid var(--dourado);
    padding-left: clamp(1.2rem, 3vw, 2.2rem);
    max-width: 78ch;
}

.tab-panel h3 {
    font-family: var(--fonte-assinatura);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--dourado);
    margin-bottom: 0.8rem;
}

.tab-panel p { color: rgba(250, 250, 247, 0.86); }

/* =====================================================================
   DEPOIMENTOS — sala de exposição com passe-partout
   ===================================================================== */
.testimonials {
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212, 175, 90, 0.07), transparent),
        var(--preto);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: stretch;
}

.testimonial {
    background: var(--off);
    color: var(--preto);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    outline: var(--regra);
    outline-offset: -8px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.testimonial blockquote p {
    font-family: var(--fonte-assinatura);
    font-size: 1.12rem;
    line-height: 1.9;
    color: #1c1c1a;
}

.testimonial figcaption {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-top: 1px solid rgba(38, 48, 46, 0.25);
    padding-top: 1rem;
}

.testimonial img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(0.35);
    border: 1px solid rgba(38, 48, 46, 0.4);
}

.testimonial span {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    line-height: 1.5;
}

.testimonial strong { letter-spacing: 0.06em; }

.testimonial small {
    color: #6d6d68;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.6rem;
}

/* =====================================================================
   FAQ — roteiro numerado
   ===================================================================== */
.faq {
    background: var(--preto);
    border-top: var(--regra-fraca);
}

.accordion { border-top: var(--regra-fraca); counter-reset: pergunta; }

.accordion-item { border-bottom: var(--regra-fraca); counter-increment: pergunta; }

.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--off);
    font-family: var(--fonte-corpo);
    font-size: 0.98rem;
    padding: 1.35rem 0.2rem;
    transition: color 0.25s ease;
}

.accordion-trigger span { position: relative; padding-left: 3.4rem; }

.accordion-trigger span::before {
    content: "0" counter(pergunta);
    position: absolute;
    left: 0;
    top: 0.32em;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--dourado);
}

.accordion-trigger:hover { color: var(--dourado); }

.acc-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
}

.acc-icon::before,
.acc-icon::after {
    content: "";
    position: absolute;
    background: var(--dourado);
    transition: transform 0.3s ease;
}

.acc-icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.acc-icon::after { top: 0; bottom: 0; left: 50%; width: 1px; }

.accordion-trigger[aria-expanded="true"] .acc-icon::after { transform: scaleY(0); }

.accordion-panel { padding: 0 0.2rem 1.5rem 3.4rem; }

.accordion-panel p {
    color: var(--cinza);
    max-width: 70ch;
    font-size: 0.92rem;
}

/* =====================================================================
   AGENDAMENTO — bilhete de reserva
   ===================================================================== */
.booking {
    background:
        linear-gradient(180deg, rgba(212, 175, 90, 0.05), transparent 40%),
        var(--preto);
    border-top: var(--regra);
}

.booking-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.booking-copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

.booking-list {
    list-style: none;
    margin-top: 1.6rem;
    display: grid;
    gap: 0.55rem;
}

.booking-list li {
    color: rgba(250, 250, 247, 0.82);
    font-size: 0.92rem;
    padding-left: 1.8rem;
    position: relative;
}

.booking-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border: 1px solid var(--dourado);
    transform: rotate(45deg);
}

.booking-card {
    position: relative;
    background: var(--off);
    color: var(--preto);
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) clamp(2.4rem, 4vw, 3.2rem);
    border: 1px dashed var(--dourado);
    box-shadow: var(--sombra);
}

/* picotes de bilhete */
.booking-card::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background-image: linear-gradient(var(--verde) 40%, transparent 40%);
    background-size: 1px 8px;
}

.booking-card h3 {
    font-family: var(--fonte-assinatura);
    font-weight: 400;
    font-size: 1.45rem;
    margin-bottom: 1rem;
    color: var(--verde);
}

.booking-card address { font-style: normal; }

.booking-card address p {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 0.6rem;
}

.booking-note {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--verde);
    margin: 1.1rem 0 1.5rem;
}

.btn {
    display: inline-block;
    font-family: var(--fonte-corpo);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.95rem 1.7rem;
    border: 1px solid var(--dourado);
    transition: background 0.3s ease, color 0.3s ease, text-decoration 0.3s ease;
}

.btn-solid { color: var(--dourado); background: transparent; }

.btn-solid:hover {
    background: var(--dourado);
    color: var(--preto);
    text-decoration: none;
}

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer {
    border-top: var(--regra-fraca);
    background: var(--preto);
    padding: clamp(2.6rem, 6vw, 4rem) 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.2fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    padding-bottom: 2.4rem;
}

.footer-brand strong {
    font-family: var(--fonte-display);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 1rem;
}

.footer-brand em { font-style: normal; color: var(--cinza); }

.footer-brand p {
    color: var(--cinza);
    font-size: 0.86rem;
    max-width: 42ch;
    margin-top: 0.7rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-nav a {
    color: var(--cinza);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.footer-nav a:hover { color: var(--dourado); text-decoration: none; }

.footer-authority {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-left: var(--regra-fraca);
    padding-left: clamp(1rem, 2.5vw, 1.8rem);
}

.footer-authority a {
    color: var(--cinza);
    font-size: 0.76rem;
    line-height: 1.5;
}

.footer-authority a:hover { color: var(--dourado); }

.footer-bottom {
    border-top: var(--regra-fraca);
    padding: 1.2rem 0 1.4rem;
    text-align: center;
}

.footer-bottom p {
    color: var(--cinza);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* =====================================================================
   WHATSAPP FLUTUANTE — anel discreto
   ===================================================================== */
.whatsapp-float {
    position: fixed;
    right: clamp(1rem, 3vw, 1.8rem);
    bottom: clamp(1rem, 3vw, 1.8rem);
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--dourado);
}

.whatsapp-float:hover { text-decoration: none; color: var(--dourado); }

.wa-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 1px solid var(--dourado);
    background: rgba(13, 13, 13, 0.72);
    backdrop-filter: blur(6px);
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.wa-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dourado);
    box-shadow: 0 0 0 5px rgba(212, 175, 90, 0.18);
}

.whatsapp-float:hover .wa-icon {
    background: rgba(212, 175, 90, 0.16);
    box-shadow: 0 0 0 8px rgba(212, 175, 90, 0.1);
}

.wa-label {
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cinza);
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.whatsapp-float:hover .wa-label {
    opacity: 1;
    transform: none;
    color: var(--off);
}

/* =====================================================================
   LIGHTBOX (elemento criado por main.js)
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(13, 13, 13, 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: clamp(1.5rem, 5vw, 4rem);
    cursor: pointer;
    animation: luz-aparece 0.3s ease;
}

.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 78vh;
    width: auto;
    border: 1px solid var(--dourado);
    padding: 0.6rem;
    background: var(--preto);
    box-shadow: var(--sombra);
}

.lightbox figcaption {
    font-family: var(--fonte-assinatura);
    color: var(--cinza);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

@keyframes luz-aparece {
    from { opacity: 0; }
    to { opacity: 1; }
}