/* ==========================================================================
   Quiz do Amor — base
   Direção: editorial romântico. Papel creme, bordô profundo, terracota.
   Serifada de display com contraste alto, texto sóbrio, fios finos como
   estrutura, muito respiro. Sem emoji fazendo papel de ícone.
   Carregado em todas as páginas; os CSS de página só acrescentam layout.
   ========================================================================== */

:root {
    /* Papel e tinta */
    --paper:        #f7f1e8;
    --paper-warm:   #efe4d5;
    --paper-deep:   #e6d8c6;
    --ink:          #241a18;
    --ink-soft:     #6e5d55;
    --ink-faint:    #71635a;   /* 5.15:1 sobre papel, 4.60:1 sobre papel quente */

    /* Marca — todos os tons de texto medidos ≥4.5:1 sobre --paper (WCAG AA) */
    --wine:         #6b1f2e;   /* 10.05:1 */
    --wine-deep:    #4a121e;
    --wine-tint:    #f0e3e2;
    --terracotta:   #a95435;   /* 4.67:1 */
    --terracotta-t: #f6e6de;
    --gold:         #83692f;   /* 4.64:1 */
    --sage:         #667052;   /* 4.67:1 */

    /* Estados */
    --ok:           #4f6b46;   /* 5.31:1 */
    --warn:         #8e661a;   /* 4.60:1 */
    --danger:       #9b2c2c;   /* 6.70:1 */

    /* Fios e sombras — sombra editorial é sutil, quase só profundidade de papel */
    --line:         rgba(36, 26, 24, 0.14);
    --line-strong:  rgba(36, 26, 24, 0.28);
    --shadow-page:  0 1px 2px rgba(74, 18, 30, 0.04), 0 8px 24px -12px rgba(74, 18, 30, 0.18);
    --shadow-lift:  0 2px 4px rgba(74, 18, 30, 0.05), 0 20px 48px -20px rgba(74, 18, 30, 0.28);

    /* Tipografia */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

    /* Escala tipográfica — razão 1.25, fluida nos títulos */
    --t-xs:   0.75rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --t-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
    --t-xl:   clamp(1.6rem, 1.4vw + 1.2rem, 2.25rem);
    --t-2xl:  clamp(2.1rem, 2.6vw + 1.4rem, 3.25rem);
    --t-3xl:  clamp(2.8rem, 5vw + 1.4rem, 5.5rem);

    /* Espaço — escala de 4 */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3rem;
    --s-8:  4rem;
    --s-9:  6rem;
    --s-10: 8rem;

    /* Raios — o fio e a régua ficam vivos (editorial); o invólucro
       do double-bezel ganha squircle, com o núcleo em curva concêntrica. */
    --radius:      2px;
    --radius-md:   4px;
    --radius-pill: 999px;
    --r-shell:     1.75rem;
    --r-core:      calc(1.75rem - 0.4rem);
    --bezel-pad:   0.4rem;

    /* Escala de z-index — sem números mágicos espalhados pelos arquivos */
    --z-base:    1;
    --z-sticky:  50;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;
    --z-grain:   400;

    /* Curva assinatura: massa física, saída longa. Nada de linear/ease-in-out. */
    --ease:      cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

    /* Realce interno do núcleo — a "peça usinada" */
    --inset-hi:  inset 0 1px 0 rgba(255, 253, 250, 0.75);
    --inset-lo:  inset 0 -1px 0 rgba(36, 26, 24, 0.04);

    /* Grão de papel — SVG inline, sem requisição externa */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- reset -- */

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

* { margin: 0; padding: 0; }

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

body {
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Grão sobre tudo, sem interceptar clique */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.5;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: var(--z-grain);
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

::selection { background: var(--wine); color: var(--paper); }

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

/* ---------------------------------------------------------- tipografia -- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: 'SOFT' 28, 'WONK' 1;
    text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--t-md); }

p { text-wrap: pretty; }

/* Título de abertura — o momento tipográfico da página */
.display {
    font-family: var(--font-display);
    font-size: var(--t-3xl);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    text-wrap: balance;
}

.display em {
    font-style: italic;
    font-weight: 500;
    color: var(--wine);
    font-variation-settings: 'SOFT' 80, 'WONK' 1;
}

/* Etiqueta de seção: versalete espaçado, precedido de fio */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.eyebrow::before {
    content: '';
    width: var(--s-6);
    height: 1px;
    background: var(--line-strong);
    flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
    content: '';
    width: var(--s-6);
    height: 1px;
    background: var(--line-strong);
    flex: none;
}

.lede {
    font-size: var(--t-md);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 58ch;
}

/* Pular para o conteúdo — só aparece ao receber foco pelo teclado */
.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -100%;
    z-index: var(--z-toast);
    padding: var(--s-3) var(--s-4);
    background: var(--wine);
    color: var(--paper);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s var(--ease);
}

.skip-link:focus {
    top: var(--s-4);
    color: var(--paper);
}

/* Só para leitor de tela */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--ink-soft); }
.tiny  { font-size: var(--t-sm); color: var(--ink-soft); }

/* Numeral de passo — "01 ·" */
.numeral {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--terracotta);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- layout -- */

.wrap, .container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.wrap--narrow { max-width: 720px; }
.wrap--text   { max-width: 62ch; }

/* Respiro macro: a página tem que respirar pesado */
.section        { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-8); }

.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: var(--s-6);
}

/* Fio com losango ao centro — divisória decorativa */
.rule--ornament {
    position: relative;
    border: 0;
    height: 1px;
    background: var(--line);
    overflow: visible;
}
.rule--ornament::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    transform: translate(-50%, -50%) rotate(45deg);
}

.stack > * + * { margin-top: var(--s-4); }

/* -------------------------------------------------------------- botões -- */

.btn,
.cta-button {
    --btn-bg: var(--wine);
    --btn-fg: var(--paper);
    --btn-bd: var(--wine);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.85em 1.8em;
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--inset-hi);
    transition: color 0.6s var(--ease),
                border-color 0.6s var(--ease),
                transform 0.35s var(--ease),
                box-shadow 0.6s var(--ease);
}

/* Preenchimento que sobe — substitui o "levanta e sombra" genérico */
.btn::before,
.cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wine-deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s var(--ease);
    z-index: 0;
}

.btn:hover::before,
.cta-button:hover::before { transform: scaleY(1); }

.btn > *,
.cta-button > * { position: relative; z-index: 1; }

/* Física de pressão: a peça afunda sob o dedo, não pula */
.btn:active,
.cta-button:active { transform: scale(0.98); }

.btn:disabled,
.cta-button:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled::before { transform: scaleY(0); }

/* ------------------------------------------- botão-dentro-de-botão -- */
/* A seta nunca fica nua ao lado do texto: mora no próprio disco,
   encostada no recuo interno direito. No hover ela viaja na diagonal
   e cresce — tensão cinética dentro da peça. */

.btn-arrow {
    padding-right: 0.4em;
}

.btn-arrow .btn-icon {
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    margin-left: 0.2em;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 253, 250, 0.16);
    transition: transform 0.6s var(--ease), background-color 0.6s var(--ease);
}

.btn-arrow:hover .btn-icon {
    transform: translate(3px, -2px) scale(1.06);
    background: rgba(255, 253, 250, 0.26);
}

.btn-arrow .btn-icon svg { width: 0.85em; height: 0.85em; display: block; }

/* Variante clara: o disco escurece em vez de clarear */
.btn-secondary.btn-arrow .btn-icon,
.btn-outline.btn-arrow .btn-icon { background: rgba(36, 26, 24, 0.07); }

.btn-secondary.btn-arrow:hover .btn-icon,
.btn-outline.btn-arrow:hover .btn-icon { background: rgba(255, 253, 250, 0.2); }

.btn-primary, .cta-button.primary { --btn-bg: var(--wine); --btn-fg: var(--paper); --btn-bd: var(--wine); }

.btn-secondary,
.cta-button.secondary,
.btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line-strong);
}
.btn-secondary:hover,
.cta-button.secondary:hover,
.btn-outline:hover { color: var(--paper); border-color: var(--wine-deep); }

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink-soft);
    --btn-bd: transparent;
    padding-inline: var(--s-3);
}
.btn-ghost::before { background: transparent; }
.btn-ghost:hover { color: var(--wine); }

.btn-danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-bd: rgba(155, 44, 44, 0.4); }
.btn-danger::before { background: var(--danger); }
.btn-danger:hover { color: var(--paper); border-color: var(--danger); }

.btn-large, .cta-button.large { padding: 1.05em 2.4em; font-size: var(--t-base); }
.btn-block { display: flex; width: 100%; }

/* Link com fio que cresce */
.link-rule {
    display: inline-block;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link-rule:hover { color: var(--wine); border-color: var(--wine); }

/* ----------------------------------------------------------- formulário -- */

.form-group, .field { margin-bottom: var(--s-5); }

.form-label {
    display: block;
    margin-bottom: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.label-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink-faint);
}

/* Campo sem caixa: só um fio embaixo. Editorial = menos moldura. */
.form-input {
    width: 100%;
    padding: 0.7em 0;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--t-md);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.form-input::placeholder { color: var(--ink-faint); }

.form-input:focus {
    outline: none;
    border-bottom-color: var(--wine);
    background: linear-gradient(to top, rgba(107, 31, 46, 0.05), transparent 60%);
}

.form-input:disabled {
    color: var(--ink-faint);
    border-bottom-style: dashed;
    cursor: not-allowed;
}

textarea.form-input {
    border: 1px solid var(--line-strong);
    padding: var(--s-3);
    min-height: 7rem;
    resize: vertical;
    line-height: 1.6;
}

select.form-input {
    border: 1px solid var(--line-strong);
    padding: var(--s-3);
    cursor: pointer;
}

input[type="file"].form-input {
    border: 1px dashed var(--line-strong);
    padding: var(--s-3);
    font-size: var(--t-sm);
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--wine);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.char-counter {
    margin-top: var(--s-1);
    text-align: right;
    font-size: var(--t-xs);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- cards -- */

/* ---------------------------------------------------- double-bezel -- */
/* Nada de card chapado sobre o fundo. Invólucro externo (bandeja) com
   fio de cabelo e recuo; núcleo interno com papel próprio, realce no
   topo e raio concêntrico — parece peça usinada, não retângulo. */

.bezel {
    padding: var(--bezel-pad);
    background: rgba(36, 26, 24, 0.035);
    border: 1px solid var(--line);
    border-radius: var(--r-shell);
}

.bezel-core {
    height: 100%;
    padding: var(--s-6);
    background: var(--paper);
    border: 1px solid rgba(255, 253, 250, 0.6);
    border-radius: var(--r-core);
    box-shadow: var(--inset-hi), var(--inset-lo), var(--shadow-page);
}

.bezel--warm .bezel-core { background: var(--paper-warm); }

.bezel--lift .bezel-core { box-shadow: var(--inset-hi), var(--inset-lo), var(--shadow-lift); }

/* Bandeja reage ao ponteiro: o fio esquenta e a peça sobe de leve */
.bezel--interactive {
    transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease);
}

.bezel--interactive .bezel-core {
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.bezel--interactive:hover {
    background: var(--terracotta-t);
    border-color: rgba(169, 84, 53, 0.3);
}

.bezel--interactive:hover .bezel-core {
    transform: translateY(-3px);
    box-shadow: var(--inset-hi), var(--inset-lo), var(--shadow-lift);
}

.card, .panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-6);
}

.panel--warm { background: var(--paper-warm); }

/* Cartão com fio de destaque no topo, revelado no hover */
.card--marked { position: relative; }
.card--marked::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    background: var(--terracotta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.card--marked:hover::before { transform: scaleX(1); }

/* -------------------------------------------------------------- badges -- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0.3em 0.75em;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
}

.badge-success { color: var(--ok); }
.badge-danger  { color: var(--danger); }
.badge-info    { color: var(--ink-soft); }
.badge-premium { color: var(--gold); }
.badge-free    { color: var(--ink-faint); }

/* ------------------------------------------------------------ aparição -- */

@keyframes rise {
    from { opacity: 0; transform: translateY(2.2rem); filter: blur(5px); }
    to   { opacity: 1; transform: none;               filter: blur(0); }
}

@keyframes draw-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.rise { animation: rise 0.95s var(--ease-out) both; }
.rise-1 { animation-delay: 0.06s; }
.rise-2 { animation-delay: 0.17s; }
.rise-3 { animation-delay: 0.28s; }
.rise-4 { animation-delay: 0.39s; }
.rise-5 { animation-delay: 0.50s; }

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

/* --------------------------------------------------- navegação comum -- */

/* Ilha flutuante: destacada do topo, largura do conteúdo, pílula de vidro.
   Barra colada de ponta a ponta é justamente o que se quer evitar. */
.navbar {
    position: sticky;
    top: var(--s-4);
    z-index: var(--z-sticky);
    width: max-content;
    max-width: calc(100% - var(--s-6));
    margin: var(--s-5) auto var(--s-6);
    padding: 0.45rem 0.5rem 0.45rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: rgba(247, 241, 232, 0.72);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--inset-hi), 0 1px 2px rgba(74, 18, 30, 0.04);
    transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease),
                background-color 0.6s var(--ease);
}

/* A ilha ganha peso ao descolar do topo da página */
.navbar.is-scrolled {
    border-color: var(--line-strong);
    background: rgba(247, 241, 232, 0.88);
    box-shadow: var(--inset-hi), var(--shadow-lift);
}

/* O wrap interno perde a largura máxima — quem manda é a pílula */
.navbar .container,
.navbar .wrap {
    max-width: none;
    padding: 0;
    gap: var(--s-5);
}

/* Revelação por scroll: sobe com desfoque, resolve em foco.
   Só transform/opacity/filter — nada que dispare layout. */
.will-reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    filter: blur(6px);
    transition: opacity 0.9s var(--ease-out),
                transform 0.9s var(--ease-out),
                filter 0.9s var(--ease-out);
}

.will-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.navbar .container,
.navbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
}

.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5ch;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

.logo:hover { color: var(--wine); }

/* Marca gráfica no lugar do emoji */
.logo::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--wine);
    transform: rotate(45deg);
    flex: none;
    align-self: center;
}

.logo-icon { display: none; }  /* emoji do markup antigo */

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.nav-link {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    text-decoration: none;
    letter-spacing: 0.02em;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--wine);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s var(--ease);
}

.nav-link:hover { color: var(--wine); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------- página de mensagem única -- */

.centered-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
}

.centered-card {
    max-width: 34rem;
    padding: var(--s-8) var(--s-6);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-shell);
    box-shadow: var(--inset-hi), var(--inset-lo), var(--shadow-lift);
    text-align: center;
}

.centered-card h1 {
    margin-block: var(--s-4) var(--s-4);
    font-size: var(--t-2xl);
    font-weight: 300;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.centered-card .lede {
    margin-inline: auto;
    margin-bottom: var(--s-6);
    font-size: var(--t-base);
}

/* ----------------------------------------------------------------- pwa -- */

.pwa-install {
    position: fixed;
    bottom: var(--s-4);
    left: var(--s-4);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.6em 1em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: var(--shadow-page);
    cursor: pointer;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pwa-install:hover { color: var(--wine); border-color: var(--wine); }

.pwa-install-close {
    margin-left: var(--s-1);
    color: var(--ink-faint);
    font-size: var(--t-base);
    line-height: 1;
    cursor: pointer;
}

.pwa-install-close:hover { color: var(--ink); }

.pwa-hint {
    position: fixed;
    bottom: var(--s-4);
    left: var(--s-3);
    right: var(--s-3);
    z-index: var(--z-overlay);
    padding: var(--s-3) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    cursor: pointer;
}

.pwa-hint strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- notas -- */

.note {
    border-left: 2px solid var(--terracotta);
    padding: var(--s-3) var(--s-4);
    background: var(--terracotta-t);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.note--wine  { border-color: var(--wine); background: var(--wine-tint); }
.note--quiet { border-color: var(--line-strong); background: var(--paper-warm); }

/* -------------------------------------------------------------- rodapé -- */

.footer {
    border-top: 1px solid var(--line);
    padding-block: var(--s-7) var(--s-5);
    background: var(--paper-warm);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-7);
    align-items: start;
}

.footer-description {
    margin-top: var(--s-3);
    max-width: 34ch;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.footer-title {
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}

.footer-list { list-style: none; }
.footer-list li + li { margin-top: var(--s-2); }
.footer-list a {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    text-decoration: none;
}
.footer-list a:hover { color: var(--wine); }

.footer-bottom {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs);
    color: var(--ink-faint);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------- responsivo -- */

@media (max-width: 760px) {
    .section { padding-block: var(--s-8); }
    .footer-content { grid-template-columns: 1fr; gap: var(--s-6); }

    /* A ilha deixa de ser max-content: nessa largura ela estouraria a
       viewport e empurraria a página inteira para o lado. */
    .navbar {
        width: auto;
        max-width: none;
        margin-inline: var(--s-3);
        padding-left: var(--s-5);
    }

    .navbar .container,
    .navbar .wrap {
        justify-content: space-between;
        gap: var(--s-3);
        min-width: 0;
    }

    .nav-links { gap: var(--s-3); min-width: 0; }
    .nav-links .btn { white-space: nowrap; }
}

@media (max-width: 480px) {
    /* Só marca e ação principal cabem — os secundários vão para o rodapé */
    .nav-links .nav-link { display: none; }
    .navbar { padding-left: var(--s-4); }
}

@media (max-width: 460px) {
    .wrap, .container { padding-inline: var(--s-4); }
    .btn, .cta-button { padding: 0.8em 1.3em; }
}