/* ==========================================================================
   ÂMBAR ÓTICA — estilos por página
   ========================================================================== */

/* ============================ HOME ============================ */

.hero { position: relative; padding-block: 96px 88px; min-height: 780px; display: flex; align-items: center; }
.hero__texto { position: relative; z-index: 3; max-width: 630px; }
.hero h1 { font-size: clamp(40px, 6.4vw, 92px); line-height: .94; font-weight: 700; letter-spacing: -.028em; }
.hero h1 span { color: var(--terracota); display: block; }
.hero__sub { margin-top: 30px; font-size: clamp(16px, 1.5vw, 20px); color: var(--tinta-2); max-width: 500px; }
.hero__acoes { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.hero__prazo { margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; color: var(--tinta-3); text-transform: uppercase; }

.hero__foto { position: absolute; inset-block: 0; right: 0; width: min(47%, 780px); min-width: 480px; }
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--areia) 0%, rgba(232,220,196,.86) 12%, rgba(232,220,196,0) 42%),
    linear-gradient(180deg, rgba(232,220,196,.6) 0%, rgba(232,220,196,0) 20%, rgba(232,220,196,0) 62%, rgba(232,220,196,.72) 88%, var(--areia) 100%);
}

.medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 50px; max-width: 900px; }
.medida { border: 1px solid var(--borda); background: var(--papel); border-radius: var(--raio); padding: 30px 28px 26px; }
.medida__n { font-family: var(--mono); font-size: 62px; font-weight: 700; line-height: 1; color: var(--terracota); }
.medida__t { font-size: 16px; font-weight: 600; margin-top: 14px; }
.medida__d { font-size: 14px; color: var(--tinta-2); margin-top: 6px; }

.caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 46px; }
.caminho { border-radius: var(--raio); padding: 40px 38px 36px; }
.caminho--ambar { background: var(--ambar-campo); border: 1px solid var(--ambar-borda); }
.caminho--oliva { background: var(--oliva-campo); border: 1px solid var(--oliva-borda); }
.caminho h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.015em; }
.caminho--oliva h3 { color: var(--oliva-tinta); }
.caminho__intro { margin-top: 12px; font-size: 15px; color: var(--tinta-2); }
.caminho--oliva .caminho__intro { color: var(--oliva-escuro); }
.caminho ol { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: passo; }
.caminho li { display: flex; gap: 18px; align-items: baseline; font-size: 16px; line-height: 1.45; }
.caminho li::before {
  counter-increment: passo; content: "0" counter(passo);
  font-family: var(--mono); font-size: 12px; min-width: 22px; flex: 0 0 auto;
  color: var(--terracota);
}
.caminho--oliva li { color: var(--oliva-tinta); }
.caminho--oliva li::before { color: var(--oliva); }
.caminho .btn { margin-top: 34px; }

.banda { height: clamp(240px, 28vw, 420px); position: relative; overflow: hidden; }
.banda::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(232,220,196,.42) 0%, rgba(232,220,196,0) 34%, rgba(239,228,206,.5) 100%);
}

.placas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.placa {
  display: block; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  transition: transform 260ms var(--saida), box-shadow 260ms var(--saida);
}
.placa:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(58,34,12,.45); }
.placa__mat { height: 210px; position: relative; }
.placa__mat svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.placa__pe { padding: 15px 18px 17px; background: var(--papel); }
.placa__nome { font-family: var(--display); font-size: 21px; color: var(--tinta); }
.placa__pe .rotulo { margin-top: 5px; }

.loja { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 60px; align-items: start; }
.loja__foto { height: 620px; }
.loja h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.loja__texto p { margin-top: 22px; font-size: 17px; color: var(--tinta-2); max-width: 480px; }
.loja__acoes { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.ficha { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel); padding: 30px; margin-top: 38px; max-width: 480px; display: flex; flex-direction: column; gap: 20px; }
.ficha__linha + .ficha__linha { border-top: 1px solid var(--borda-suave); padding-top: 20px; }
.ficha__valor { font-size: 16px; margin-top: 7px; }

@media (max-width: 1180px) {
  .hero__foto { width: 44%; min-width: 380px; }
  .loja { grid-template-columns: 1fr 1fr; gap: 40px; }
  .loja__foto { height: 520px; }
}
@media (max-width: 900px) {
  .hero { display: block; padding-block: 0 56px; min-height: 0; }
  .hero__foto { position: relative; inset: auto; width: calc(100% + var(--goteira) * 2); min-width: 0; margin-inline: calc(var(--goteira) * -1); height: 420px; }
  .hero__foto::after { background: linear-gradient(180deg, rgba(232,220,196,.3) 0%, rgba(232,220,196,0) 30%, rgba(232,220,196,0) 74%, var(--areia) 100%); }
  .hero__texto { max-width: none; margin-top: 40px; }
  .medidas { grid-template-columns: 1fr; gap: 14px; }
  .medida { padding: 22px 22px 20px; }
  .medida__n { font-size: 46px; }
  .caminhos { grid-template-columns: 1fr; }
  .caminho { padding: 30px 26px 28px; }
  .banda { height: 260px; }
  .placas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .placa__mat { height: 150px; }
  .loja { grid-template-columns: 1fr; gap: 32px; }
  .loja__foto { height: 380px; }
  .ficha { max-width: none; }
}
@media (max-width: 560px) {
  .placas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banda { height: 200px; }
  .hero__foto { height: 340px; }
}

/* ============================ CATÁLOGO ============================ */

.cabeca { padding-block: 52px 34px; }
.cabeca h1 { font-size: clamp(34px, 4.6vw, 62px); font-weight: 700; letter-spacing: -.026em; line-height: 1; }
.cabeca p { margin-top: 16px; font-size: 17px; color: var(--tinta-2); max-width: 620px; }

.cat { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 44px; align-items: start; padding-bottom: 80px; }

.rail { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 24px 22px 26px; position: sticky; top: 96px; }
.aviso {
  font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: .1em;
  color: var(--terracota); border: 1px solid #D8B99A; background: #F7EEDC;
  padding: 9px 10px; border-radius: var(--raio-btn);
}
.grupo + .grupo { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--borda-suave); }
.grupo > .rotulo { display: block; margin-bottom: 12px; }
.grupo__ajuda { font-size: 13px; line-height: 1.45; color: var(--tinta-2); margin: -4px 0 14px; }

.formas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.forma {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 70px; padding: 12px 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--papel);
  color: var(--tinta-2); font-size: 12px; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.forma svg { width: 52px; fill: none; stroke: currentColor; stroke-width: 8; }
.forma:hover { border-color: var(--terracota); }
.forma[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }

.faceta { display: flex; align-items: center; gap: 11px; min-height: 44px; padding-block: 8px; font-size: 15px; color: var(--tinta-2); cursor: pointer; width: 100%; background: none; border: 0; text-align: left; }
.faceta:hover { color: var(--terracota); }
.faceta__cx { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid #9A845E; border-radius: 1px; background: var(--papel); }
.faceta[aria-pressed="true"] .faceta__cx { background: var(--tinta); border-color: var(--tinta); }
.faceta__n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--tinta-4); }

.cores { display: flex; gap: 10px; flex-wrap: wrap; }
.cor { width: 44px; height: 44px; border-radius: var(--raio-btn); border: 1px solid var(--borda); padding: 0; cursor: pointer; transition: transform var(--transicao); }
.cor:hover { transform: translateY(-2px); }
.cor[aria-pressed="true"] { border: 2px solid var(--tinta); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--tinta); }

.faixa-mm { display: flex; align-items: center; gap: 10px; }
.faixa-mm input { width: 100%; min-width: 0; min-height: 44px; text-align: center; font-family: var(--mono); font-size: 15px; color: var(--tinta); padding: 12px 4px; border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--papel); }
.faixa-mm span { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--borda); }
.barra__esq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conta { font-family: var(--mono); font-size: 12px; color: var(--tinta-2); }
.pilula {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px; min-height: 36px; font-size: 13px;
  border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--superficie); color: var(--tinta-2);
  cursor: pointer; transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.pilula:hover { border-color: var(--terracota); }
.pilula--on { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.pilula--on:hover { border-color: var(--tinta); color: var(--superficie); }
.pilula svg { stroke: currentColor; fill: none; }
.ordenar { display: flex; align-items: center; gap: 9px; }
.ordenar select {
  font: inherit; font-size: 13px; color: var(--tinta-2);
  padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--superficie); cursor: pointer;
}

.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; }
.card {
  display: block; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie);
  transition: transform 240ms var(--saida), box-shadow 240ms var(--saida), border-color var(--transicao);
}
.card:hover { transform: translateY(-5px); border-color: var(--terracota); box-shadow: 0 20px 40px -20px rgba(58,34,12,.5); }
.card__foto { position: relative; aspect-ratio: 4 / 3; background: var(--areia-fundo); }
.card__tag {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  padding: 5px 8px; border-radius: var(--raio-btn);
  background: rgba(28,17,7,.72); color: #F0E2C6;
}
.card__pe { padding: 18px 20px 20px; }
.card__marca { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--terracota); }
.card__nome { font-family: var(--display); font-size: 23px; font-weight: 600; color: var(--tinta); margin-top: 7px; letter-spacing: -.01em; }
.card__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--borda-suave); }
.card__med { font-family: var(--mono); font-size: 12px; color: var(--tinta-2); }
.card__preco { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--tinta); }
.card__mat { font-size: 13px; color: #6B5738; margin-top: 9px; }

.vazio { border: 1px dashed var(--borda); border-radius: var(--raio); padding: 56px 32px; text-align: center; margin-top: 28px; }
.vazio h3 { font-size: 24px; }
.vazio p { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.vazio .btn { margin-top: 24px; width: auto; }

.mais { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 46px; }
.mais .conta { color: var(--tinta-3); font-size: 11px; }

@media (max-width: 1180px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cat { grid-template-columns: 1fr; gap: 24px; }
  .rail { position: static; }
  .cabeca { padding-block: 34px 22px; }
}
@media (max-width: 560px) { .grade { grid-template-columns: 1fr; } }

/* ============================ PRODUTO ============================ */

.trilha { padding-block: 18px; border-bottom: 1px solid var(--borda-suave); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--tinta-3); }

.pdp { display: grid; grid-template-columns: 620px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 48px 56px; }
.pdp__media > .moldura { aspect-ratio: 4 / 3; }
.variantes { display: flex; gap: 12px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.variante {
  width: 84px; height: 62px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--areia-fundo);
  transition: transform var(--transicao), border-color var(--transicao);
}
.variante:hover { transform: translateY(-3px); border-color: var(--terracota); }
.variante[aria-pressed="true"] { border: 2px solid var(--tinta); box-shadow: 0 0 0 3px var(--areia), 0 0 0 4px var(--tinta); }
.variantes__rot { margin-left: 10px; }
.variantes__rot strong { display: block; font-size: 15px; margin-top: 3px; }

.medidas-arm { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 24px 26px; margin-top: 30px; }
.medidas-arm__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.medidas-arm__n { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--tinta); line-height: 1; }
.medidas-arm__r { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--terracota); margin-top: 6px; }
.medidas-arm p { margin-top: 20px; font-size: 14px; color: #6B5738; }

.pdp__ficha h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 700; letter-spacing: -.025em; line-height: 1; margin-top: 10px; }
.pdp__desc { margin-top: 18px; font-size: 17px; color: var(--tinta-2); max-width: 480px; }
.pdp__preco { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--borda); }
.pdp__preco b { font-family: var(--mono); font-size: 30px; font-weight: 700; }
.pdp__preco span { font-size: 14px; color: #6B5738; }

.escolha { display: flex; gap: 12px; margin-top: 14px; }
.escolha button {
  flex: 1; padding: 20px 22px; min-height: 48px; text-align: left; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--tinta-2);
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.escolha button:hover { border-color: var(--terracota); }
.escolha button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.escolha b { display: block; font-size: 17px; font-weight: 600; }
.escolha span { display: block; font-size: 13px; margin-top: 5px; opacity: .78; }

.selos { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.selos span { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--tinta-2); }
.selos svg { stroke: var(--oliva); fill: none; flex: 0 0 auto; }

.painel { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; padding-bottom: 84px; }
.passos { display: flex; flex-direction: column; gap: 20px; }
.passo { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 30px 32px 32px; }
.passo__topo { display: flex; align-items: center; gap: 14px; }
.passo__n { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--tinta); color: var(--superficie); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.passo h2 { font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -.015em; }
.passo__ajuda { margin: 12px 0 22px; font-size: 15px; color: #6B5738; }

.opcoes { display: flex; flex-direction: column; gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 18px 20px; min-height: 48px; cursor: pointer; font-size: 16px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--tinta);
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.opcao:hover { border-color: var(--terracota); background: #EFE1C6; }
.opcao[aria-pressed="true"], .opcao[aria-checked="true"] { border-color: var(--tinta); background: var(--papel); box-shadow: inset 3px 0 0 0 var(--mel); }
.opcao__marca { width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid #9A845E; background: var(--papel); display: flex; align-items: center; justify-content: center; }
.opcao__marca--red { border-radius: 50%; }
.opcao__marca--qua { border-radius: 2px; }
.opcao[aria-checked="true"] .opcao__marca { border-color: var(--tinta); }
.opcao[aria-checked="true"] .opcao__marca--red::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.opcao[aria-pressed="true"] .opcao__marca--qua { background: var(--tinta); border-color: var(--tinta); }
.opcao__txt { flex: 1; }
.opcao__txt b { display: block; font-weight: 600; }
.opcao__txt span { display: block; font-size: 14px; color: #6B5738; margin-top: 3px; }
.opcao__delta { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--terracota); white-space: nowrap; }
.opcao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.grau { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: center; }
.grau__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grau__v { font-family: var(--mono); font-size: 24px; font-weight: 700; }
.grau__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.grau__ctrl button { width: 48px; min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--superficie); cursor: pointer; }
.grau__ctrl button:hover { border-color: var(--terracota); }
.grau__ctrl button svg { stroke: currentColor; fill: none; }
.grau__escala { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--tinta-4); margin-top: 9px; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--borda-suave); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--tinta); cursor: pointer; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--borda-suave); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--tinta); cursor: pointer; }

.indices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.indice { padding: 11px 15px; min-height: 48px; text-align: left; cursor: pointer; border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--superficie); color: var(--tinta-2); transition: border-color var(--transicao), background var(--transicao), color var(--transicao); }
.indice:hover { border-color: var(--terracota); }
.indice[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.indice b { display: block; font-size: 14px; font-weight: 600; }
.indice span { display: block; font-family: var(--mono); font-size: 11px; margin-top: 4px; opacity: .8; }

.espessura { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel); padding: 22px 20px 20px; overflow: hidden; }
.espessura__n { font-family: var(--mono); font-size: 44px; font-weight: 700; line-height: 1; color: var(--terracota); margin-top: 10px; }
.espessura svg { width: 100%; margin-top: 16px; display: block; }
.espessura__corte { transition: d 340ms cubic-bezier(.2,.8,.2,1); }
.espessura p { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--tinta-2); }

.resumo { border: 1px solid var(--tinta); border-radius: var(--raio); background: var(--papel); padding: 30px; position: sticky; top: 96px; }
.resumo h2 { font-size: 25px; margin-bottom: 22px; }
.resumo__linhas { display: flex; flex-direction: column; gap: 14px; }
.resumo__l { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.resumo__l span { font-size: 15px; color: #4A3A22; }
.resumo__l b { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--tinta); white-space: nowrap; }
.resumo__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--borda-suave); }
.resumo__total span { font-size: 16px; font-weight: 600; }
.resumo__total b { font-family: var(--mono); font-size: 30px; font-weight: 700; }
.resumo__parcela { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); margin-top: 8px; }
.resumo__nota { margin-top: 16px; font-size: 13px; color: #6B5738; }
.resumo__prazo { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borda-suave); font-size: 14px; color: var(--tinta-2); }
.resumo__prazo svg { stroke: var(--terracota); fill: none; flex: 0 0 auto; }

.agenda__grade { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.dia, .hora { min-height: 48px; padding: 11px 15px; text-align: center; cursor: pointer; border: 1px solid var(--borda); border-radius: var(--raio-btn); background: var(--superficie); color: var(--tinta-2); transition: border-color var(--transicao), background var(--transicao), color var(--transicao); }
.dia { min-width: 76px; }
.hora { min-width: 88px; font-family: var(--mono); font-size: 14px; }
.dia:hover, .hora:hover { border-color: var(--terracota); }
.dia[aria-pressed="true"], .hora[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.dia small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .75; }
.dia b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 700; margin-top: 5px; }

[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .pdp { grid-template-columns: 1fr 1fr; gap: 32px; }
  .painel { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
}
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 40px; }
  .painel { grid-template-columns: 1fr; }
  .resumo { position: static; order: 2; }
  .passos { order: 1; }
  .passo { padding: 24px 22px 26px; }
  .grau { grid-template-columns: 1fr; gap: 24px; }
  .medidas-arm__n { font-size: 28px; }
  .escolha { flex-direction: column; }
}
@media (max-width: 560px) {
  .variante { width: 68px; height: 52px; }
}