/* =========================================================================
   Roval Sertão — páginas de unidade
   Paleta oficial: #C10230 (marca), #A0072C (escuro), #6F7271 (cinza)

   CSS moderno: @layer, aninhamento nativo, @property, color-mix(),
   container queries, :has(), propriedades lógicas e View Transitions.
   ========================================================================= */

@layer reset, base, layout, componentes, responsivo;

/* ---------------------------------------------------------------- tokens */

@property --btn-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c10230;
}

/* registrada para que navegadores sem relative color syntax caiam
   no initial-value em vez de perder a cor do foco */
@property --marca-clara {
  syntax: "<color>";
  inherits: true;
  initial-value: #e63455;
}

:root {
  /* cores da marca — valores exatos do manual */
  --marca: #c10230;
  --marca-escura: #a0072c;
  --cinza: #6f7271;

  /* tons derivados, calculados no espaço perceptual */
  --marca-clara: oklch(from var(--marca) calc(l + .12) c h);
  --marca-contorno: color-mix(in oklab, var(--marca) 35%, transparent);

  --grafite: #23262a;
  --grafite-suave: #3a3f45;
  --areia: #f7f3ef;
  --texto: #2b2f33;
  --texto-suave: #5d646b;
  --linha: #e4e0dc;
  --zap: #1fa855;
  --zap-escuro: #17843f;

  --raio: .875rem;
  --raio-g: 1.5rem;
  --sombra: 0 1px 2px rgb(35 38 42 / 6%), 0 .5rem 1.5rem -.75rem rgb(35 38 42 / 18%);
  --sombra-alta: 0 2px 4px rgb(35 38 42 / 8%), 0 1.5rem 3rem -1.25rem rgb(35 38 42 / 28%);

  --largura: 75rem;
  --gutter: 1.25rem;
  --altura-topo: 7.125rem;
  --transicao: 180ms cubic-bezier(.2, .7, .3, 1);

  /* permite animar height/width para auto */
  interpolate-size: allow-keywords;

  accent-color: var(--marca);
  color-scheme: light;
  scrollbar-gutter: stable;
}

/* transição entre páginas; ignorada por quem não suporta */
@view-transition { navigation: auto; }

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

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

  :where(body, h1, h2, h3, h4, p, ul, ol, figure, address) { margin: 0; }
  :where(ul[class], ol[class]) { padding: 0; list-style: none; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(img, svg, iframe, video) { display: block; max-inline-size: 100%; }
  :where(img) { block-size: auto; }

  :where(input, button, textarea, select) { font: inherit; color: inherit; }
  :where(textarea) { field-sizing: content; resize: vertical; }
}

/* ------------------------------------------------------------------ base */

@layer base {
  body {
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--texto);
    background: white;
    -webkit-font-smoothing: antialiased;
  }

  :is(h1, h2, h3, h4) {
    margin-block-end: .5em;
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 800;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
  h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
  h3 { font-size: 1.16rem; font-weight: 700; }

  p { margin-block-end: 1em; text-wrap: pretty; }
  p:last-child { margin-block-end: 0; }

  a {
    color: var(--marca);
    text-decoration-color: var(--marca-contorno);
    text-underline-offset: 3px;

    &:hover { text-decoration-color: currentColor; }
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--linha);
    margin-block: 2rem;
  }

  :focus-visible {
    outline: 3px solid var(--marca-clara);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection { background: var(--marca); color: white; }

  .sr {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .pular {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -100vw;
    z-index: 999;
    background: var(--marca);
    color: white;
    padding: .8rem 1.2rem;
    border-end-end-radius: 8px;

    &:focus { inset-inline-start: 0; }
  }
}

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

@layer layout {
  .envelope {
    inline-size: min(100% - (var(--gutter) * 2), var(--largura));
    margin-inline: auto;
  }

  .secao {
    padding-block: clamp(3rem, 5vw, 5rem);

    &.secao--areia { background: var(--areia); }

    &.secao--escura {
      background: var(--grafite);
      color: #e8ebee;

      & :is(h2, h3) { color: white; }
      & .secao__texto { color: #b9c0c7; }
      & .secao__sup { color: #ff8fa3; }
    }

    &.secao--cta {
      background: linear-gradient(135deg, var(--grafite), var(--grafite-suave));
      color: white;

      & .secao__sup { color: #ff8fa3; }
    }
  }

  .secao__cabeca {
    max-inline-size: 62ch;
    margin-block-end: 2.4rem;

    &.secao__cabeca--linha {
      max-inline-size: none;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
    }
  }

  .secao__sup {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marca);
    margin-block-end: .5rem;
  }

  .secao__texto { color: var(--texto-suave); font-size: 1.03rem; }
  .secao__acao { margin-block-start: 2.5rem; text-align: center; }

  .grade {
    display: grid;
    gap: 1.4rem;

    &.grade--blocos {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
      counter-reset: bloco;
    }

    &.grade--produtos {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
    }
  }

  .prosa {
    max-inline-size: 72ch;

    &.prosa--estreita { max-inline-size: 68ch; }

    & :is(ul, ol):not([class]) { padding-inline-start: 1.2rem; }
    & li { margin-block-end: .45rem; }
  }

  .prosa__nota { font-size: .92rem; color: var(--texto-suave); }
}

/* ----------------------------------------------------------- componentes */

@layer componentes {

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

  .btn {
    --btn-bg: var(--marca);
    --btn-fg: white;
    --btn-bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.3rem;
    border: 1.5px solid var(--btn-bd);
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
      --btn-bg var(--transicao),
      translate var(--transicao),
      box-shadow var(--transicao);

    &:hover { translate: 0 -1px; box-shadow: var(--sombra); }
    &:active { translate: 0; }

    &.btn--grande { padding: .95rem 1.7rem; font-size: 1rem; }
    &.btn--primario:hover { --btn-bg: var(--marca-escura); }
    &.btn--zap { --btn-bg: var(--zap); }
    &.btn--zap:hover { --btn-bg: var(--zap-escuro); }

    &.btn--fantasma {
      --btn-bg: transparent;
      --btn-fg: currentColor;
      --btn-bd: currentColor;

      &:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
    }
  }

  .link-forte {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--marca);

    &:hover { text-decoration: underline; text-underline-offset: 4px; }
  }

  .ico {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;

    &.ico--sm { inline-size: .9375rem; block-size: .9375rem; }
    &.ico--lg { inline-size: 1.625rem; block-size: 1.625rem; }

    &.ico--traco {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  /* --------------------------------------------------------------- topo */

  .topo {
    /* o cabeçalho respira mais que o conteúdo, para o menu caber em uma linha */
    & .envelope { --largura: 82rem; }

    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: white;
    box-shadow: 0 1px 0 var(--linha);
    view-transition-name: topo;
  }

  .barra-aviso {
    background: var(--grafite);
    color: #d9dde1;
    font-size: .8rem;

    & .barra-aviso__linha {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      min-block-size: 2.25rem;
    }

    & .barra-aviso__cidade {
      display: inline-flex;
      align-items: center;
      gap: .4rem;

      & .ico { opacity: .75; }
    }

    & .barra-aviso__troca {
      color: white;
      font-weight: 700;
      text-decoration: none;
      border-block-end: 1px solid rgb(255 255 255 / 35%);

      &:hover { border-color: white; }
    }
  }

  .topo__linha {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-block-size: 4.875rem;
  }

  .marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    flex: none;

    & img { inline-size: 8.25rem; }
  }

  .marca__unidade {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marca);
    padding: .25rem .55rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
  }

  /* O menu é um popover. No desktop esta regra de autor vence o
     display:none da folha do navegador e ele fica sempre visível. */
  .nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-inline-start: auto;
    position: static;
    inset: auto;
    inline-size: auto;
    max-inline-size: none;
    block-size: auto;
    max-block-size: none;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;

    & .nav__lista { display: flex; gap: 1.1rem; }

    & .nav__lista a {
      color: var(--texto);
      text-decoration: none;
      font-weight: 600;
      font-size: .9rem;
      white-space: nowrap;
      padding-block: .35rem;
      border-block-end: 2px solid transparent;

      &:hover { color: var(--marca); }

      &[aria-current="page"] {
        color: var(--marca);
        border-color: var(--marca);
      }
    }

    & .nav__cta { flex: none; }
  }

  .menu-btn { display: none; }

  /* --------------------------------------------------------------- hero */

  .hero {
    position: relative;
    color: white;
    overflow: clip;

    & .hero__fundo {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 90% at 82% 10%, rgb(255 255 255 / 14%), transparent 60%),
        linear-gradient(135deg, var(--marca-escura) 0%, var(--marca) 52%, #d63a55 100%);

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .16;
        background-image: radial-gradient(rgb(255 255 255 / 60%) 1px, transparent 1px);
        background-size: 1.375rem 1.375rem;
      }
    }

    & .hero__grade {
      position: relative;
      display: grid;
      grid-template-columns: 1.35fr .85fr;
      gap: 3rem;
      align-items: center;
      padding-block: clamp(3rem, 6vw, 5.5rem);
    }

    & h1 {
      margin-block-end: 1rem;

      & em { font-style: normal; color: #ffd9e0; }
    }

    & .hero__sup {
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .85;
      margin-block-end: .8rem;
    }

    & .hero__desc { font-size: 1.06rem; max-inline-size: 46ch; opacity: .95; }

    & .hero__acoes {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-block: 1.8rem 2rem;

      & .btn--fantasma { color: white; }
    }

    & .hero__selos {
      display: flex;
      flex-wrap: wrap;
      gap: 1.8rem;
      padding-block-start: 1.4rem;
      border-block-start: 1px solid rgb(255 255 255 / 22%);
      font-size: .88rem;

      & strong { display: block; font-size: 1.4rem; font-weight: 800; }
    }
  }

  .hero__cartao {
    background: white;
    color: var(--texto);
    border-radius: var(--raio-g);
    padding: 1.8rem;
    box-shadow: var(--sombra-alta);

    & h2 { font-size: 1.15rem; margin-block-end: 1.1rem; }
  }

  .cartao-info {
    display: grid;
    gap: .95rem;
    font-size: .93rem;

    & li { display: flex; gap: .7rem; align-items: flex-start; }
    & .ico { color: var(--marca); margin-block-start: .18rem; }

    & a {
      text-decoration: none;
      font-weight: 600;

      &:hover { text-decoration: underline; }
    }

    &.cartao-info--grande { font-size: 1rem; gap: 1.2rem; }
  }

  .cartao-info__mapa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-start: 1.3rem;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }

  /* ------------------------------------------------------------ blocos */

  .bloco {
    background: white;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.6rem;
    transition: translate var(--transicao), box-shadow var(--transicao);

    &:hover { translate: 0 -2px; box-shadow: var(--sombra); }

    & h3 { color: var(--grafite); }
    & p { color: var(--texto-suave); font-size: .96rem; }

    &.bloco--numerado {
      counter-increment: bloco;
      position: relative;
      padding-block-start: 2.6rem;

      &::before {
        content: counter(bloco, decimal-leading-zero);
        position: absolute;
        inset-block-start: 1.4rem;
        inset-inline-start: 1.6rem;
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .1em;
        color: var(--marca);
      }
    }
  }

  .passos {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
    counter-reset: passo;

    & li {
      counter-increment: passo;
      padding: 1.6rem;
      border-radius: var(--raio);
      background: rgb(255 255 255 / 6%);
      border: 1px solid rgb(255 255 255 / 12%);
    }

    & :is(h2, h3) { font-size: 1.05rem; margin-block-end: .5rem; }
    & p { font-size: .94rem; color: #b9c0c7; }

    &.passos--claro {
      & li { background: var(--areia); border-color: var(--linha); }
      & p { color: var(--texto-suave); }
    }
  }

  .numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: 1.2rem;
    margin-block-start: 2.5rem;

    & li { border-inline-start: 3px solid var(--marca); padding-inline-start: 1rem; }

    & strong {
      display: block;
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1;
      color: var(--marca);
    }

    & span { font-size: .9rem; color: var(--texto-suave); }
  }

  .etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;

    & li {
      background: white;
      border: 1.5px solid var(--linha);
      border-radius: 999px;
      padding: .55rem 1.1rem;
      font-size: .9rem;
      font-weight: 600;
    }
  }

  /* ---------------------------------------------------------- produtos */

  .produto-card {
    block-size: 100%;
    container: card / inline-size;

    & .produto-card__link {
      display: flex;
      flex-direction: column;
      block-size: 100%;
      background: white;
      border: 1px solid var(--linha);
      border-radius: var(--raio);
      overflow: clip;
      text-decoration: none;
      color: inherit;
      transition:
        translate var(--transicao),
        box-shadow var(--transicao),
        border-color var(--transicao);

      &:hover {
        translate: 0 -3px;
        box-shadow: var(--sombra);
        border-color: color-mix(in oklab, var(--linha) 70%, var(--cinza));

        & .produto-card__cta { color: var(--marca); }
      }
    }

    & .produto-card__img {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      padding: 1rem;
      background: linear-gradient(160deg, #fbf8f6, #f2ece7);

      & img {
        max-block-size: 100%;
        inline-size: auto;
        object-fit: contain;
        mix-blend-mode: multiply;
      }
    }

    & .produto-card__sem-img {
      font-weight: 800;
      color: var(--linha);
      font-size: 1.6rem;
      letter-spacing: .1em;
    }

    & .produto-card__corpo {
      padding: 1.05rem 1.1rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: .35rem;
      flex: 1;

      & h3 { font-size: .96rem; font-weight: 700; line-height: 1.35; margin: 0; }
    }

    & .produto-card__preco {
      margin: 0;
      font-weight: 800;
      color: var(--marca);
      font-size: 1.05rem;

      &.produto-card__preco--consulta {
        font-size: .9rem;
        font-weight: 700;
        color: var(--cinza);
      }
    }

    & .produto-card__cta {
      margin-block-start: auto;
      padding-block-start: .6rem;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .85rem;
      font-weight: 700;
      color: var(--cinza);
      transition: color var(--transicao);
    }

    /* cards estreitos (grade densa no celular) compactam a tipografia */
    @container card (inline-size < 11rem) {
      & .produto-card__corpo { padding: .8rem .85rem 1rem; }
      & .produto-card__corpo h3 { font-size: .88rem; }
      & .produto-card__cta { display: none; }
    }
  }

  /* filtros e busca */

  .filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-block-end: 1.2rem;
  }

  .filtro {
    font-size: .87rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    background: white;
    color: var(--texto);
    border: 1.5px solid var(--linha);
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);

    & span { opacity: .5; font-size: .8rem; margin-inline-start: .2rem; }

    &:hover { border-color: var(--marca); color: var(--marca); }

    &.is-ativo {
      background: var(--marca);
      border-color: var(--marca);
      color: white;

      & span { opacity: .75; }
    }
  }

  .busca {
    margin-block-end: 1rem;

    & input {
      inline-size: min(100%, 26rem);
      font-size: .95rem;
      padding: .7rem 1rem;
      border: 1.5px solid var(--linha);
      border-radius: 999px;
      background: white;

      &:focus { border-color: var(--marca); outline-offset: 0; }
    }
  }

  .resultado-info {
    font-size: .88rem;
    color: var(--texto-suave);
    margin-block-end: 1.4rem;
  }

  .produto-item[hidden] { display: none; }

  .vazio { text-align: center; padding-block: 3rem; color: var(--texto-suave); }

  /* detalhe do produto */

  .produto__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .produto__midia {
    border-radius: var(--raio-g);
    padding: 2.5rem;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #fbf8f6, #efe8e2);
    position: sticky;
    inset-block-start: 7.5rem;

    & img {
      max-block-size: 30rem;
      inline-size: auto;
      object-fit: contain;
      mix-blend-mode: multiply;
    }
  }

  .produto__sem-img {
    font-weight: 800;
    color: #dcd6d0;
    font-size: 3rem;
    letter-spacing: .1em;
  }

  .produto__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-block-end: .8rem;

    & a {
      display: block;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--cinza);
      background: var(--areia);
      padding: .3rem .7rem;
      border-radius: 999px;

      &:hover { background: var(--marca); color: white; }
    }
  }

  .produto__info h1 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.3rem); }

  .produto__preco {
    font-size: 2rem;
    font-weight: 800;
    color: var(--marca);
    margin-block: .3rem .6rem;

    &.produto__preco--consulta { font-size: 1.3rem; color: var(--cinza); }
  }

  .produto__disp { font-size: .92rem; color: var(--texto-suave); }

  .produto__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-block: 1.5rem 2rem;

    & .btn--fantasma { color: var(--marca); }
  }

  .produto__desc {
    border-block-start: 1px solid var(--linha);
    padding-block-start: 1.8rem;

    & h2 { font-size: 1.2rem; }
    & :is(h3, h5) { font-size: 1rem; margin-block: 1.4rem .4rem; }
  }

  .produto__nota {
    margin-block-start: 2rem;
    font-size: .82rem;
    color: var(--cinza);
    border-block-start: 1px solid var(--linha);
    padding-block-start: 1rem;
  }

  /* --------------------------------------------------- capa e migalhas */

  .migalhas {
    background: var(--areia);
    font-size: .85rem;

    & ol {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      align-items: center;
      padding-block: .9rem;
      list-style: none;
    }

    & li:not(:last-child)::after {
      content: "›";
      margin-inline-start: .45rem;
      color: var(--linha);
    }

    & a {
      color: var(--texto-suave);
      text-decoration: none;

      &:hover { color: var(--marca); }
    }

    & [aria-current] { color: var(--texto); font-weight: 600; }
  }

  .capa {
    background: linear-gradient(135deg, var(--marca-escura), var(--marca));
    color: white;
    padding-block: clamp(2.6rem, 5vw, 4.2rem);

    & h1 { margin-block-end: .6rem; }
    & .capa__texto { max-inline-size: 62ch; opacity: .93; }

    & .capa__sup {
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: .8;
      margin-block-end: .5rem;
    }
  }

  /* ---------------------------------------------------- loja e contato */

  .loja__grade {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3rem;
    align-items: start;
  }

  .loja__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-block-start: 1.8rem;
  }

  .loja__mapa {
    border-radius: var(--raio-g);
    overflow: clip;
    box-shadow: var(--sombra);

    & iframe { inline-size: 100%; block-size: 27.5rem; border: 0; }
  }

  .contato__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .canal {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    margin-block-end: .8rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transicao), box-shadow var(--transicao), translate var(--transicao);

    &:hover:not(.canal--estatico) {
      border-color: var(--marca);
      box-shadow: var(--sombra);
      translate: 0 -2px;
    }

    & .ico { color: var(--marca); }
    & span { display: block; font-size: .95rem; }

    & strong {
      display: block;
      font-size: .78rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cinza);
      font-weight: 800;
    }
  }

  .contato__outra { margin-block-start: 1.5rem; font-size: .92rem; color: var(--texto-suave); }

  /* ------------------------------------------------------------ forms */

  .form-pedido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;

    & .aviso {
      font-size: .88rem;
      color: var(--texto-suave);
      border-inline-start: 3px solid var(--marca);
      padding-inline-start: 1rem;
    }
  }

  .form {
    display: grid;
    gap: 1rem;

    &.form--cartao {
      background: white;
      border: 1px solid var(--linha);
      border-radius: var(--raio-g);
      padding: 2rem;
      box-shadow: var(--sombra);
    }
  }

  .campo {
    display: grid;
    gap: .35rem;

    & label { font-size: .85rem; font-weight: 700; }

    & :is(input, select, textarea) {
      font-size: .95rem;
      padding: .75rem .95rem;
      border: 1.5px solid var(--linha);
      border-radius: 10px;
      background: white;
      inline-size: 100%;
      min-block-size: 2.75rem;

      &:focus { border-color: var(--marca); outline-offset: 0; }
      &:user-invalid { border-color: var(--marca); }
    }
  }

  .form__nota { font-size: .8rem; color: var(--cinza); }

  /* --------------------------------------------------------- cta final */

  .cta-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;

    & h2 { margin-block-end: .3rem; }
    & p { opacity: .82; }

    & .cta-final__acoes {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;

      & .btn--fantasma { color: white; }
    }
  }

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

  .rodape {
    background: var(--grafite);
    color: #aeb5bc;
    font-size: .92rem;
    padding-block-start: 3.5rem;
    view-transition-name: rodape;

    & .rodape__grade {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 2.5rem;
      padding-block-end: 3rem;
    }

    & .rodape__marca img {
      inline-size: 9.375rem;
      filter: brightness(0) invert(1);
      opacity: .95;
      margin-block-end: 1rem;
    }

    & .rodape__slogan { font-weight: 700; color: white; font-size: 1rem; }

    & .rodape__unidade {
      font-style: normal;
      line-height: 1.7;
      margin-block-end: 1.2rem;

      & strong { color: white; }
    }

    & .rodape__col {
      & h2 {
        font-size: .78rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: white;
        margin-block-end: .9rem;
      }

      & .rodape__h2--espaco { margin-block-start: 1.8rem; }

      & ul { display: grid; gap: .55rem; }

      & a {
        color: #aeb5bc;
        text-decoration: none;

        &:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
      }
    }

    & .rodape__base {
      border-block-start: 1px solid rgb(255 255 255 / 10%);
      padding-block: 1.5rem 2rem;
      font-size: .8rem;
      color: #7f878f;

      & p { margin-block-end: .5rem; }
      & .rodape__legal { line-height: 1.6; }
    }
  }

  /* ---------------------------------------------------- zap flutuante */

  .zap-flutuante {
    position: fixed;
    inset-block-end: max(1.2rem, env(safe-area-inset-bottom));
    inset-inline-end: 1.2rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--zap);
    color: white;
    text-decoration: none;
    padding: .85rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    box-shadow: 0 .625rem 1.875rem -.5rem rgb(31 168 85 / 65%);
    transition: background var(--transicao), translate var(--transicao);
    view-transition-name: zap-flutuante;

    &:hover { background: var(--zap-escuro); translate: 0 -2px; }
  }
}

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

@layer responsivo {

  @media (width <= 62.5rem) {
    .hero .hero__grade,
    .produto__grade,
    .loja__grade,
    .contato__grade,
    .form-pedido { grid-template-columns: 1fr; gap: 2.2rem; }

    .produto__midia { position: static; }

    .rodape .rodape__grade { grid-template-columns: 1fr 1fr; }
  }

  @media (width <= 77.5rem) {
    .menu-btn {
      display: grid;
      place-items: center;
      margin-inline-start: auto;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      background: none;
      border: 1.5px solid var(--linha);
      border-radius: 10px;
      cursor: pointer;
      padding: 0;
    }

    .menu-btn__barra {
      position: relative;

      &, &::before, &::after {
        content: "";
        display: block;
        inline-size: 1.25rem;
        block-size: 2px;
        background: var(--texto);
        border-radius: 2px;
        transition: translate var(--transicao), rotate var(--transicao), background var(--transicao);
      }

      &::before { position: absolute; inset-block-start: -6px; }
      &::after { position: absolute; inset-block-start: 6px; }
    }

    /* o botão vira "X" quando o popover do menu está aberto */
    .topo:has(.nav:popover-open) .menu-btn__barra {
      background: transparent;

      &::before { translate: 0 6px; rotate: 45deg; }
      &::after { translate: 0 -6px; rotate: -45deg; }
    }

    .nav {
      position: fixed;
      inset: var(--altura-topo) 0 auto;
      inline-size: 100%;
      max-block-size: calc(100dvh - var(--altura-topo));
      overflow-y: auto;
      margin: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: white;
      border-block-start: 1px solid var(--linha);
      box-shadow: var(--sombra-alta);
      padding: 1rem 1.25rem 1.6rem;

      /* fechado, volta ao comportamento padrão de [popover] */
      &:not(:popover-open) { display: none; }

      &::backdrop { background: rgb(20 22 24 / 45%); }

      & .nav__lista { flex-direction: column; gap: 0; }

      & .nav__lista li { border-block-end: 1px solid var(--linha); }

      & .nav__lista a {
        display: block;
        padding-block: .9rem;
        font-size: 1rem;
        border-block-end: 0;
      }

      & .nav__cta { margin-block-start: 1.2rem; }
    }

    .secao__cabeca--linha { align-items: flex-start; }

    .zap-flutuante {
      padding: .95rem;

      & span { display: none; }
    }
  }

  @media (width <= 38.75rem) {
    :root { --gutter: 1rem; --altura-topo: 6.75rem; }

    body { font-size: 1rem; }

    .rodape .rodape__grade { grid-template-columns: 1fr; gap: 2rem; }

    .grade.grade--produtos {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
      gap: .9rem;
    }

    .hero .hero__selos { gap: 1.2rem; }

    .barra-aviso { font-size: .74rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }

    @view-transition { navigation: none; }
  }

  @media print {
    .topo, .rodape, .zap-flutuante, .filtros, .busca, .migalhas { display: none !important; }
    body { font-size: 12pt; color: black; }
    .capa, .hero .hero__fundo { background: none !important; color: black !important; }
  }
}