@layer components {

  /* ============ BOTÕES ============ */
  .btn {
    --btn-bg: var(--ember);
    --btn-fg: var(--white);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .8em;
    padding: 1.05em 1.6em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    isolation: isolate;
    overflow: clip;
    transition: transform var(--dur-s) var(--ease-out),
                box-shadow var(--dur-s) var(--ease-out),
                background-color var(--dur-s) var(--ease-out);
  }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--ember-hi);
    transform: translateY(101%);
    transition: transform .5s var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 .9rem 2.2rem -.9rem color-mix(in oklab, var(--ember) 70%, transparent); }
  .btn:hover::before { transform: translateY(0); }
  .btn:active { transform: translateY(0); }
  .btn .arrow { transition: transform var(--dur-m) var(--ease-out); }
  .btn:hover .arrow { transform: translateX(.28em); }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--tx-strong);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  .btn--ghost::before { background: var(--tx-strong); }
  .btn--ghost:hover { color: var(--bone); box-shadow: inset 0 0 0 1px transparent; }
  .on-dark .btn--ghost::before { background: var(--white); }
  .on-dark .btn--ghost:hover { color: var(--ink); }

  .btn--sm { padding: .82em 1.25em; font-size: .82rem; }

  /* fantasma sobre imagem: precisa de contraste próprio */
  .hero .btn--ghost, .fale .btn--ghost, .stack .btn--ghost {
    --btn-fg: var(--white);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--white) 34%, transparent);
  }
  /* Vidro no hero: a foto atrás do botão muda a cada slide do carrossel, e
     num quadro claro o texto branco perdia apoio. O desfoque achata o que
     passa por baixo sem apagar a imagem — o botão continua fantasma, só que
     legível nos quatro slides. O véu escuro sozinho resolveria o contraste,
     mas viraria um botão sólido; é o blur que mantém a leitura de vidro. */
  .hero .btn--ghost {
    --btn-bg: color-mix(in oklab, var(--ink) 26%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
  /* no hover o ::before branco sobe e cobre tudo: sem tirar o desfoque, a
     borda do botão fica com um halo do que estava atrás. */
  .hero .btn--ghost:hover { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero .btn--ghost::before, .fale .btn--ghost::before, .stack .btn--ghost::before { background: var(--white); }
  .hero .btn--ghost:hover, .fale .btn--ghost:hover, .stack .btn--ghost:hover { color: var(--ink); }

  /* link com sublinhado que varre */
  .ulink {
    text-decoration: none;
    background-image: linear-gradient(var(--ember-tx), var(--ember-tx));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-block-end: .18em;
    transition: background-size .45s var(--ease-out), color var(--dur-s) ease;
  }
  .ulink:hover { background-size: 100% 1px; color: var(--tx-strong); }

  /* Sem hover, o sublinhado nunca apareceria e o link ficaria idêntico a
     texto comum — no celular é a única marca de que ali se toca. */
  @media (hover: none) {
    .ulink { background-size: 100% 1px; }
  }

  @media (max-width: 55rem) {
    .nav__brand { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
    /* Padding vertical em elemento inline aumenta a área sensível sem alterar
       a altura da linha; o sublinhado é reposicionado para continuar colado
       ao texto em vez de descer junto com a caixa. */
    .ulink[data-cta] { padding-block: .8rem; background-position: 0 calc(100% - .8rem + .18em); }
    /* No rodapé eles ocupam linhas próprias: inline-block afasta as linhas e
       evita que as áreas de toque vizinhas se sobreponham. */
    .foot .ulink { display: inline-block; padding-block: .8rem; background-position: 0 calc(100% - .8rem + .18em); }
  }

  /* ============ NAV ============ */
  .nav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
    block-size: var(--nav-h);
    display: flex; align-items: center;
    transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out),
                backdrop-filter .5s, transform .45s var(--ease-io);
  }
  .nav__in {
    inline-size: min(100% - (var(--pad-x) * 2), 118rem);
    margin-inline: auto;
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
  }
  .nav__brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; margin-inline-end: auto; }
  /* A marca real é mais baixa e mais larga que o "VG" em Figtree que estava
     aqui (proporção 1,87 contra 2,6), então o mesmo inline-size a deixaria
     menor de fato. 3.6rem sobre uma barra de 4.5rem: 31px de marca em 72px
     de altura, com respiro nos dois lados. */
  .nav__logo { inline-size: 3.6rem; block-size: auto; color: var(--white); transition: color .5s var(--ease-out); }
  /* na barra estreita do celular a marca cede um pouco para não empurrar o
     endereço contra o botão */
  @media (max-width: 55rem) { .nav__logo { inline-size: 3rem; } }
  .nav__addr {
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
    color: color-mix(in oklab, var(--white) 72%, transparent);
    transition: color .5s var(--ease-out);
    padding-inline-start: .85rem;
    border-inline-start: 1px solid color-mix(in oklab, var(--white) 26%, transparent);
  }
  .nav__addr-curto { display: none; }
  /* No celular não cabe o endereço inteiro, mas a cidade não pode sumir: o hero
     não repete mais o endereço, e em tela curta o texto que cita "Centro de
     Curitiba" também sai. Fica a versão curta, sem a rua. */
  @media (max-width: 52rem) {
    .nav__brand { gap: .6rem; }
    .nav__addr { font-size: .7rem; letter-spacing: .1em; padding-inline-start: .6rem; white-space: nowrap; }
    .nav__addr-longo { display: none; }
    .nav__addr-curto { display: inline; }
  }
  /* abaixo de 360 px a versão maior encosta no botão */
  @media (max-width: 22.4rem) {
    .nav__addr { font-size: .64rem; }
  }
  .nav__links { display: flex; gap: clamp(1rem, 2vw, 2.1rem); }
  .nav__links a {
    font-size: .84rem; font-weight: 500; letter-spacing: .005em; text-decoration: none;
    color: color-mix(in oklab, var(--white) 82%, transparent);
    transition: color .3s ease;
  }
  .nav__links a:hover { color: var(--white); }
  @media (max-width: 68rem) { .nav__links { display: none; } }

  .nav.is-solid,
  html:not(.js) .nav {
    background: color-mix(in oklab, var(--bone) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 var(--rule);
  }
  .nav.is-solid .nav__logo,
  html:not(.js) .nav .nav__logo { color: var(--ink); }
  .nav.is-solid .nav__addr,
  html:not(.js) .nav .nav__addr { color: var(--tx-mute); border-inline-start-color: var(--rule); }
  .nav.is-solid .nav__links a,
  html:not(.js) .nav .nav__links a { color: var(--tx-body); }
  .nav.is-solid .nav__links a:hover,
  html:not(.js) .nav .nav__links a:hover { color: var(--ink); }
  .nav.is-hidden { transform: translateY(-100%); }

  /* ============ HERO ============ */
  .hero {
    /* fica grudado no topo enquanto o conteúdo seguinte desliza por cima:
       é daí que vem a sobreposição, sem nada preso à rolagem. */
    position: sticky; inset-block-start: 0; z-index: 0;
    min-block-size: calc(100svh - var(--letreiro-h));
    display: grid;
    grid-template-rows: 1fr auto;
    isolation: isolate;
    overflow: clip;
    background: var(--charcoal);
    /* superfície escura que não é .on-dark: sem isto o laranja de texto
       fica no tom de fundo claro e reprova sobre a foto. */
    --ember-tx: var(--ember-open);
  }
  .hero__bg { position: absolute; inset: 0; overflow: clip; list-style: none; margin: 0; padding: 0; }
  .hero__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1.1s var(--ease-out), visibility 0s 1.1s;
  }
  .hero__slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .hero__slide picture { display: block; block-size: 100%; }
  .hero__bg img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover; object-position: 50% 62%;
  }
  .hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      /* coluna de texto à esquerda */
      linear-gradient(96deg,
        color-mix(in oklab, var(--ink) 90%, transparent) 0%,
        color-mix(in oklab, var(--ink) 78%, transparent) 26%,
        color-mix(in oklab, var(--ink) 40%, transparent) 54%,
        color-mix(in oklab, var(--ink) 12%, transparent) 78%),
      /* base para a faixa de fatos + topo para a nav */
      linear-gradient(180deg,
        color-mix(in oklab, var(--ink) 66%, transparent) 0%,
        color-mix(in oklab, var(--ink) 10%, transparent) 22%,
        color-mix(in oklab, var(--ink) 24%, transparent) 52%,
        color-mix(in oklab, var(--ink) 76%, transparent) 88%,
        color-mix(in oklab, var(--ink) 94%, transparent) 100%),
      radial-gradient(110% 78% at 6% 76%, color-mix(in oklab, var(--ink) 66%, transparent), transparent 64%);
  }
  .hero__inner {
    position: relative; z-index: 2;
    align-self: end;
    inline-size: min(100% - (var(--pad-x) * 2), 118rem);
    margin-inline: auto;
    padding-block: calc(var(--nav-h) + 2rem) clamp(2rem, 4vw, 3.5rem);
    display: grid; gap: clamp(1.1rem, 2vw, 1.9rem);
    color: var(--white);
  }
  /* ============ SELO ============
     Era uma pílula laranja com ponto pulsando — lia como botão e competia
     com os CTAs de verdade. Agora é um selo: disco escuro, texto em volta
     girando devagar e um check no centro. Formato de carimbo, não de botão,
     e ninguém tenta tocar nele.
     Só transform anima, e nada disso responde à rolagem. */
  .selo {
    position: absolute; z-index: 3;
    inset-block-start: calc(var(--nav-h) + 1.4rem);
    inset-inline-end: var(--pad-x);
    inline-size: 8.25rem; block-size: 8.25rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ink) 74%, transparent);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--white) 20%, transparent);
    pointer-events: none;
  }
  .selo__anel {
    grid-area: 1/1; inline-size: 100%; block-size: 100%;
    animation: selo-girar 26s linear infinite;
  }
  @keyframes selo-girar { to { transform: rotate(360deg); } }
  .selo__anel text {
    fill: var(--white);
    font-family: var(--f-sans); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .selo__t--longo { font-size: 8.6px; }
  /* No celular o selo precisa ser menor para não encostar no endereço, e a
     volta longa sairia a 7px. Menos palavras no anel deixam o corpo crescer:
     o mesmo círculo, metade do texto, tipo legível. */
  .selo__t--curto { font-size: 12.2px; display: none; }
  .selo__check {
    grid-area: 1/1;
    inline-size: 2.1rem; block-size: 2.1rem;
    fill: none; stroke: var(--white); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  @media (max-width: 62rem) {
    .selo { inline-size: 5.6rem; block-size: 5.6rem;
            inset-block-start: calc(var(--nav-h) + .5rem); }
    .selo__check { inline-size: 1.35rem; block-size: 1.35rem; }
    .selo__t--longo { display: none; }
    .selo__t--curto { display: block; }
  }
  /* telas curtas: o conteúdo do hero sobe e encosta no selo */
  @media (max-height: 46rem) {
    .selo { inline-size: 4.2rem; block-size: 4.2rem;
            inset-block-start: calc(var(--nav-h) + .2rem); }
    .selo__check { inline-size: 1rem; block-size: 1rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .selo__anel { animation: none; }
  }

  .hero h1 { color: var(--white); max-inline-size: 12ch; }
  .hero h1 em {
    font-style: normal;
    color: var(--ember-tx);
  }
  .hero__lead {
    max-inline-size: 46ch;
    color: color-mix(in oklab, var(--white) 90%, transparent);
    font-size: var(--t-lead); font-weight: 400; line-height: 1.5;
  }
  /* O gancho vem antes da prova. Em peso 300 e com opacidade, o parágrafo
     lia como legenda de foto — e era uma lista de itens, sem motivo para agir. */
  .hero__lead strong {
    display: block; margin-block-end: .3em;
    color: var(--white); font-weight: 600; font-size: 1.14em; letter-spacing: -.012em;
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; padding-block-start: .4rem; }

  /* faixa de fatos do hero */
  .facts {
    position: relative; z-index: 2;
    border-block-start: 1px solid color-mix(in oklab, var(--white) 20%, transparent);
    background: color-mix(in oklab, var(--ink) 46%, transparent);
    backdrop-filter: blur(10px);
  }
  .facts__in {
    inline-size: min(100% - (var(--pad-x) * 2), 118rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
  }
  .facts dl { padding: clamp(.9rem, 2vw, 1.5rem) 0; display: grid; gap: .3rem; }
  .facts dt {
    font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    color: color-mix(in oklab, var(--white) 62%, transparent);
  }
  .facts dd {
    font-size: clamp(1rem, .82rem + .7vw, 1.42rem); font-weight: 300; letter-spacing: -.02em;
    color: var(--white); line-height: 1.1;
  }
  .facts dd small { font-size: .58em; font-weight: 500; letter-spacing: 0; opacity: .8; }
  .facts__item + .facts__item { border-inline-start: 1px solid color-mix(in oklab, var(--white) 16%, transparent); padding-inline-start: clamp(.7rem, 2vw, 1.8rem); }
  @media (max-width: 62rem) {
    .facts__in { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .facts__item:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  }
  @media (max-width: 34rem) { .facts__in { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .facts__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } }

  /* no celular o hero precisa caber junto com o letreiro numa tela só */
  @media (max-width: 46rem) {
    .hero__inner { gap: .8rem; padding-block-end: .9rem; }
    .hero__lead { font-size: .95rem; line-height: 1.45; }
    .hero__actions { gap: .6rem; }
    .hero__ctrl { padding-block-end: .8rem; }
    .facts dl { padding-block: .62rem; gap: .18rem; }
    .facts dd { font-size: 1rem; }
    .facts dt { font-size: .68rem; letter-spacing: .12em; }
    /* o <small> é onde mora o sentido: "quartos", "m²", "vaga". Sair a
       9px enquanto o número sai a 16 inverte a leitura. */
    .facts dd small { font-size: .72em; }

    /* O scrim nasceu como gradiente a 96deg, calibrado para o desktop, onde
       o texto ocupa a coluna da esquerda. No celular .hero__inner ocupa a
       largura inteira e o terço direito de cada linha cai justamente onde o
       gradiente já se dissolveu — sobre pergolado claro e céu. Aqui ele passa
       a ser vertical e protege a linha toda. Continua estático: nada anima. */
    .hero__scrim {
      background: linear-gradient(180deg,
        color-mix(in oklab, var(--ink) 68%, transparent) 0%,    /* nav */
        color-mix(in oklab, var(--ink) 38%, transparent) 15%,   /* respiro: a foto aparece */
        color-mix(in oklab, var(--ink) 60%, transparent) 26%,   /* início da faixa de texto */
        color-mix(in oklab, var(--ink) 60%, transparent) 48%,   /* fim da faixa de texto */
        color-mix(in oklab, var(--ink) 42%, transparent) 60%,
        color-mix(in oklab, var(--ink) 78%, transparent) 85%,   /* faixa de fatos */
        color-mix(in oklab, var(--ink) 94%, transparent) 100%);
    }
  }
  /* telas curtas (Android de 740px, iPhone SE): aperta mais para o letreiro caber */
  @media (max-height: 48rem) {
    .hero__inner { padding-block-start: calc(var(--nav-h) + .5rem); gap: .62rem; }
    .hero__lead { font-size: .9rem; }
    .hero__ctrl { padding-block-end: .6rem; }
    .facts dl { padding-block: .5rem; }
  }
  /* telas muito curtas: o subtítulo sai — o H1, a faixa de fatos e o CTA
     já entregam a mensagem, e o letreiro continua na primeira tela. */
  @media (max-height: 42rem) {
    /* sai só a prova: o gancho continua na primeira tela */
    .hero__lead-prova { display: none; }
  }

  /* ---------- controles do carrossel do hero ---------- */
  .hero__ctrl {
    position: relative; z-index: 2;
    inline-size: min(100% - (var(--pad-x) * 2), 118rem);
    margin-inline: auto;
    display: flex; align-items: center; gap: 1rem 1.5rem;
    padding-block-end: clamp(1rem, 2.2vw, 1.6rem);
    color: var(--white);
  }
  .hero__caps { position: relative; flex: 1; min-block-size: 1.2em; }
  .hero__cap {
    position: absolute; inset-inline-start: 0; inset-block-start: 0;
    font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: color-mix(in oklab, var(--white) 66%, transparent);
    opacity: 0; transform: translateY(.4rem);
    transition: opacity .45s var(--ease-out), transform .5s var(--ease-out);
    white-space: nowrap;
  }
  .hero__cap.is-on { opacity: 1; transform: none; }

  .hero__dots { display: flex; gap: .45rem; }
  .hero__dot { padding: .5rem .1rem; cursor: pointer; }
  .hero__dot i {
    display: block; inline-size: 2.2rem; block-size: 2px;
    background: color-mix(in oklab, var(--white) 30%, transparent);
    position: relative; overflow: clip;
  }
  .hero__dot i::after {
    content: ""; position: absolute; inset: 0; background: var(--ember);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .45s var(--ease-out);
  }
  .hero__dot.is-on i::after { transform: scaleX(1); }
  .hero__dot:hover i { background: color-mix(in oklab, var(--white) 55%, transparent); }

  .hero__arrows { display: flex; gap: .5rem; }
  .hero .rnd { --btn-fg: var(--white); color: var(--white);
               box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--white) 32%, transparent); }
  .hero .rnd:hover { background: var(--ember); color: var(--white); box-shadow: none; }
  @media (max-width: 46rem) {
    .hero__caps { display: none; }
    .hero__ctrl { justify-content: space-between; }
  }

  /* ============ TICKER ============ */
  .ticker {
    position: relative; z-index: 1;
    block-size: var(--letreiro-h);
    display: flex; align-items: center;
    background: var(--ink); color: var(--tx-on-dark);
    border-block: 1px solid var(--rule-dark);
    overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .ticker__track { display: flex; inline-size: max-content; animation: slide 95s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  .ticker ul { display: flex; align-items: center; gap: 2.1rem; padding-inline-end: 2.1rem; }
  .ticker li {
    font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
    white-space: nowrap; display: flex; align-items: center; gap: 2.1rem;
    color: color-mix(in oklab, var(--white) 70%, transparent);
  }
  .ticker li::after { content: ""; inline-size: .24rem; block-size: .24rem; border-radius: 50%; background: var(--ember); }
  @keyframes slide { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

  /* ============ FIGURAS ============ */
  .fig { position: relative; overflow: clip; background: color-mix(in oklab, var(--charcoal) 20%, var(--bone)); }
  /* <picture> é inline por padrão: sem isto a <img> não estica na altura da caixa */
  .fig picture { display: block; inline-size: 100%; block-size: 100%; }
  .fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .fig--r43 { aspect-ratio: 4/3; }
  .fig--r32 { aspect-ratio: 3/2; }
  .fig--r45 { aspect-ratio: 4/5; }
  .fig--r11 { aspect-ratio: 1/1; }
  .fig--r169 { aspect-ratio: 16/9; }
  .fig__cap {
    position: absolute; inset-block-end: 0; inset-inline: 0;
    padding: clamp(1rem, 2vw, 1.7rem);
    color: var(--white);
    background: linear-gradient(0deg, color-mix(in oklab, var(--ink) 82%, transparent), transparent);
  }

  /* ============ FORMULÁRIO ============ */
  .form { display: grid; gap: 1.05rem; }
  .field { display: grid; gap: .45rem; }
  .field > span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--tx-mute); }
  .field input, .field select {
    inline-size: 100%;
    padding: .95em 1em;
    background: transparent;
    color: var(--tx-strong);
    border: 0;
    border-block-end: 1px solid var(--rule);
    border-radius: 0;
    transition: border-color .35s var(--ease-out), background-color .35s;
  }
  .field input::placeholder { color: color-mix(in oklab, currentColor 42%, transparent); }
  .field input:focus, .field select:focus { outline: none; border-block-end-color: var(--ember-tx); }
  .field input:user-invalid { border-block-end-color: #C0392B; }
  .field select { appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
  .form__note { font-size: .76rem; color: var(--tx-mute); line-height: 1.5; }

  /* ============ BARRA FIXA MOBILE ============ */
  .dock {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 55;
    display: none; gap: .6rem; padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--bone) 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--rule);
    transform: translateY(110%);
    transition: transform .5s var(--ease-out);
  }
  .dock.is-on { transform: translateY(0); }
  .dock .btn { flex: 1; justify-content: center; }
  @media (max-width: 55rem) {
    .dock { display: flex; }
    /* a reserva precisa acompanhar a altura real do dock: botão de 44px,
       o padding próprio e a faixa do indicador de home do iPhone. */
    body { padding-block-end: calc(4.6rem + env(safe-area-inset-bottom)); }
  }

  /* ---------- ERGONOMIA DE TOQUE ----------
     Abaixo de 55rem o ponteiro é o dedo. 44px é o alvo mínimo (Apple HIG)
     e vale sobretudo para o que converte: dock, nav e controles do hero.
     Tudo vive dentro da media query — o desktop fica exatamente como está. */
  @media (max-width: 55rem) {
    .btn--sm { min-block-size: 2.75rem; padding-block: .7em; padding-inline: 1.4em; }

    /* Os pontos do carrossel são finos por desenho. Em vez de engordar a
       barrinha e mudar o hero, estendo só a área sensível com um pseudo. */
    .hero__dot { position: relative; }
    .hero__dot::after { content: ""; position: absolute; inset: -.8rem -.3rem; }

    /* campo abaixo de 16px faz o Safari dar zoom ao focar; o select nem
       sempre herda o corpo, então declaro explícito nos dois. */
    .field input, .field select { font-size: 1rem; }
  }
}