/* =====================================================================
   REALCE COSMÉTICOS — Folha de estilo principal
   Paleta baseada na logomarca: preto + turquesa + branco, com toque blush.
   ===================================================================== */

:root{
  --teal:        #17BEBB;
  --teal-2:      #22C7C3;
  --teal-dark:   #0E8C8A;
  --ink:         #0D0D0D;
  --ink-2:       #1a1a1a;
  --white:       #ffffff;
  --blush:       #F7ECEA;
  --blush-2:     #FBF5F4;
  --gray:        #6b6b6b;
  --gray-light:  #f3f4f4;
  --gold:        #d9b26a;
  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 10px 40px rgba(0,0,0,.12);
  --shadow-sm:   0 4px 18px rgba(0,0,0,.08);
  --maxw:        1200px;
  --font-body:   'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head:   'Playfair Display', Georgia, serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:.2s; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.2; color:var(--ink); }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section{ padding:80px 0; }
.section--dark{ background:var(--ink); color:var(--white); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--white); }
.section--blush{ background:var(--blush-2); }

/* ---------- Títulos de seção ---------- */
.sec-head{ text-align:center; max-width:720px; margin:0 auto 50px; }
.sec-head .eyebrow{
  font-family:var(--font-script); font-size:2rem; color:var(--teal);
  line-height:1; display:block; margin-bottom:4px;
}
.sec-head h2{ font-size:clamp(1.7rem,4vw,2.6rem); }
.sec-head p{ color:var(--gray); margin-top:12px; }
.section--dark .sec-head p{ color:#c9c9c9; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:50px; font-weight:600; font-size:.95rem;
  cursor:pointer; border:2px solid transparent; transition:.25s; white-space:nowrap;
}
.btn--primary{ background:var(--teal); color:#fff; }
.btn--primary:hover{ background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 8px 22px rgba(23,190,187,.4); }
.btn--outline{ border-color:var(--teal); color:var(--teal); background:transparent; }
.btn--outline:hover{ background:var(--teal); color:#fff; }
.btn--white{ background:#fff; color:var(--ink); }
.btn--white:hover{ background:var(--teal); color:#fff; }
.btn--wa{ background:#25D366; color:#fff; }
.btn--wa:hover{ background:#1da851; transform:translateY(-2px); }
.btn--lg{ padding:16px 36px; font-size:1.05rem; }

/* =====================================================================
   CABEÇALHO
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--ink);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:82px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{ height:46px; width:auto; max-width:100%; display:block; flex:none; }
.brand__logo--footer{ height:56px; }
.brand__icon{ width:52px; height:44px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--font-script); font-size:2rem; color:#fff; }
.brand__tag{ font-family:var(--font-head); font-size:.6rem; letter-spacing:.18em; color:var(--teal-2); text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ color:#eee; font-size:.92rem; font-weight:500; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--teal); transition:.25s; }
.nav a:hover,.nav a.active{ color:var(--teal-2); }
.nav a:hover::after,.nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.7rem; cursor:pointer; }

@media(max-width:980px){
  .brand__logo{ height:40px; }
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:82px 0 auto 0; flex-direction:column; gap:0;
    background:var(--ink); padding:10px 0; max-height:0; overflow:hidden;
    transition:max-height .35s ease; border-top:1px solid rgba(255,255,255,.08);
  }
  .nav.open{ max-height:80vh; }
  .nav a{ width:100%; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
  .header-actions .btn{ display:none; }
}

/* =====================================================================
   HERO / CARROSSEL
   ===================================================================== */
.hero{ position:relative; }
.carousel{ position:relative; overflow:hidden; }
.carousel__track{ display:flex; transition:transform .7s cubic-bezier(.4,0,.2,1); }
.slide{ min-width:100%; position:relative; display:flex; }
.slide__img{
  width:100%; min-height:clamp(360px,60vh,620px); background-size:cover; background-position:center;
  position:relative; display:flex;
}
.slide__img::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(13,13,13,.9) 0%, rgba(13,13,13,.66) 40%, rgba(13,13,13,.22) 70%, rgba(13,13,13,.5) 100%); }
.slide__content{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:56px 20px;
}
.slide__content > *{ max-width:600px; }
.slide__content .eyebrow{ font-family:var(--font-script); font-size:2.2rem; color:var(--teal-2); line-height:1.2; }
.slide__content h1{ color:#fff; font-size:clamp(1.9rem,5vw,3.4rem); margin:6px 0 14px; line-height:1.15; }
.slide__content p{ color:#eaeaea; font-size:1.1rem; margin-bottom:26px; max-width:520px; }
.slide__actions{ display:flex; gap:14px; flex-wrap:wrap; }

.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.15); color:#fff; font-size:1.4rem; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.carousel__btn:hover{ background:var(--teal); }
.carousel__btn--prev{ left:18px; } .carousel__btn--next{ right:18px; }
.carousel__dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.carousel__dots button{ width:11px; height:11px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; transition:.2s; }
.carousel__dots button.active{ background:var(--teal); width:28px; border-radius:6px; }

@media(max-width:980px){
  .carousel__btn{ display:none; }
  .slide__content{ padding:44px 7%; }
}
@media(max-width:600px){
  .slide__img{ min-height:auto; }
  .slide__content{ padding:56px 24px 64px; max-width:none; align-items:stretch; }
  .slide__content > *{ max-width:none; }
  .slide__content .eyebrow{ font-size:1.8rem; }
  .slide__content p{ font-size:1rem; margin-bottom:22px; }
  .slide__actions .btn{ flex:1 1 auto; text-align:center; }
}

/* =====================================================================
   CATEGORIAS
   ===================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cat-card{
  text-align:center; padding:28px 12px; border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-sm); transition:.25s;
  border:1px solid #eee;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal); }
.cat-card .emoji{ font-size:2.4rem; }
.cat-card h3{ font-family:var(--font-body); font-size:1rem; font-weight:600; margin-top:10px; }
@media(max-width:860px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }

/* =====================================================================
   MARCAS
   ===================================================================== */
.brand-strip{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; }
.brand-chip{
  background:#fff; border:1px solid #eee; border-radius:50px; padding:12px 26px;
  font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm); transition:.2s;
  font-family:var(--font-head);
}
.brand-chip:hover{ color:var(--teal); border-color:var(--teal); transform:translateY(-3px); }
.brand-chip--logo{ padding:16px 30px; display:inline-flex; align-items:center; }
.brand-chip--logo img{ height:60px; width:auto; max-width:210px; object-fit:contain; display:block; }

/* =====================================================================
   PROMOÇÕES
   ===================================================================== */
.promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.promo-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:.25s; display:flex; flex-direction:column; border:1px solid #eee;
}
.promo-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.promo-card__img{ height:210px; background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  background-size:cover; background-position:center; position:relative; }
.promo-card__badge{ position:absolute; top:14px; left:14px; background:var(--ink); color:#fff;
  padding:6px 14px; border-radius:50px; font-size:.75rem; font-weight:600; letter-spacing:.05em; }
.promo-card__body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.promo-card__body h3{ font-size:1.2rem; }
.promo-card__body p{ color:var(--gray); font-size:.92rem; margin:8px 0 14px; flex:1; }
.promo-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.promo-price .de{ color:#aaa; text-decoration:line-through; font-size:.9rem; }
.promo-price .por{ color:var(--teal-dark); font-size:1.5rem; font-weight:700; font-family:var(--font-head); }
@media(max-width:900px){ .promo-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .promo-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   LOJAS
   ===================================================================== */
.lojas-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.loja-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid #eee; display:flex; flex-direction:column;
}
.loja-card__map{ height:220px; border:0; width:100%; background:var(--gray-light); }
.loja-card__map--placeholder{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e8f7f6,#d3f0ef); color:var(--teal-dark); font-weight:600; }
.loja-card__body{ padding:22px; }
.loja-card__city{ display:inline-block; background:var(--blush); color:var(--teal-dark);
  padding:3px 12px; border-radius:50px; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:8px; }
.loja-card__body h3{ font-size:1.2rem; }
.loja-meta{ list-style:none; margin:12px 0 16px; font-size:.9rem; color:var(--gray); }
.loja-meta li{ display:flex; gap:9px; margin-bottom:6px; }
.loja-meta li b{ color:var(--ink); font-weight:600; }
@media(max-width:760px){ .lojas-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   DEPOIMENTOS
   ===================================================================== */
.dep-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dep-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:28px; }
.dep-card .stars{ color:var(--gold); margin-bottom:12px; letter-spacing:2px; }
.dep-card p{ color:#e6e6e6; font-style:italic; }
.dep-card .who{ margin-top:16px; font-weight:600; color:#fff; }
.dep-card .who span{ display:block; font-weight:400; font-size:.82rem; color:var(--teal-2); }
@media(max-width:820px){ .dep-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   GALERIA (faixa deslizante)
   ===================================================================== */
.gallery-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
.gallery-track::-webkit-scrollbar{ height:8px; }
.gallery-track::-webkit-scrollbar-thumb{ background:var(--teal); border-radius:8px; }
.gallery-item{ min-width:300px; height:220px; border-radius:var(--radius); overflow:hidden;
  scroll-snap-align:start; background-size:cover; background-position:center; position:relative;
  box-shadow:var(--shadow-sm); }
.gallery-item span{ position:absolute; left:0; right:0; bottom:0; padding:12px 16px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.7)); font-size:.85rem; }

/* =====================================================================
   BLOG
   ===================================================================== */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid #eee; transition:.25s; display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.post-card__img{ height:190px; background:linear-gradient(135deg,var(--teal),var(--blush));
  background-size:cover; background-position:center; }
.post-card__body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.post-card__cat{ color:var(--teal-dark); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.post-card__body h3{ font-size:1.15rem; margin:8px 0; }
.post-card__body p{ color:var(--gray); font-size:.9rem; flex:1; }
.post-card__body .more{ margin-top:14px; color:var(--teal); font-weight:600; font-size:.9rem; }
@media(max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }

.post-full{ max-width:800px; margin:0 auto; }
.post-full img{ border-radius:var(--radius); margin:20px 0; }
.post-full h1{ font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:10px; }
.post-full .meta{ color:var(--gray); font-size:.9rem; margin-bottom:24px; }
.post-full p{ margin-bottom:16px; }

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.form-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.form-control{
  width:100%; padding:13px 16px; border:1.5px solid #e2e2e2; border-radius:var(--radius-sm);
  font-family:inherit; font-size:.95rem; transition:.2s; background:#fff;
}
.form-control:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,190,187,.15); }
textarea.form-control{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }

.alert{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:.92rem; }
.alert--sucesso{ background:#e6f9f3; color:#0d7a53; border:1px solid #9fe6cc; }
.alert--erro{ background:#fdeaea; color:#b02a2a; border:1px solid #f3b6b6; }

/* Newsletter */
.newsletter{ background:linear-gradient(135deg,var(--teal-dark),var(--teal)); color:#fff; }
.newsletter .nl-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.newsletter h2{ color:#fff; } .newsletter p{ color:rgba(255,255,255,.9); }
.nl-form{ display:flex; gap:10px; flex-wrap:wrap; }
.nl-form input{ padding:14px 18px; border-radius:50px; border:none; min-width:260px; font-family:inherit; }
@media(max-width:700px){ .nl-form input{ min-width:100%; } }

/* =====================================================================
   PAGE HEADER (páginas internas)
   ===================================================================== */
.page-hero{ background:var(--ink); color:#fff; padding:70px 0 60px; text-align:center; position:relative; }
.page-hero::after{ content:""; position:absolute; inset:0; opacity:.12;
  background:radial-gradient(circle at 30% 40%, var(--teal), transparent 55%); }
.page-hero .eyebrow{ font-family:var(--font-script); font-size:2rem; color:var(--teal-2); position:relative; }
.page-hero h1{ color:#fff; font-size:clamp(2rem,5vw,3rem); position:relative; }
.breadcrumb{ font-size:.85rem; color:#bbb; margin-top:10px; position:relative; }
.breadcrumb a:hover{ color:var(--teal-2); }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.site-footer{ background:#080808; color:#c7c7c7; padding:60px 0 24px; font-size:.9rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.footer-col h4{ color:#fff; font-family:var(--font-body); font-size:1rem; margin-bottom:16px; }
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom:9px; }
.footer-col a:hover{ color:var(--teal-2); }
.footer-brand .brand__name{ font-size:1.7rem; }
.footer-slogan{ margin-top:14px; font-family:var(--font-script); font-size:1.35rem; color:var(--teal-2); line-height:1.2; }
.footer-social a{ display:inline-flex; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  align-items:center; justify-content:center; margin-right:8px; transition:.2s; }
.footer-social a:hover{ background:var(--teal); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.82rem; color:#888; }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   WHATSAPP FLUTUANTE
   ===================================================================== */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:60; width:58px; height:58px;
  border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.5); font-size:1.7rem; animation:pulse 2.5s infinite; }
.wa-float:hover{ transform:scale(1.08); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }

/* =====================================================================
   ÍCONES  (biblioteca Lucide inline — outline, stroke fino, glow suave)
   ---------------------------------------------------------------------
   Base neutra + modificadores por contexto. Todos herdam a cor via
   currentColor e transicionam cor/glow para o efeito de hover futurista.
   ===================================================================== */
.icon{
  display:inline-block;
  width:1.15em; height:1.15em;
  vertical-align:-0.2em;                 /* alinhamento óptico com o texto */
  flex:none;
  stroke-width:1.75;
  overflow:visible;
  transition:color .25s ease, filter .25s ease, transform .25s ease, stroke .25s ease;
}

/* --- Redes sociais (rodapé) --- */
.icon--social{ width:19px; height:19px; color:#fff; }
.footer-social a:hover .icon{ filter:drop-shadow(0 0 7px rgba(255,255,255,.55)); }

/* --- Lista de atendimento (rodapé) --- */
.icon--fmeta{ color:var(--teal-2); margin-right:8px; vertical-align:-0.24em; }
.footer-col ul li a:hover .icon,
.footer-col ul li:hover .icon--fmeta{ filter:drop-shadow(0 0 6px rgba(34,199,195,.5)); }

/* --- Listas com ícone à esquerda (loja-meta / contato / público) --- */
.loja-meta li{ align-items:flex-start; }
.loja-meta li .icon{ width:19px; height:19px; color:var(--teal-dark); margin-top:.16em; }

/* --- Caixa de ícone dos info-cards --- */
.icon--card{ width:26px; height:26px; color:var(--teal-dark); }
.info-card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.info-card .ic{ transition:background .25s ease; }
.info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(23,190,187,.35); }
.info-card:hover .ic{ background:linear-gradient(135deg,var(--teal),var(--teal-dark)); }
.info-card:hover .ic .icon{ color:#fff; filter:drop-shadow(0 0 8px rgba(23,190,187,.55)); }

/* --- Categorias --- */
.cat-card .emoji{ line-height:1; }
.icon--cat{ width:42px; height:42px; stroke-width:1.6; color:var(--teal-dark); }
.cat-card:hover .icon--cat{ color:var(--teal); filter:drop-shadow(0 0 10px rgba(23,190,187,.5)); transform:translateY(-2px); }

/* --- Estrelas de avaliação (preenchidas) --- */
.dep-card .stars{ display:inline-flex; gap:3px; }
.icon--star{ width:18px; height:18px; }

/* --- Placeholder de mapa --- */
.loja-card__map--placeholder .icon{ width:20px; height:20px; margin-right:6px; vertical-align:-0.24em; }

/* --- Carrossel / menu / WhatsApp flutuante --- */
.carousel__btn .icon{ width:26px; height:26px; }
.nav-toggle .icon{ width:28px; height:28px; }
.wa-float .icon{ width:28px; height:28px; }

/* --- Alertas de formulário --- */
.alert{ display:flex; align-items:flex-start; gap:9px; }
.alert .icon{ width:20px; height:20px; margin-top:1px; }

/* --- "Ler mais" do blog --- */
.post-card__body .more{ display:inline-flex; align-items:center; gap:6px; }
.icon--more{ width:1.05em; height:1.05em; vertical-align:middle; transition:transform .25s ease; }
.post-card:hover .icon--more{ transform:translateX(4px); }

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; } .mb-0{ margin-bottom:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media(max-width:820px){ .grid-2{ grid-template-columns:1fr; } }
.rounded{ border-radius:var(--radius); }
.value-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.value-chips span{ background:var(--blush); color:var(--teal-dark); padding:8px 16px; border-radius:50px; font-weight:600; font-size:.85rem; }
.info-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.info-card{ background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); }
.info-card .ic{ width:52px; height:52px; border-radius:14px; background:var(--blush); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:14px; }
.info-card h3{ font-size:1.15rem; margin-bottom:8px; }
.info-card p{ color:var(--gray); font-size:.92rem; }
@media(max-width:820px){ .info-cards{ grid-template-columns:1fr; } }

/* =====================================================================
   FOTOS ILUSTRATIVAS (imagens temáticas por página — Unsplash License)
   ===================================================================== */

/* Foto principal arredondada (ex.: Quem Somos) */
.media-photo{ width:100%; height:340px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
@media(max-width:820px){ .media-photo{ height:260px; } }

/* Faixa de 3 fotos com legenda (ambiente / experiência) */
.photo-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.photo-band figure{ position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); aspect-ratio:4/3; }
.photo-band img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.photo-band figure:hover img{ transform:scale(1.06); }
.photo-band figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; color:#fff;
  font-weight:600; font-size:.92rem; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); }
@media(max-width:760px){ .photo-band{ grid-template-columns:1fr; } }

/* Cards de categoria com foto de fundo (Produtos & Marcas) */
.cat-card--photo{ padding:0; border:0; overflow:hidden; position:relative; min-height:190px; text-align:left;
  background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.cat-card--photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,0) 35%, rgba(13,13,13,.74) 100%); transition:.25s; }
.cat-card--photo:hover::after{ background:linear-gradient(180deg, rgba(13,13,13,0) 20%, rgba(13,13,13,.8) 100%); }
.cat-card--photo .cat-card__label{ position:relative; z-index:1; width:100%; display:flex; align-items:center; gap:10px; padding:16px 18px; }
.cat-card--photo h3{ color:#fff; margin:0; }
.cat-card--photo .icon--cat{ width:26px; height:26px; color:#fff; }
.cat-card--photo:hover .icon--cat{ color:#fff; transform:none; filter:none; }
.cat-card--photo:hover{ border-color:transparent; box-shadow:var(--shadow); }
@media(max-width:480px){ .cat-card--photo{ min-height:150px; } }

/* Banner com foto de fundo e chamada (ex.: Promoções) */
.photo-hero{ position:relative; overflow:hidden; border-radius:var(--radius); min-height:220px;
  display:flex; align-items:center; box-shadow:var(--shadow-sm); background-size:cover; background-position:center; }
.photo-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,13,13,.78), rgba(13,13,13,.32)); }
.photo-hero__in{ position:relative; z-index:1; color:#fff; padding:34px; max-width:580px; }
.photo-hero__in h2{ color:#fff; margin-top:6px; }
.photo-hero__in p{ color:rgba(255,255,255,.9); margin-top:8px; }

/* Reveal só esconde quando o JS está ativo (html.js); sem JS, tudo aparece. */
html.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
html.js .reveal.in{ opacity:1; transform:none; }

/* =====================================================================
   HOME — COMPONENTES DO NOVO INDEX
   Técnicas de UI: camadas/sobreposição, layout bento, hierarquia
   assimétrica (foco + secundárias), marquee e prova social.
   Classes com namespace próprio para não afetar as demais páginas.
   ===================================================================== */

/* ---------- Faixa de destaques sobreposta ao hero (camada/elevação) --- */
.stat-band{ position:relative; z-index:3; }
.stat-band .container{ margin-top:-52px; }
.stat-band__inner{
  background:#eef0f0; border:1px solid #eaecec; border-radius:var(--radius);
  box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; overflow:hidden;
}
.stat-item{ background:#fff; display:flex; gap:14px; align-items:flex-start; padding:24px 22px; transition:background .25s ease; }
.stat-item:hover{ background:var(--blush-2); }
.stat-item .ic{
  width:46px; height:46px; border-radius:13px; flex:none;
  background:var(--blush); display:flex; align-items:center; justify-content:center; transition:.25s;
}
.stat-item .ic .icon{ width:23px; height:23px; color:var(--teal-dark); transition:.25s; }
.stat-item:hover .ic{ background:linear-gradient(135deg,var(--teal),var(--teal-dark)); }
.stat-item:hover .ic .icon{ color:#fff; filter:drop-shadow(0 0 8px rgba(23,190,187,.55)); }
.stat-item h4{ font-family:var(--font-body); font-size:.98rem; font-weight:600; margin:2px 0 3px; }
.stat-item p{ color:var(--gray); font-size:.82rem; line-height:1.45; }
@media(max-width:860px){ .stat-band .container{ margin-top:-34px; } .stat-band__inner{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .stat-band__inner{ grid-template-columns:1fr; } }

/* ---------- Categorias em bento com foto ------------------------------ */
.cat-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:16px; }
.cat-tile{
  position:relative; overflow:hidden; border-radius:var(--radius); display:flex; align-items:flex-end;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark)); background-size:cover; background-position:center;
  box-shadow:var(--shadow-sm); border:1px solid #eee; transition:transform .3s ease, box-shadow .3s ease;
}
.cat-tile--wide{ grid-column:span 2; }
.cat-tile::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,0) 32%, rgba(13,13,13,.8)); transition:.3s; }
.cat-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.cat-tile:hover::after{ background:linear-gradient(180deg, rgba(13,13,13,.1) 10%, rgba(13,13,13,.86)); }
.cat-tile__in{ position:relative; z-index:1; padding:18px 20px; display:flex; align-items:center; gap:12px; width:100%; }
.cat-tile__in > .icon{ width:26px; height:26px; color:#fff; flex:none; }
.cat-tile h3{ color:#fff; font-size:1.15rem; margin:0; }
.cat-tile .go{ margin-left:auto; display:inline-flex; color:#fff; opacity:0; transform:translateX(-6px); transition:.25s; }
.cat-tile .go .icon{ width:20px; height:20px; }
.cat-tile:hover .go{ opacity:1; transform:none; }
@media(max-width:860px){ .cat-bento{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; } .cat-tile--wide{ grid-column:auto; } }
@media(max-width:480px){ .cat-bento{ grid-auto-rows:140px; } }

/* ---------- Promoções: destaque + secundárias (assimétrico) ----------- */
.promo-feature{ display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:stretch; }
.promo-main{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:430px; display:flex; align-items:flex-end;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark)); background-size:cover; background-position:center;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
}
.promo-main:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.promo-main::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,.05) 30%, rgba(13,13,13,.86)); }
.promo-main__in{ position:relative; z-index:1; padding:32px; color:#fff; width:100%; }
.promo-main__in h3{ color:#fff; font-size:clamp(1.4rem,3vw,1.9rem); }
.promo-main__in p{ color:rgba(255,255,255,.9); margin:8px 0 18px; max-width:460px; }
.promo-badge-i{ display:inline-block; background:var(--ink); color:#fff; padding:6px 14px; border-radius:50px;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; margin-bottom:12px; }
.promo-price--light .por{ color:#fff; }
.promo-price--light .de{ color:rgba(255,255,255,.6); }

.promo-side{ display:flex; flex-direction:column; gap:18px; }
.promo-mini{ display:flex; gap:0; background:#fff; border:1px solid #eee; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.25s; flex:1; }
.promo-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.promo-mini__img{ width:130px; flex:none; background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  background-size:cover; background-position:center; }
.promo-mini__body{ padding:16px 18px; display:flex; flex-direction:column; justify-content:center; }
.promo-mini__body h4{ font-size:1.05rem; }
.promo-mini__body p{ color:var(--gray); font-size:.82rem; margin:4px 0 8px; }
.promo-mini__link{ display:inline-flex; align-items:center; gap:6px; color:var(--teal); font-weight:600; font-size:.85rem; }
.promo-mini:hover .promo-mini__link .icon{ transform:translateX(4px); }
.promo-mini .promo-price{ margin-bottom:8px; }
.promo-mini .promo-price .por{ font-size:1.2rem; }
.promo-cta-card{ background:#fff; border:1px dashed var(--teal); border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1; justify-content:center; }
.promo-cta-card h4{ font-size:1.2rem; }
.promo-cta-card p{ color:var(--gray); font-size:.9rem; margin-bottom:8px; }
@media(max-width:860px){ .promo-feature{ grid-template-columns:1fr; } .promo-main{ min-height:320px; } }
@media(max-width:480px){ .promo-mini{ flex-direction:column; } .promo-mini__img{ width:100%; height:160px; } }

/* ---------- Sobre — split editorial ----------------------------------- */
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.about-split__media{ position:relative; }
.about-split__media img{ width:100%; height:430px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.about-split__badge{ position:absolute; right:-16px; bottom:-16px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 20px; display:flex; gap:12px; align-items:center; max-width:240px; }
.about-split__badge .ic{ width:44px; height:44px; border-radius:12px; background:var(--blush);
  display:flex; align-items:center; justify-content:center; flex:none; }
.about-split__badge .ic .icon{ width:22px; height:22px; color:var(--teal-dark); }
.about-split__badge b{ display:block; font-family:var(--font-head); font-size:1rem; }
.about-split__badge span{ font-size:.76rem; color:var(--gray); }
.about-split .eyebrow{ font-family:var(--font-script); font-size:2rem; color:var(--teal); display:block; line-height:1; }
.about-split h2{ font-size:clamp(1.7rem,4vw,2.4rem); margin:4px 0 14px; }
.about-split__text > p{ color:var(--gray); margin-bottom:18px; }
.about-list{ list-style:none; margin:0 0 26px; display:grid; gap:12px; }
.about-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; }
.about-list li .icon{ width:22px; height:22px; color:var(--teal); flex:none; margin-top:.15em; }
.about-list b{ font-weight:600; color:var(--ink); }
@media(max-width:820px){ .about-split{ grid-template-columns:1fr; gap:44px; } .about-split__media img{ height:320px; }
  .about-split__badge{ right:14px; bottom:-16px; } }

/* ---------- Marcas — marquee (movimento sugere amplitude) ------------- */
.brand-marquee{ overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-marquee__track{ display:flex; gap:16px; width:max-content; animation:marquee 34s linear infinite; }
.brand-marquee:hover .brand-marquee__track{ animation-play-state:paused; }
.brand-marquee .brand-chip{ flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){
  .brand-marquee{ mask-image:none; -webkit-mask-image:none; }
  .brand-marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; padding:0 20px; }
}

/* ---------- Depoimentos — aspas decorativas --------------------------- */
.dep-card{ position:relative; overflow:hidden; }
.dep-card .quote-ic{ position:absolute; top:14px; right:18px; color:rgba(34,199,195,.22); line-height:0; }
.dep-card .quote-ic .icon{ width:38px; height:38px; }