:root {
  --sage: #5E6B4E;
  --sage-2: #7A8766;
  --sage-light: #DCE0D0;
  --cream: #F2EADE;
  --cream-2: #E8DCCB;
  --copper: #B0683E;
  --copper-dark: #96552F;
  --copper-light: #E7B48F;
  --night: #262C22;
  --ink: #2E3527;
  --muted: #6F7564;
  --muted-on-green: #C9CDBC;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.16; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--night); color: var(--cream); padding: 8px 16px; z-index: 30; }
.skip:focus { left: 8px; }

/* Rotulos */
.label {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
}
.on-dark .label, .label--light { color: var(--copper-light); }
.label--rule { display: inline-flex; align-items: center; gap: 12px; }
.label--rule::before, .label--rule::after { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .7; }

/* Botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 30px;
  background: var(--copper); color: #FFF8F0;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 15px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none;
  transition: background .2s ease;
}
.btn:hover { background: var(--copper-dark); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--full { width: 100%; }
.btn[disabled] { background: var(--cream-2); color: var(--muted); cursor: not-allowed; }

/* Cabecalho */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid rgba(46, 53, 39, .1); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 19px/1 var(--serif); white-space: nowrap; }
.brand svg { width: 26px; height: 32px; }
.nav-desktop { display: none; }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-link { font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-link:hover { color: var(--copper); }
.bag-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.bag-icon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bag-count { position: absolute; top: 3px; right: 0; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--copper); color: #FFF8F0; font-size: 11px; line-height: 18px; text-align: center; }
.bag-count[hidden] { display: none; }
/* Invisível na tela, para o link continuar com nome em leitores de tela */
.bag-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bag-icon, .bag-count { will-change: transform; }
/* Segredos de Natal (app.js) */
.bag-santa, .bag-santa-y, .bag-santa-body { width: 64px; height: 64px; pointer-events: none; will-change: transform; }
.bag-santa { position: fixed; left: 0; top: 0; z-index: 30; }
.bag-santa svg { display: block; width: 100%; height: 100%; }
.santa-peek { position: fixed; right: 14px; bottom: -6px; z-index: 30; width: 92px; height: 92px; pointer-events: none; transform-origin: bottom center; will-change: transform; }
.santa-peek svg { display: block; width: 100%; height: 100%; }
.santa-bubble { position: absolute; right: 84%; top: 2px; padding: 7px 13px; border: 1px solid rgba(46, 53, 39, .18); border-radius: 16px 16px 4px 16px; background: #FFF8F0; color: var(--ink); font: 500 16px/1.2 var(--serif); white-space: nowrap; transform-origin: bottom right; will-change: transform, opacity; }
.snowflake { position: fixed; top: 0; z-index: 30; color: #9FB6C2; line-height: 1; pointer-events: none; will-change: transform, opacity; }
.menu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 62px; background: var(--cream); border-bottom: 1px solid rgba(46, 53, 39, .14); padding: 10px var(--gutter) 22px; }
.menu-panel a { display: block; padding: 11px 0; font: 500 21px/1.3 var(--serif); text-decoration: none; }
.menu-panel .label { display: block; margin: 8px 0 4px; }
.menu-panel hr { border: 0; border-top: 1px solid rgba(46, 53, 39, .14); margin: 10px 0; }

/* Hero */
.hero { position: relative; background: var(--sage); color: var(--cream); text-align: center; }
.hero-lights { width: 100%; height: 288px; }
.hero-body { padding: 8px var(--gutter) 68px; max-width: 640px; margin: 0 auto; }
.hero h1 { font-size: clamp(34px, 9.4vw, 56px); margin: 18px 0 16px; }
.hero p { color: var(--muted-on-green); font-size: 16px; max-width: 30em; margin: 0 auto 28px; }
/* Cada grupo de lâmpadas passa pelas quatro cores; cada lâmpada pisca no seu próprio tempo */
.bulb-glow { animation: twinkle 3.6s ease-in-out infinite; }
.bulb-c0, .bulb-c1, .bulb-c2, .bulb-c3 { animation: bulb-cycle 12s linear infinite; }
.bulb-c1 { animation-delay: -3s; }
.bulb-c2 { animation-delay: -6s; }
.bulb-c3 { animation-delay: -9s; }
.bulb-lit { animation: bulb-cycle 12s linear infinite, bulb-blink 3.6s ease-in-out infinite; }
.bulb-c0.bulb-lit { animation-delay: 0s, var(--blink); }
.bulb-c1.bulb-lit { animation-delay: -3s, var(--blink); }
.bulb-c2.bulb-lit { animation-delay: -6s, var(--blink); }
.bulb-c3.bulb-lit { animation-delay: -9s, var(--blink); }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .08; } }
@keyframes bulb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes bulb-cycle {
  0%, 21% { fill: #F7D58A; stop-color: #F7D58A; }
  25%, 46% { fill: #F2EADE; stop-color: #F2EADE; }
  50%, 71% { fill: #E4573D; stop-color: #E4573D; }
  75%, 96% { fill: #B9DE83; stop-color: #B9DE83; }
  100% { fill: #F7D58A; stop-color: #F7D58A; }
}
/* Troca de página: o cabeçalho fica parado, o conteúdo se dissolve e a foto clicada viaja até a página da peça */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .no-vt main { animation: page-in .45s ease both; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
.site-header { view-transition-name: site-header; }
.product-gallery > img:first-child, .color-set:first-child > img:first-child { view-transition-name: peca; }
::view-transition-old(root) { animation: page-out .25s ease both; }
::view-transition-new(root) { animation: page-in .45s ease .1s both; }
::view-transition-group(peca) { animation-duration: .55s; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }

@media (prefers-reduced-motion: reduce) {
  .bulb-glow, .bulb-c0, .bulb-c1, .bulb-c2, .bulb-c3, .bulb-lit { animation: none; }
  .breadcrumb { transition: none; }
  .faq-icon, .faq-icon::after, .faq-light, .faq-light::after { transition: none; animation: none; }
  .color-set, .color-set.is-off { transition: none; }
  html { scroll-behavior: auto; }
}

/* Serrilha de tesoura de picotar: separa secoes como no carrossel */
.serra { position: relative; }
.serra::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 9px; z-index: 2;
  background: var(--serra);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 0h18L9 9z'/%3E%3C/svg%3E") 0 0 / 18px 9px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M0 0h18L9 9z'/%3E%3C/svg%3E") 0 0 / 18px 9px repeat-x;
}

/* Secoes */
.section { padding: 68px 0; }
.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: clamp(30px, 7.6vw, 44px); margin-top: 10px; }
.section-head p { margin-top: 12px; color: var(--muted); max-width: 34em; }
.on-dark .section-head p { color: var(--muted-on-green); }

/* Colecoes: faixa verde costurada, assinatura dos posts */
.collections { display: grid; gap: 18px; }
.collection-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; background: var(--cream-2); }
.collection-card img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: transform .7s ease; }
.collection-card:hover img { transform: scale(1.03); }
.ribbon {
  position: relative; display: block;
  padding: 15px 16px 16px;
  background: rgba(94, 107, 78, .94); color: var(--cream);
  text-align: center;
}
.ribbon::before, .ribbon::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--cream) 0 9px, transparent 9px 16px);
  filter: drop-shadow(0 1px 0 rgba(38, 44, 34, .35));
}
.ribbon::before { top: 6px; }
.ribbon::after { bottom: 6px; }
.ribbon .label { color: var(--copper-light); font-size: 9px; letter-spacing: .36em; }
.ribbon-title { display: block; font: 500 clamp(24px, 6.8vw, 30px)/1.2 var(--serif); margin-top: 2px; }
.collection-card .ribbon { position: absolute; left: 0; right: 0; top: 9%; }

/* Detalhes das pecas */
.rail {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 6px; scroll-padding-left: var(--gutter); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.detail { flex: 0 0 74%; max-width: 380px; scroll-snap-align: start; text-decoration: none; }
.detail-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-2); }
.detail-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.detail h3 { font-size: 20px; margin-top: 14px; }
.detail p { color: #535A49; font-size: 15px; margin-top: 4px; }
/* Entrada: uma cortina sobe e descobre a foto inteira, sem zoom; o texto vem logo depois */
.reveal .detail-media::after { content: ''; position: absolute; inset: 0; background: var(--cream-2); transform-origin: top; transition: transform 1.1s cubic-bezier(.76, 0, .24, 1); transition-delay: var(--delay, 0s); }
.reveal .detail h3, .reveal .detail p { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--delay, 0s) + .55s); }
.reveal .detail.is-in .detail-media::after { transform: scaleY(0); }
.reveal .detail.is-in h3, .reveal .detail.is-in p { opacity: 1; transform: none; }

/* Por onde comecar */
.starts-section { background: var(--cream-2); }
.starts { display: grid; gap: 44px; }
.start-head h3 { font-size: 24px; }
.start-head p { color: #535A49; margin: 4px 0 16px; }
.start-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.start-pieces .piece h3 { font-size: 14px; margin-top: 8px; }
.start-pieces .piece-price { font-size: 12px; }

/* Camadas */
.steps-section { background: var(--sage-light); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: 34px 58px 1fr; gap: 12px; align-items: start; }
.step-n { font: 500 15px/1.5 var(--serif); color: var(--copper); }
.step-icon { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 34px; }
.step-icon i { display: block; height: 5px; border-radius: 3px; background: var(--sage); }
.step h3 { font-size: 20px; }
.step p { color: #535A49; font-size: 15px; margin-top: 3px; }

/* Diferencial */
.dark { background: var(--night); color: var(--cream); }
.values { display: grid; gap: 28px; }
.value { border-left: 2px solid var(--copper); padding-left: 18px; }
.value h3 { font-size: 22px; }
.value p { color: var(--muted-on-green); margin-top: 6px; font-size: 15px; }

/* Chamada final */
.closing { background: var(--sage); color: var(--cream); text-align: center; padding: 76px 0; }
.closing h2 { font-size: clamp(32px, 8.4vw, 50px); margin: 12px 0 28px; }

/* Rodape */
.site-footer { background: var(--night); color: var(--muted-on-green); padding: 52px 0 34px; font-size: 14px; }
.site-footer .brand { color: var(--cream); margin-bottom: 14px; }
.footer-grid { display: grid; gap: 30px; }
.site-footer h2 { font: 500 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--copper-light); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding: 5px 0; text-decoration: none; }
.site-footer li a:hover { color: var(--cream); }
.footer-collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.copyright { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(201, 205, 188, .18); font-size: 12px; }
.site-footer .credits { margin-top: 10px; font-size: 12px; line-height: 1.7; }

/* Pagina de colecao */
.collection-hero { position: relative; background: var(--cream-2); }
.collection-hero img { width: 100%; height: 62vh; min-height: 380px; max-height: 620px; object-fit: cover; object-position: center 72%; }
.collection-hero .ribbon { position: absolute; left: 0; right: 0; top: 34px; }
.collection-hero h1 { font-size: clamp(30px, 8.4vw, 46px); margin-top: 2px; }
.collection-intro { padding: 38px var(--gutter) 6px; max-width: 640px; margin: 0 auto; text-align: center; color: #535A49; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
.piece { text-decoration: none; display: block; }
.piece-media { overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream-2); }
.piece-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; transition: transform .6s ease; }
.piece:hover .piece-media img { transform: scale(1.03); }
.piece h3 { font-size: 17px; margin-top: 12px; line-height: 1.26; }
.piece-price { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.more-collections { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(46, 53, 39, .3); font-size: 14px; text-decoration: none; }
.chip:hover { background: var(--ink); color: var(--cream); }

/* Pagina de peca */
.product { display: grid; gap: 26px; }
/* O Voltar fica logo abaixo do cabeçalho: some atrás dele ao descer a página e reaparece ao subir (app.js) */
.breadcrumb { position: sticky; top: 63px; z-index: 19; padding: 6px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 0; background: var(--cream); font-size: 14px; color: #474E3D; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.breadcrumb.is-hidden:not(:focus-within) { transform: translateY(-100%); }
.breadcrumb.is-stuck:not(.is-hidden) { box-shadow: 0 1px 0 rgba(46, 53, 39, .1); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--copper); }
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.label--link { text-decoration: none; }
.label--link:hover { text-decoration: underline; }
.product-gallery { display: grid; gap: 8px; margin: 14px calc(var(--gutter) * -1) 0; }
.product-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 70%; background: var(--cream-2); }
/* A cor nova surge por cima; a anterior só some quando a transição termina, sem deixar o fundo aparecer */
.color-set { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; z-index: 1; transition: opacity .6s ease; }
.color-set.is-off { z-index: 0; opacity: 0; visibility: hidden; transition: opacity 0s .6s, visibility 0s .6s; }
.product-info h1 { font-size: clamp(30px, 8vw, 42px); margin: 10px 0 12px; }
.price { font: 500 22px/1.3 var(--serif); }
.price-deal { font-size: 14px; color: #474E3D; margin-top: 6px; }
.quiet-option { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.quiet-option input { margin: 0; accent-color: var(--muted); }
.product-desc { margin: 16px 0 22px; color: #474E3D; }
.spec { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid rgba(46, 53, 39, .16); font-size: 14px; }
.spec li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(46, 53, 39, .16); }
.spec span:first-child { color: var(--muted); }
.spec span:last-child { text-align: right; }
.colors { border: 0; margin: 0 0 24px; padding: 0; }
.colors legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.color-options { display: flex; flex-wrap: wrap; gap: 8px; }
.color-option { cursor: pointer; }
.color-option input { position: absolute; opacity: 0; }
.color-option span { display: block; min-height: 44px; padding: 11px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(46, 53, 39, .35); font-size: 14px; line-height: 22px; }
.color-option input:checked + span { background: var(--ink); color: var(--cream); box-shadow: none; }
.color-option input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 3px; }
.bag-color { font-size: 14px; color: #474E3D; margin-top: 3px; }
.added { margin-top: 12px; font-size: 14px; color: var(--sage); text-align: center; min-height: 23px; }
.added a { color: var(--copper); }
.product-note { margin-top: 20px; font-size: 14px; color: var(--muted); }
.product-aviso { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(46, 53, 39, .16); border-radius: 8px; font-size: 14px; color: #474E3D; }

/* Sacola */
.page-head { padding: 52px 0 26px; }
.page-head h1 { font-size: clamp(34px, 9vw, 52px); margin-top: 10px; }
.page-head p { color: #535A49; max-width: 34em; margin-top: 12px; }
.bag-item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(46, 53, 39, .16); }
.bag-item img { width: 84px; height: 105px; object-fit: cover; object-position: center 72%; }
.bag-item h2 { font-size: 18px; line-height: 1.26; }
.bag-item h2 a { text-decoration: none; }
.bag-price { font-size: 14px; color: var(--muted); margin-top: 3px; }
.bag-deal { font-size: 14px; font-weight: 500; color: #474E3D; margin-top: 3px; }
.bag-saved { display: flex; justify-content: space-between; font-size: 14px; color: #474E3D; margin-bottom: 8px; }
.bag-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(46, 53, 39, .35); background: transparent; color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; }
.qty-value { min-width: 22px; text-align: center; font-size: 15px; }
.remove { margin-left: auto; background: none; border: 0; padding: 8px 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.bag-summary { border-top: 1px solid rgba(46, 53, 39, .16); padding: 20px 0 0; }
.bag-total { display: flex; justify-content: space-between; align-items: baseline; font: 500 21px/1.3 var(--serif); margin-bottom: 8px; }
.bag-hint { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.order-review { max-width: 560px; }
.order-review h2 { font-size: 24px; margin-bottom: 14px; }
.order-lines { list-style: none; margin: 0 0 16px; padding: 0; }
.order-lines li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(46, 53, 39, .16); font-size: 15px; }
.order-lines li > span:last-child { flex: none; }
.order-lines small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.order-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 10px; }
.bag-empty { padding: 8px 0 30px; color: #535A49; }
.bag-empty .btn { margin-top: 18px; }

/* Texto, FAQ e contato */
.prose { max-width: 640px; }
.prose p { margin-bottom: 18px; }
.prose .lead { font: 500 clamp(22px, 5.6vw, 28px)/1.34 var(--serif); margin-bottom: 22px; }
.faq details { border-top: 1px solid rgba(46, 53, 39, .16); }
.faq details:last-child { border-bottom: 1px solid rgba(46, 53, 39, .16); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 0; font: 500 18px/1.34 var(--serif); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: none; width: 22px; height: 22px; color: var(--copper); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 4px; right: 4px; top: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.faq-icon::after { transition: transform .5s ease; transform: rotate(90deg); }
.faq details[open]:not(.is-closing) .faq-icon { transform: rotate(180deg); }
.faq details[open]:not(.is-closing) .faq-icon::after { transform: rotate(0); }
.faq details { --bulb: #D9533A; }
.faq details:nth-child(4n + 2) { --bulb: #C9962E; }
.faq details:nth-child(4n + 3) { --bulb: #5E8A4A; }
.faq details:nth-child(4n) { --bulb: #B0683E; }
.faq-panel { position: relative; }
.faq-text { height: 100%; overflow: hidden; }
.faq-text p { margin: 0; padding: 0 38px 18px 0; color: #474E3D; font-size: 15px; }
/* O fio desce do + junto com a resposta, com a lâmpada na ponta */
.faq-light { position: absolute; top: -14px; bottom: 10px; right: 5px; width: 12px; display: flex; flex-direction: column; align-items: center; transform-origin: top center; pointer-events: none; transition: opacity .3s ease; animation: faq-swing 1.6s ease-out .3s; }
.faq-light::before { content: ''; flex: 1; width: 1px; background: rgba(46, 53, 39, .4); }
.faq-light::after { content: ''; flex: none; width: 10px; height: 14px; border-top: 3px solid #2B3324; border-radius: 45% 45% 50% 50% / 25% 25% 75% 75%; background: var(--bulb); box-shadow: 0 2px 12px 3px var(--bulb); animation: faq-glow 2.4s ease-in-out infinite; }
.faq details.is-closing .faq-light { opacity: 0; }
@keyframes faq-swing { 0% { transform: rotate(7deg); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes faq-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.contact-list { display: grid; gap: 12px; max-width: 420px; margin-top: 8px; }

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .ribbon-title { font-size: 26px; }
  .footer-grid { grid-template-columns: 1.2fr 1.8fr .8fr; }
}

@media (min-width: 960px) {
  .section { padding: 96px 0; }
  .nav-desktop { display: flex; gap: 28px; }
  .menu { display: none; }
  .hero-lights { height: 320px; }
  .hero-body { padding-bottom: 92px; }
  .collections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .rail { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; overflow: visible; }
  .detail { max-width: none; }
  .detail:nth-child(3n + 2) { --delay: .15s; }
  .detail:nth-child(3n) { --delay: .3s; }
  .start { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
  .start-pieces { gap: 18px; }
  .start-pieces .piece h3 { font-size: 17px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .step { grid-template-columns: 1fr; }
  .step-icon { align-items: flex-start; }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .product-gallery { margin: 14px 0 0; }
  .product-info { position: sticky; top: 124px; padding-top: 14px; }
  .bag-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .bag-summary { border-top: 0; padding-top: 16px; position: sticky; top: 124px; }
}