/* Nobre Lar Achadinhos
   Identidade: bronze, creme e areia da marca; títulos serifados,
   script só no destaque; molduras em arco (a porta da casinha do logo). */

/* Fontes servidas pelo proprio site (subconjunto latino do Google Fonts): sem ida ao
   fonts.googleapis.com no caminho critico, que travava a pintura em ~2 s no celular. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-500-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/dm-sans-400-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/great-vibes-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --linho: #F4EEE4;
    --creme: #EAE3D7;
    --areia: #DAD2C2;
    --bege: #D6C8B1;
    --off: #FBF8F2;
    --bronze: #A18C6B;
    --bronze-texto: #6E5B40;
    --cafe: #3B3128;
    --cafe-suave: #5C4E3D;
    --verde: #15803D;
    --verde-escuro: #116B33;

    --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --script: "Great Vibes", "Brush Script MT", cursive;
    --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --gutter: 20px;
    --max: 1120px;
    --arch: 999px 999px 14px 14px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--linho);
    color: var(--cafe);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--cafe);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Topo ---------- */

.site-header {
    display: flex;
    justify-content: center;
    padding: 22px var(--gutter) 6px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--bronze-texto);
}

.brand-house { color: var(--bronze); }

.brand-name { display: flex; flex-direction: column; line-height: 1; }

.brand-word {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cafe);
}

.brand-sub {
    font-family: var(--script);
    font-size: 22px;
    color: var(--bronze-texto);
    margin: -2px 0 0 38px;
}

/* ---------- Hero ---------- */

.hero {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--gutter) 0;
    text-align: center;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bronze-texto);
    padding: 6px 14px;
    border: 1px solid var(--bege);
    border-radius: 999px;
    background: var(--off);
}

.hero-kicker svg { color: var(--verde); }

.hero-title { margin-top: 14px; }

.hero-script {
    display: block;
    font-family: var(--script);
    font-weight: 400;
    font-size: 64px;
    line-height: 1;
    color: var(--bronze-texto);
    margin-bottom: -4px;
}

.hero-serif {
    display: block;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--cafe);
    max-width: 17ch;
    margin: 0 auto;
    text-wrap: balance;
}

.hero-lead {
    margin: 16px auto 0;
    max-width: 34ch;
    font-size: 17px;
    color: var(--cafe-suave);
}

/* ---------- Botão principal ---------- */

.cta-block { margin-top: 24px; }

.btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    min-height: 60px;
    padding: 16px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(17, 107, 51, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
    transition: background-color 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-join:hover { background: var(--verde-escuro); }
.btn-join:active { transform: scale(0.98); }
.btn-join[aria-busy="true"] { opacity: 0.85; cursor: progress; }

.cta-note {
    margin-top: 10px;
    font-size: 14px;
    color: var(--bronze-texto);
}

/* ---------- Arcos do hero ---------- */

.hero-arches {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 36px auto 0;
    height: 330px;
    max-width: 420px;
    overflow: hidden;
}

.arch {
    border-radius: var(--arch);
    overflow: hidden;
    background: var(--areia);
}

.arch img { width: 100%; height: 100%; object-fit: cover; }

.hero-arches .arch { flex: none; }

.arch-main {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 338px;
    padding: 7px;
    background: var(--off);
    border: 1px solid var(--bronze);
    box-shadow: 0 24px 40px -28px rgba(59, 49, 40, 0.55);
}

.arch-main img { border-radius: var(--arch); }

.arch-side {
    width: 132px;
    height: 234px;
    margin-bottom: -10px;
    opacity: 0.92;
}

.arch-left { margin-right: -26px; }
.arch-right { margin-left: -26px; }

@media (prefers-reduced-motion: no-preference) {
    .hero-arches .arch {
        animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .hero-arches .arch-left { animation-delay: 0.12s; }
    .hero-arches .arch-right { animation-delay: 0.22s; }
}

@keyframes rise {
    from { transform: translateY(40px); opacity: 0; }
}

/* ---------- Seções ---------- */

.section-head {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section-head h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    color: var(--cafe);
    text-wrap: balance;
}

.section-head p {
    margin-top: 10px;
    max-width: 44ch;
    color: var(--cafe-suave);
}

/* Vitrine */

.showcase {
    background: var(--creme);
    padding: 52px 0 44px;
    border-top: 1px solid var(--areia);
    border-bottom: 1px solid var(--areia);
}

.showcase-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 26px var(--gutter) 10px;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.showcase-track::-webkit-scrollbar { display: none; }

.showcase-item {
    flex: 0 0 150px;
    scroll-snap-align: start;
}

.showcase-item .arch {
    aspect-ratio: 9 / 16;
    border: 1px solid var(--bege);
}

.item-name {
    margin-top: 12px;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--cafe);
}

.item-room {
    margin-top: 2px;
    font-size: 14px;
    color: var(--bronze-texto);
}

/* Benefícios */

.benefits { padding: 56px 0 8px; }

.benefit-list {
    max-width: var(--max);
    margin: 22px auto 0;
    padding: 0 var(--gutter);
}

.benefit {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--areia);
}

.benefit:last-child { border-bottom: 1px solid var(--areia); }

.benefit-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px 999px 10px 10px;
    background: var(--creme);
    color: var(--bronze-texto);
    flex: none;
}

.benefit h3,
.step h3 {
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.2;
    color: var(--cafe);
}

.benefit p,
.step p {
    margin-top: 4px;
    font-size: 16px;
    color: var(--cafe-suave);
}

/* Como funciona */

.steps { padding: 56px 0 8px; }

.step-list {
    max-width: var(--max);
    margin: 26px auto 0;
    padding: 0 var(--gutter);
    counter-reset: passo;
}

.step {
    position: relative;
    padding: 0 0 28px 64px;
    counter-increment: passo;
}

.step::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -6px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bronze);
    border-radius: 999px;
    background: var(--off);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--bronze-texto);
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 44px;
    bottom: 2px;
    border-left: 1px dashed var(--bronze);
}

/* FAQ */

.faq { padding: 48px 0 64px; }

.faq-list {
    max-width: var(--max);
    margin: 18px auto 0;
    padding: 0 var(--gutter);
}

.faq details { border-bottom: 1px solid var(--areia); }
.faq details:first-child { border-top: 1px solid var(--areia); }

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary svg {
    color: var(--bronze-texto);
    transition: transform 0.2s ease;
}

.faq details[open] summary svg { transform: rotate(180deg); }

.faq details p {
    padding: 0 0 20px;
    font-size: 16px;
    color: var(--cafe-suave);
    max-width: 62ch;
}

/* CTA final: um grande arco */

.final { padding: 0 var(--gutter); }

.final-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 72px 24px 52px;
    border-radius: 999px 999px 0 0 / 190px 190px 0 0;
    background: var(--cafe);
    color: var(--creme);
    text-align: center;
}

.final-house { color: var(--bronze); margin: 0 auto 16px; display: block; }

.final h2 {
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.1;
    color: var(--off);
    max-width: 17ch;
    margin: 0 auto;
    text-wrap: balance;
}

.final-inner > p {
    margin: 12px auto 0;
    max-width: 32ch;
    color: var(--bege);
}

.final .btn-join { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6); }
.final .cta-note { color: var(--bege); }
.final :focus-visible { outline-color: var(--creme); }

/* ---------- Rodapé ---------- */

.site-footer {
    background: var(--cafe);
    color: var(--bege);
    padding: 36px var(--gutter) 40px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid rgba(214, 200, 177, 0.18);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--off);
}

.footer-brand svg { color: var(--bronze); }

.footer-disclaimer {
    max-width: 60ch;
    margin: 14px auto 0;
    line-height: 1.6;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-top: 18px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--off);
    text-underline-offset: 3px;
}

.footer-copy { margin-top: 6px; color: #B8A482; }
.site-footer :focus-visible { outline-color: var(--creme); }

/* ---------- Botão flutuante (celular) ---------- */

.float-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(244, 238, 228, 0.97) 70%, rgba(244, 238, 228, 0));
    display: flex;
    justify-content: center;
    transform: translateY(110%);
    transition: transform 0.28s ease;
    pointer-events: none;
}

.float-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.float-cta .btn-join { min-height: 54px; font-size: 17px; }

/* espaço para o botão flutuante não cobrir o rodapé */
.site-footer.with-float { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* ---------- Aviso ---------- */

.notice {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 30;
    width: calc(100% - 40px);
    max-width: 360px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--cafe);
    color: var(--off);
    font-size: 15px;
    text-align: center;
    box-shadow: 0 12px 30px -12px rgba(59, 49, 40, 0.6);
    transform: translate(-50%, 16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.notice.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- Telas maiores ---------- */

@media (min-width: 600px) {
    :root { --gutter: 32px; }
    .hero-serif { font-size: 42px; }
    .hero-script { font-size: 76px; }
    .showcase-item { flex-basis: 180px; }
    .section-head h2, .final h2 { font-size: 38px; }
}

@media (min-width: 960px) {
    body { font-size: 18px; }

    .site-header {
        justify-content: flex-start;
        max-width: var(--max);
        margin: 0 auto;
        padding-top: 28px;
    }

    .hero {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: 48px;
        padding-top: 24px;
        padding-bottom: 56px;
        text-align: left;
    }

    .hero-serif { font-size: 54px; margin: 0; max-width: 14ch; }
    .hero-script { font-size: 96px; margin-bottom: -8px; }
    .hero-lead { margin-left: 0; font-size: 19px; }
    .cta-block { margin-top: 30px; }
    .btn-join { width: auto; min-width: 320px; }
    .cta-note { padding-left: 4px; }

    .hero-arches {
        margin: 0;
        height: 520px;
        max-width: none;
    }

    .arch-main { width: 280px; height: 498px; padding: 9px; }
    .arch-side { width: 190px; height: 338px; margin-bottom: 0; }
    .arch-left { margin-right: -40px; }
    .arch-right { margin-left: -40px; }

    .showcase { padding: 72px 0 64px; }

    .showcase-track {
        max-width: var(--max);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 22px;
        overflow: visible;
        padding-top: 34px;
    }

    .benefits, .steps { padding-top: 80px; }

    .benefit-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 56px;
    }

    .benefit:nth-last-child(2) { border-bottom: 1px solid var(--areia); }

    .step-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .step { padding: 64px 0 0; }
    .step::before { top: 0; }
    .step:not(:last-child)::after {
        left: 60px;
        right: -28px;
        top: 22px;
        bottom: auto;
        border-left: 0;
        border-top: 1px dashed var(--bronze);
    }

    .faq { padding: 80px 0 96px; }
    .faq-list { max-width: 820px; }
    .faq .section-head { max-width: 820px; }

    .final-inner { padding: 96px 48px 64px; border-radius: 999px 999px 0 0 / 280px 280px 0 0; }

    .float-cta { display: none; }
    .site-footer.with-float { padding-bottom: 40px; }
    .notice { bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- Página de política ---------- */

.legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px var(--gutter) 64px;
}

.legal h1 {
    font-family: var(--serif);
    font-size: 38px;
    line-height: 1.1;
}

.legal h2 {
    margin-top: 32px;
    font-family: var(--serif);
    font-size: 25px;
}

.legal p, .legal li { margin-top: 12px; font-size: 16px; color: var(--cafe-suave); }
.legal ul { padding-left: 20px; list-style: disc; }
.legal .updated { font-size: 14px; color: var(--bronze-texto); }
.legal .back { display: inline-block; margin-top: 36px; font-weight: 600; color: var(--verde); }