/* ============================================================
   HOME NOVA — palco escuro estilo Apple.

   Carregado só em /home-nova, depois do styles.css. Tudo aqui é
   prefixado por body.hn para não vazar para o resto do site.
   Paleta: preto absoluto para o palco, carvão para as faixas de
   conteúdo, porcelana para texto, azul só nos botões de compra.
   ============================================================ */

body.hn {
  --hn-obsidian: #000000;
  --hn-graphite: #0e0e0e;
  --hn-carbon: #1d1d1f;
  --hn-steel: #333336;
  --hn-slate: #6e6e73;
  --hn-ash: #86868b;
  --hn-porcelain: #f5f5f7;
  --hn-blue: #0071e3;
  --hn-blue-hover: #0077ed;
  --hn-link: #2997ff;
  --hn-radius: 28px;
  --hn-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", var(--font-display);
  --hn-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", var(--font-body);

  background: var(--hn-obsidian);
  color: var(--hn-porcelain);
  font-family: var(--hn-text);
}
body.hn::before { display: none; }

/* ---------- cabeçalho: mantém o branco, só aperta ---------- */
body.hn .promo-wrap { padding: 0; max-width: none; }
body.hn .promo-bar { border-radius: 0; box-shadow: none; background: var(--hn-carbon); }
body.hn .header { background: rgba(255,255,255,0.92); }
body.hn .header .btn-primary { background: var(--hn-blue); box-shadow: none; border-radius: 980px; }
body.hn .header .btn-primary:hover { background: var(--hn-blue-hover); box-shadow: none; }

/* ---------- subnav de pílulas (como na loja de referência) ---------- */
.hn-subnav {
  background: #fff; border-bottom: 1px solid #e8e8ed;
  position: relative; z-index: 90;
}
.hn-subnav-track {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hn-subnav-track::-webkit-scrollbar { display: none; }
.hn-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 980px; font-size: 13px; font-weight: 500;
  color: var(--hn-carbon); background: transparent; white-space: nowrap;
  letter-spacing: -0.12px; transition: background 0.2s ease, color 0.2s ease;
}
.hn-chip:hover { background: #f5f5f7; }
.hn-chip.is-active { background: var(--hn-carbon); color: #fff; }

/* ---------- banner de abertura ---------- */
.hn-banner {
  position: relative; width: 100%; background: var(--hn-obsidian); overflow: hidden; line-height: 0;
  /* Arrasto horizontal é nosso; o vertical continua rolando a página. */
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.hn-banner:active { cursor: grabbing; }
.hn-banner-slide img { -webkit-user-drag: none; user-drag: none; }
.hn-banner-track { position: relative; width: 100%; aspect-ratio: 16 / 5; }
.hn-banner-slide {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.hn-banner-slide.is-active { opacity: 1; visibility: visible; }
.hn-banner-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.hn-banner-dots {
  position: absolute; right: 24px; bottom: 18px; z-index: 2;
  display: flex; gap: 6px; padding: 7px 12px; border-radius: 980px;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hn-banner-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.45); transition: background 0.2s ease, width 0.2s ease;
}
.hn-banner-dots button.is-active { background: #fff; width: 22px; border-radius: 980px; }

/* ---------- três cartões ---------- */
.hn-promos-wrap { background: var(--hn-obsidian); padding: 44px 0 0; }
.hn-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hn-promo {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 190px; padding: 26px 28px; border-radius: var(--hn-radius); overflow: hidden;
  text-decoration: none; transition: transform 0.3s ease;
}
.hn-promo:hover { transform: translateY(-3px); }
.hn-promo.tom-vinho { background: linear-gradient(135deg, #4a1726 0%, #2a0d16 100%); color: var(--hn-porcelain); }
.hn-promo.tom-escuro { background: linear-gradient(135deg, #1d1d1f 0%, #000 100%); color: var(--hn-porcelain); }
.hn-promo.tom-claro { background: linear-gradient(135deg, #e8f2d9 0%, #cfe3b4 100%); color: var(--hn-carbon); }
.hn-promo-texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.hn-promo h3 { font-family: var(--hn-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 0; }
.hn-promo-chamada { font-size: 13px; opacity: 0.7; }
.hn-promo strong { font-family: var(--hn-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.hn-promo-nota { font-size: 12px; opacity: 0.65; }
.hn-promo-cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 14px;
  padding: 9px 18px; border-radius: 980px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.14); transition: background 0.2s ease;
}
.hn-promo-cta svg { width: 14px; height: 14px; }
.hn-promo.tom-claro .hn-promo-cta { background: var(--hn-carbon); color: #fff; }
.hn-promo:hover .hn-promo-cta { background: var(--hn-blue); color: #fff; }
/* O aparelho entra pela direita e o cartão corta o corpo: fica só a
   parte de cima, com as câmeras. */
.hn-promo-foto { flex: 0 0 38%; }
.hn-promo-foto img {
  position: absolute; right: 16px; top: 28px;
  width: auto; height: 330px; max-width: none; max-height: none;
  object-fit: contain; object-position: center top;
  transition: top 0.35s ease, right 0.35s ease, height 0.35s ease, transform 0.35s ease;
}

/* Com o ponteiro em cima, o aparelho aparece inteiro, encaixado na
   altura do cartão e centralizado. A largura continua automática, para
   a proporção da foto não ser esticada em nenhum momento.
   Só em quem tem ponteiro, para não travar o estado no toque. */
@media (hover: hover) {
  .hn-promo:hover .hn-promo-foto img {
    top: 50%; right: 16px; height: 86%;
    transform: translateY(-50%);
    object-position: center center;
  }
}
.hn-promo-texto { position: relative; z-index: 1; }

/* ---------- botões-pílula ---------- */
.hn-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 22px; border-radius: 980px; font-family: var(--hn-text);
  font-size: 15px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.2;
  border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hn-pill svg { width: 15px; height: 15px; }
.hn-pill-blue { background: var(--hn-blue); color: #fff; }
.hn-pill-blue:hover { background: var(--hn-blue-hover); transform: translateY(-1px); }
.hn-pill-ghost { background: rgba(66,66,69,0.72); color: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hn-pill-ghost:hover { background: rgba(90,90,94,0.8); }
.hn-pill-outline { background: transparent; color: var(--hn-porcelain); border-color: var(--hn-slate); }
.hn-pill-outline:hover { border-color: var(--hn-porcelain); }
/* Contorno para FUNDO CLARO. A .hn-pill-outline usa porcelana, que
   e quase branco: ela nasceu no palco escuro da home e some nas
   paginas claras, como a de regiao. */
.hn-pill-line { background: #fff; color: var(--hn-carbon); border-color: rgba(0,0,0,0.16); }
.hn-pill-line:hover { border-color: var(--hn-carbon); transform: translateY(-1px); }
.hn-link { color: var(--hn-link); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- ritmo das seções ---------- */
body.hn .section { padding: clamp(64px, 8vw, 110px) 0; }
body.hn .section-head { margin-bottom: 36px; }
body.hn .section-eyebrow { color: var(--hn-ash); letter-spacing: 0.04em; font-weight: 600; font-size: 13px; text-transform: none; }
body.hn .section-title {
  font-family: var(--hn-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.07; color: var(--hn-porcelain);
}
body.hn .section-link { color: var(--hn-link); }
body.hn .section-link:hover { color: #5ab0ff; }
.hn-band-fade { background: linear-gradient(var(--hn-carbon), var(--hn-obsidian) 288px); }

/* ---------- destaques: azulejos pretos 28px ---------- */
.hn-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hn-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; border-radius: var(--hn-radius); overflow: hidden;
  background: var(--hn-graphite); border: 1px solid #1c1c1e; color: var(--hn-porcelain);
  text-decoration: none; isolation: isolate;
}
.hn-tile-media {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 48px 48px 150px;
  background: radial-gradient(60% 50% at 50% 35%, rgba(255,255,255,0.08), transparent 70%);
}
.hn-tile-media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.hn-tile:hover .hn-tile-media img { transform: scale(1.04); }
.hn-tile-phone {
  width: 34%; aspect-ratio: 9 / 19.5; border-radius: 26px;
  background: linear-gradient(180deg, #2c2c2e, #0a0a0a);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.hn-tile-body {
  position: relative; z-index: 1; padding: 28px 30px 30px;
  background: linear-gradient(180deg, rgba(14,14,14,0) 0%, rgba(14,14,14,0.85) 45%, #0e0e0e 100%);
}
.hn-tile-kicker { font-size: 12px; font-weight: 600; color: #ff8f5a; margin-bottom: 6px; }
.hn-tile h3 {
  font-family: var(--hn-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.01em; line-height: 1.13; margin: 0 0 4px; color: var(--hn-porcelain);
}
.hn-tile-meta { color: var(--hn-ash); font-size: 14px; margin-bottom: 16px; }
.hn-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hn-tile-price { display: flex; flex-direction: column; gap: 2px; }
.hn-tile-price small { font-size: 12px; color: var(--hn-ash); }
.hn-tile-price strong { font-family: var(--hn-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.hn-tile-price em { font-style: normal; font-size: 12px; color: var(--hn-ash); }
.hn-tile.is-soldout .hn-tile-media { filter: grayscale(1) opacity(0.5); }

/* ---------- categorias: azulejos escuros ---------- */
body.hn .categories-grid { gap: 14px; }
body.hn .cat-card {
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius);
  color: var(--hn-porcelain); min-height: 240px; padding: 24px;
}
body.hn .cat-card::before { background: var(--hn-carbon); }
body.hn .cat-card:hover { transform: translateY(-3px); box-shadow: none; }
body.hn .cat-icon { background: rgba(255,255,255,0.06); color: var(--hn-porcelain); border-radius: 12px; }
body.hn .cat-card:hover .cat-icon { background: rgba(255,255,255,0.12); }
body.hn .cat-arrow { background: rgba(255,255,255,0.06); color: var(--hn-porcelain); }
body.hn .cat-card:hover .cat-arrow { background: var(--hn-blue); }
body.hn .cat-meta h3 { color: var(--hn-porcelain); font-family: var(--hn-display); font-weight: 600; }
body.hn .cat-meta p { color: var(--hn-ash); }
body.hn .cat-media { background: none; }
body.hn .cat-media img { filter: saturate(0.95) drop-shadow(0 18px 24px rgba(0,0,0,0.6)); }

/* ---------- números ---------- */
body.hn .stats { background: transparent; border-color: rgba(255,255,255,0.08); }
body.hn .stat-num {
  font-family: var(--hn-display); font-weight: 600; background: none; color: var(--hn-porcelain);
  -webkit-text-fill-color: var(--hn-porcelain);
}
body.hn .stat-label { color: var(--hn-ash); }

/* ---------- vitrine: cartões de produto no escuro ---------- */
body.hn .pill { background: transparent; border-color: var(--hn-steel); color: var(--hn-porcelain); border-radius: 980px; }
body.hn .pill:hover { border-color: var(--hn-porcelain); }
body.hn .pill.active { background: var(--hn-porcelain); color: var(--hn-carbon); border-color: var(--hn-porcelain); }
body.hn .products-grid { gap: 16px; }
body.hn .product-card {
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius);
}
body.hn .product-card:hover { transform: translateY(-3px); box-shadow: none; border-color: #2c2c2e; }
body.hn .product-img.photo { background: var(--hn-porcelain); }
body.hn .product-img.light { background: linear-gradient(160deg, #f5f5f7 0%, #d6d6db 100%); }
body.hn .product-model { color: var(--hn-ash); }
body.hn .product-name { color: var(--hn-porcelain); font-family: var(--hn-display); font-weight: 600; }
body.hn .product-name:hover { color: var(--hn-link); }
body.hn .product-meta span { background: rgba(255,255,255,0.07); color: #c7c7cc; }
body.hn .product-price-info small { color: var(--hn-ash); }
body.hn .product-price-info strong { color: var(--hn-porcelain); }
body.hn .product-price-info em { color: var(--hn-ash); }
body.hn .product-add { background: var(--hn-blue); }
body.hn .product-add:hover { background: var(--hn-blue-hover); }
body.hn .product-add[disabled] { background: var(--hn-steel); }
body.hn .product-fav { background: rgba(0,0,0,0.35); color: #fff; }
body.hn .no-results { color: var(--hn-ash); }

/* ---------- avaliações ---------- */
body.hn .reviews { background: transparent; }
body.hn .review-card {
  background: var(--hn-carbon); border: 1px solid #2a2a2c; border-radius: var(--hn-radius);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.hn .review-stars span { color: var(--hn-steel); }
body.hn .review-stars span.on { color: #ffd500; }
body.hn .review-card blockquote { color: var(--hn-porcelain); }
body.hn .review-card figcaption strong { color: var(--hn-porcelain); }
body.hn .review-card figcaption span { color: var(--hn-ash); }

/* ---------- diferenciais ---------- */
body.hn .why { background: transparent; }
body.hn .why::before { display: none; }
body.hn .why-grid { gap: 14px; }
body.hn .why-item {
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius);
  padding: 28px 26px;
}
body.hn .why-icon { background: rgba(255,255,255,0.06); color: var(--hn-porcelain); }
body.hn .why-item h3 { font-family: var(--hn-display); font-weight: 600; color: var(--hn-porcelain); }
body.hn .why-item p { color: var(--hn-ash); }

/* ---------- onde a loja fica ---------- */
body.hn .local { background: var(--hn-carbon); }
body.hn .local-intro { color: rgba(245,245,247,0.8); }
body.hn .local-fatos li { color: var(--hn-porcelain); }
body.hn .local-fatos svg { color: var(--hn-link); }
body.hn .local-bloco { background: var(--hn-graphite); border: 1px solid #2a2a2c; border-radius: var(--hn-radius); }
body.hn .local-bloco h3 { color: var(--hn-porcelain); font-family: var(--hn-display); font-weight: 600; }
body.hn .local-lista { color: var(--hn-ash); }
body.hn .local-cidade { background: transparent; border-color: var(--hn-steel); color: var(--hn-porcelain); }
body.hn .local-cidade:hover, body.hn .local-cidade.is-sede { border-color: var(--hn-porcelain); }
body.hn .local .btn-primary { background: var(--hn-blue); box-shadow: none; border-radius: 980px; }
body.hn .local .btn-primary:hover { background: var(--hn-blue-hover); box-shadow: none; }

/* ---------- FAQ ---------- */
body.hn .faq { background: transparent; }
body.hn .faq-item {
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: 20px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.hn .faq-item summary { color: var(--hn-porcelain); }
body.hn .faq-item summary svg { color: var(--hn-ash); }
body.hn .faq-a { color: var(--hn-ash); }

/* ---------- chamada final: superfície clara como "reset" ---------- */
body.hn .cta-banner { background: var(--hn-porcelain); color: var(--hn-carbon); padding: clamp(64px, 8vw, 110px) 0; }
body.hn .cta-inner h2 { font-family: var(--hn-display); font-weight: 600; color: var(--hn-carbon); letter-spacing: -0.02em; }
body.hn .cta-inner p { color: var(--hn-slate); }
body.hn .cta-banner .btn-light { background: var(--hn-blue); color: #fff; border-radius: 980px; box-shadow: none; }
body.hn .cta-banner .btn-light:hover { background: var(--hn-blue-hover); }

/* ---------- captação ---------- */
body.hn .lead { background: var(--hn-porcelain); padding: 0 0 clamp(48px, 6vw, 80px); }
body.hn .lead-inner {
  background: var(--hn-carbon); color: var(--hn-porcelain); border-radius: var(--hn-radius); box-shadow: none;
}
body.hn .lead-inner p { color: var(--hn-ash); }
body.hn .lead-form input { background: rgba(255,255,255,0.06); color: var(--hn-porcelain); border: 1px solid var(--hn-slate); border-radius: 980px; }
body.hn .lead-form input::placeholder { color: var(--hn-ash); }
body.hn .lead-form input:focus { outline: 1px solid var(--hn-blue); outline-offset: 1px; }
body.hn .lead-form .btn-primary { background: var(--hn-blue); box-shadow: none; border-radius: 980px; }
body.hn .lead-form .btn-primary:hover { background: var(--hn-blue-hover); box-shadow: none; }

/* ---------- rodapé ---------- */
body.hn .footer { background: var(--hn-obsidian); border-top: 1px solid rgba(255,255,255,0.08); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .hn-featured-grid { gap: 12px; }
  .hn-tile { min-height: 400px; }
}
@media (max-width: 900px) {
  .hn-subnav-track { justify-content: flex-start; padding: 8px 0; }
}
@media (max-width: 720px) {
  .hn-featured-grid { grid-template-columns: 1fr; }
  .hn-tile { min-height: 360px; }
  .hn-tile-media { padding: 32px 32px 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-tile-media img, .hn-pill { transition: none; }
}

/* ---------- etiquetas dos cartões ---------- */
body.hn .product-tag { background: #fff; color: var(--hn-carbon); }
body.hn .product-tag.new { background: var(--hn-blue); color: #fff; }
body.hn .product-tag.last { background: #b64400; color: #fff; }

/* ============================================================
   CABEÇALHO DA HOME NOVA (partials/header-nova.ejs)
   ============================================================ */
.hn-topline { height: 4px; background: linear-gradient(90deg, #4F2BD9 0%, #7857FF 45%, #0071e3 100%); }

.hn-header {
  position: sticky; top: 0; z-index: 100; background: #fff; color: var(--hn-carbon);
  border-bottom: 1px solid #e8e8ed;
}
.hn-header-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 32px; padding: 16px 0 12px;
}
.hn-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--hn-carbon); text-decoration: none; }
.hn-brand-logo { width: 48px; height: 48px; border-radius: 50%; display: block; object-fit: cover; }
.hn-brand-name {
  display: flex; flex-direction: column; line-height: 1.05;
  font-family: var(--hn-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.hn-brand-name span:last-child { color: var(--hn-ash); font-weight: 500; }

.hn-search {
  position: relative; justify-self: center; width: 100%; max-width: 420px; margin: 0;
}
.hn-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--hn-slate); pointer-events: none; }
.hn-search input {
  width: 100%; height: 40px; padding: 0 16px 0 42px; border-radius: 980px; border: 1px solid transparent;
  background: #f0f0f2; color: var(--hn-carbon); font-family: var(--hn-text); font-size: 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hn-search input::placeholder { color: #8e8e93; }
.hn-search input:focus { outline: none; background: #fff; border-color: var(--hn-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.hn-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hn-header-actions { display: flex; align-items: center; gap: 10px; }
.hn-icon {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--hn-carbon); transition: background 0.2s ease;
}
.hn-icon:hover { background: #f0f0f2; }
.hn-icon svg { width: 22px; height: 22px; }
.hn-icon .cart-count { background: var(--hn-blue); }
.hn-header-cta { padding: 10px 18px; font-size: 14px; }
.hn-hamburger { display: none; }

.hn-menu {
  display: flex; align-items: center; justify-content: center; gap: 44px;
  padding: 6px 0 14px; overflow-x: auto; scrollbar-width: none;
}
.hn-menu::-webkit-scrollbar { display: none; }
.hn-menu a {
  white-space: nowrap; font-family: var(--hn-text); font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--hn-carbon); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hn-menu a:hover { color: var(--hn-blue); border-color: var(--hn-blue); }

.hn-models { background: #fff; border-bottom: 1px solid #e8e8ed; }
.hn-models .hn-chip { color: var(--hn-carbon); }
.hn-models .hn-chip:hover { background: #f0f0f2; }
.hn-models .hn-chip.is-active { background: var(--hn-carbon); color: #fff; }
.hn-models-track {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 18px 0; overflow-x: auto; scrollbar-width: none;
}
.hn-models-track::-webkit-scrollbar { display: none; }
.hn-models .hn-chip { padding: 8px 14px; font-size: 13px; }

/* ============================================================
   DESTAQUES + EXPLORE: mesma faixa carvão
   ============================================================ */
.hn-band { background: var(--hn-obsidian); }
.hn-band .hn-tile { background: var(--hn-graphite); border-color: #1c1c1e; }
body.hn .hn-band + .hn-band { padding-top: 0; }

/* ---------- explore a loja: carrossel de cartões ---------- */
.hn-explore-wrap { position: relative; }
.hn-explore {
  display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
  padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hn-explore::-webkit-scrollbar { display: none; }
.hn-explore-card {
  position: relative; flex: 0 0 372px; min-height: 490px;
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius);
  color: var(--hn-porcelain); padding: 32px 32px 0; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hn-explore-card:hover { transform: translateY(-3px); border-color: #3a3a3c; }
.hn-explore-kicker { font-size: 14px; font-weight: 600; color: var(--hn-porcelain); margin-bottom: 14px; }
.hn-explore-card h3 {
  font-family: var(--hn-display); font-weight: 600; font-size: 28px; line-height: 1.14; letter-spacing: 0.196px;
  color: var(--hn-porcelain); margin: 0 0 10px;
}
.hn-explore-card p { font-size: 15px; line-height: 1.45; color: var(--hn-ash); margin: 0; }
.hn-explore-media { margin-top: auto; height: 300px; }
/* Com a foto solta sobre o cartão, o texto precisa ficar na frente,
   senão a peça passa por cima do nome da categoria. */
.hn-explore-kicker,
.hn-explore-card h3,
.hn-explore-card p { position: relative; z-index: 1; }

/* A foto é posicionada sobre o cartão inteiro, não dentro da caixa:
   assim cada peça pode sangrar pelas bordas, e o cartão recorta. */
.hn-explore-media img {
  position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
}

/* Enquadramento de cada categoria, pela slug do painel. */
.hn-explore-card[data-filter="iphone"] .hn-explore-media img {
  right: -24px; bottom: -145px; width: 100%; height: 98%;
}
.hn-explore-card[data-filter="ipad"] .hn-explore-media img {
  right: 150px; bottom: -140px;
}
/* Relógio menor, centralizado e encostado na base do cartão. */
.hn-explore-card[data-filter="watch"] .hn-explore-media img {
  right: auto; top: auto; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  width: 134%; height: auto; object-position: center bottom;
}
.hn-explore-card[data-filter="airpods"] .hn-explore-media img {
  right: auto; bottom: auto; left: 180px; top: -130px;
}
.hn-explore-card[data-filter="acessorios"] .hn-explore-media img {
  right: auto; left: -34px; bottom: 0; width: 80%; height: 80%;
}
.hn-explore-media .hn-explore-icon {
  width: 120px; height: 120px; border-radius: 30px; margin-bottom: 40px; display: grid; place-items: center;
  background: linear-gradient(160deg, #2c2c2e, #0e0e0e); border: 1px solid #3a3a3c; color: var(--hn-porcelain);
}
.hn-explore-media .hn-explore-icon svg { width: 52px; height: 52px; }
.hn-explore-plus {
  position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--hn-porcelain); color: var(--hn-carbon);
  transition: background 0.2s ease, color 0.2s ease;
}
.hn-explore-plus svg { width: 16px; height: 16px; }
.hn-explore-card:hover .hn-explore-plus { background: var(--hn-blue); color: #fff; }
.hn-explore-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.hn-explore-nav button {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); color: var(--hn-porcelain); transition: background 0.2s ease, opacity 0.2s ease;
}
.hn-explore-nav button:hover { background: rgba(255,255,255,0.2); }
.hn-explore-nav button[disabled] { opacity: 0.35; cursor: default; }
.hn-explore-nav svg { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .hn-header-row { gap: 20px; }
  .hn-menu { gap: 28px; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hn-header-row { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0 10px; }
  .hn-search { max-width: none; }
  .hn-header-cta { display: none; }
  .hn-hamburger { display: grid; }
  .hn-menu { display: none; }
  .hn-models-track { justify-content: flex-start; }
  .hn-explore-card { flex-basis: 300px; min-height: 440px; padding: 24px 24px 0; }
  .hn-explore-media { height: 260px; }
  .hn-explore-card h3 { font-size: 24px; }
}
@media (max-width: 720px) {
  .hn-header-row { grid-template-columns: auto auto; grid-template-areas: "brand actions" "search search"; row-gap: 10px; }
  .hn-brand { grid-area: brand; }
  .hn-header-actions { grid-area: actions; justify-self: end; }
  .hn-search { grid-area: search; }
  .hn-brand-name { font-size: 15px; }
  .hn-explore { gap: 12px; }
  .hn-explore-card { flex-basis: 84vw; min-height: 420px; }
  .hn-explore-media { height: 240px; }
}

/* ============================================================
   FAIXA DE AVISO NO TOPO (degradê com texto)
   ============================================================ */
.hn-topline {
  height: auto; padding: 9px 16px; text-align: center;
  background: linear-gradient(90deg, #4F2BD9 0%, #7857FF 45%, #0071e3 100%);
  color: #fff; font-family: var(--hn-text); font-size: 13px; font-weight: 500; letter-spacing: -0.1px;
}
.hn-topline a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hn-topline a:hover { text-decoration-thickness: 2px; }
.hn-brand-logo { border-radius: 0; object-fit: contain; }

/* ---------- explore: trilho sangra até a borda direita ---------- */
.hn-explore { margin-right: calc(50% - 50vw); padding-right: 24px; }
/* A seção recorta o que passa da borda: o trilho rola sozinho, a página não. */
body.hn #categorias { overflow-x: clip; }

/* ---------- números: cantos inferiores arredondados ---------- */
body.hn .stats { background: var(--hn-obsidian); border: 0; border-radius: 0; }
body.hn .stat-num { background: none; color: var(--hn-porcelain); -webkit-text-fill-color: var(--hn-porcelain); }

/* ============================================================
   DO DEPOIMENTO EM DIANTE: seções em cartão, com fio e respiro
   ============================================================ */
body.hn .hn-sec { padding: clamp(72px, 8vw, 120px) 0; }
body.hn .hn-sec-card {
  background: var(--hn-graphite); border-radius: var(--hn-radius); margin: 0 12px;
}
body.hn .hn-sec-card + .hn-sec-card { margin-top: 12px; }

.hn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hn-text); font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--hn-ash);
}
.hn-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--hn-blue); }
.hn-h2 {
  font-family: var(--hn-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 60px);
  line-height: 0.98; letter-spacing: -0.025em; color: var(--hn-porcelain); margin: 16px 0 0; max-width: 18ch;
  overflow-wrap: break-word;
}
.hn-h2-xl { font-size: clamp(40px, 5.6vw, 84px); line-height: 0.94; }
.hn-sec-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }

/* ---------- depoimentos ---------- */
.hn-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hn-quote {
  display: flex; flex-direction: column; justify-content: space-between; min-height: 300px;
  background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius); padding: 28px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hn-quote:hover { transform: translateY(-6px); border-color: #2c2c2e; }
.hn-quote-mark { display: block; font-family: var(--hn-display); font-size: 44px; line-height: 0.8; color: var(--hn-blue); }
.hn-quote blockquote { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--hn-porcelain); letter-spacing: -0.01em; }
.hn-quote figcaption {
  display: flex; align-items: end; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid #2a2a2c;
}
.hn-quote figcaption strong { display: block; font-size: 15px; font-weight: 500; color: var(--hn-porcelain); }
.hn-quote figcaption span { font-size: 13px; color: var(--hn-ash); }
.hn-quote-stars { display: flex; gap: 1px; font-size: 13px; }
.hn-quote-stars span { color: var(--hn-steel); }
.hn-quote-stars span.on { color: #ffd500; }

/* ---------- linhas numeradas (diferenciais) ---------- */
.hn-rows { list-style: none; margin: 0; padding: 0; }
.hn-rows li a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 24px;
  padding: 28px 0; border-top: 1px solid #2a2a2c; color: var(--hn-porcelain); text-decoration: none;
}
.hn-rows li:last-child a { border-bottom: 1px solid #2a2a2c; }
.hn-row-idx { font-size: 14px; font-weight: 500; color: var(--hn-ash); }
.hn-rows h3 { font-family: var(--hn-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.02em; margin: 0 0 6px; }
.hn-rows p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hn-ash); max-width: 60ch; }
.hn-row-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3a3a3c; display: grid; place-items: center;
  color: var(--hn-porcelain); opacity: 0.6; transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.hn-row-arrow svg { width: 18px; height: 18px; }
.hn-rows li a:hover .hn-row-arrow { transform: translateX(8px); opacity: 1; background: var(--hn-blue); border-color: var(--hn-blue); color: #fff; }

/* ---------- onde a loja fica ---------- */
.hn-local { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; }
.hn-local-texto { margin: 24px 0 0; font-size: 16px; line-height: 1.55; color: rgba(245,245,247,0.8); max-width: 52ch; }
.hn-facts { list-style: none; margin: 28px 0 32px; padding: 0; }
.hn-facts li { display: flex; align-items: start; gap: 14px; padding: 16px 0; border-top: 1px solid #2a2a2c; font-size: 15px; color: var(--hn-porcelain); }
.hn-facts li:last-child { border-bottom: 1px solid #2a2a2c; }
.hn-facts svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--hn-link); }
.hn-local-cards { display: flex; flex-direction: column; gap: 12px; }
.hn-local-card { background: var(--hn-graphite); border: 1px solid #1c1c1e; border-radius: var(--hn-radius); padding: 28px; }
.hn-local-card h3 { font-family: var(--hn-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--hn-porcelain); }
.hn-local-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--hn-ash); }
.hn-local-cidades { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-local-cidades .hn-chip { color: var(--hn-porcelain); border: 1px solid #3a3a3c; }
.hn-local-cidades .hn-chip:hover { background: rgba(255,255,255,0.08); }
.hn-local-cidades .hn-chip.is-active { background: #fff; color: var(--hn-carbon); border-color: #fff; }

/* ---------- FAQ ---------- */
.hn-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hn-faq-grid .hn-sec-head { margin-bottom: 0; }
.hn-faq { display: flex; flex-direction: column; }
.hn-faq-item { border-top: 1px solid #2a2a2c; }
.hn-faq-item:last-child { border-bottom: 1px solid #2a2a2c; }
.hn-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-family: var(--hn-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--hn-porcelain);
}
.hn-faq-item summary::-webkit-details-marker { display: none; }
.hn-faq-plus {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3a3a3c; display: grid; place-items: center;
  color: var(--hn-porcelain); transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.hn-faq-plus svg { width: 16px; height: 16px; }
.hn-faq-item[open] .hn-faq-plus { transform: rotate(45deg); background: var(--hn-porcelain); border-color: var(--hn-porcelain); color: var(--hn-carbon); }
.hn-faq-a { padding: 0 60px 24px 0; font-size: 15px; line-height: 1.6; color: var(--hn-ash); max-width: 64ch; }

/* ---------- chamada final + captação ---------- */
.hn-cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.hn-cta-sub { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: var(--hn-ash); max-width: 46ch; }
.hn-cta .hn-pill-white { margin-top: 32px; }
.hn-pill-white { background: #fff; color: var(--hn-carbon); }
.hn-pill-white:hover { background: var(--hn-blue); color: #fff; transform: translateY(-1px); }
.hn-lead { background: var(--hn-obsidian); border: 1px solid #1c1c1e; border-radius: var(--hn-radius); padding: 28px; }
.hn-lead h3 { font-family: var(--hn-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--hn-porcelain); }
.hn-lead p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--hn-ash); }
.hn-lead-form { display: flex; gap: 8px; flex-wrap: wrap; }
.hn-lead-form input {
  flex: 1 1 180px; height: 46px; padding: 0 18px; border-radius: 980px; border: 1px solid #3a3a3c;
  background: rgba(255,255,255,0.04); color: var(--hn-porcelain); font-family: var(--hn-text); font-size: 15px;
}
.hn-lead-form input::placeholder { color: var(--hn-ash); }
.hn-lead-form input:focus { outline: 1px solid var(--hn-blue); outline-offset: 1px; border-color: var(--hn-blue); }
.hn-lead-form .hn-pill { height: 46px; }

/* ---------- rodapé em cartão ---------- */
body.hn .footer { background: var(--hn-obsidian); border: 0; border-radius: 0; margin: 12px 0 0; padding: 64px 0 28px; }
body.hn .logo-img-footer { border-radius: 0; object-fit: contain; }
body.hn .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 0; }
body.hn .footer h4 { font-family: var(--hn-text); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); }
body.hn .footer ul a { color: rgba(255,255,255,0.8); }
body.hn .footer ul a:hover { color: var(--hn-link); }
body.hn .footer-brand p { color: rgba(255,255,255,0.65); }
body.hn .footer-social a { background: rgba(255,255,255,0.08); }
body.hn .footer-social a:hover { background: var(--hn-blue); }
body.hn .footer-contact-item { color: rgba(255,255,255,0.8); }
body.hn .footer-contact-item svg { color: var(--hn-link); }
body.hn .footer-bottom { border-top: 0; color: rgba(255,255,255,0.6); }
body.hn .footer-bottom-links a:hover { color: var(--hn-link); }

@media (max-width: 1024px) {
  .hn-quotes { grid-template-columns: repeat(2, 1fr); }
  .hn-local, .hn-faq-grid, .hn-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body.hn .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hn-quotes { grid-template-columns: 1fr; }
  .hn-quote { min-height: 0; }
  body.hn .hn-sec-card { margin: 0 8px; }
  body.hn .hn-sec-card + .hn-sec-card { margin-top: 8px; }
  .hn-rows li a { grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 14px; padding: 22px 0; }
  .hn-faq-a { padding-right: 0; }
  body.hn .footer { margin: 8px 0 0; }
  body.hn .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CELULAR: ajustes de leitura e toque
   ============================================================ */

/* Destaques: imagem maior também no desktop. */
.hn-tile-media { padding: 40px 40px 130px; }

/* Menu lateral no tema escuro (o parcial é compartilhado, só a cor muda). */
body.hn .mobile-nav { background: var(--hn-graphite); color: var(--hn-porcelain); }
body.hn .mobile-nav-header { border-bottom-color: #2a2a2c; color: var(--hn-porcelain); }
body.hn .mobile-nav-close { background: rgba(255,255,255,0.08); color: var(--hn-porcelain); }
body.hn .mobile-nav-links a { color: var(--hn-porcelain); border-bottom-color: #2a2a2c; font-family: var(--hn-display); font-weight: 600; }
body.hn .mobile-nav-links a svg { color: var(--hn-ash); }
body.hn .mobile-nav-footer { border-top-color: #2a2a2c; }
body.hn .mobile-nav .btn-primary { background: var(--hn-blue); box-shadow: none; border-radius: 980px; }

/* Barra fixa com o WhatsApp: só no celular. */
.hn-bottom-cta { display: none; }

/* Pílulas de filtro numa linha só, rolando de lado. */
@media (max-width: 720px) {
  body.hn .filter-pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -24px 20px; padding: 0 24px 4px;
  }
  body.hn .filter-pills::-webkit-scrollbar { display: none; }
  body.hn .pill { flex: 0 0 auto; }
}

@media (max-width: 900px) {

  /* Barra fixa no rodapé da tela. */
  .hn-bottom-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(0,0,0,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid #1c1c1e;
  }
  .hn-bottom-cta .hn-pill { width: 100%; justify-content: center; height: 48px; font-size: 15px; }
  body.hn { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.hn .wa-float { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 52px; height: 52px; }
  body.hn .wa-float svg { width: 24px; height: 24px; }
}

@media (max-width: 720px) {
  /* Cabeçalho: logo e nome menores. */
  .hn-brand-logo { width: 36px; height: 36px; }
  .hn-brand-name { font-size: 14px; }
  .hn-header-row { padding: 10px 0 8px; }

  /* Destaques: foto em cima, texto embaixo, nada sobreposto. */
  .hn-tile { min-height: 0; display: flex; flex-direction: column; }
  .hn-tile-media {
    position: relative; inset: auto; height: 250px; padding: 20px 20px 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,0.08), transparent 70%);
  }
  .hn-tile-media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
  .hn-tile-phone { width: 30%; }
  .hn-tile-body { background: none; padding: 8px 22px 22px; }
  .hn-tile h3 { font-size: 24px; }
  .hn-tile-meta { margin-bottom: 12px; }
  .hn-tile-foot .hn-pill { padding: 10px 18px; font-size: 14px; }

  /* Catálogo: cartão compacto, preço e botão alinhados na base. */
  body.hn .products-grid { gap: 10px; }
  body.hn .product-card { display: flex; flex-direction: column; border-radius: 20px; }
  body.hn .product-body { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; }
  body.hn .product-model { font-size: 11px; margin-bottom: 2px; }
  body.hn .product-name { font-size: 15px; line-height: 1.2; margin-bottom: 8px; }
  body.hn .product-meta { display: none; }
  body.hn .product-price { margin-top: auto; align-items: center; }
  body.hn .product-price-info small { font-size: 10px; }
  body.hn .product-price-info strong { font-size: 17px; }
  body.hn .product-price-info em { font-size: 11px; display: block; }
  body.hn .product-add { width: 36px; height: 36px; }
  body.hn .product-add svg { width: 16px; height: 16px; }
  body.hn .product-tag { font-size: 10px; padding: 4px 8px; }
  body.hn .product-fav { width: 32px; height: 32px; }
}

/* ============================================================
   ZONA CLARA: dos números até antes do rodapé
   A faixa de números continua preta, com os cantos inferiores
   arredondados sobre o branco. Daí em diante, tema claro.
   ============================================================ */
body.hn .hn-light-zone {
  --lz-ink: #1d1d1f; --lz-muted: #6e6e73; --lz-soft: #515154;
  --lz-pale: #f5f5f7; --lz-line: #d2d2d7; --lz-hair: #e8e8ed; --lz-link: #0066cc;
  background: #fff; color: var(--lz-ink);
}
body.hn .hn-light-zone .stats { background: var(--hn-obsidian); border-radius: 0 0 var(--hn-radius) var(--hn-radius); }
body.hn .hn-light-zone #produtos { background: #fff; }

/* texto */
body.hn .hn-light-zone .section-title,
body.hn .hn-light-zone .hn-h2,
body.hn .hn-light-zone .hn-rows h3,
body.hn .hn-light-zone .hn-local-card h3,
body.hn .hn-light-zone .hn-lead h3,
body.hn .hn-light-zone .hn-faq-item summary,
body.hn .hn-light-zone .hn-quote blockquote,
body.hn .hn-light-zone .hn-quote figcaption strong,
body.hn .hn-light-zone .hn-facts li { color: var(--lz-ink); }
body.hn .hn-light-zone .section-eyebrow,
body.hn .hn-light-zone .hn-eyebrow,
body.hn .hn-light-zone .hn-row-idx,
body.hn .hn-light-zone .hn-rows p,
body.hn .hn-light-zone .hn-quote figcaption span,
body.hn .hn-light-zone .hn-local-card p,
body.hn .hn-light-zone .hn-faq-a,
body.hn .hn-light-zone .hn-cta-sub,
body.hn .hn-light-zone .hn-lead p,
body.hn .hn-light-zone .no-results { color: var(--lz-muted); }
body.hn .hn-light-zone .hn-local-texto { color: var(--lz-soft); }
body.hn .hn-light-zone .section-link { color: var(--lz-link); }
body.hn .hn-light-zone .section-link:hover { color: #0071e3; }

/* catálogo */
body.hn .hn-light-zone .pill { background: #fff; border-color: var(--lz-line); color: var(--lz-ink); }
body.hn .hn-light-zone .pill:hover { border-color: var(--lz-ink); }
body.hn .hn-light-zone .pill.active { background: var(--lz-ink); color: #fff; border-color: var(--lz-ink); }
body.hn .hn-light-zone .product-card { background: #fff; border-color: var(--lz-hair); }
body.hn .hn-light-zone .product-card:hover { border-color: var(--lz-line); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
body.hn .hn-light-zone .product-img.photo { background: var(--lz-pale); }
body.hn .hn-light-zone .product-name { color: var(--lz-ink); }
body.hn .hn-light-zone .product-name:hover { color: var(--lz-link); }
body.hn .hn-light-zone .product-model,
body.hn .hn-light-zone .product-price-info small,
body.hn .hn-light-zone .product-price-info em { color: var(--lz-muted); }
body.hn .hn-light-zone .product-price-info strong { color: var(--lz-ink); }
body.hn .hn-light-zone .product-meta span { background: var(--lz-pale); color: var(--lz-soft); }
body.hn .hn-light-zone .product-fav { background: rgba(255,255,255,0.92); color: var(--lz-ink); border: 1px solid var(--lz-hair); }
body.hn .hn-light-zone .product-tag { background: var(--lz-ink); color: #fff; }
body.hn .hn-light-zone .product-tag.new { background: var(--hn-blue); }

/* cartões e fios */
body.hn .hn-light-zone .hn-sec-card { background: var(--lz-pale); }
body.hn .hn-light-zone .hn-quote { background: var(--lz-pale); border-color: var(--lz-pale); }
body.hn .hn-light-zone .hn-quote:hover { border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-quote figcaption { border-top-color: var(--lz-line); }
body.hn .hn-light-zone .hn-quote-stars span { color: var(--lz-line); }
body.hn .hn-light-zone .hn-quote-stars span.on { color: #ffb800; }
body.hn .hn-light-zone .hn-rows li a { color: var(--lz-ink); border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-row-arrow { border-color: var(--lz-line); color: var(--lz-ink); opacity: 0.7; }
body.hn .hn-light-zone .hn-facts li { border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-facts svg { color: var(--lz-link); }
body.hn .hn-light-zone .hn-local-card { background: var(--lz-pale); border-color: var(--lz-pale); }
body.hn .hn-light-zone .hn-local-cidades .hn-chip { color: var(--lz-ink); border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-local-cidades .hn-chip:hover { background: #fff; }
body.hn .hn-light-zone .hn-local-cidades .hn-chip.is-active { background: var(--lz-ink); color: #fff; border-color: var(--lz-ink); }
body.hn .hn-light-zone .hn-faq-item { border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-faq-plus { border-color: var(--lz-line); color: var(--lz-ink); }
body.hn .hn-light-zone .hn-faq-item[open] .hn-faq-plus { background: var(--lz-ink); border-color: var(--lz-ink); color: #fff; }

/* chamada final */
body.hn .hn-light-zone .hn-pill-white { background: var(--lz-ink); color: #fff; }
body.hn .hn-light-zone .hn-pill-white:hover { background: var(--hn-blue); }
body.hn .hn-light-zone .hn-lead { background: #fff; border-color: var(--lz-hair); }
body.hn .hn-light-zone .hn-lead-form input { background: #fff; border-color: var(--lz-line); color: var(--lz-ink); }
body.hn .hn-light-zone .hn-lead-form input::placeholder { color: var(--lz-muted); }

/* respiro antes do rodapé preto */
body.hn .hn-light-zone { padding-bottom: 12px; }
body.hn .footer { margin-top: 0; }

/* ============================================================
   DEPOIMENTOS EM COLUNAS ROLANDO
   ============================================================ */
.hn-testi-head { max-width: 100%; margin: 0 auto 44px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hn-badge {
  display: inline-block; padding: 5px 14px; border-radius: 10px; border: 1px solid #d2d2d7;
  font-size: 13px; font-weight: 500; color: #1d1d1f; background: #fff;
}
.hn-testi-head .hn-h2 { margin-top: 20px; max-width: none; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.03em; }
@media (min-width: 721px) { .hn-testi-head .hn-h2 { white-space: nowrap; } }
.hn-testi-head p { margin: 16px 0 0; font-size: 16px; color: #6e6e73; }

.hn-testi-cols {
  display: flex; justify-content: center; gap: 28px; max-height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}
.hn-testi-col { width: 380px; max-width: 100%; flex: 0 0 auto; }
.hn-testi-track {
  display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px;
  animation: hn-testi var(--dur, 15s) linear infinite;
}
.hn-testi-cols:hover .hn-testi-track { animation-play-state: paused; }
@keyframes hn-testi { to { transform: translateY(-50%); } }

.hn-testi-card {
  margin: 0; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid #e8e8ed;
  box-shadow: 0 12px 34px rgba(0, 113, 227, 0.08);
}
.hn-testi-card blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: #1d1d1f; letter-spacing: -0.005em; }
.hn-testi-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.hn-testi-card figcaption > div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hn-testi-card figcaption strong { font-size: 14px; font-weight: 500; color: #1d1d1f; letter-spacing: -0.01em; }
.hn-testi-card figcaption > div > span { font-size: 13px; color: #6e6e73; }
.hn-testi-card .hn-quote-stars { margin-left: auto; font-size: 12px; flex: 0 0 auto; display: flex; flex-direction: row; white-space: nowrap; }
.hn-testi-card .hn-quote-stars span { color: #d2d2d7; }
.hn-testi-card .hn-quote-stars span.on { color: #ffb800; }
.hn-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.02em;
  /* Mesmo degradê da marca, mas com o azul dominando: o violeta fica
     só no canto de cima. */
  background: linear-gradient(135deg, #4F2BD9 0%, #2F5BEA 30%, #0071e3 70%, #0A84FF 100%);
}

@media (max-width: 1024px) { .hn-testi-col.is-lg { display: none; } }
@media (max-width: 768px) { .hn-testi-col.is-md { display: none; } .hn-testi-col { width: min(320px, 100%); } .hn-testi-cols { max-height: 620px; } }
@media (prefers-reduced-motion: reduce) {
  .hn-testi-track { animation: none; }
  .hn-testi-cols { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .hn-testi-card[aria-hidden="true"] { display: none; }
}

/* ---------- ícone do WhatsApp nos botões ---------- */
.hn-pill svg, .hn-bottom-cta svg { width: 18px; height: 18px; }
.hn-header-cta svg { width: 16px; height: 16px; }

/* ---------- banner e cartões no celular ---------- */
@media (max-width: 1024px) {
  .hn-promos { grid-template-columns: 1fr 1fr; }
  .hn-promos .hn-promo:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hn-banner-dots { bottom: 12px; right: 16px; }
  .hn-promos-wrap { padding-top: 28px; }
  .hn-promos { grid-template-columns: 1fr; gap: 10px; }
  .hn-promos .hn-promo:last-child { grid-column: auto; }
  .hn-promo { min-height: 0; padding: 22px; }
  .hn-promo strong { font-size: 26px; }
  .hn-promo-foto { flex-basis: 38%; }
  .hn-promo-foto img { max-height: 110px; }
}

/* ============================================================
   ZONA CLARA — topo da página (banner, cartões, destaques e
   "Explore a loja"). Mesmas cores das seções de baixo.
   ============================================================ */
body.hn .hn-light-zone .hn-banner { background: var(--hn-obsidian); }
body.hn .hn-light-zone .hn-promos-wrap { background: transparent; }
body.hn .hn-light-zone .hn-band { background: #fff; }


/* cartões do "Explore a loja" */
body.hn .hn-light-zone .hn-explore-card { background: var(--lz-pale); border-color: var(--lz-hair); }
body.hn .hn-light-zone .hn-explore-card:hover { border-color: var(--lz-line); }
body.hn .hn-light-zone .hn-explore-kicker,
body.hn .hn-light-zone .hn-explore-card h3 { color: var(--lz-ink); }
body.hn .hn-light-zone .hn-explore-card p { color: var(--lz-muted); }
body.hn .hn-light-zone .hn-explore-icon {
  background: #fff; border-color: var(--lz-hair); color: var(--lz-ink);
}
body.hn .hn-light-zone .hn-explore-media img { filter: drop-shadow(0 18px 26px rgba(0,0,0,0.16)); }
body.hn .hn-light-zone .hn-explore-plus { background: var(--lz-ink); color: #fff; }
body.hn .hn-light-zone .hn-explore-nav button { background: #fff; border: 1px solid var(--lz-line); color: var(--lz-ink); }
body.hn .hn-light-zone .hn-explore-nav button:hover { background: var(--lz-pale); }

/* ============================================================
   FIM DA PÁGINA EMPILHADO
   Dúvidas, chamada final e rodapé ocupam a largura toda, sem canto
   embaixo, e cada um sobe um pouco por cima do anterior.
   ============================================================ */
body.hn #faq.hn-sec-card,
body.hn .hn-cta.hn-sec-card {
  margin-left: 0; margin-right: 0;
  border-radius: var(--hn-radius) var(--hn-radius) 0 0;
  position: relative;
}
body.hn #faq.hn-sec-card { z-index: 1; }

/* chamada final: azul dos botões, por cima do fim das dúvidas */
body.hn .hn-cta.hn-sec-card,
body.hn .hn-light-zone .hn-cta.hn-sec-card {
  background: var(--hn-blue); color: #fff;
  margin-top: calc(-1 * var(--hn-radius)); z-index: 2;
}
body.hn .hn-light-zone .hn-cta .hn-h2,
body.hn .hn-light-zone .hn-cta .hn-lead h3 { color: #fff; }
body.hn .hn-light-zone .hn-cta .hn-eyebrow { color: rgba(255,255,255,0.8); }
body.hn .hn-cta .hn-eyebrow i { background: #fff; }
body.hn .hn-light-zone .hn-cta .hn-cta-sub,
body.hn .hn-light-zone .hn-cta .hn-lead p { color: rgba(255,255,255,0.85); }
body.hn .hn-light-zone .hn-cta .hn-pill-white { background: #fff; color: var(--hn-blue); }
body.hn .hn-light-zone .hn-cta .hn-pill-white:hover { background: var(--hn-carbon); color: #fff; }
body.hn .hn-light-zone .hn-cta .hn-lead {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25);
}
body.hn .hn-light-zone .hn-cta .hn-lead-form input {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); color: #fff;
}
body.hn .hn-light-zone .hn-cta .hn-lead-form input::placeholder { color: rgba(255,255,255,0.7); }
body.hn .hn-light-zone .hn-cta .hn-lead-form input:focus { outline-color: #fff; border-color: #fff; }
body.hn .hn-light-zone .hn-cta .hn-lead-form .hn-pill-blue { background: #fff; color: var(--hn-blue); }
body.hn .hn-light-zone .hn-cta .hn-lead-form .hn-pill-blue:hover { background: var(--hn-carbon); color: #fff; }

/* rodapé: por cima do fim da chamada */
body.hn .footer {
  position: relative; z-index: 3;
  margin: calc(-1 * var(--hn-radius)) 0 0;
  border-radius: var(--hn-radius) var(--hn-radius) 0 0;
  padding-top: calc(64px + var(--hn-radius));
}
body.hn .hn-light-zone { padding-bottom: 0; }

@media (max-width: 720px) {
  body.hn #faq.hn-sec-card, body.hn .hn-cta.hn-sec-card { margin-left: 0; margin-right: 0; }
  body.hn .footer { padding-top: calc(48px + var(--hn-radius)); }
}

/* ---------- vitrine com limite e botão "Ver mais" ---------- */
body.hn .products-grid .product-card.alem-do-limite { display: none; }
.hn-mais { display: flex; justify-content: center; margin-top: 32px; }
.hn-mais .hn-pill { padding: 13px 28px; }
.hn-mais .hn-pill svg { width: 16px; height: 16px; }
body.hn .hn-light-zone .hn-pill-dark { background: var(--lz-ink); color: #fff; }
body.hn .hn-light-zone .hn-pill-dark:hover { background: var(--hn-blue); }

/* H1 da home fora da vista.
   O banner de abertura é só imagem e não comporta texto, mas a
   página precisa de um H1 para o buscador e para o leitor de tela.
   Técnica padrão: tira do fluxo sem usar display:none nem
   visibility:hidden, que removeriam o elemento da acessibilidade. */
body.hn .hn-h1-leitura {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- chamada final: os dois aparelhos à direita ---------- */
/* O cartão recorta o que passar da borda, então a peça pode descer
   um pouco além da base sem vazar para fora da seção. */
body.hn .hn-cta.hn-sec-card { overflow: hidden; }
.hn-cta-grid { align-items: end; }
.hn-cta-foto { position: relative; align-self: end; justify-self: end; width: 100%; }
.hn-cta-foto img {
  display: block; margin-left: auto; margin-bottom: -10%;
  width: 100%; max-width: 440px; height: auto;
  filter: drop-shadow(0 30px 44px rgba(0,30,80,0.42));
}

@media (max-width: 900px) {
  /* No celular o texto vem primeiro e a foto entra abaixo, centrada. */
  .hn-cta-foto img { margin: 24px auto -8%; max-width: 320px; }
}
@media (max-width: 720px) {
  .hn-cta-foto img { max-width: 260px; }
}

/* ============================================================
   CHAMADA FINAL: degradê da marca e aparelhos grandes
   O azul dos botões à esquerda, onde fica o texto, abrindo para o
   violeta da faixa do topo atrás dos aparelhos.
   ============================================================ */
body.hn .hn-cta.hn-sec-card,
body.hn .hn-light-zone .hn-cta.hn-sec-card {
  background:
    radial-gradient(48% 70% at 80% 60%, rgba(120, 87, 255, 0.55), transparent 72%),
    linear-gradient(115deg, #0071e3 0%, #2b5cf2 48%, #4f2bd9 100%);
}
/* A peça passa da base e do topo do bloco; o cartão recorta o resto. */
.hn-cta-foto img {
  margin-left: auto; margin-top: -280px; margin-bottom: -280px;
  width: 120%; max-width: 990px;
}
@media (max-width: 900px) {
  .hn-cta-foto img { width: 100%; margin: 24px auto -8%; max-width: 320px; }
}
@media (max-width: 720px) {
  .hn-cta-foto img { max-width: 260px; }
}

/* ============================================================
   DIFERENCIAIS: título e quatro colunas
   ============================================================ */
body.hn .hn-dif.hn-sec-card,
body.hn .hn-light-zone .hn-dif.hn-sec-card { background: #f5f6f8; border-radius: 24px; }
.hn-dif-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 40px; align-items: start;
}
.hn-dif-head .hn-h2 { margin-top: 18px; font-size: clamp(34px, 3.4vw, 50px); }
.hn-dif-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hn-dif-list li { border-left: 1px solid #e2e5ea; }
.hn-dif-item {
  display: flex; flex-direction: column; height: 100%;
  padding: 4px 26px 8px; color: inherit; text-decoration: none;
}
.hn-dif-num { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--hn-blue); }
.hn-dif-icon { width: 32px; height: 32px; margin: 22px 0; color: var(--hn-blue); transition: transform 0.25s ease; }
.hn-dif-item h3 {
  font-family: var(--hn-display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 10px; color: #18181b;
}
.hn-dif-item p { margin: 0; font-size: 14px; line-height: 1.5; color: #52525b; }
.hn-dif-item:hover .hn-dif-icon { transform: translateY(-3px); }
.hn-dif-item:focus-visible { outline: 2px solid var(--hn-blue); outline-offset: 4px; border-radius: 12px; }

@media (max-width: 1100px) {
  .hn-dif-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* Grade 2x2: divisória vertical no meio e horizontal entre as linhas. */
  .hn-dif-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-dif-list li { border-left: 0; }
  .hn-dif-list li:nth-child(even) { border-left: 1px solid #e2e5ea; }
  .hn-dif-list li:nth-child(n+3) { border-top: 1px solid #e2e5ea; }
  .hn-dif-item { padding: 26px 28px; }
  .hn-dif-list li:nth-child(odd) .hn-dif-item { padding-left: 0; }
}
@media (max-width: 720px) {
  .hn-dif-list { grid-template-columns: minmax(0, 1fr); }
  .hn-dif-list li, .hn-dif-list li:nth-child(even) { border-left: 0; }
  .hn-dif-list li + li { border-top: 1px solid #e2e5ea; }
  .hn-dif-list li:nth-child(odd) .hn-dif-item,
  .hn-dif-item { padding: 24px 0; }
  .hn-dif-icon { width: 28px; height: 28px; margin: 14px 0 16px; }
}

/* ============================================================
   ONDE A GENTE FICA: informações, aparelho e mapa
   ============================================================ */
/* Sem recorte: o aparelho desce um pouco sobre o topo das dúvidas e a
   sombra aparece inteira. */
body.hn .hn-loc { position: relative; z-index: 2; }
.hn-loc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(0, 0.95fr);
  gap: 32px; align-items: stretch;
}

/* informações */
.hn-loc-facts { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 10px; }
.hn-loc-facts li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 16px; background: #f5f6f8;
}
.hn-loc-ico {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; background: #fff; color: var(--hn-blue);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.hn-loc-ico svg { width: 18px; height: 18px; }
.hn-loc-facts small {
  display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8f;
}
.hn-loc-facts div > span { font-size: 14.5px; line-height: 1.4; color: #1d1d1f; }

/* aparelho: desce até a borda da seção e é cortado por ela */
/* Título em duas linhas: nome da loja e cidade, cada um sem quebrar. */
.hn-loc-titulo { font-size: clamp(30px, 2.8vw, 40px); }
@media (min-width: 721px) { .hn-loc-titulo span { white-space: nowrap; } }

.hn-loc-foto {
  position: relative; z-index: 3; min-height: 420px;
  margin-bottom: calc(-1 * clamp(72px, 8vw, 120px));
}
.hn-loc-foto img {
  /* Fica entre o texto e o mapa e desce um pouco sobre a seção de baixo. */
  position: absolute; left: 68%; bottom: -70px;
  width: clamp(200px, 19vw, 310px); max-width: none; height: auto;
  /* Inclina para a direita: a câmera aponta para o mapa e não cobre o texto. */
  transform: translateX(-50%) rotate(9deg);
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.22));
}

/* mapa ilustrativo com os dois cartões por cima */
.hn-loc-mapa {
  position: relative; overflow: hidden; border-radius: 24px; background: #f5f6f8;
  min-height: 460px; padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 110px;
}
.hn-loc-ruas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hn-loc-pin {
  position: absolute; left: 54%; top: 52%; z-index: 1;
  width: 44px; height: 44px; transform: translate(-50%, -100%);
  color: var(--hn-blue); filter: drop-shadow(0 8px 14px rgba(0, 113, 227, 0.35));
}
.hn-loc-pin svg { width: 100%; height: 100%; display: block; }
.hn-loc-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 22px; height: 8px; border-radius: 50%; transform: translateX(-50%);
  background: rgba(0, 113, 227, 0.25);
}
.hn-loc-card {
  position: relative; z-index: 2; width: min(100%, 300px);
  padding: 18px 20px; border-radius: 18px; background: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}
.hn-loc-card + .hn-loc-card { align-self: flex-end; }
.hn-loc-card h3 {
  font-family: var(--hn-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; margin: 0 0 8px; color: #1d1d1f;
}
.hn-loc-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6e6e73; }
.hn-loc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-loc-chips a {
  padding: 6px 12px; border-radius: 980px; background: #f1f2f5;
  font-size: 13px; font-weight: 500; color: #1d1d1f; text-decoration: none;
  transition: background 0.2s ease;
}
.hn-loc-chips a:hover { background: #e5e7eb; }
.hn-loc-chips a.is-active { background: #18181b; color: #fff; }

@media (max-width: 1100px) {
  /* Aparelho ao lado do texto; mapa ocupa a linha de baixo inteira. */
  .hn-loc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
  .hn-loc-foto { margin-bottom: 0; min-height: 0; align-self: center; display: flex; justify-content: center; }
  .hn-loc-foto img { position: static; transform: rotate(8deg); width: min(70%, 240px); }
  .hn-loc-mapa { grid-column: 1 / -1; min-height: 320px; flex-direction: row; align-items: flex-start; gap: 24px; }
}
@media (max-width: 720px) {
  .hn-loc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* No celular a foto fica numa janela baixa e a parte de baixo some. */
  .hn-loc-foto { height: 260px; overflow: hidden; align-items: flex-start; }
  .hn-loc-foto img { width: 190px; margin-top: 16px; filter: none; }
  /* Sem sombra aqui: a janela cortaria o borrado num retângulo. A base
     some num esmaecido no lugar do corte seco. */
  .hn-loc-foto { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .hn-loc-mapa { flex-direction: column; min-height: 0; gap: 120px; padding: 16px; }
}

/* ============================================================
   PÁGINA DE REGIÃO NA LINGUAGEM DA HOME
   Abertura igual ao "Onde a gente fica", resumo em cartão, vitrine
   e depoimentos da home, dúvidas e chamada azul empilhadas no fim.
   ============================================================ */
/* Links "Ver catálogo completo" / "Ver o blog" ao lado do título. */
.hn-sec-head .hn-link { white-space: nowrap; }
.hn-sec-head .hn-link svg { width: 18px; height: 18px; }

/* resumo citável */
body.hn .hn-reg-resumo.hn-sec-card,
body.hn .hn-light-zone .hn-reg-resumo.hn-sec-card { background: #f5f6f8; border-radius: 24px; }
.hn-reg-resumo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.hn-reg-resumo-t {
  margin: 18px 0 0; font-family: var(--hn-display); font-weight: 600;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.02em; color: #1d1d1f;
}
.hn-reg-resumo-p { margin: 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: #3a3a3c; }

/* vitrine com o desenho da home, não o das páginas internas */
body.np.np-regiao .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.np.np-regiao .product-img { height: auto; aspect-ratio: 1 / 1; }
body.np.np-regiao .product-body { padding: 18px 20px 20px; }
body.np.np-regiao .product-name { font-size: 17px; }
body.np.np-regiao .product-price-info strong { font-size: 20px; }
body.np.np-regiao #produtos .hn-sec-head { margin-bottom: 28px; }

/* também atendemos */
.hn-reg-outras-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.hn-reg-outras .hn-loc-chips { gap: 8px; }
.hn-reg-outras .hn-loc-chips a { padding: 8px 14px; font-size: 14px; }

/* a FAQ aqui tem um parágrafo de apoio embaixo do título */
body.np.np-regiao #faq .hn-local-texto { margin-top: 16px; }

@media (max-width: 1100px) {
  body.np.np-regiao .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hn-reg-resumo-grid, .hn-reg-outras-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 720px) {
  body.np.np-regiao .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.np.np-regiao .product-body { padding: 12px 14px 14px; }
  body.np.np-regiao .product-name { font-size: 15px; }
  body.np.np-regiao .product-price-info strong { font-size: 17px; }
}

/* ---------- abertura da região: topo centrado e mosaico ---------- */
body.hn .hn-reg-hero { padding-top: 0; padding-bottom: clamp(56px, 6vw, 88px); }
.hn-reg-hero .np-breadcrumb { padding: 22px 0 40px; }
.hn-reg-topo { max-width: 900px; margin: 0 auto; text-align: center; }
.hn-reg-selo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 980px;
  background: #f5f6f8; color: #1d1d1f; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.hn-reg-selo i { width: 6px; height: 6px; border-radius: 50%; background: var(--hn-blue); }
.hn-reg-h1 {
  margin: 20px auto 0; max-width: 16ch; color: #1d1d1f;
  font-family: var(--hn-display); font-weight: 600; letter-spacing: -0.035em;
  font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02;
}
.hn-reg-intro { margin: 22px auto 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: #515154; }
.hn-reg-hero .regiao-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hn-reg-hero .regiao-ctas svg { width: 16px; height: 16px; }

.hn-reg-bento {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(200px, auto); gap: 14px;
}
.hn-reg-tile {
  position: relative; overflow: hidden; border-radius: 28px; padding: 28px;
  background: #f5f6f8; color: #1d1d1f;
}
.hn-reg-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--hn-blue); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.hn-reg-ico svg { width: 20px; height: 20px; }
.hn-reg-tile h2 {
  margin: 20px 0 8px; font-family: var(--hn-display); font-weight: 600;
  font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: inherit;
}
.hn-reg-tile p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #515154; }

/* cartão escuro da entrega, com o aparelho saindo pelo canto */
.hn-reg-tile.is-destaque {
  grid-row: span 2; min-height: 430px; padding: 34px 48% 34px 34px;
  background: radial-gradient(70% 60% at 85% 85%, rgba(0, 113, 227, 0.35), transparent 70%), linear-gradient(160deg, #1d1d1f 0%, #000 100%);
  color: #f5f5f7;
}
.hn-reg-tile.is-destaque .hn-reg-ico { background: rgba(255, 255, 255, 0.08); color: var(--hn-link); box-shadow: none; }
.hn-reg-tile.is-destaque h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.025em; margin-top: 26px; }
.hn-reg-tile.is-destaque p { color: rgba(245, 245, 247, 0.72); font-size: 15px; }
/* O aparelho mora na metade direita do cartão; o texto fica na outra. */
.hn-reg-foto {
  position: absolute; right: -2%; bottom: -22%; width: 40%; max-width: 220px; height: auto;
  transform: rotate(-12deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.hn-reg-bento.sem-faixa .hn-reg-tile.is-destaque { grid-row: auto; }

/* faixa larga dos bairros */
.hn-reg-tile.is-faixa { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
.hn-reg-tile.is-faixa h2 { margin-top: 0; }
.hn-reg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hn-reg-chips span, .hn-reg-chips a {
  padding: 7px 13px; border-radius: 980px; background: #fff; color: #1d1d1f;
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.hn-reg-chips a:hover { background: #e9ebef; }
.hn-reg-nota { margin-top: 14px !important; font-size: 13px !important; color: #6e6e73 !important; }

@media (max-width: 1100px) {
  .hn-reg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-reg-tile.is-destaque { grid-column: span 2; grid-row: auto; min-height: 300px; padding-right: 40%; }
  .hn-reg-foto { width: 26%; max-width: 190px; right: 4%; bottom: -34%; }
}
@media (max-width: 720px) {
  .hn-reg-hero .np-breadcrumb { padding-bottom: 24px; }
  .hn-reg-intro { font-size: 15.5px; }
  .hn-reg-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
  .hn-reg-tile, .hn-reg-tile.is-destaque, .hn-reg-tile.is-faixa { grid-column: auto; border-radius: 24px; padding: 24px; }
  .hn-reg-tile.is-destaque { min-height: 0; padding-bottom: 230px; }
  .hn-reg-foto { width: 130px; right: 10%; bottom: -90px; }
}