/* Filó Rendeira v3 — conversão, escala tipográfica, responsividade e movimento. */
:root {
  --fr3-instagram-height: 38px;
  --fr3-mobile-gutter: clamp(15px, 4.5vw, 22px);
}

html {
  scroll-padding-top: calc(132px + env(safe-area-inset-top));
  overflow-x: clip;
}

body.fr-v3 {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.fr-v3::before { display: none; }
body.fr-v3 *, body.fr-v3 *::before, body.fr-v3 *::after { box-sizing: border-box; }
body.fr-v3 :where(main, section, article, div, nav, header, footer) { min-width: 0; }
body.fr-v3 :where(img, video, iframe, svg) { max-width: 100%; }
body.fr-v3 :where(p, li) { overflow-wrap: break-word; }

/* Títulos quebram somente entre palavras. A folha legada usa
   overflow-wrap:anywhere globalmente, o que separava "personalizadas". */
body.fr-v3 :where(h1, h2, h3, h4, h5, h6),
body.fr-v3 :where(.fr-model-title, .fr-section-head h2, .fr-benefits-head h2, .fr-support-head h2) {
  max-inline-size: 100%;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}

/* Instagram visível acima da navegação em todas as páginas. */
.fr3-instagram-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147483100;
  height: calc(var(--fr3-instagram-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  color: #fff;
  background: linear-gradient(96deg, #5d3040 0%, #9d5d6b 48%, #bd7a89 100%);
  box-shadow: 0 8px 24px rgba(53, 39, 36, .12);
}

.fr3-instagram-inner {
  width: min(1320px, 100%);
  height: var(--fr3-instagram-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font: 600 11px/1.2 Montserrat, system-ui, sans-serif;
  letter-spacing: .035em;
}

.fr3-instagram-pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f8d9df;
  box-shadow: 0 0 0 0 rgba(248, 217, 223, .65);
  animation: fr3-pulse 2.4s ease-out infinite;
}

.fr3-instagram-inner a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  text-decoration: none;
}

.fr3-instagram-inner a strong {
  padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,.34);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fr3-instagram-inner a:hover strong,
.fr3-instagram-inner a:focus-visible strong { text-decoration: underline; }

@keyframes fr3-pulse {
  70%, 100% { box-shadow: 0 0 0 8px rgba(248, 217, 223, 0); }
}

body.fr-v3 #navbar.fr2-navbar {
  inset: calc(var(--fr3-instagram-height) + env(safe-area-inset-top)) 0 auto !important;
}

body.fr-v3 .fr2-mobile-menu { padding-top: calc(28px + env(safe-area-inset-top)); }
body.fr-v3 .fr3-mobile-instagram {
  justify-content: space-between;
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(120deg, #743f50, #b36d7e) !important;
}
body.fr-v3 .fr3-mobile-instagram span { font-size: 12px; font-weight: 600; opacity: .9; }

/* Escala tipográfica mais equilibrada. */
body.fr-v3 .fr-model-title {
  max-width: 15ch;
  font-size: clamp(40px, 4.35vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.038em !important;
}

body.fr-v3 .fr-model-subtitle { font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.72; }
body.fr-v3 .fr-section-head h2,
body.fr-v3 .fr-benefits-head h2,
body.fr-v3 .fr-support-head h2,
body.fr-v3 .fr2-intent-head h2,
body.fr-v3 .fr2-guide-head h2 {
  font-size: clamp(32px, 3.25vw, 48px) !important;
  line-height: 1.07 !important;
}

body.fr-v3 .fr2-guide-index h1,
body.fr-v3 .fr2-guide-hero h1 { font-size: clamp(42px, 5.8vw, 72px) !important; }
body.fr-v3 .fr2-article p { font-size: clamp(16px, 1.25vw, 17px); line-height: 1.78; }

/* Compensa a nova faixa superior sem desperdiçar tela. */
body.fr-v3 .fr-model-hero { padding-top: clamp(158px, 12vw, 184px) !important; }
body.fr-v3 .piece-hero,
body.fr-v3 .fr-piece-hero { padding-top: clamp(158px, 12vw, 178px) !important; }
body.fr-v3 .fr2-guide-hero { padding-top: clamp(172px, 13vw, 190px); }
body.fr-v3 .fr2-guide-index { padding-top: clamp(172px, 13vw, 190px); }

.fr3-hero-instagram {
  width: fit-content;
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fr-rose-900) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.fr3-hero-instagram > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#833ab4,#fd1d1d,#fcb045); }
.fr3-hero-instagram strong { font-weight: 800; white-space: nowrap; }
.fr3-hero-instagram:hover strong { text-decoration: underline; }

/* Jornada interativa da encomenda. */
.fr3-journey {
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(132px + env(safe-area-inset-top));
  padding: clamp(72px, 8vw, 112px) 24px;
  color: var(--fr-ink);
  background:
    radial-gradient(circle at 92% 12%, rgba(216,167,177,.32), transparent 27rem),
    linear-gradient(145deg, #fffdfb 0%, #f7ecee 100%);
}

.fr3-journey::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -130px;
  bottom: -130px;
  border: 1px solid rgba(157,93,107,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(157,93,107,.035), 0 0 0 72px rgba(157,93,107,.025);
}

.fr3-journey-wrap { width: min(1240px, 100%); margin: 0 auto; position: relative; z-index: 1; }
.fr3-journey-head { margin-bottom: 36px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); gap: 28px; align-items: end; }
.fr3-journey-head h2 { max-width: 760px; margin: 10px 0 0; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
.fr3-journey-head p { margin: 0; color: var(--fr-muted); font-size: 16px; line-height: 1.75; }
.fr3-journey-layout { display: grid; grid-template-columns: minmax(285px,.72fr) minmax(0,1.28fr); gap: 18px; align-items: stretch; }

.fr3-step-nav {
  padding: 11px;
  display: grid;
  gap: 7px;
  border: 1px solid var(--fr-line);
  border-radius: 26px 26px 26px 8px;
  background: rgba(255,255,255,.7);
  box-shadow: var(--fr-shadow-sm);
}

.fr3-step-button {
  width: 100%;
  min-height: 75px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 17px;
  color: var(--fr-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.fr3-step-button > span {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fr-line);
  border-radius: 14px 14px 14px 4px;
  color: var(--fr-rose-800);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.fr3-step-button strong { font: 700 18px/1.05 "Playfair Display", Georgia, serif; }
.fr3-step-button small { color: var(--fr-muted); font-size: 11px; }
.fr3-step-button:hover { transform: translateX(3px); background: rgba(255,255,255,.8); }
.fr3-step-button.is-active { border-color: rgba(157,93,107,.24); background: #fff; box-shadow: 0 11px 28px rgba(53,39,36,.08); }
.fr3-step-button.is-active > span { color: #fff; border-color: var(--fr-rose-800); background: var(--fr-rose-800); }

.fr3-step-stage {
  min-height: 452px;
  padding: clamp(27px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  border-radius: 30px 30px 30px 9px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(227,188,196,.2), transparent 15rem),
    linear-gradient(145deg, #3b2b2a, #5a3d40);
  box-shadow: 0 26px 76px rgba(53,39,36,.18);
  outline: none;
}

.fr3-step-stage:focus-visible { outline: 3px solid rgba(201,140,152,.55); outline-offset: 4px; }
.fr3-step-progress { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.fr3-step-progress span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--fr-rose-300), #d2b27c); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.fr3-step-content { margin: auto 0; padding: 33px 0; }
.fr3-step-content.is-changing { animation: fr3-content-in .35s ease both; }
.fr3-step-kicker { color: var(--fr-rose-300); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fr3-step-content h3 { max-width: 650px; margin: 10px 0 16px; color: #fff; font-size: clamp(34px,4vw,52px); line-height: 1.02; letter-spacing: -.025em; }
.fr3-step-content p { max-width: 650px; margin: 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.72; }
.fr3-step-content ul { margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.fr3-step-content li { padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.83); background: rgba(255,255,255,.06); font-size: 11px; font-weight: 700; }
.fr3-step-controls { display: flex; justify-content: space-between; gap: 12px; }
.fr3-step-controls button { min-height: 46px; padding: 0 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #fff; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 800; cursor: pointer; }
.fr3-step-controls button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.fr3-step-controls button:disabled { opacity: .34; cursor: default; }
.fr3-journey-cta { margin-top: 18px; padding: 18px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 15px; border: 1px solid var(--fr-line); border-radius: 20px 20px 20px 7px; background: rgba(255,255,255,.72); }
.fr3-journey-cta > span { margin-right: auto; color: var(--fr-muted); font-size: 13px; font-weight: 700; }
.fr3-journey-instagram { color: var(--fr-rose-900) !important; font-size: 12px; font-weight: 800; text-decoration: none; }
.fr3-journey-instagram:hover { text-decoration: underline; }

@keyframes fr3-content-in {
  from { opacity: .25; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Movimento de entrada suave e sem custo alto. */
html.fr3-motion-enabled .fr-motion,
html.fr3-motion-enabled .fr-benefit-card,
html.fr3-motion-enabled .fr-portfolio-card,
html.fr3-motion-enabled .fr-support-card,
html.fr3-motion-enabled .fr-mosaic-card,
html.fr3-motion-enabled .fr-lookbook-card,
html.fr3-motion-enabled .fr2-intent-grid > a {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .52s ease var(--fr3-stagger, 0ms),
    transform .52s cubic-bezier(.2,.75,.25,1) var(--fr3-stagger, 0ms),
    box-shadow .28s ease,
    border-color .28s ease;
}

html.fr3-motion-enabled :where(.fr-motion,.fr-benefit-card,.fr-portfolio-card,.fr-support-card,.fr-mosaic-card,.fr-lookbook-card).is-visible,
html.fr3-motion-enabled .fr2-intent-grid > a.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Microinterações editoriais inspiradas em vitrines de moda: a imagem responde,
   mas o bloco permanece estável e os botões continuam sendo o foco. */
body.fr-v3 :where(.fr-mosaic-card, .fr-lookbook-card) { overflow: hidden; }
body.fr-v3 :where(.fr-mosaic-card, .fr-lookbook-card) img {
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  transform: scale(1.001);
}

body.fr-v3 :where(.fr-btn-primary, .fr-btn-secondary, .button-primary, .button-outline) {
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease !important;
}

body.fr-v3 :where(.fr-btn-primary, .fr-btn-secondary, .button-primary, .button-outline):active {
  transform: translateY(1px) scale(.99);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.fr-v3 .fr-model-title { font-size: clamp(46px, 4.9vw, 58px) !important; }
}

/* A jornada entra como um único bloco; evita que título e texto se cruzem durante a animação antiga. */
html.filo-main-motion-ready body.fr-v3 .fr3-journey .filo-main-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Ajustes universais para iPhone, Samsung e telas estreitas. */
@media (max-width: 767px) {
  :root { --fr3-instagram-height: 35px; }
  html { scroll-padding-top: calc(118px + env(safe-area-inset-top)); }
  .fr3-instagram-inner { justify-content: space-between; gap: 8px; font-size: 10px; }
  .fr3-instagram-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fr3-instagram-inner a strong { display: none; }
  .fr3-instagram-inner a > span { white-space: nowrap; font-size: 10px; }

  body.fr-v3 #navbar.fr2-navbar { padding: 8px 8px 0 !important; }
  body.fr-v3 .fr2-nav-shell { min-height: 64px; padding: 7px 7px 7px 12px; gap: 8px; border-radius: 18px; }
  body.fr-v3 .fr2-brand-mark { width: 42px; height: 42px; }
  body.fr-v3 .fr2-brand-copy strong { font-size: clamp(19px, 6vw, 23px); }
  body.fr-v3 .fr2-menu-toggle { width: 47px; height: 47px; }

  body.fr-v3 :where(input, select, textarea, button) { font-size: 16px; }
  body.fr-v3 :where(a, button, summary, input, select) { touch-action: manipulation; }
  body.fr-v3 h1,
  body.fr-v3 .fr-model-title,
  body.fr-v3 .fr2-guide-index h1,
  body.fr-v3 .fr2-guide-hero h1 { font-size: clamp(32px, 9.8vw, 42px) !important; line-height: 1.06 !important; letter-spacing: -.028em !important; }
  body.fr-v3 h2,
  body.fr-v3 .fr-section-head h2,
  body.fr-v3 .fr-benefits-head h2,
  body.fr-v3 .fr-support-head h2,
  body.fr-v3 .fr2-intent-head h2,
  body.fr-v3 .fr2-guide-head h2 { font-size: clamp(27px, 7.8vw, 35px) !important; line-height: 1.1 !important; }
  body.fr-v3 h3 { line-height: 1.14; }
  body.fr-v3 :where(p, li) { font-size: 15.5px; line-height: 1.68; }
  body.fr-v3 .fr-mini-label { font-size: 10px !important; letter-spacing: .13em !important; }

  body.fr-v3 #hero.fr-model-hero,
  body.fr-v3 .fr-model-hero { padding: 132px var(--fr3-mobile-gutter) 62px !important; }
  body.fr-v3 .piece-hero,
  body.fr-v3 .fr-piece-hero { padding: 132px var(--fr3-mobile-gutter) 58px !important; }
  body.fr-v3 .fr2-guide-hero { padding: 134px var(--fr3-mobile-gutter) 54px; }
  body.fr-v3 .fr2-guide-index { padding: 134px var(--fr3-mobile-gutter) 70px; }
  body.fr-v3 .fr-portfolio-hero-v9 { padding-top: 134px !important; }
  body.fr-v3 .section-padding,
  body.fr-v3 .fr-model-section,
  body.fr-v3 .fr-benefits-section,
  body.fr-v3 .fr-editorial-section,
  body.fr-v3 .fr-support-section { padding-left: var(--fr3-mobile-gutter) !important; padding-right: var(--fr3-mobile-gutter) !important; }
  body.fr-v3 .fr-model-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  body.fr-v3 .fr-model-actions a { width: 100%; }
  .fr3-hero-instagram { width: 100%; align-items: flex-start; line-height: 1.45; }

  .fr3-journey { padding: 66px var(--fr3-mobile-gutter); }
  .fr3-journey-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 25px; }
  .fr3-journey-head h2 { font-size: clamp(31px, 9vw, 42px); }
  .fr3-journey-head p { font-size: 15px; }
  .fr3-journey-layout { grid-template-columns: 1fr; gap: 11px; }
  .fr3-step-nav { grid-template-columns: repeat(5, minmax(78px,1fr)); overflow-x: auto; padding: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .fr3-step-button { min-width: 78px; min-height: 82px; padding: 9px 6px; display: flex; flex-direction: column; justify-content: center; gap: 5px; text-align: center; scroll-snap-align: center; }
  .fr3-step-button > span { width: 31px; height: 31px; border-radius: 10px 10px 10px 3px; }
  .fr3-step-button strong { font: 800 10px/1.15 Montserrat, sans-serif; }
  .fr3-step-button small { display: none; }
  .fr3-step-button:hover { transform: none; }
  .fr3-step-stage { min-height: 410px; padding: 24px 19px; border-radius: 24px 24px 24px 7px; }
  .fr3-step-content { padding: 28px 0; }
  .fr3-step-content h3 { font-size: clamp(30px, 9vw, 40px); }
  .fr3-step-content p { font-size: 15px; }
  .fr3-step-content ul { display: grid; align-items: start; justify-items: start; }
  .fr3-step-controls button { min-height: 48px; font-size: 10px; }
  .fr3-journey-cta { padding: 16px; display: grid; grid-template-columns: 1fr; text-align: center; }
  .fr3-journey-cta > span { margin: 0; }
  .fr3-journey-cta a { width: 100%; justify-content: center; }

  body.fr-v3 .fr2-article-shell { width: min(100% - 2 * var(--fr3-mobile-gutter), 1120px); }
  body.fr-v3 .fr2-footer { padding-left: var(--fr3-mobile-gutter); padding-right: var(--fr3-mobile-gutter); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  body.fr-v3 .floating-whatsapp-smart { right: max(12px, env(safe-area-inset-right)) !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  body.fr-v3 #cookie-banner { padding: 16px var(--fr3-mobile-gutter) calc(16px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 380px) {
  .fr3-instagram-copy { display: none; }
  .fr3-instagram-inner { justify-content: center; }
  body.fr-v3 .fr2-brand-copy small { display: none; }
  body.fr-v3 .fr2-brand-mark { width: 39px; height: 39px; font-size: 24px; }
  body.fr-v3 .fr2-nav-shell { min-height: 59px; }
  body.fr-v3 .fr2-menu-toggle { width: 44px; height: 44px; }
  body.fr-v3 #hero.fr-model-hero,
  body.fr-v3 .fr-model-hero,
  body.fr-v3 .piece-hero,
  body.fr-v3 .fr-piece-hero,
  body.fr-v3 .fr2-guide-hero,
  body.fr-v3 .fr2-guide-index { padding-top: 125px !important; }
}

@media (hover: hover) and (pointer: fine) {
  body.fr-v3 .fr-hero-visual { transition: transform .45s ease; }
  body.fr-v3 .fr-hero-visual:hover { transform: translateY(-4px); }
  body.fr-v3 :where(.fr-mosaic-card, .fr-lookbook-card):hover img { transform: scale(1.045); filter: saturate(1.035); }
  body.fr-v3 .fr2-intent-grid > a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(53,39,36,.1); }
  body.fr-v3 :where(.fr-btn-primary, .fr-btn-secondary, .button-primary, .button-outline):hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .fr3-instagram-pulse { animation: none; }
  .fr3-step-content.is-changing { animation: none; }
  .fr3-step-progress span,
  html.fr3-motion-enabled .fr-motion,
  html.fr3-motion-enabled .fr-benefit-card,
  html.fr3-motion-enabled .fr-portfolio-card,
  html.fr3-motion-enabled .fr-support-card,
  html.fr3-motion-enabled .fr-mosaic-card,
  html.fr3-motion-enabled .fr-lookbook-card,
  html.fr3-motion-enabled .fr2-intent-grid > a { transition: none !important; transform: none !important; opacity: 1 !important; }
  body.fr-v3 :where(.fr-mosaic-card, .fr-lookbook-card) img { transition: none !important; transform: none !important; }
}