/* ==========================================================
   Rafael Nery Torres — v3.0.0
   Tokens exatos do Lovable (oklch, tipografia, ritmo vertical)
   ========================================================== */

:root {
    --background:       oklch(0.13 0.012 70);
    --foreground:       oklch(0.94 0.01  80);
    --surface:          oklch(0.16 0.014 70);
    --surface-2:        oklch(0.19 0.016 70);
    --muted:            oklch(0.22 0.014 70);
    --muted-foreground: oklch(0.68 0.015 80);
    --border:           oklch(0.28 0.012 70 / 60%);
    --gold:             oklch(0.72 0.12  80);
    --gold-soft:        oklch(0.82 0.08  85);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }

html { scroll-behavior: smooth; }

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-feature-settings: "ss01","cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Gold italic (headings accent) ─────────────────────── */
.gold-italic {
    font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
    font-style: italic;
    font-weight: 600;
    color: var(--gold-soft);
}

/* ── Nav ────────────────────────────────────────────────── */
.nav-glass {
    background-color: oklch(0.13 0.012 70 / 75%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background-color: var(--gold);
    color: var(--background);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 2px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.btn-gold:hover { background-color: var(--gold-soft); color: var(--background); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background-color: transparent;
    color: var(--foreground);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 2px;
    text-decoration: none;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.btn-outline:hover { background-color: var(--surface); color: var(--foreground); }

/* ── Container ──────────────────────────────────────────── */
.container-rn {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 1024px) {
    .container-rn { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ── Section padding (py-24 lg:py-32) ──────────────────── */
.section-py { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .section-py { padding-top: 8rem; padding-bottom: 8rem; } }

/* ── Photo frame ────────────────────────────────────────── */
.photo-wrap {
    position: relative;
}
.photo-frame-border {
    position: absolute;
    top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;
    border: 1px solid oklch(0.72 0.12 80 / 30%);
    border-radius: 2px;
    pointer-events: none;
}

/* ── Panel cards ────────────────────────────────────────── */
.panel-card {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 2rem 2.5rem;
}
.panel-card-highlighted {
    background-color: var(--surface-2);
    border: 1px solid oklch(0.72 0.12 80 / 30%);
    border-radius: 2px;
    padding: 2rem 2.5rem;
}

/* ── List bullet (thin gold dash) ───────────────────────── */
.gold-dash {
    display: block;
    width: 1rem;
    height: 1px;
    background-color: oklch(0.72 0.12 80 / 70%);
    flex-shrink: 0;
    margin-top: 0.625rem;
}

/* ── Services grid (tablecloth borders) ─────────────────── */
.services-grid {
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 2.25rem 2rem;
    background-color: var(--background);
    transition: background-color 0.2s;
}
.service-card:hover { background-color: oklch(0.13 0.012 70 / 40%); }

/* ── Mobile menu ────────────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── Credentials dividers ───────────────────────────────── */
.cred-item { padding: 0.5rem 0; }
@media (min-width: 640px) {
    .cred-item-mid {
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}
@media (max-width: 639px) {
    .cred-item-mid {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}

/* ── Blog grid ──────────────────────────────────────────── */
.rn-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .rn-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rn-blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Blog card ──────────────────────────────────────────── */
.rn-blog-card {
    background: oklch(0.13 0.012 70 / 40%);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: background 0.2s, border-color 0.2s;
}
.rn-blog-card:hover {
    background: oklch(0.16 0.014 70);
    border-color: oklch(0.72 0.12 80 / 30%);
}

/* ── Paginação ──────────────────────────────────────────── */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    margin: 0 0.125rem;
}
.page-numbers:hover { background: var(--surface); color: var(--foreground); }
.page-numbers.current {
    background: var(--gold);
    color: var(--background);
    border-color: var(--gold);
    font-weight: 500;
}
.page-numbers.dots { border: none; cursor: default; }
ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

/* ── Contact form ───────────────────────────────────────── */
.rn-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rn-form-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    letter-spacing: 0.01em;
}
.rn-form-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: 2px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.rn-form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px oklch(0.72 0.12 80 / 15%);
}
.rn-form-input::placeholder {
    color: oklch(0.68 0.015 80 / 50%);
}
textarea.rn-form-input {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.6;
}
.rn-form-success {
    font-size: 0.875rem;
    color: oklch(0.75 0.14 145);
    margin-top: 0.25rem;
}
.rn-form-error {
    font-size: 0.875rem;
    color: oklch(0.7 0.18 20);
    margin-top: 0.25rem;
}

/* ── reCAPTCHA badge — esquerda, recolhido (só ícone) ───── */
.grecaptcha-badge {
    left: 14px !important;
    right: auto !important;
    width: 40px !important;
    overflow: hidden !important;
    transition: width 0.3s ease !important;
    border-radius: 2px !important;
}
.grecaptcha-badge:hover {
    width: 256px !important;
}