/* checkout.css — estilos de `/assinar/` e `/obrigado/`.
   Duplicado do index.html por D-CHK-16 — unificar após o lançamento.
   Tokens, @font-face, .button e .field copiados de index.html (linhas 18-121, 248, 1088);
   breakpoints 1080/900/760/430 seguem a mesma convenção do site. */

@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Regular.woff2") format("woff2"),
       url("fonts/Raleway-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Medium.woff2") format("woff2"),
       url("fonts/Raleway-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-SemiBold.woff2") format("woff2"),
       url("fonts/Raleway-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Regular.woff2") format("woff2"),
       url("fonts/SourceSerif4-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Medium.woff2") format("woff2"),
       url("fonts/SourceSerif4-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.woff2") format("woff2"),
       url("fonts/SourceSerif4-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.woff2") format("woff2"),
       url("fonts/DMMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f2eee2;
  --surface: #fbfaf6;
  --surface-soft: #ebe6d9;
  --surface-clear: rgb(251 250 246 / 55%);
  --text: #3d2831;
  --muted: #6e5f63;
  --quiet: #75676b;
  --wine: #51001e;
  --navy: #052a3c;
  --gold: #f9c031;
  --line: rgb(61 40 49 / 18%);
  --line-soft: rgb(61 40 49 / 10%);
  --button: #e2dccf;
  --button-hover: #d8d0c2;
  --font-display: "Freight Text Pro", "Source Serif 4", Georgia, serif;
  --font-body: "Raleway", system-ui, sans-serif;
  --font-label: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --step--1: clamp(.76rem, .72rem + .14vw, .84rem);
  --step-0: clamp(.98rem, .92rem + .25vw, 1.12rem);
  --step-1: clamp(1.3rem, 1.12rem + .74vw, 1.76rem);
  --step-2: clamp(1.9rem, 1.52rem + 1.65vw, 3rem);
  --step-3: clamp(2.65rem, 1.8rem + 3.7vw, 5.45rem);
  --step-4: clamp(3.4rem, 2.2rem + 5.5vw, 7.8rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: clamp(3.25rem, 7vw, 6.75rem);
  --space-7: clamp(5.75rem, 12vw, 11rem);
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 28px;
  --shadow-soft: 0 22px 70px rgb(61 40 49 / 9%);
  --content: 1240px;
  --text-max: 66ch;
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 87% 7%, rgb(249 192 49 / 7%), transparent 24rem),
    var(--bg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

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

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .7rem 1rem;
  color: var(--surface);
  background: var(--wine);
  transform: translateY(-150%);
  transition: transform var(--motion-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 3rem), var(--content));
  margin-inline: auto;
}

.section { padding-block: var(--space-7); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.35rem;
  color: var(--wine);
  font-family: var(--font-label);
  font-size: var(--step--1);
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.65rem;
  height: 1px;
  background: currentColor;
  opacity: .72;
}

.display, h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.038em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
em { font-weight: 400; }

.lede {
  max-width: var(--text-max);
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--wine);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.text-link::after {
  content: "↗";
  transition: transform var(--motion-fast) var(--ease);
}

.text-link:hover::after { transform: translate(.15rem, -.15rem); }

.button {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--button);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.button:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
}

.button--ghost {
  border-color: var(--line);
  background: transparent;
}

.button--ghost:hover { background: rgb(251 250 246 / 45%); }

.button[disabled],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .65;
  transform: none;
}

/* ---------------------------------------------------------------------- */
/* Header, navegação e rodapé — reaproveitados de index.html               */
/* ---------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  width: 150px;
  align-items: center;
}

.brand img {
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(7%) sepia(82%) saturate(4054%) hue-rotate(323deg) brightness(66%) contrast(111%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  background: rgb(242 238 226 / 88%);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.3rem);
}

.nav a {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
}

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

.nav .header-cta {
  padding: .62rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(251 250 246 / 42%);
}

.menu-toggle {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 1.05rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);
}

.menu-toggle span { position: relative; }
.menu-toggle span::before,
.menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -.36rem; }
.menu-toggle span::after { top: .36rem; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.site-footer {
  padding: 4rem 0 1.8rem;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 3rem;
  align-items: start;
}

.footer-brand p {
  max-width: 360px;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: .75rem;
}

.footer-title {
  margin: 0 0 1rem;
  color: var(--quiet);
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-links { display: grid; gap: .7rem; }

.footer-links a {
  color: var(--muted);
  font-size: .75rem;
  text-decoration: none;
}

.footer-links a:hover { color: var(--wine); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  color: var(--quiet);
  font-family: var(--font-label);
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------- */
/* Campo de formulário — reaproveitado de index.html                       */
/* ---------------------------------------------------------------------- */

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field { display: grid; gap: .45rem; }

.field label {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.2rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgb(251 250 246 / 66%);
  font-size: .8rem;
  outline: none;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--wine); background: var(--surface); }

/* ---------------------------------------------------------------------- */
/* `/assinar/` — cabeçalho de página, banner da janela, selo de preview     */
/* ---------------------------------------------------------------------- */

.assinar-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.assinar-corpo { padding-block: 0 var(--space-7); }

.carregando-aviso {
  display: none;
  margin: 0;
  padding: 4rem 0;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

.janela-aberta {
  margin: 0 0 var(--space-5);
  padding: .95rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: .85rem;
}

.janela-aberta strong { color: var(--wine); }

.janela-fechada {
  display: none;
  margin: 0 0 var(--space-5);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.janela-fechada h2 { font-size: var(--step-1); margin: 0 0 .85rem; }
.janela-fechada p { max-width: 58ch; margin: 0 0 1.5rem; color: var(--muted); }

.badge-preview {
  display: none;
  width: fit-content;
  margin: 0 0 var(--space-4);
  padding: .35rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------- */
/* Grade principal — resumo (topo no mobile, lateral no desktop) + coluna  */
/* de formulário. Desktop-first: base assume >900px, breakpoints reduzem. */
/* ---------------------------------------------------------------------- */

.assinar-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "principal resumo";
  align-items: start;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.assinar-principal { grid-area: principal; min-width: 0; }

.resumo-pedido {
  grid-area: resumo;
  position: sticky;
  top: 7.5rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.resumo-pedido .eyebrow { margin-bottom: 1rem; }

.resumo-plano {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.resumo-modalidade { padding: .9rem 0; border-top: 1px solid var(--line-soft); }
.resumo-modalidade:first-of-type { border-top: 0; padding-top: 0; }

.resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
}

.resumo-linha strong { font-family: var(--font-display); font-size: var(--step-0); font-weight: 500; }
.resumo-linha em { color: var(--muted); font-size: .68rem; font-style: normal; }

.resumo-nota { margin: .45rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }

.resumo-arrependimento {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* Seletor de plano e de modalidade                                        */
/* ---------------------------------------------------------------------- */

.plano-seletor,
.modalidade-seletor {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.plano-seletor legend,
.modalidade-seletor legend {
  width: 100%;
  margin: 0 0 .8rem;
  padding: 0;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.plano-opcoes { display: flex; flex-wrap: wrap; gap: .7rem; }

.plano-opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.plano-opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plano-opcao:has(input:checked) {
  border-color: var(--wine);
  background: rgb(81 0 30 / 6%);
  color: var(--wine);
  font-weight: 600;
}

.plano-opcao:has(input:focus-visible) { outline: 2px solid var(--wine); outline-offset: 3px; }

.modalidade-dupla,
.modalidade-solo-avista,
.modalidade-solo-parcelado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.modalidade-solo-avista,
.modalidade-solo-parcelado { display: none; max-width: 22rem; grid-template-columns: 1fr; }

.modalidade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.modalidade-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modalidade-card:has(input:checked) {
  border-color: var(--wine);
  background: rgb(81 0 30 / 5%);
}

.modalidade-card:has(input:focus-visible) { outline: 2px solid var(--wine); outline-offset: 3px; }

.modalidade-titulo {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.modalidade-valor { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.modalidade-valor em { font-family: var(--font-body); font-size: .62rem; font-style: normal; color: var(--muted); }

.modalidade-nota { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }

[data-preco-plano] { display: none; }
.assinar-corpo:has(#plano-conteudo:checked) [data-preco-plano="conteudo"] { display: inline; }
.assinar-corpo:has(#plano-premium:checked) [data-preco-plano="premium"] { display: inline; }

/* ---------------------------------------------------------------------- */
/* Formulário do comprador                                                  */
/* ---------------------------------------------------------------------- */

.checkout-form { display: grid; gap: 1rem; margin-top: var(--space-4); }

.campo-secao-titulo {
  margin: .5rem 0 0;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.endereco-bloco { display: grid; gap: 1rem; }
.endereco-bloco[hidden] { display: none; }

.campo-erro {
  display: none;
  margin: -.3rem 0 0;
  color: var(--wine);
  font-size: .74rem;
}

main[data-estado="erro-campo"] .campo-erro { display: block; }
main[data-estado="erro-campo"] #cpf { border-color: var(--wine); background: rgb(81 0 30 / 5%); }

.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aceite-bloco {
  display: grid;
  gap: .65rem;
  margin: .5rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgb(251 250 246 / 55%);
}

.aceite-texto { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.aceite-texto strong { color: var(--text); }

main[data-estado="so-avista"] .aceite-parcelado { display: none; }
main[data-estado="so-parcelado"] .aceite-avista { display: none; }

.aceite-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .2rem;
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
}

.aceite-checkbox input { margin-top: .25rem; flex-shrink: 0; }

.form-acoes { display: flex; align-items: center; gap: 1rem; margin-top: .3rem; }

.botao-enviando {
  display: none;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: not-allowed;
}

main[data-estado="enviando"] .botao-enviar { display: none; }
main[data-estado="enviando"] .botao-enviando { display: inline-flex; }

.form-status {
  display: none;
  margin: 0;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  line-height: 1.5;
}

.form-status[data-tone="erro"] {
  border-color: rgb(81 0 30 / 35%);
  background: rgb(81 0 30 / 6%);
  color: var(--wine);
}

.form-status[data-tone="erro"] a { color: inherit; font-weight: 600; }

main[data-estado="erro-servidor"] .form-status[data-tone="erro"] { display: block; }

.form-nota { margin: 0; color: var(--quiet); font-size: .68rem; line-height: 1.5; }

/* ---------------------------------------------------------------------- */
/* Troca dos 9 estados via `data-estado` no `<main>` — sem JS.             */
/* ---------------------------------------------------------------------- */

main[data-estado="carregando"] .janela-aberta,
main[data-estado="carregando"] .assinar-grade { display: none; }
main[data-estado="carregando"] .carregando-aviso { display: block; }

main[data-estado="fechada"] .janela-aberta,
main[data-estado="fechada"] .assinar-grade { display: none; }
main[data-estado="fechada"] .janela-fechada { display: block; }

main[data-estado="preview"] .janela-aberta { display: none; }
main[data-estado="preview"] .janela-fechada { display: block; }
main[data-estado="preview"] .badge-preview { display: inline-flex; }

main[data-estado="so-avista"] .modalidade-dupla,
main[data-estado="so-parcelado"] .modalidade-dupla { display: none; }
main[data-estado="so-avista"] .modalidade-solo-avista { display: grid; }
main[data-estado="so-parcelado"] .modalidade-solo-parcelado { display: grid; }
main[data-estado="so-avista"] .resumo-parcelado { display: none; }
main[data-estado="so-parcelado"] .resumo-avista { display: none; }

/* ---------------------------------------------------------------------- */
/* Breakpoints — 1080 / 900 / 760 / 430, mesma convenção do index.html     */
/* ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .assinar-grade { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.25rem; }
}

@media (max-width: 900px) {
  .js .menu-toggle { display: grid; }

  .nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 1.2rem 1.5rem 1.6rem;
    border-bottom: 1px solid var(--line);
    background: rgb(242 238 226 / 98%);
  }

  .js .nav { display: none; }
  .js .nav[data-open="true"] { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav .header-cta { margin-top: .7rem; text-align: center; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }

  .assinar-grade {
    grid-template-columns: 1fr;
    grid-template-areas: "resumo" "principal";
    gap: var(--space-5);
  }

  .resumo-pedido { position: static; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 2rem), var(--content)); }
  .site-header .container { width: min(calc(100% - 1.5rem), var(--content)); }
  .header-inner { min-height: 4.5rem; }
  .brand { width: 132px; }
  .section { padding-block: clamp(5rem, 20vw, 7.5rem); }

  .form-row { grid-template-columns: 1fr; }
  .modalidade-dupla,
  .modalidade-solo-avista,
  .modalidade-solo-parcelado { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: start; flex-direction: column; }
}

@media (max-width: 430px) {
  .assinar-hero h1 { font-size: clamp(2.35rem, 11vw, 3rem); }
  .janela-fechada { padding: 1.5rem; }
  .resumo-pedido { padding: 1.25rem; }
  .modalidade-card { padding: 1rem; }
  .aceite-bloco { padding: 1rem; }
}

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

/* ---------------------------------------------------------------------- */
/* obrigado */
/* ---------------------------------------------------------------------- */

.obrigado-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.obrigado-hero .eyebrow { justify-content: center; }

.obrigado-hero h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.obrigado-hero .lede {
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}

.obrigado-corpo { padding-block: 0 var(--space-7); }

.obrigado-conteudo {
  display: flex;
  max-width: 30rem;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.obrigado-reserva {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.obrigado-reserva p {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
}

.obrigado-reserva strong { color: var(--text); }
.obrigado-reserva a { color: var(--wine); font-weight: 600; }

@media (max-width: 430px) {
  .obrigado-reserva { padding: 1.25rem; }
}