/* ==========================================================================
   FIÊRRI MODAS — rodada 2 (13/09/2026, noite) · carrega DEPOIS do style.css
   Pedido dele, olhando a Vigor Vital: página BRANCA, conteúdo FININHO no meio
   (920px, do menu ao rodapé) e a cor morando nos ELEMENTOS. A barra rosa grande
   do meio saiu do HTML — "quebra completamente a leitura".
   Cores das coleções: rosa (feminina), jade, ocre, cúrcuma, framboesa.
   ========================================================================== */

:root {
  --shell: 920px;
  --gutter: clamp(20px, 5vw, 44px);
  --papel: #FFFFFF;
  --papel-alto: #FFFFFF;
  --papel-fundo: #FFFFFF;
  --linha: #F0E4EA;
  --respiro: clamp(56px, 6vw, 88px);
}

/* granulação de papel e manchas de aquarela: no branco viram sujeira */
body::after { display: none; }
.secao--papel-fundo { background: #fff; }
.mancha, .folhagem, .respingo { display: none; }
.hero { background: #fff; }

/* ------------------------------------------------------------- cabeçalho */
/* compacto pra caber na coluna de 920px: logo menor, menu e botão mais justos */
.cabecalho.fixado { background: rgba(255, 255, 255, .95); }
.cabecalho__interno { gap: 18px; }
.menu { gap: 16px; }
.cabecalho__acao.btn { padding: 12px 18px; }
@media (min-width: 1000px) {
  .logo-img { height: clamp(78px, 6.2vw, 92px); margin-bottom: -26px; }
  .cabecalho.fixado .logo-img { height: 56px; margin-bottom: 0; }
}

/* ------------------------------------------------------------- vantagens */
/* eram uma tira rosa-clarinha; viram 5 itens com a cor de cada coleção */
.vantagens { padding: 0; gap: 10px; background: none; border: 0; box-shadow: none; }
.vantagem {
  --v: #E4106F; --v-escuro: #9A0E4A; --v-clara: #FDE7F0; --v-borda: #F7C3D9; --v-sombra: rgba(228, 16, 111, .16);
  flex-direction: column; justify-content: center; gap: 10px; padding: 16px 8px 14px; text-align: center;
  border-radius: 16px; background: linear-gradient(160deg, #FFFFFF 0%, var(--v-clara) 100%);
  border: 1.5px solid var(--v-borda); box-shadow: 0 10px 22px var(--v-sombra);
  font-weight: 600; color: var(--tinta);
}
.vantagem:nth-child(2) { --v: #1F9A8C; --v-escuro: #0F5C53; --v-clara: #DDF4F1; --v-borda: #AEE3DC; --v-sombra: rgba(31, 154, 140, .16); }
.vantagem:nth-child(3) { --v: #D9A21B; --v-escuro: #8F6A0B; --v-clara: #FBF1D3; --v-borda: #F0D891; --v-sombra: rgba(217, 162, 27, .18); }
.vantagem:nth-child(4) { --v: #E8863C; --v-escuro: #A64E10; --v-clara: #FDEBDD; --v-borda: #F6C7A1; --v-sombra: rgba(232, 134, 60, .18); }
.vantagem:nth-child(5) { --v: #C2185B; --v-escuro: #700C35; --v-clara: #FBE3EC; --v-borda: #EFB3C9; --v-sombra: rgba(194, 24, 91, .16); }
.vantagem svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, var(--v), var(--v-escuro)); box-shadow: 0 8px 16px var(--v-sombra);
}

/* ------------------------------------------------------------- sobre nós */
/* rodada 3 (mockup dele): rótulo com linhas, foto sobre 2 formas rosa inclinadas + legenda em cartão,
   "é propósito" em rosa com coração desenhado, valores em cartões CLAROS com ícone colorido, botão,
   linha das 4 coleções e fecho "estilos diferentes, mulheres reais". */
.rotulo-linhas { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 clamp(24px, 2.8vw, 36px); font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta); }
.rotulo-linhas::before, .rotulo-linhas::after { content: ""; width: 52px; height: 1.5px; background: var(--pigmento); }
.rotulo-linhas--baixo { margin: 26px 0 0; color: var(--tinta-media); }
.sobre__retrato--novo { position: relative; margin: 0 10px 0 16px; overflow: visible; background: none; box-shadow: none; border-radius: 22px; }
.sobre__retrato--novo::before, .sobre__retrato--novo::after { content: ""; position: absolute; z-index: 0; border-radius: 30px; }
.sobre__retrato--novo::before { inset: -5% -7% -2% -4%; background: linear-gradient(150deg, #F0257F 0%, #B80D5C 100%); transform: rotate(-7deg); }
.sobre__retrato--novo::after { inset: 4% -10% 3% 8%; background: linear-gradient(150deg, #FF7DB0 0%, #E4106F 100%); transform: rotate(5deg); opacity: .85; }
.sobre__retrato--novo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; border: 5px solid #fff; box-shadow: 0 30px 60px rgba(27, 20, 16, .26); }
.sobre__retrato--novo figcaption { position: absolute; z-index: 2; left: -18px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 16px 32px rgba(27, 20, 16, .18); font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.sobre__retrato--novo figcaption svg { flex: none; color: var(--pigmento); }
.sobre__texto h2 em { position: relative; font-style: normal; color: var(--pigmento); white-space: nowrap; }
.sobre__texto h2 em::after { content: ""; position: absolute; left: 2%; right: -2%; bottom: -.12em; height: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 5 140 3 196 9' fill='none' stroke='%23E4106F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.coracao-traco { display: inline-block; width: .9em; height: .9em; margin-left: .12em; vertical-align: -.08em; color: var(--pigmento); }
.sobre__texto strong { color: var(--tinta); }

.valores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.2vw, 40px); padding-top: 0; border-top: 0; }
.valor { --vl: #E4106F; --vl-texto: #B80D5C; --vl-clara: #FDE7F0; --vl-borda: #F7C3D9; --vl-sombra: rgba(228, 16, 111, .14);
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 10px; padding: 18px 18px 20px;
  border-radius: 18px; background: linear-gradient(160deg, #FFFFFF 0%, var(--vl-clara) 100%); border: 1.5px solid var(--vl-borda); box-shadow: 0 16px 32px var(--vl-sombra); }
.valor--verde { --vl: #4E8A3E; --vl-texto: #3A6A2E; --vl-clara: #EAF5E4; --vl-borda: #C9E4BD; --vl-sombra: rgba(78, 138, 62, .14); }
.valor--laranja { --vl: #F0662A; --vl-texto: #B8400C; --vl-clara: #FFEEE3; --vl-borda: #FFCFB2; --vl-sombra: rgba(240, 102, 42, .15); }
.valor__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--vl); box-shadow: 0 8px 16px var(--vl-sombra); }
.valor__titulo { font-family: var(--ui); font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--vl-texto); }
.valor__nota { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; color: var(--tinta-media); }
.sobre__acao { margin: 22px 0 0; }
.sobre__acao .btn svg { flex: none; }
.colecoes-linha { list-style: none; margin: clamp(30px, 3.6vw, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.colecoes-linha li { display: flex; align-items: center; gap: 10px; padding: 4px 20px; font-size: 14px; color: var(--tinta-media); }
.colecoes-linha li + li { border-left: 1.5px solid #F7C3D9; }
.colecoes-linha svg { flex: none; color: var(--pigmento); }

/* ----------------------------------------------------------- depoimentos */
/* mesmo padrão aprovado na Vigor: borda de cor, aspas grandes, onda no canto */
.depoimentos { align-items: stretch; }
.depoimento {
  --d: #E4106F; --d-clara: #FDE7F0; --d-sombra: rgba(228, 16, 111, .16);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  padding: 30px 26px 24px; border-radius: 22px; border: 2px solid var(--d);
  background: linear-gradient(160deg, #FFFFFF 55%, var(--d-clara) 140%); box-shadow: 0 20px 40px var(--d-sombra);
}
.depoimento:nth-child(2) { --d: #1F9A8C; --d-clara: #DDF4F1; --d-sombra: rgba(31, 154, 140, .16); }
.depoimento:nth-child(3) { --d: #D9A21B; --d-clara: #FBF1D3; --d-sombra: rgba(217, 162, 27, .18); }
.depoimento:hover { box-shadow: 0 26px 48px var(--d-sombra); }
.depoimento::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--d-clara) 0%, var(--d) 100%); opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.depoimento > :not(.depoimento__aspas) { position: relative; z-index: 1; }
.depoimento__aspas { left: auto; right: 20px; top: 0; z-index: 1; font-family: Georgia, "Times New Roman", serif; font-size: 86px; opacity: .85; color: var(--d); }
.depoimento__estrelas { order: -1; font-size: 18px; }
.depoimento blockquote { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--tinta); }
.depoimento figcaption { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 15px; color: var(--tinta); }
.depoimento figcaption small { display: block; font-size: 12px; font-weight: 500; color: var(--tinta-suave); }
.depoimento__avatar {
  display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%;
  color: #fff; font-size: 14px; font-weight: 800; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--d), 0 8px 16px var(--d-sombra);
  background: linear-gradient(135deg, #F0257F, #9A0E4A);
}
.depoimento__avatar--jade { background: linear-gradient(135deg, #2FB5A6, #0F5C53); }
.depoimento__avatar--ocre { background: linear-gradient(135deg, #F2C14E, #A87A0C); }

/* --------------------------------------------------------------- contato */
.cartao {
  --c: #E4106F; --c-escuro: #9A0E4A; --c-clara: #FDE7F0; --c-borda: #F7C3D9; --c-sombra: rgba(228, 16, 111, .14);
  border: 1.5px solid var(--c-borda); background: linear-gradient(160deg, #FFFFFF 0%, var(--c-clara) 100%); box-shadow: 0 10px 22px var(--c-sombra);
}
.cartao:nth-child(2) { --c: #1F9A8C; --c-escuro: #0F5C53; --c-clara: #DDF4F1; --c-borda: #AEE3DC; --c-sombra: rgba(31, 154, 140, .14); }
.cartao:nth-child(3) { --c: #D9A21B; --c-escuro: #8F6A0B; --c-clara: #FBF1D3; --c-borda: #F0D891; --c-sombra: rgba(217, 162, 27, .16); }
.cartao:nth-child(4) { --c: #E8863C; --c-escuro: #A64E10; --c-clara: #FDEBDD; --c-borda: #F6C7A1; --c-sombra: rgba(232, 134, 60, .16); }
.cartao__icone { color: #fff; background: linear-gradient(145deg, var(--c), var(--c-escuro)); box-shadow: 0 8px 16px var(--c-sombra); }
.formulario { border: 1.5px solid #F7C3D9; box-shadow: 0 24px 50px rgba(228, 16, 111, .14); }

/* ------------------------------------------------------------- novidades */
/* cartão CLARO com borda rosa: o rosa cheio agora é do rodapé logo abaixo (não empilhar rosa sobre rosa) */
.novidades { background: #fff; color: var(--tinta); padding: 0 var(--gutter) var(--respiro); }
.novidades__interno {
  max-width: calc(var(--shell) - 2 * var(--gutter));
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 36px); border-radius: 24px; flex-wrap: nowrap;
  background: linear-gradient(135deg, #FFFFFF 0%, #FDE7F0 100%); border: 2px solid #F0257F;
  box-shadow: 0 20px 44px rgba(228, 16, 111, .16);
}
.novidades h2 { color: var(--tinta); }
.novidades p { color: var(--tinta-suave); opacity: 1; }
.novidades__icone { color: var(--pigmento); }
.novidades__form { flex: 1 1 280px; min-width: 0; max-width: 380px; border: 1.5px solid #F7C3D9; }

/* ---------------------------------------------------------------- rodapé */
/* ele (13/09): "no rodapé dar um destaque, colocar uma cor viva mesmo" — rosa da marca cheio, texto branco */
.rodape { background: linear-gradient(135deg, #F0257F 0%, #D10E69 45%, #9A0E4A 100%); color: rgba(255, 255, 255, .9); border-top: 0; }
.rodape .cartao__rotulo { color: rgba(255, 255, 255, .72); }
.rodape .cartao__valor, .rodape a { color: #fff; }
.rodape a:hover { color: #FFE3A1; }
.rodape-marca__nome { color: #fff; }
.rodape-marca__sub { color: rgba(255, 255, 255, .78); }
.rodape__rede { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .14); color: #fff; }
.rodape__rede:hover { background: #fff; border-color: #fff; color: var(--pigmento); }
.rodape__barra { background: rgba(60, 0, 25, .22); color: rgba(255, 255, 255, .82); border-top: 1px solid rgba(255, 255, 255, .18); }
.rodape__menu a:hover { color: #FFE3A1; }

@media (max-width: 760px) {
  .novidades__interno { flex-wrap: wrap; }
  .novidades__form { max-width: none; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .valores { grid-template-columns: 1fr; }
  .colecoes-linha li { padding: 4px 12px; }
  .colecoes-linha li + li { border-left: 0; }
  .sobre__retrato--novo { margin: 10px 18px 0; }
  .sobre__retrato--novo figcaption { left: -8px; }
}