/* Luxury Drive: a bagagem do passageiro (LEITURA.md). Tokens do motor + peças do baú. N3: sem efeito além da revelação. */
:root {
  --fundo: #0a0a0a; --tinta: #fafafa; --suave: #a3a3a3; --linha: #262626; --cartao: #141414;
  --lona: #0d0b09; --mono: #221c16;
  --couro: #7a4728; --couro-claro: #8c5631; --couro-escuro: #4a2b17; --couro-sombra: #2a170b;
  --metal: #c9a35c; --metal-claro: #e2c68c; --metal-escuro: #8f6b35;
  --marca: #c9a35c; --marca-2: #8c5631; --wa-cor: #c9a35c; --wa-tinta: #141210;
  --fonte-titulo: "Inter", system-ui, sans-serif; --fonte-texto: "Inter", system-ui, sans-serif; --fonte-gravada: "Prata", Georgia, serif;
  --raio: 14px;
}
body { background: var(--fundo); }
::selection { background: var(--metal); color: #141210; }

/* Botões */
.botao--metal { --b-fundo: linear-gradient(135deg, #f1dca6, #c9a35c 45%, #e2c68c 70%, #a7834a); --b-tinta: #141210; background: var(--b-fundo); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .25); }
.botao--metal:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 14px 30px -14px #c9a35c; }
.botao--escuro { --b-fundo: #141210; --b-tinta: #f1dca6; width: 100%; margin-top: 1.1rem; }
.link-metal { color: var(--metal-claro); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--metal) 50%, transparent); text-underline-offset: 4px; }
.gravado { font-family: var(--fonte-gravada); text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(10 10 10 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid #1c1c1c; }
.topo__linha { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.topo__logo img { height: 38px; width: auto; }
.topo__nav { display: flex; gap: 1.8rem; margin-left: auto; font-size: .92rem; color: var(--suave); }
.topo__nav a:hover { color: var(--tinta); }
.topo__wa { padding: .75em 1.2em; font-size: .9rem; }
.topo__menu { display: none; }

/* ===== O baú (primeira tela) ===== */
.bau { position: relative; isolation: isolate; overflow: hidden; background: var(--lona); padding: 0 0 0; }
.bau::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/monograma.png) 0 0 / 240px 176px repeat; }
.bau::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 100% at 30% 40%, transparent 55%, rgb(0 0 0 / .4)); }
.debrum { position: relative; z-index: 3; height: 22px; background:
  radial-gradient(circle at 50% 50%, #f6e3b4 0 1.5px, #c9a35c 2.2px, #7d5d2c 4px, transparent 4.6px) 10px 50% / 36px 22px repeat-x,
  linear-gradient(180deg, #3a2414, #24160d 55%, #170e08); box-shadow: 0 1px 0 rgb(255 255 255 / .05), 0 3px 8px rgb(0 0 0 / .5); }
.debrum--base { box-shadow: 0 -1px 0 rgb(255 255 255 / .05), 0 -3px 8px rgb(0 0 0 / .5); }

/* correias verticais de couro: vinco 4 px para dentro de cada borda, sem costura */
.correia { position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(26px, 3.1vw, 44px);
  background:
    linear-gradient(90deg, transparent 4px, rgb(0 0 0 / .38) 4px 5px, transparent 5px calc(100% - 5px), rgb(0 0 0 / .38) calc(100% - 5px) calc(100% - 4px), transparent 0),
    linear-gradient(90deg, #4a2b17, #8c5631 18%, #7a4728 50%, #8c5631 82%, #4a2b17);
  box-shadow: 0 0 18px rgb(0 0 0 / .6); }
.correia--esq { left: clamp(12px, 3.4vw, 56px); }
.correia--dir { right: clamp(12px, 3.4vw, 56px); }
.fivela { position: absolute; left: 50%; top: 30%; width: 150%; translate: -50% 0; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .55)); }

/* alça com a nota gravada */
.alca { position: relative; z-index: 4; display: block; width: min(300px, 74vw); margin: -4px auto 0; color: #f6e7d2; }
.alca__desenho { width: 100%; height: auto; }
.alca__gravado { position: absolute; left: 50%; top: 68%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; font-size: 12px; line-height: 1.15; white-space: nowrap; text-shadow: 0 -1px 0 rgb(0 0 0 / .45), 0 1px 0 rgb(255 220 180 / .18); }
.alca__gravado b { font-weight: 400; font-size: 13px; }
.alca:hover .alca__gravado, .alca:focus-visible .alca__gravado { color: #fff6e6; }

.bau__miolo { position: relative; z-index: 3; width: min(1120px, 100% - 2 * clamp(56px, 9vw, 150px)); padding: clamp(20px, 3vw, 40px) 0 clamp(48px, 6vw, 84px); }
.bau h1 { font-weight: 600; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; color: #fafafa; }
.bau__linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid rgb(201 163 92 / .35); }
.bau__lead { max-width: 58ch; color: #d4d4d4; font-size: clamp(16px, 1.15vw, 19px); }

/* correia horizontal com os três pilares gravados */
.correia-h { position: relative; z-index: 1; padding: clamp(26px, 3vw, 38px) 0;
  background:
    linear-gradient(180deg, transparent 6px, rgb(0 0 0 / .4) 6px 7px, transparent 7px calc(100% - 7px), rgb(0 0 0 / .4) calc(100% - 7px) calc(100% - 6px), transparent 0),
    linear-gradient(180deg, #4a2b17, #86512f 14%, #7a4728 55%, #6b3e22 86%, #3d2311);
  box-shadow: 0 -10px 30px rgb(0 0 0 / .45); }
.correia-h__grade { width: min(1120px, 100% - 2 * clamp(56px, 9vw, 150px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pilar { padding: 0 clamp(16px, 2.4vw, 34px); border-left: 1px solid rgb(0 0 0 / .32); box-shadow: inset 1px 0 0 rgb(255 220 180 / .1); }
.pilar:first-child { border-left: 0; box-shadow: none; padding-left: 0; }
.pilar__t { font-size: 14px; color: #fbeedd; margin-bottom: .55rem; text-shadow: 0 -1px 0 rgb(0 0 0 / .45), 0 1px 0 rgb(255 220 180 / .16); line-height: 1.3; }
.pilar p { color: #f3e2cc; font-size: 15px; line-height: 1.5; }

/* ===== Serviços: o baú-armário aberto ===== */
.servicos { padding: clamp(72px, 9vw, 130px) 0; }
.sec-cab { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-cab h2, .orcamento h2, .onde h2 { font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -.03em; line-height: 1.05; }
.sec-cab p { margin-top: .9rem; color: var(--suave); font-size: 1.05rem; }
.armario { position: relative; display: grid; grid-template-columns: 1fr clamp(26px, 3vw, 40px) 1fr; padding: 16px; border-radius: 22px; background: var(--lona); box-shadow: inset 0 0 0 1px #2a2219, 0 30px 60px -30px rgb(0 0 0 / .8); isolation: isolate; }
.armario::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(../img/monograma.png) 0 0 / 150px 110px repeat; }
.armario__correia { background:
    linear-gradient(90deg, transparent 4px, rgb(0 0 0 / .38) 4px 5px, transparent 5px calc(100% - 5px), rgb(0 0 0 / .38) calc(100% - 5px) calc(100% - 4px), transparent 0),
    linear-gradient(90deg, #4a2b17, #8c5631 18%, #7a4728 50%, #8c5631 82%, #4a2b17); margin-block: -16px; }
.compartimento { display: flex; flex-direction: column; gap: 1.2rem; padding: clamp(26px, 3vw, 44px); border-radius: 10px;
  background: repeating-linear-gradient(90deg, #17171a 0 13px, #1d1d21 13px 14px), #17171a;
  box-shadow: inset 0 18px 30px -18px rgb(0 0 0 / .8), inset 0 0 0 1px #26262b; }
.plaqueta { align-self: flex-start; position: relative; padding: .8rem 2.4rem; border-radius: 6px; font: 400 15px/1.3 var(--fonte-gravada); letter-spacing: .12em; text-transform: uppercase; color: #fbeedd;
  background:
    radial-gradient(circle, #f6e3b4 0 1.4px, #c9a35c 2px, #7d5d2c 3.6px, transparent 4.2px) 14px 50% / 10px 10px no-repeat,
    radial-gradient(circle, #f6e3b4 0 1.4px, #c9a35c 2px, #7d5d2c 3.6px, transparent 4.2px) calc(100% - 14px) 50% / 10px 10px no-repeat,
    linear-gradient(180deg, #8c5631, #7a4728 60%, #5e361d);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), inset 0 0 0 4px rgb(255 220 180 / .06), 0 6px 14px -6px rgb(0 0 0 / .7);
  text-shadow: 0 -1px 0 rgb(0 0 0 / .45); }
.compartimento__texto { color: #d4d4d4; max-width: 52ch; }
.gavetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gaveta { position: relative; padding: 1.45rem 1.2rem 1.05rem; border-radius: 6px; color: #ededed; font-weight: 500;
  background: linear-gradient(180deg, #26262a, #1f1f23); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -2px 0 rgb(0 0 0 / .35), 0 0 0 1px #2e2e33, 0 10px 18px -12px rgb(0 0 0 / .9); }
.gaveta__puxador { position: absolute; top: 0; left: 50%; translate: -50% -2px; width: 46px; height: 13px; border-radius: 0 0 9px 9px;
  background: radial-gradient(circle, #e2c68c 0 1.4px, #8f6b35 2.4px, transparent 3px) 8px 4px / 6px 6px no-repeat,
    radial-gradient(circle, #e2c68c 0 1.4px, #8f6b35 2.4px, transparent 3px) calc(100% - 8px) 4px / 6px 6px no-repeat,
    linear-gradient(180deg, #8c5631, #5e361d); box-shadow: 0 2px 3px rgb(0 0 0 / .5); }
.compartimento .botao { align-self: flex-start; margin-top: auto; }

/* ===== Orçamento: a etiqueta de bagagem ===== */
.orcamento { padding: clamp(72px, 9vw, 130px) 0; background: linear-gradient(180deg, #0a0a0a, #0f0d0b); border-top: 1px solid #1a1612; }
.orcamento__grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.orcamento__texto p { margin-top: 1rem; color: #d4d4d4; max-width: 46ch; }
.orcamento__atalhos { display: grid; gap: 10px; margin-top: 1.8rem; max-width: 380px; }
.atalho { display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: .9rem 1.1rem; border-radius: 12px; background: #141414; border: 1px solid #2a2a2a; font-weight: 600; }
.atalho svg { width: 20px; height: 20px; color: var(--metal); }
.atalho::after { content: "→"; margin-left: auto; color: var(--metal); }
.atalho:hover { border-color: var(--metal-escuro); }
.orcamento__texto .orcamento__nota { font-size: .95rem; color: var(--suave); }
.etiqueta { position: relative; padding-top: 96px; filter: drop-shadow(0 34px 40px rgb(0 0 0 / .7)); }
.etiqueta__tira { position: absolute; top: 0; left: 50%; width: 110px; translate: -50% 0; z-index: 2; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .5)); }
.etiqueta__couro { position: relative; padding: 74px clamp(16px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); border-radius: 0 0 22px 22px; clip-path: polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%, 0 var(--chanfro)); --chanfro: 64px;
  background:
    linear-gradient(180deg, transparent 7px, rgb(0 0 0 / .35) 7px 8px, transparent 8px),
    linear-gradient(160deg, #94593a, #7a4728 40%, #6b3e22 75%, #55301a);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4), inset 0 0 0 7px rgb(255 220 180 / .05); }
.etiqueta__couro::before { content: ""; position: absolute; top: 16px; left: 50%; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; background: #0a0a0a; box-shadow: inset 0 2px 4px rgb(0 0 0 / .8); }
.etiqueta__janela { padding: 10px; border-radius: 14px; background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04) 40%, rgb(255 255 255 / .1)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 0 0 3px rgb(0 0 0 / .22); }
.cartao { padding: clamp(18px, 2.2vw, 28px); border-radius: 8px; background: #f7f6f2; color: #141414; }
.cartao__cab { font: 400 14px/1.2 var(--fonte-gravada); text-transform: uppercase; letter-spacing: .14em; padding-bottom: .8rem; border-bottom: 1px solid #d9d6cf; margin-bottom: 1rem; }
.escolha { display: flex; gap: 8px; margin: 0 0 1rem; padding: 0; border: 0; }
.escolha label { flex: 1; }
.escolha input { position: absolute; opacity: 0; }
.escolha span { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; border: 1px solid #cfccc4; font-weight: 600; cursor: pointer; }
.escolha input:checked + span { background: #141210; color: #f1dca6; border-color: #141210; }
.escolha input:focus-visible + span { outline: 2px solid #8f6b35; outline-offset: 2px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.campo { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #3f3c37; }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo textarea { width: 100%; min-height: 46px; padding: .7rem .8rem; border-radius: 8px; border: 1px solid #cfccc4; background: #fff; color: #141414; font-size: 15px; font-weight: 400; }
.campo input:focus, .campo textarea:focus { outline: 2px solid #8f6b35; outline-offset: 0; border-color: #8f6b35; }
.campo--caixa { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: #141414; min-height: 44px; }
.campo--caixa input { flex: none; width: 24px; min-height: 24px; height: 24px; margin: 0; accent-color: #8f6b35; }
@media (max-width: 640px) { .campo--caixa input { width: 36px !important; height: 36px !important; min-height: 36px; } }
.cartao__ok { margin-top: .9rem; padding: .8rem 1rem; border-radius: 8px; background: #efe6d2; color: #3a2a12; font-size: 14px; }

/* ===== Onde ===== */
.onde { padding: clamp(64px, 8vw, 110px) 0; border-top: 1px solid #1a1a1a; }
.onde__grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.onde__grade > div > p { margin-top: 1rem; color: #d4d4d4; }
.onde__end { font-size: 1.15rem; color: #fafafa !important; }
.onde .link-metal { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; }
.onde__dados { margin: 0; display: grid; gap: 1.4rem; }
.onde__dados dt { font: 400 12px/1.2 var(--fonte-gravada); text-transform: uppercase; letter-spacing: .16em; color: var(--metal); margin-bottom: .4rem; }
.onde__dados dd { margin: 0; color: #d4d4d4; }
.onde__dados dd a { display: inline-flex; min-height: 40px; align-items: center; }

/* ===== Rodapé em lona ===== */
.rodape { position: relative; isolation: isolate; background: var(--lona); padding-bottom: 40px; }
.rodape::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/monograma.png) 0 0 / 240px 176px repeat; }
.rodape__grade { display: grid; justify-items: center; text-align: center; gap: 1rem; padding-top: 56px; }
.rodape__grade img { width: 140px; height: auto; }
.rodape__linha { color: #d4d4d4; }
.rodape__miudo { max-width: 62ch; color: #8a8a8a; font-size: 13px; }

/* ===== Celular e tablet ===== */
@media (max-width: 960px) {
  .topo__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; padding: 8px 20px 20px; background: #0a0a0a; border-bottom: 1px solid #222; margin: 0; }
  .menu-aberto .topo__nav { display: flex; }
  .topo__nav a { padding: .4rem 0; font-size: 1.05rem; color: #eee; }
  .topo__menu { display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; margin-left: auto; border: 1px solid #2a2a2a; border-radius: 12px; background: transparent; cursor: pointer; }
  .topo__menu span { display: block; width: 20px; height: 2px; background: #eee; }
  .topo__wa { display: none; }
  .orcamento__grade, .onde__grade { grid-template-columns: 1fr; }
  .armario { grid-template-columns: 1fr; grid-template-rows: auto clamp(24px, 6vw, 34px) auto; }
  .armario__correia { margin: 0 -16px; background:
    linear-gradient(180deg, transparent 4px, rgb(0 0 0 / .38) 4px 5px, transparent 5px calc(100% - 5px), rgb(0 0 0 / .38) calc(100% - 5px) calc(100% - 4px), transparent 0),
    linear-gradient(180deg, #4a2b17, #8c5631 18%, #7a4728 50%, #8c5631 82%, #4a2b17); }
}
@media (max-width: 760px) {
  .correia--esq { display: none; }
  .correia--dir { right: 10px; width: 22px; }
  .fivela { top: 22%; }
  .bau__miolo, .correia-h__grade { width: auto; margin-inline: 16px 46px; }
  .bau h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .bau__linha { flex-direction: column; align-items: flex-start; }
  .bau__linha .botao { width: 100%; }
  .correia-h__grade { grid-template-columns: 1fr; gap: 18px; }
  .pilar { padding: 18px 0 0; border-left: 0; box-shadow: none; border-top: 1px solid rgb(0 0 0 / .32); }
  .pilar:first-child { padding-top: 0; border-top: 0; }
  .campos { grid-template-columns: 1fr; }
  .etiqueta { padding-top: 80px; }
  .etiqueta__tira { width: 92px; }
  .etiqueta__couro { padding-inline: 10px; padding-bottom: 12px; padding-top: 62px; --chanfro: 44px; border-radius: 0 0 18px 18px; }
  .etiqueta__janela { padding: 6px; }
  .compartimento { padding: 22px 16px; }
  .plaqueta { padding-inline: 2rem; font-size: 14px; }
  .compartimento .botao { width: 100%; }
}