/* Home da Global One. Usa a base de global.css.
   Fundo preto da sacola, texto alinhado à esquerda, títulos em Jost.
   O G1 é o sistema gráfico: desenha-se em volta do lançamento, vira selo colorido de cada departamento,
   é o ícone do Guia One e fica ao fundo do contato. */
[id] { scroll-margin-top: 64px; }

/* ---------- lançamento ---------- */
.lancamento { position: relative; overflow: hidden; background: var(--g-preto); }
.lancamento__in { max-width: var(--g-largura); margin: 0 auto; padding: 56px 32px 40px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px; }
.selo-lanc { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 500; color: var(--g-azul-claro); }
.selo-lanc::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--g-azul); transform: rotate(-28deg); }
.lancamento h2 { font-family: var(--g-font-display); font-size: clamp(3rem, 6vw, 5.5rem); line-height: .98; font-weight: 500;
  letter-spacing: -.02em; margin-top: 20px; }
.lancamento__sub { font-size: 1.1875rem; line-height: 1.55; color: var(--g-texto-3); max-width: 27em; margin-top: 24px; }
.lancamento__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.lancamento__palco { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: end; }
.lancamento__luz { position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(156, 40, 66, .6), rgba(107, 37, 51, .3) 48%, transparent 78%); }
.lancamento__g1 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lancamento__foto { position: absolute; left: 50%; top: 50%; height: 76%; width: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }

/* o único movimento automático da página: o G se desenha, o "1" entra e o celular sobe */
@media (prefers-reduced-motion: no-preference) {
  .lancamento__arco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g1-desenha 1.7s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
  .lancamento__um { opacity: 0; transform: translate(-36px, 19px); animation: g1-entra .9s cubic-bezier(.2, .7, .2, 1) 1.25s forwards; }
  .lancamento__foto { opacity: 0; animation: foto-sobe 1.2s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
}
@keyframes g1-desenha { to { stroke-dashoffset: 0; } }
@keyframes g1-entra { to { opacity: 1; transform: none; } }
@keyframes foto-sobe { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }

.ficha { max-width: var(--g-largura); margin: 0 auto; padding: 0 32px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ficha > div { border-top: 1px solid var(--g-linha); padding-top: 18px; }
.ficha dt { font-size: .8125rem; color: var(--g-texto-2); }
.ficha dd { margin: 6px 0 0; font-family: var(--g-font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.2; }

/* ---------- seções ---------- */
.secao { padding: 96px 0 0; }
.secao--mais { padding-bottom: 112px; }
.secao__in { max-width: var(--g-largura); margin: 0 auto; padding: 0 32px; }
.secao__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: 36px; }
.secao__cab h2 { font-family: var(--g-font-display); font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.04; font-weight: 500; letter-spacing: -.02em; }
.secao__cab p { color: var(--g-texto-2); font-size: 1.0625rem; line-height: 1.5; max-width: 36em; margin-top: 12px; }
.secao__cab .link-mais { font-size: .9375rem; padding-bottom: 6px; }

/* ---------- Apple ---------- */
.apple__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.produto { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 20px; border-radius: 20px;
  background: var(--g-superficie); border: 1px solid rgba(255, 255, 255, .06); color: inherit; text-decoration: none;
  transition: border-color .25s; }
.produto:hover { border-color: rgba(255, 255, 255, .22); }
.produto__img { position: relative; aspect-ratio: 1 / 1.05; margin-bottom: 18px; border-radius: 14px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .09), transparent 80%); }
.produto__img img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.produto:hover .produto__img img { transform: scale(1.05); }
.produto__nome { font-family: var(--g-font-display); font-size: 1.375rem; line-height: 1.2; font-weight: 500; }
.produto__desc { color: var(--g-texto-2); font-size: .875rem; margin-top: 4px; }
.produto__acao { margin-top: auto; padding-top: 16px; font-size: .875rem; }

/* ---------- departamentos: selo G1 na cor de cada um ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(310px, auto)); gap: 14px; }
.depto { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  padding: 36px 36px 32px; border-radius: 24px; background: #0b0b0d; border: 1px solid rgba(255, 255, 255, .07); }
.depto--perfumaria { grid-row: 1 / span 2; min-height: 640px; }
.depto h3 { font-family: var(--g-font-display); font-size: 2.75rem; line-height: 1; font-weight: 500; letter-spacing: -.015em; }
.depto--perfumaria h3 { font-size: 3.5rem; }
.depto p { color: var(--g-texto-3); font-size: 1.0625rem; line-height: 1.5; max-width: 19em; margin-top: 14px; }
.depto__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.depto::before { content: ""; position: absolute; z-index: -2; right: -25%; bottom: -35%; width: 95%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--luz), transparent); }
.depto__selo { position: absolute; z-index: -1; right: -16%; bottom: -12%; width: 86%; height: auto; aspect-ratio: 1;
  color: var(--selo); --g1-um: var(--selo-um); }
.depto--cosmeticos .depto__selo, .depto--vinhos .depto__selo { width: 52%; right: -5%; bottom: -16%; }

.depto .botao--contorno { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }   /* legível sobre o selo */
.depto .botao--contorno:hover { background: rgba(40, 40, 44, .6); }

.depto--perfumaria { --luz: rgba(204, 146, 64, .34); --selo: rgba(240, 204, 146, .2); --selo-um: #d6a456; }
.depto--cosmeticos { --luz: rgba(222, 112, 150, .26); --selo: rgba(246, 182, 200, .18); --selo-um: #e28aa6; }
.depto--vinhos { --luz: rgba(150, 26, 56, .5); --selo: rgba(226, 112, 136, .18); --selo-um: #b8354f; }

.marcas__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.marca { display: flex; flex-direction: column; height: 100%; min-height: 168px; padding: 24px; border-radius: 20px; cursor: pointer;
  background: var(--g-superficie); border: 1px solid rgba(255, 255, 255, .06); color: inherit; text-decoration: none; transition: border-color .25s; }
.marca:hover { border-color: rgba(255, 255, 255, .22); }
.marca__nome { font-family: var(--g-font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 500; }
.marca__desc { color: var(--g-texto-2); font-size: .9375rem; margin-top: 4px; }
.marca__acao { margin-top: auto; padding-top: 18px; font-size: .875rem; }

/* ---------- Guia One: o marinho de dentro da sacola ---------- */
.guia-one { background: radial-gradient(120% 95% at 82% 50%, #1b4499 0%, var(--g-marinho) 46%, #091d48 100%); padding: 112px 0; overflow: hidden;
  color: #fff; --g-azul-claro: #6ea2ee; }   /* marinho nos dois temas */
.guia-one__in { max-width: var(--g-largura); margin: 0 auto; padding: 0 32px; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.guia-one h2 { font-family: var(--g-font-display); font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.guia-one__sub { font-size: 1.25rem; line-height: 1.45; color: rgba(255, 255, 255, .86); max-width: 25em; margin-top: 16px; }
.passos { list-style: none; margin: 40px 0; padding: 0; }
.passos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.passos li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.passo__n { font-family: var(--g-font-display); font-size: 1.75rem; line-height: 1; font-weight: 500; color: #8fb6f0; }
.passos h3 { font-size: 1.0625rem; font-weight: 600; }
.passos p { color: rgba(255, 255, 255, .8); font-size: .9375rem; line-height: 1.5; margin-top: 4px; max-width: 30em; }
.guia-one .selo-lanc { color: #a9c7f5; margin-bottom: 18px; }
.guia-one .selo-lanc::before { background: #8fb6f0; }

/* prévia: um resultado real do Guia One, em vidro sobre o marinho */
.guia-one__previa { position: relative; justify-self: end; width: 100%; max-width: 440px; padding-top: 30px; }
.guia-one__app { position: absolute; z-index: 2; top: 0; left: -26px; width: 84px; height: 84px; border-radius: 22.5%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12); }
.previa { position: relative; padding: 70px 26px 26px; border-radius: 24px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px rgba(3, 12, 36, .45); }
.previa__rotulo { position: absolute; top: 26px; right: 26px; font-size: .75rem; color: rgba(255, 255, 255, .6); }
.previa__q { font-size: .875rem; font-weight: 600; margin: 0 0 10px; }
.previa__q + .previa__chips + .previa__q { margin-top: 18px; }
.previa__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.previa__chips span { font-size: .8125rem; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
.previa__chips .on { background: rgba(110, 162, 238, .22); border-color: #8fb6f0; color: #fff; }
.previa__res { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 22px; padding: 16px;
  border-radius: 18px; background: #fff; color: var(--g-grafite, #1d1d1f); box-shadow: 0 0 0 2px var(--g-azul); }
.previa__res img { width: 76px; height: 96px; object-fit: contain; }
.previa__selo { display: inline-block; font-size: .6875rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--g-azul); color: #fff; }
.previa__res b { display: block; font-family: var(--g-font-display); font-size: 1.375rem; font-weight: 500; margin: 6px 0 4px; }
.previa__res ul { margin: 0; padding-left: 16px; font-size: .8125rem; color: #424245; }

/* ---------- contato ---------- */
.contato { position: relative; overflow: hidden; padding: 120px 0; background: var(--g-preto); }
.contato__g1 { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(780px, 72vw); height: auto; aspect-ratio: 1;
  color: rgba(255, 255, 255, .05); --g1-um: rgba(50, 116, 207, .4); pointer-events: none; }
.contato .secao__in { position: relative; }
.contato h2 { font-family: var(--g-font-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; }
.contato__sub { color: var(--g-texto-2); font-size: 1.125rem; line-height: 1.5; margin-top: 16px; max-width: 30em; }
.canais { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 14px; margin-top: 44px; }
.canal { display: flex; flex-direction: column; min-height: 230px; padding: 28px; border-radius: 22px; cursor: pointer;
  background: rgba(18, 18, 20, .82); border: 1px solid rgba(255, 255, 255, .1); color: inherit; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .25s; }
.canal:hover { border-color: rgba(255, 255, 255, .3); }
.canal__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--g-azul); color: #fff; margin-bottom: 22px; }
.canal__ic svg { width: 24px; height: 24px; }
.canal__nome { font-family: var(--g-font-display); font-size: 1.75rem; line-height: 1.15; font-weight: 500; }
.canal__txt { color: var(--g-texto-2); font-size: .9375rem; line-height: 1.5; margin-top: 6px; }
.canal__acao { margin-top: auto; padding-top: 20px; font-size: .9375rem; }
.showroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; max-width: 774px; margin-top: 14px;
  padding: 14px; border-radius: 22px; background: rgba(18, 18, 20, .82); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.showroom__info { display: flex; flex-direction: column; padding: 14px; }
.showroom__end { font-style: normal; font-size: 1rem; line-height: 1.5; margin-top: 10px; }
.showroom__rotas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.rota { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: .9375rem; font-weight: 500;
  background: #fff; color: #111; text-decoration: none; transition: transform .2s, background .2s; }
.rota:hover { background: #e3eaf8; transform: translateY(-1px); }
.rota svg { width: 22px; height: 22px; flex: none; }
.showroom__mapa { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: 14px; }

/* ---------- telas médias ---------- */
@media (max-width: 1080px) {
  .apple__lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 30%);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -32px; padding: 0 32px 4px; scroll-padding: 0 32px; }
  .apple__lista::-webkit-scrollbar { display: none; }
  .apple__lista li { scroll-snap-align: start; }
  .marcas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .lancamento__in { grid-template-columns: minmax(0, 1fr); padding: 12px 20px 16px; gap: 0; }
  /* no celular o produto vem primeiro, para aparecer sem rolar */
  .lancamento__palco { order: -1; justify-self: center; width: min(100%, 420px); margin-bottom: 4px; }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding: 0 20px 48px; }
  .secao { padding-top: 80px; }
  .secao--mais { padding-bottom: 88px; }
  .secao__in { padding: 0 20px; }
  .apple__lista { margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px; grid-auto-columns: minmax(190px, 44%); }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .depto--perfumaria { grid-row: auto; min-height: 480px; }
  .depto { min-height: 320px; }
  .guia-one { padding: 88px 0; }
  .guia-one__in { grid-template-columns: minmax(0, 1fr); padding: 0 20px; gap: 64px; }
  .guia-one__previa { justify-self: center; max-width: 420px; }
  .guia-one__app { left: 16px; }
  .contato { padding: 88px 0; }
  .contato__g1 { width: 120vw; right: -50%; }
  .canais { grid-template-columns: minmax(0, 1fr); }
  .showroom { grid-template-columns: minmax(0, 1fr); }
  .showroom__mapa { min-height: 280px; }
}

@media (max-width: 560px) {
  .lancamento__acoes .botao { flex: 1 1 100%; }
  .ficha dd { font-size: 1.25rem; }
  .apple__lista { grid-auto-columns: 64%; }
  .depto { padding: 28px 24px 24px; }
  .depto h3 { font-size: 2.25rem; }
  .depto--cosmeticos .depto__selo, .depto--vinhos .depto__selo { width: 62%; right: -16%; bottom: -20%; }
  .depto--perfumaria h3 { font-size: 2.75rem; }
  .marcas__lista { grid-template-columns: minmax(0, 1fr); }
  .marca { min-height: 0; }
  .guia-one__sub { font-size: 1.0625rem; }
  .guia-one .botao { width: 100%; }
}

/* ---------- tema claro: a sacola por dentro do papel. Menu, rodapé e faixa do Guia One continuam iguais ---------- */
:root[data-theme="light"] body.home { background: #fff; }
:root[data-theme="light"] .home main {
  --g-preto: #ffffff; --g-superficie: #f5f5f7; --g-branco: #1d1d1f; --g-texto-2: #6e6e73; --g-texto-3: #424245;
  --g-linha: rgba(0, 0, 0, .12); --g-azul-claro: #1f5fae;
  color: var(--g-branco);
}
:root[data-theme="light"] .home main .guia-one { --g-azul-claro: #6ea2ee; }
:root[data-theme="light"] .home main .botao--contorno { border-color: rgba(0, 0, 0, .25); }
:root[data-theme="light"] .home main .botao--contorno:hover { background: rgba(0, 0, 0, .05); border-color: #1d1d1f; }
/* lançamento: anel do G1 em grafite e luz bordô mais suave */
:root[data-theme="light"] #gArco stop { stop-color: #1d1d1f; }
:root[data-theme="light"] .lancamento__luz { background: radial-gradient(closest-side, rgba(156, 40, 66, .26), rgba(107, 37, 51, .1) 50%, transparent 78%); }
:root[data-theme="light"] .lancamento__foto { filter: drop-shadow(0 30px 40px rgba(60, 10, 22, .22)); }
/* cartões */
:root[data-theme="light"] .produto, :root[data-theme="light"] .marca { border-color: transparent; }
:root[data-theme="light"] .produto:hover, :root[data-theme="light"] .marca:hover { border-color: rgba(0, 0, 0, .14); }
:root[data-theme="light"] .produto__img { background: radial-gradient(closest-side, #fff, transparent 85%); }
:root[data-theme="light"] .depto { background: #f5f5f7; border-color: transparent; }
:root[data-theme="light"] .depto .botao--contorno { background: rgba(255, 255, 255, .7); }
:root[data-theme="light"] .depto .botao--contorno:hover { background: #fff; }
:root[data-theme="light"] .depto--perfumaria { --luz: rgba(214, 164, 86, .3); --selo: rgba(150, 100, 30, .16); --selo-um: #c08a3a; }
:root[data-theme="light"] .depto--cosmeticos { --luz: rgba(226, 138, 166, .26); --selo: rgba(178, 60, 98, .14); --selo-um: #d06a8c; }
:root[data-theme="light"] .depto--vinhos { --luz: rgba(184, 53, 79, .2); --selo: rgba(140, 30, 55, .14); --selo-um: #a52c46; }
/* contato */
:root[data-theme="light"] .contato__g1 { color: rgba(0, 0, 0, .05); --g1-um: rgba(50, 116, 207, .25); }
:root[data-theme="light"] .canal { background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .1); }
:root[data-theme="light"] .showroom { background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .1); }
:root[data-theme="light"] .rota { background: #111; color: #fff; }
:root[data-theme="light"] .rota:hover { background: #333; }
:root[data-theme="light"] .canal:hover { border-color: rgba(0, 0, 0, .28); }