/* ============================================================
   CATÁLOGO X-ONE  ·  Design System
   Fiel ao Catálogo Institucional 2025: azul-marinho + ondas
   Identidade: navy profundo + French Blue #117acd + Poppins
   ============================================================ */

:root{
  /* Cores (paleta azul-marinho do catálogo impresso) */
  --bg:        #07131f;
  --bg-soft:   #0a1b29;
  --surface:   #0e2233;
  --surface-2: #143247;
  --azul:      #117acd;
  --azul-2:    #3a9ae0;
  --azul-glow: rgba(17,122,205,.5);
  --branco:    #ffffff;
  --txt:       rgba(225,238,248,.72);
  --txt-dim:   rgba(200,222,240,.46);
  --line:      rgba(120,170,210,.16);
  --line-soft: rgba(120,170,210,.09);
  --vitrine:   #eef0f3;

  /* Tipografia */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Medidas */
  --maxw: 1240px;
  --radius: 26px;
  --radius-sm: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--branco);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

::selection{ background:var(--azul); color:#fff; }

/* Scrollbar discreta */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#23262d; border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#30343d; }

/* ---------- Utilitário: reveal animado ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal[data-delay="1"].is-visible{ transition-delay:.08s; }
.reveal[data-delay="2"].is-visible{ transition-delay:.16s; }
.reveal[data-delay="3"].is-visible{ transition-delay:.26s; }
.reveal[data-delay="4"].is-visible{ transition-delay:.38s; }
.reveal[data-delay="5"].is-visible{ transition-delay:.52s; }

/* ===================== BARRA SUPERIOR ===================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,48px);
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
  animation:fadeDown .6s var(--ease-out) both;
}
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-12px);} to{ opacity:1; transform:none; } }
.topbar__logo img{ height:24px; width:auto; opacity:.95; transition:opacity .3s; }
.topbar__logo:hover img{ opacity:1; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--branco);
  padding:11px 20px; border-radius:100px;
  border:1px solid var(--line);
  transition:border-color .3s, background .3s, transform .3s;
}
.btn-ghost:hover{ border-color:var(--azul); background:rgba(17,122,205,.12); transform:translateY(-1px); }
.btn-ghost__icon{ display:inline-flex; }
.btn-ghost svg{ width:16px; height:16px; }

/* ========================== HOME ========================== */
.home{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:80px 24px;
  overflow:hidden;
}
.home__bg{
  position:absolute; inset:0;
  background:url('../assets/bg/bg-capas.png') center 30% / cover no-repeat;
  transform:scale(1.06);
  filter:saturate(.92) contrast(1.02);
  animation:slowZoom 22s ease-in-out infinite alternate;
}
@keyframes slowZoom{ from{ transform:scale(1.06);} to{ transform:scale(1.14);} }
.home__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(10,11,13,.34) 0%, rgba(10,11,13,.78) 70%, rgba(10,11,13,.96) 100%),
    rgba(10,11,13,.46);
}
.home__content{ position:relative; z-index:2; max-width:760px; }
.home__logo{ height:34px; width:auto; margin:0 auto 30px; opacity:.92; }
.home__eyebrow{
  font-size:.78rem; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--azul-2); margin-bottom:18px;
}
.home__title{
  font-weight:700; line-height:1; letter-spacing:-.035em;
  font-size:clamp(2.15rem, 6.6vw, 5.6rem);
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.home__title span{ color:var(--azul-2); white-space:nowrap; }
.home__sub{
  margin:26px auto 0; max-width:480px;
  font-size:clamp(.98rem,1.6vw,1.12rem); font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.82);
}

/* Botão principal */
.cta{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:42px;
  font-size:.92rem; font-weight:600; letter-spacing:.04em;
  color:#fff;
  padding:17px 30px; border-radius:100px;
  background:var(--azul);
  box-shadow:0 10px 34px -8px var(--azul-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.cta:hover{ transform:translateY(-3px); background:var(--azul-2); box-shadow:0 18px 44px -8px var(--azul-glow); }
.cta:active{ transform:translateY(-1px) scale(.99); }
.cta__arrow{ display:inline-flex; transition:transform .35s var(--ease); }
.cta__arrow svg{ width:18px; height:18px; }
.cta:hover .cta__arrow{ transform:translateX(5px); }

.home__hint{
  position:absolute; bottom:30px; left:0; right:0; z-index:2;
  text-align:center;
  font-size:.68rem; font-weight:500; letter-spacing:.5em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

/* ==================== MENU DE CATEGORIAS ==================== */
.menu{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; }
.menu__backdrop{
  position:absolute; inset:0;
  background:rgba(6,7,9,.6);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  animation:fadeIn .4s var(--ease-out) both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.menu__panel{
  position:relative; z-index:2;
  width:100%; max-width:880px;
  background:linear-gradient(180deg,#14171d,#0e1014);
  border:1px solid var(--line);
  border-radius:30px;
  padding:clamp(28px,4vw,52px);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
  max-height:92vh; overflow-y:auto;
  animation:menuIn .5s var(--ease-out) both;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(24px) scale(.98);} to{ opacity:1; transform:none; } }
.menu__close{
  position:absolute; top:20px; right:20px;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--txt);
  transition:.3s;
}
.menu__close:hover{ border-color:var(--azul); color:#fff; transform:rotate(90deg); }
.menu__close svg{ width:16px; height:16px; }
.menu__eyebrow,.submenu__eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--azul-2);
}
.menu__title,.submenu__title{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.02em; margin:8px 0 30px;
}

.menu__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cat-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  text-align:left;
  padding:26px 24px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.cat-card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 0% 0%, rgba(17,122,205,.12), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.cat-card:hover{ transform:translateY(-4px); border-color:rgba(17,122,205,.5); background:var(--surface-2); }
.cat-card:hover::after{ opacity:1; }
.cat-card__icon{
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,122,205,.1);
  border:1px solid rgba(17,122,205,.22);
  color:var(--azul-2);
  transition:.4s;
}
.cat-card:hover .cat-card__icon{ background:var(--azul); color:#fff; border-color:var(--azul); transform:scale(1.05); }
.cat-card__icon svg{ width:26px; height:26px; }
.cat-card__name{ font-size:1.22rem; font-weight:600; letter-spacing:-.01em; }
.cat-card__meta{ font-size:.85rem; font-weight:300; color:var(--txt); line-height:1.4; }
.cat-card__tag{
  position:absolute; top:22px; right:22px;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul-2);
  display:inline-flex; align-items:center; gap:6px;
}
.cat-card__tag svg{ width:13px; height:13px; transition:transform .3s; }
.cat-card:hover .cat-card__tag svg{ transform:translateX(3px); }

/* Submenu */
.submenu{
  margin-top:8px;
  animation:menuIn .45s var(--ease-out) both;
}
.submenu__back,.cat-hero__back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt); margin-bottom:22px; padding:8px 0;
  transition:color .3s, gap .3s;
}
.submenu__back:hover,.cat-hero__back:hover{ color:#fff; gap:12px; }
.submenu__back svg,.cat-hero__back svg{ width:15px; height:15px; }
.submenu__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sub-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:24px 22px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); text-align:left;
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.sub-card:hover{ transform:translateY(-4px); border-color:rgba(17,122,205,.5); background:var(--surface-2); }
.sub-card__icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,122,205,.1); border:1px solid rgba(17,122,205,.22); color:var(--azul-2);
  transition:.4s;
}
.sub-card:hover .sub-card__icon{ background:var(--azul); color:#fff; }
.sub-card__icon svg{ width:23px; height:23px; }
.sub-card__name{ font-size:1.05rem; font-weight:600; }

/* ==================== LISTAGEM DE CATEGORIA ==================== */
.catalogo{ padding-top:74px; min-height:100vh; }

.cat-hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,48px) clamp(30px,4vw,52px);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--bg-soft), var(--bg));
}
/* Ondas concêntricas (motif do catálogo impresso) */
.cat-hero::before{
  content:''; position:absolute; right:-8%; top:-60%;
  width:680px; height:680px; pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 36px, rgba(58,154,224,.07) 36px 38px);
  -webkit-mask:radial-gradient(circle, #000 28%, transparent 68%);
  mask:radial-gradient(circle, #000 28%, transparent 68%);
}
.cat-hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }
.cat-hero__eyebrow{
  font-size:.76rem; font-weight:500; letter-spacing:.4em; text-transform:uppercase; color:var(--azul-2);
  margin-bottom:16px;
}
.cat-hero__title{
  font-size:clamp(2.6rem,8vw,5.4rem); font-weight:700; letter-spacing:-.04em; line-height:1;
}
.cat-hero__sub{
  margin-top:20px; max-width:480px; font-size:1.02rem; font-weight:300; color:var(--txt); line-height:1.6;
}

/* Chips de subcategoria */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.chip{
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  padding:10px 20px; border-radius:100px;
  border:1px solid var(--line); color:var(--txt);
  transition:.3s;
}
.chip:hover{ border-color:var(--azul-2); color:#fff; }
.chip.is-active{ background:var(--azul); border-color:var(--azul); color:#fff; }

/* Grade de produtos: 2 por linha, card visual */
.produtos{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(34px,5vw,72px) clamp(20px,5vw,48px);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,32px);
}

/* Card de produto (imagem com textos sobrepostos) */
.card{ display:block; }
.card .vitrine{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover .vitrine{ transform:translateY(-5px); box-shadow:0 42px 80px -34px rgba(0,0,0,.9); }
.card:hover .vitrine > img{ transform:scale(1.04); }

/* Vitrine (palco claro da foto) */
.vitrine{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  background:#ffffff;
  aspect-ratio:1/1;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.06);
}
.vitrine > img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 1s var(--ease-out); }
.vitrine__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:13px;
  align-items:center; justify-content:center; color:#9aa3af; text-align:center; padding:30px;
}
.vitrine__placeholder svg{ width:46px; height:46px; opacity:.5; }
.vitrine__placeholder span{ font-size:.78rem; font-weight:500; letter-spacing:.05em; }
.vitrine.is-dark, .pd-vitrine.is-dark{ background:linear-gradient(180deg,#11293c,#070f18); border-color:rgba(120,170,210,.14); }

/* Textos sobre a imagem */
.card__ov{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(16px,2.2vw,26px);
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 12%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 64%, rgba(255,255,255,.5) 86%, rgba(255,255,255,.8) 100%);
}
.card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card__name{
  font-size:clamp(1.02rem,1.7vw,1.5rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; color:#0a1622; max-width:72%;
  text-shadow:0 1px 1px rgba(255,255,255,.9), 0 1px 16px rgba(255,255,255,.85);
}
.compat{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; margin-top:4px; }
.compat__logo{ height:14px; width:auto; opacity:.85; }
.compat__logo--samsung{ height:11px; }
.card__bot{ display:flex; justify-content:flex-end; }
.card__garantia{
  display:block; max-width:82%; margin-left:auto; text-align:right; line-height:1.3;
  font-size:clamp(.72rem,.95vw,.82rem); font-weight:500; letter-spacing:.01em; color:#0d2033;
  text-shadow:0 1px 1px rgba(255,255,255,.9), 0 1px 14px rgba(255,255,255,.85);
}

/* Card com vitrine escura: inverter textos e logos */
.vitrine.is-dark .card__ov{
  background:linear-gradient(180deg, rgba(7,15,24,.78) 0%, rgba(7,15,24,.35) 14%, rgba(7,15,24,0) 32%, rgba(7,15,24,0) 64%, rgba(7,15,24,.45) 84%, rgba(7,15,24,.78) 100%);
}
.vitrine.is-dark .card__name{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 1px 16px rgba(0,0,0,.5); }
.vitrine.is-dark .card__garantia{ color:#dceefb; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 1px 16px rgba(0,0,0,.5); }
.vitrine.is-dark .card__garantia svg{ color:var(--azul-2); }
.vitrine.is-dark .compat__logo{ filter:brightness(0) invert(1); opacity:.9; }

/* Selo de garantia (página de produto) */
.selo{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 24px; padding:11px 18px; border-radius:12px;
  background:linear-gradient(180deg, rgba(17,122,205,.20), rgba(17,122,205,.07));
  border:1px solid rgba(58,154,224,.38);
  color:#dceefb; font-size:.82rem; font-weight:500; letter-spacing:.01em;
}
.selo svg{ width:18px; height:18px; color:var(--azul-2); flex-shrink:0; }
.selo--lg{ font-size:.92rem; padding:13px 22px; margin:24px 0 6px; }

/* ==================== PÁGINA DE PRODUTO ==================== */
.produto{ padding-top:74px; min-height:100vh; }
.produto__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(30px,5vw,64px) clamp(20px,5vw,48px);
}
.pd-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--txt);
  margin-bottom:38px; transition:color .3s, gap .3s;
}
.pd-back:hover{ color:#fff; gap:12px; }
.pd-back svg{ width:15px; height:15px; }

.pd-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.pd-grid > *{ min-width:0; }
.pd-media{ position:sticky; top:96px; min-width:0; }
.pd-vitrine{
  border-radius:var(--radius); overflow:hidden;
  background:#ffffff;
  aspect-ratio:1/1;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.pd-vitrine img{ width:100%; height:100%; }
.pd-vitrine img.fit-cover{ object-fit:cover; }
.pd-vitrine img.fit-contain{ object-fit:contain; padding:9%; }

.pd-eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--azul-2); margin-bottom:14px;
}
.pd-name{ font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:700; letter-spacing:-.03em; line-height:1.02; }
.pd-color{ margin-top:10px; font-size:.9rem; color:var(--txt-dim); }
.pd-meta{ display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap; }
.pd-tag{ font-size:.84rem; font-weight:500; color:var(--azul-2); letter-spacing:.02em; }
.pd-meta .compat{ margin-top:0; }
.pd-meta .compat__logo{ height:17px; opacity:.92; filter:brightness(0) invert(1); }
.pd-meta .compat__logo--samsung{ height:14px; }
.pd-tagline{ margin-top:18px; font-size:1.16rem; font-weight:300; color:#fff; line-height:1.5; }
/* Color picker (capa 3.0 / 3.0 Neon) */
.pd-cores{ margin-top:20px; }
.pd-cores__label{ font-size:.82rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--txt); }
.pd-cores__nome{ margin-left:8px; color:#fff; font-weight:600; text-transform:none; letter-spacing:0; }
.pd-cores__swatches{ display:flex; gap:13px; flex-wrap:wrap; margin-top:11px; }
.pd-cor{ width:34px; height:34px; border-radius:50%; background:var(--c); cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.28); box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .2s, box-shadow .2s; }
.pd-cor:hover{ transform:scale(1.12); }
.pd-cor.is-active{ transform:scale(1.08); border-color:#fff; box-shadow:0 0 0 2px var(--bg,#0a1020), 0 0 0 4px var(--azul-2); }
.pd-price{ margin-top:22px; font-size:1.5rem; font-weight:600; color:#fff; }

.pd-section{ margin-top:38px; padding-top:32px; border-top:1px solid var(--line-soft); }
.pd-section h4{
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:20px;
}
.pd-hl{ list-style:none; display:grid; gap:15px; }
.pd-hl li{ display:flex; align-items:flex-start; gap:13px; font-size:1rem; font-weight:300; color:#fff; }
.pd-hl li svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--azul-2); }
.pd-desc{ font-size:1rem; font-weight:300; line-height:1.72; color:var(--txt); }

.pd-specs{ display:grid; gap:0; }
.pd-specs div{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
  font-size:.94rem;
}
.pd-specs dt{ color:var(--txt-dim); font-weight:300; }
.pd-specs dd{ color:#fff; font-weight:400; text-align:right; }

.pd-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.pd-cta .cta{ margin-top:0; }
.pd-note{
  margin-top:26px; font-size:.8rem; font-weight:300; color:var(--txt-dim); line-height:1.6;
  padding:16px 18px; border:1px dashed var(--line); border-radius:14px;
}

/* ========================= RODAPÉ ========================= */
.rodape{
  max-width:var(--maxw); margin:0 auto;
  padding:56px clamp(20px,5vw,48px) 64px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center;
}
/* Números X-ONE */
.rodape__nums{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,6vw,72px); margin-bottom:14px; }
.num{ display:flex; flex-direction:column; gap:2px; }
.num__valor{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.02em; color:#fff; }
.num__label{ font-size:.74rem; font-weight:300; letter-spacing:.04em; color:var(--txt-dim); }
.rodape__logo{ height:22px; width:auto; opacity:.7; margin-top:6px; }
.rodape__claim{ font-size:.92rem; font-weight:400; color:var(--azul-2); letter-spacing:.01em; }
/* Certificações */
.rodape__cert{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:2px; }
.cert{
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt); padding:7px 14px; border:1px solid var(--line); border-radius:100px;
}
.rodape__fine{ font-size:.76rem; font-weight:300; color:var(--txt-dim); max-width:520px; line-height:1.5; }

/* ==================== CARDS DE LINHA ==================== */
.linhas{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(34px,5vw,72px) clamp(20px,5vw,48px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.2vw,26px);
}
.linha-card{
  display:flex; align-items:stretch; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.linha-card:hover{ transform:translateY(-4px); border-color:rgba(17,122,205,.5); background:var(--surface-2); }
.linha-card__media{ width:44%; flex-shrink:0; position:relative; overflow:hidden; background:#fff; }
.linha-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.linha-card:hover .linha-card__media img{ transform:scale(1.05); }
.linha-card__media .vitrine__placeholder{ position:absolute; inset:0; }
.linha-card__body{ flex:1; padding:clamp(18px,2.4vw,30px); display:flex; flex-direction:column; justify-content:center; gap:9px; }
.linha-card__icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(17,122,205,.1); border:1px solid rgba(17,122,205,.22); color:var(--azul-2); margin-bottom:4px; }
.linha-card__icon svg{ width:22px; height:22px; }
.linha-card__name{ font-size:clamp(1.15rem,2vw,1.55rem); font-weight:600; letter-spacing:-.02em; color:#fff; line-height:1.08; }
.linha-card__meta{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--txt-dim); letter-spacing:.02em; }
.linha-card__meta svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.linha-card:hover .linha-card__meta svg{ transform:translateX(4px); color:var(--azul-2); }
.cat-card--all{ background:linear-gradient(180deg, rgba(17,122,205,.16), rgba(17,122,205,.05)); border-color:rgba(58,154,224,.35); }

/* Card de Lançamento: destaque com leve pulsar nas cores do Brasil (amarelo, azul, verde). Sutil. */
.cat-card--lancamento{
  background:linear-gradient(180deg, rgba(245,197,24,.07), rgba(17,122,205,.04));
  border-color:rgba(245,197,24,.45);
  animation:lancPulse 9s ease-in-out infinite;
}
@keyframes lancPulse{
  0%   { border-color:rgba(245,197,24,.45); box-shadow:0 0 0 0 rgba(245,197,24,0); }
  12%  { border-color:rgba(245,197,24,.58); box-shadow:0 0 18px -4px rgba(245,197,24,.4); }
  33%  { border-color:rgba(46,143,224,.45); box-shadow:0 0 0 0 rgba(46,143,224,0); }
  45%  { border-color:rgba(46,143,224,.58); box-shadow:0 0 18px -4px rgba(46,143,224,.4); }
  66%  { border-color:rgba(0,156,59,.45);   box-shadow:0 0 0 0 rgba(0,156,59,0); }
  78%  { border-color:rgba(0,156,59,.58);   box-shadow:0 0 18px -4px rgba(0,156,59,.4); }
  100% { border-color:rgba(245,197,24,.45); box-shadow:0 0 0 0 rgba(245,197,24,0); }
}
.cat-card--lancamento .cat-card__icon{ animation:lancIcon 9s ease-in-out infinite; }
@keyframes lancIcon{
  0%,100% { color:#f5c518; background:rgba(245,197,24,.13); border-color:rgba(245,197,24,.4); }
  33%     { color:#3a9ae0; background:rgba(58,154,224,.13); border-color:rgba(58,154,224,.4); }
  66%     { color:#15a64a; background:rgba(0,156,59,.13);   border-color:rgba(0,156,59,.4); }
}
/* Acessibilidade: respeita quem prefere menos movimento (mantém o destaque estático em amarelo). */
@media (prefers-reduced-motion: reduce){
  .cat-card--lancamento, .cat-card--lancamento .cat-card__icon{ animation:none; }
}

/* ==================== VER TODOS ==================== */
.todos{ max-width:var(--maxw); margin:0 auto; padding:clamp(10px,2vw,24px) clamp(20px,5vw,48px) clamp(40px,6vw,80px); }
.grupo-label{ font-size:.82rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--azul-2);
  margin:clamp(28px,5vw,48px) 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.todos .produtos{ padding:0; max-width:none; }

/* ==================== CARROSSEL ==================== */
.carousel{ display:flex; flex-direction:column; gap:14px; }
.carousel__stage{ position:relative; border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:7%;
  background:#ffffff;
  aspect-ratio:1/1; box-shadow:0 30px 70px -36px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5); }
.carousel__stage.is-dark{ background:linear-gradient(180deg,#11293c,#070f18); }
.carousel__mediabox{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.carousel__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
video.carousel__img{ border-radius:10px; }
/* Modo preencher (lançamentos): foto ocupa todo o quadro, sem espaço nas bordas */
.carousel--fill .carousel__stage{ padding:0; }
.carousel--fill .carousel__mediabox{ position:absolute; inset:0; }
.carousel--fill .carousel__img{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.carousel__nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.85); color:#0a1622;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4); transition:.25s; }
.carousel__nav:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.carousel__prev{ left:14px; } .carousel__next{ right:14px; }
.carousel__nav svg{ width:20px; height:20px; }
.carousel__thumbs{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.thumb{ flex:0 0 auto; width:62px; height:62px; border-radius:12px; overflow:hidden; border:1.5px solid var(--line);
  background:#fff; opacity:.55; transition:.25s; }
.thumb img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.thumb:hover{ opacity:.9; }
.thumb.is-active{ opacity:1; border-color:var(--azul); }
.thumb--vid{ position:relative; }
.thumb__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; background:rgba(10,22,34,.62); border-radius:50%; }
.thumb__play svg{ width:11px; height:11px; fill:#fff; stroke:none; margin-left:1px; }

/* Certificações */
.pd-certs{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.cert-logo{ height:32px; width:auto; max-width:90px; object-fit:contain; opacity:.92; }

/* Anterior / próximo produto */
/* Descrição rica (imagens do e-commerce empilhadas) */
.pd-rich{ max-width:1000px; margin:clamp(44px,7vw,96px) auto 0; }
.pd-rich__title{ font-size:.82rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--azul-2); text-align:center; margin-bottom:30px; }
.pd-rich__imgs{ display:flex; flex-direction:column; gap:clamp(12px,1.8vw,22px); }
.pd-rich__imgs img{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; }
/* Layout rico: hero banner + secoes imagem/conteudo (zigzag) */
.pd-hero{ margin-bottom:clamp(26px,4.5vw,54px); }
.pd-hero img{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; }
.pd-hero--fecho{ margin-top:clamp(26px,4.5vw,54px); margin-bottom:0; }
.pd-feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,56px); align-items:center; margin:clamp(30px,5vw,66px) 0; }
.pd-feat__media{ aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; }
.pd-feat__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-feat--rev .pd-feat__media{ order:2; }
.pd-feat__title{ font-size:clamp(1.4rem,2.5vw,2.05rem); font-weight:700; line-height:1.12; color:var(--branco); margin:0 0 .55em; }
.pd-feat__title::before{ content:""; display:block; width:38px; height:3px; border-radius:3px; background:var(--azul); margin-bottom:.7em; }
.pd-feat__text{ font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.72; color:var(--txt); margin:0; }
@media(max-width:760px){ .pd-feat{ grid-template-columns:1fr; gap:16px; margin:34px 0; } .pd-feat--rev .pd-feat__media{ order:0; } }
/* Blocos de video em loop (3 features: camera / fino / bordas) */
.pd-blocos{ margin:clamp(28px,4.5vw,58px) 0; }
.pd-blocos__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px); }
.pd-bloco{ margin:0; text-align:center; }
.pd-bloco__media{ background:#fff; border-radius:var(--radius-sm); overflow:hidden; }
.pd-bloco__vid{ width:100%; height:auto; display:block; }
.pd-bloco__title{ font-size:clamp(1.12rem,1.9vw,1.5rem); font-weight:700; color:var(--branco); margin:1em 0 .35em; line-height:1.15; }
.pd-bloco__text{ font-size:clamp(.92rem,1.2vw,1.02rem); line-height:1.6; color:var(--txt); margin:0 auto; max-width:32ch; }
@media(max-width:760px){
  .pd-blocos__track{ grid-auto-flow:column; grid-auto-columns:82%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:14px; scrollbar-width:none; }
  .pd-blocos__track::-webkit-scrollbar{ display:none; }
  .pd-bloco{ scroll-snap-align:center; }
}
/* Grade de features-icone (titulo curto, sem texto) */
.pd-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); margin:clamp(28px,4.5vw,56px) 0; }
.pd-feat-ico{ text-align:center; }
.pd-feat-ico__media{ background:#fff; border-radius:var(--radius-sm); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:16%; }
.pd-feat-ico__media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pd-feat-ico__label{ font-size:clamp(.9rem,1.15vw,1.02rem); font-weight:600; color:var(--branco); margin:.8em auto 0; line-height:1.25; max-width:20ch; }
@media(max-width:1000px){ .pd-feats{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .pd-feats{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){
  .pd-feats{ grid-template-columns:1fr; gap:12px; }
  .pd-feat-ico{ display:flex; align-items:center; gap:16px; text-align:left; }
  .pd-feat-ico__media{ width:66px; flex:none; padding:13px; border-radius:14px; }
  .pd-feat-ico__label{ margin:0; max-width:none; font-size:1.02rem; }
}


.pd-nav{ display:flex; gap:12px; max-width:1000px; margin:48px auto 0; padding-top:26px; border-top:1px solid var(--line-soft); }
.pd-nav__btn{ flex:1; display:flex; align-items:center; gap:12px; min-width:0; padding:14px 18px;
  border:1px solid var(--line); border-radius:14px; color:var(--txt); transition:.3s var(--ease); }
.pd-nav__btn--next{ justify-content:flex-end; text-align:right; }
.pd-nav__btn:hover{ border-color:var(--azul); background:rgba(17,122,205,.1); }
.pd-nav__btn span{ display:flex; flex-direction:column; line-height:1.2; min-width:0; font-size:.9rem; font-weight:500; color:#fff; }
.pd-nav__btn span{ overflow:hidden; }
.pd-nav__nm{ display:block; font-style:normal; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-nav__btn small{ font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--azul-2); }
.pd-nav__btn svg{ width:20px; height:20px; flex-shrink:0; }

/* ========================= RESPONSIVO ========================= */
@media (max-width:860px){
  .linhas{ grid-template-columns:1fr; }
  .menu__grid{ grid-template-columns:1fr; }
  .submenu__grid{ grid-template-columns:1fr; }
  .pd-grid{ grid-template-columns:1fr; gap:30px; }
  .pd-media{ position:static; }
  .pd-vitrine{ max-width:480px; margin:0 auto; }
}
@media (max-width:560px){
  .produtos{ grid-template-columns:1fr; gap:14px; padding-left:16px; padding-right:16px; }
  .card__ov{ padding:13px; }
  .card__name{ font-size:.86rem; max-width:80%; }
  .card__garantia{ font-size:.62rem; max-width:92%; }
  .compat{ gap:6px; }
  .compat__logo{ height:12px; }
  .compat__logo--samsung{ height:10px; }
  .topbar{ padding:14px 18px; }
  .btn-ghost{ padding:9px 16px; font-size:.72rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}