/* Narciele Freire — identidade visual aprovada, 2026-11-02.
   Paleta oficial: #FEF5F8 / #F8C6C8 / #883D3F.
   Rosé metalizado: efeito gráfico, não cor adicional oficial.
   CSS isolado para revisão em staging; sem alterações de layout ou JavaScript. */
:root {
  --nf-blush: #FEF5F8;
  --nf-rose: #F8C6C8;
  --nf-wine: #883D3F;
  --nf-wine-deep: #632C36;
  --nf-wine-hover: #713036;
  --nf-rose-soft: #FCE7EA;
  --nf-surface: #FFFAFC;
  --nf-ink: #35252B;
  --nf-muted: #684E58;
  --nf-line: rgba(136, 61, 63, .19);
  --nf-rose-metallic: linear-gradient(110deg, #F8C6C8 0%, #FFF0F2 23%, #C77E89 52%, #F8C6C8 76%, #AD606B 100%);
  --nf-shadow: 0 18px 48px rgba(99, 44, 54, .09);
  /* Compatibilidade com os estilos legados do MVP 12. */
  --wine: var(--nf-wine);
  --wine2: var(--nf-wine-hover);
  --wineDark: var(--nf-wine-deep);
  --rose: #AA6670;
  --cream: var(--nf-blush);
  --paper: var(--nf-surface);
  --warm: var(--nf-rose-soft);
  --tan: var(--nf-wine);
  --gold: #B7707A;
  --ink: var(--nf-ink);
  --muted: var(--nf-muted);
  --line: var(--nf-line);
  --shadow: var(--nf-shadow);
}
body { background: var(--nf-blush); color: var(--nf-ink); }
::selection { background: var(--nf-rose); color: var(--nf-wine-deep); }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--nf-wine); outline-offset: 3px;
}
.topline { background: var(--nf-wine); color: #FFF7F9; }
.topline .bullet { background: var(--nf-rose); }
.header { background: rgba(254,245,248,.97); border-bottom: 1px solid var(--nf-line); }
.nav a { color: var(--nf-muted); }
.nav a:is(:hover,.active) { color: var(--nf-wine); }
.nav a::after { background: var(--nf-wine); }
.mini-count, .btn-primary { background: var(--nf-wine); color: white; }
.btn-primary:hover, .mini-count:hover { background: var(--nf-wine-hover); }
.btn-outline { color: var(--nf-wine); border-color: rgba(136,61,63,.35); background: rgba(255,250,252,.35); }
.btn-outline:hover, .btn-light:hover { background: var(--nf-rose-soft); }
.btn-light { background: var(--nf-surface); color: var(--nf-wine); }
.hamburger { color: var(--nf-wine); border-color: var(--nf-line); }
.eyebrow, .hero-tagline, .blog-category { color: var(--nf-wine); }
.section-title, .hero-copy h1 { color: var(--nf-wine-deep); }
.section-lead, .about-copy p, .blog-card p, .contact-item p { color: var(--nf-muted); }
/* Hero editorial: preserva a fotografia original e suaviza o encontro com o fundo. */
.hero.hero-editorial {
  background: linear-gradient(105deg, var(--nf-blush) 0%, #FBE7EA 47%, var(--nf-rose) 100%) !important;
}
.hero-editorial .hero-copy h1 em { color: var(--nf-wine) !important; }
.hero-editorial .hero-copy p, .hero-editorial .hero-tagline { color: var(--nf-muted) !important; }
.hero-editorial .hero-tagline span { background: var(--nf-wine); }
@media (min-width: 801px) {
  .hero.hero-editorial {
    background: linear-gradient(90deg, var(--nf-blush) 0%, #FCECEF 38%, #F8DADD 60%, var(--nf-rose) 100%) !important;
  }
  .hero-editorial .hero-visual::before {
    background: linear-gradient(90deg, rgba(254,245,248,.25) 0%, rgba(254,245,248,.08) 19%, transparent 38%) !important;
  }
}
/* Seções: alternância de fundos leves para hierarquia sem excesso de rosa. */
#sobre, #duvidas { background: var(--nf-blush); }
#produtos, .reviews-section { background: var(--nf-rose-soft); border-color: var(--nf-line); }
#servicos, #contato, .blog-section { background: var(--nf-surface); }
.instagram-section {
  background: linear-gradient(160deg, var(--nf-blush) 0%, #FCE6E9 72%, var(--nf-rose) 100%);
}
.gallery { background: var(--nf-wine-deep); }
.gallery h2 { color: #FFF7F9; }
/* Cartões e leitura. */
.product-card, .service-card, .review-card, .blog-card, .extra-card {
  background: var(--nf-surface); border-color: var(--nf-line);
  box-shadow: 0 8px 28px rgba(99,44,54,.035);
}
.product-card:hover, .service-card:hover, .blog-card:hover {
  border-color: rgba(136,61,63,.38);
  box-shadow: var(--nf-shadow);
}
.blog-article, .contact-form {
  background: var(--nf-blush); border-color: var(--nf-line);
  box-shadow: 0 12px 32px rgba(99,44,54,.045);
}
.blog-card-image { background: var(--nf-rose-soft); }
.blog-read, .blog-card h3, .blog-article h3, .service-card h3,
.contact-form h3, .extra-card h3, .mvv h4 { color: var(--nf-wine); }
.blog-read { border-bottom-color: var(--nf-wine); }
.instagram-profile { background: var(--nf-surface); border-color: var(--nf-line); }
.instagram-profile-icon { background: var(--nf-wine); color: #fff; }
.instagram-header { background: var(--nf-surface); border-color: var(--nf-line); }
.instagram-header:hover { background: var(--nf-wine); }
.contact-icon { background: var(--nf-rose-soft); color: var(--nf-wine); }
.form-field label { color: var(--nf-wine-deep); }
.form-field input, .form-field select, .form-field textarea {
  background: #fff; border-color: rgba(136,61,63,.28); color: var(--nf-ink);
}
.form-field :is(input,select,textarea):focus { border-color: var(--nf-wine); box-shadow: 0 0 0 3px rgba(248,198,200,.5); }
.faq-stack, details { border-color: var(--nf-line); }
summary { color: var(--nf-ink); }
summary .plus { color: var(--nf-wine); }
.bag-panel { background: var(--nf-surface); }
/* Detalhe rosé metalizado discreto, sem afetar contraste do conteúdo. */
.about-frame { border-color: var(--nf-rose); }
.about-photo-wrap::after { content: ''; position: absolute; height: 3px; width: 38%; right: 0; bottom: 0; border-radius: 99px; background: var(--nf-rose-metallic); pointer-events: none; }
.reviews-heading::after, .instagram-heading-copy::after {
  content: ''; display: block; width: 82px; height: 3px; margin-top: 18px;
  border-radius: 99px; background: var(--nf-rose-metallic);
}
/* Rodapé com texto claro, para manter contraste. */
.footer { background: var(--nf-wine); color: #FFF7F9; }
.footer h4, .footer strong { color: #FFF9FA; }
.footer nav a, .footer a, .footer p, .footer-blurb { color: #F9E4E8; }
.footer a:hover { color: #fff; }
@media (max-width: 800px) {
  .nav { background: var(--nf-blush); box-shadow: 0 16px 26px rgba(99,44,54,.13); }
  .nav a { border-bottom-color: var(--nf-line); }
  .hero.hero-editorial { background: linear-gradient(180deg,var(--nf-blush) 0%,#FCE7EA 66%,var(--nf-rose) 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .product-card, .service-card { transition-duration: .01ms; }
}

/* Catálogo informativo: categorias de cuidados capilares, sem vitrine comercial. */
#produtos .product-type-grid{align-items:stretch}
#produtos .product-type-card{background:var(--nf-surface);border:1px solid var(--nf-line);min-height:250px;box-shadow:0 12px 30px rgba(99,44,54,.045)}
#produtos .product-type-card .product-body{height:100%;display:flex;flex-direction:column;gap:13px;padding:26px 23px}
#produtos .product-type-card h3{font:500 clamp(21px,2vw,26px)/1.22 'Playfair Display',Georgia,serif;color:var(--nf-wine-deep);margin:0}
#produtos .product-type-card p{color:var(--nf-muted);line-height:1.7;margin:0 0 10px}
#produtos .product-type-card .product-group{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-wine);font-weight:700}
#produtos .product-type-cta{width:100%;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:auto;text-align:center;white-space:normal}
#produtos .product-type-cta:hover{background:var(--nf-rose-soft)}
#produtos .product-type-note{background:var(--nf-surface);padding:17px 20px;border-left:3px solid var(--nf-wine);border-radius:0 12px 12px 0;color:var(--nf-muted);font-size:13px;line-height:1.7;margin:23px 0 0}
#produtos .product-type-note strong{color:var(--nf-wine-deep)}
#productInterestField[hidden],#serviceInterestField[hidden]{display:none!important}
#productInterestField select{display:block;width:100%;min-height:50px;padding:13px 16px;border:1px solid rgba(136,61,63,.3);border-radius:11px;background:#fff;color:var(--nf-ink);font:inherit}
#productInterestField select:focus-visible{outline:3px solid var(--nf-rose);outline-offset:2px}
#productInterestField .form-hint{margin-top:8px}
@media(max-width:540px){#produtos .product-type-card{min-height:auto}#produtos .product-type-card .product-body{padding:24px 20px}#produtos .product-type-note{padding:16px}}

/* Responsividade: camada final e isolada, sem alterar conteúdo ou scripts.
   Mantém a identidade visual Narciele Freire (#FEF5F8, #F8C6C8, #883D3F).
   Correções específicas de sobreposições criadas pelas media queries legadas. */

/* A hierarquia de flex/grid não deve forçar conteúdo para fora da viewport. */
.hero-grid, .hero-copy, .hero-visual, .about-grid, .faq-grid,
.contact-grid, .product-grid, .service-grid, .blog-grid,
.instagram-gallery, .footer-main, .review-viewport,
.form-row, .form-field, .custom-select { min-width: 0; }
.hero-copy, .about-copy, .blog-card-body, .contact-info,
.contact-form, .instagram-profile, .service-card, .product-type-card { overflow-wrap: anywhere; }
img, svg, video, iframe { max-width: 100%; }
.map-shell iframe { width: 100%; display: block; }

/* Corrige CTA primário que perdia contraste nas variações do hero. */
.hero.hero-editorial .hero-actions .btn-primary,
.hero.hero-editorial .hero-actions .btn-primary:visited {
  background: var(--nf-wine) !important;
  border-color: var(--nf-wine) !important;
  color: #fff !important;
}
.hero.hero-editorial .hero-actions .btn-primary:hover {
  background: var(--nf-wine-hover) !important;
}

.header-inner { min-width: 0; }
.header .brand { flex: 0 1 auto; }
.header .brand img { max-width: 100%; }
.header .header-actions { flex: 0 0 auto; }
.review-viewport { max-width: 100%; }
.reviews-grid .review-card { overflow-wrap: anywhere; }
.form-field input, .form-field select, .form-field textarea,
.custom-select-trigger { max-width: 100%; }
.custom-select-popover { max-width: 100%; }

@media (max-width: 1100px) {
  .header-inner { gap: 14px; }
  .header .nav { gap: 15px; }
  .hero.hero-editorial .hero-copy h1 {
    font-size: clamp(42px, 5.3vw, 68px) !important;
    text-wrap: balance;
  }
  .section-about-editorial .about-grid { gap: 38px !important; }
}

/* Tablet: um cabeçalho navegável e blocos que não comprimem o texto. */
@media (max-width: 900px) {
  .header-inner { height: 73px; gap: 12px; }
  .header .hamburger { display: flex !important; flex: none; }
  .header .header-cta { display: none !important; }
  .header .nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    margin: 0 !important;
    padding: 9px max(18px, env(safe-area-inset-right)) 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--nf-blush) !important;
    box-shadow: 0 18px 32px rgba(99, 44, 54, .17);
    z-index: 100;
  }
  .header .nav.open { display: flex !important; }
  .header .nav a { padding: 13px 2px; font-size: 14px; border-bottom: 1px solid var(--nf-line); }
  .header .nav a::after { display: none !important; }

  .hero.hero-editorial {
    display: flex !important;
    flex-direction: column !important;
    background: var(--nf-blush) !important;
  }
  .hero.hero-editorial .hero-grid {
    display: block !important;
    order: 1 !important;
    min-height: 0 !important;
    padding: 50px 0 26px !important;
  }
  .hero.hero-editorial .hero-copy {
    width: 100% !important;
    max-width: 680px !important;
    padding: 0 !important;
  }
  .hero.hero-editorial .hero-copy h1 {
    font-size: clamp(40px, 7.5vw, 64px) !important;
    line-height: 1.08;
    margin: 19px 0 !important;
  }
  .hero.hero-editorial .hero-visual {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(300px, 55vw, 475px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--nf-rose) !important;
  }
  .hero.hero-editorial .hero-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .hero.hero-editorial .hero-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  .hero.hero-editorial .hero-visual::before {
    background: linear-gradient(180deg, var(--nf-blush) 0%, rgba(254,245,248,.1) 24%, transparent 42%) !important;
  }
  .section-about-editorial .about-grid,
  .faq-grid, .contact-grid { grid-template-columns: minmax(0,1fr) !important; gap: 30px !important; }
  .section-about-editorial .about-photo-wrap { width: min(100%, 540px); margin-inline: auto; }
  .product-grid, .service-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card { display: flex; flex-direction: column; min-width: 0; }
  .gal-grid, .instagram-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-main { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; }
}

@media (max-width: 600px) {
  section.main-section { padding-block: 64px; }
  .hero.hero-editorial .hero-grid { padding: 39px 0 23px !important; }
  .hero.hero-editorial .hero-visual { height: clamp(285px, 88vw, 395px) !important; }
  .hero.hero-editorial .hero-copy h1 { font-size: clamp(36px, 10vw, 52px) !important; }
  .hero.hero-editorial .hero-copy p { font-size: 14px; line-height: 1.7; }
  .hero.hero-editorial .hero-actions { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .hero.hero-editorial .hero-actions .btn { width: 100%; min-width: 0 !important; }
  .hero.hero-editorial .hero-tagline { margin-top: 22px !important; }
  .product-grid, .service-grid, .blog-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .blog-card { display: flex !important; flex-direction: column !important; min-height: 0; }
  .blog-card-image { width: 100%; height: 185px; }
  .blog-card-body, .service-card { min-width: 0; }
  .gal-grid figure:last-child { grid-column: 1 / -1; }
  .instagram-gallery { gap: 9px !important; }
  .instagram-profile { min-width: 0; width: 100%; flex-wrap: wrap; }
  .instagram-profile strong, .instagram-profile span { white-space: normal; }
  .instagram-profile-link { margin-left: 0; }
  .about-points, .form-row, .footer-main { grid-template-columns: minmax(0,1fr) !important; }
  .contact-form { padding: 22px 18px; }
  .form-field input, .form-field select, .form-field textarea,
  .custom-select-trigger { font-size: 16px; }
  .custom-select-popover { max-height: min(280px, 45dvh); }
  .review-navigation { gap: 10px; }
  .review-arrow { min-width: 44px; min-height: 44px; }
  .blog-article { padding: 23px 18px; }
  .blog-article-top { flex-wrap: wrap; }
  .map-overlay { max-width: calc(100% - 24px); }
  .map-shell iframe { min-height: 260px; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 28px); }
  .topline { gap: 5px; font-size: 8px; letter-spacing: .045em; }
  .header .brand { min-width: 0 !important; max-width: calc(100% - 96px); }
  .header .brand img { width: min(142px, 100%) !important; height: auto !important; }
  .header .header-actions { gap: 5px; }
  .hero.hero-editorial .hero-copy h1 { font-size: clamp(34px, 10.5vw, 40px) !important; }
  .section-title { font-size: clamp(30px, 9vw, 37px); }
  .contact-form { padding: 18px 14px; }
  .blog-card-body, .service-card { padding-inline: 17px; }
  .instagram-profile-link { flex-basis: 100%; border-left: none; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-grid, .nav, .custom-select-popover { scroll-behavior: auto !important; transition: none !important; }
}

/* Hero mobile — remover névoa do topo e integrar a base da foto ao branco da próxima seção.
   Escopo intencional: até 800px; preserva a apresentação desktop e o arquivo de imagem. */
@media (max-width: 800px) {
  .hero.hero-editorial .hero-main img {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .hero.hero-editorial .hero-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 75%,
      rgba(255, 255, 255, .22) 86%,
      rgba(255, 255, 255, .72) 94%,
      #fff 100%
    ) !important;
  }
}