/* ==========================================================================
   YOU MOVE — v2
   Dois atos: o FILME (sequência de frames controlada pelo scroll, escuro)
   e a LOJA (editorial, claro). Roda sobre Bootstrap 5.3.
   Prefixo .ym- em tudo, para não conflitar com o tema WordPress.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --ym-navy-900:#050F1D;
  --ym-navy-800:#0B1B33;
  --ym-navy-700:#12284C;
  --ym-navy-600:#1B3A6B;
  --ym-navy-300:#7C93B5;
  --ym-navy-100:#E4EAF2;

  --ym-white:#FFFFFF;
  --ym-off:#F5F6F8;
  --ym-sand:#EFF1F4;
  --ym-line:#E2E6EC;

  --ym-gray-700:#4A5568;
  --ym-gray-500:#7C8698;

  /* Laranja — SOMENTE detalhe. Nunca área grande. */
  --ym-orange:#F26A1B;
  --ym-orange-soft:#FDF0E7;

  /* Rosa — SOMENTE no selo da linha feminina. Nunca no layout. */
  --ym-femma:#B93A63;

  --ym-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --ym-body:"Inter","Helvetica Neue",Arial,sans-serif;
  /* Serifa de texto, no espírito do Times, mas mais fina e desenhada.
     Fica reservada ao mote da marca e às falas — nunca dividindo um
     título ao meio com a sans. */
  --ym-accent:"Cormorant Garamond","Times New Roman",Times,serif;

  --ym-section:clamp(4.5rem,9vw,8.5rem);
  --ym-radius:14px;
  --ym-radius-lg:22px;
  --ym-ease:cubic-bezier(.22,.61,.36,1);

  --ym-hud:.66rem;              /* micro-tipografia do HUD */
  --ym-track:.28em;             /* tracking do HUD */
}

/* --------------------------------------------------------------------------
   2. BASE
   O tema não carrega Bootstrap (ver inc/enqueue.php). Este bloco repõe o que
   o Reboot dava e de que o layout depende — box-sizing acima de tudo, sem o
   qual todo campo com width:100% e padding estoura o container.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{margin:0;}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;}
p{margin-top:0;margin-bottom:1rem;}
ul,ol{margin-top:0;margin-bottom:1rem;padding-left:2rem;}
dl,dd{margin-top:0;margin-bottom:1rem;}
hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.2;}
strong,b{font-weight:600;}
small{font-size:.875em;}
sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline;}
table{caption-side:bottom;border-collapse:collapse;}
th{text-align:inherit;}
label{display:inline-block;}
button{border-radius:0;}
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button:disabled,[type="button"]:disabled,[type="submit"]:disabled{cursor:default;}
textarea{resize:vertical;}
fieldset{min-width:0;padding:0;margin:0;border:0;}
legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:1.2rem;}
img,svg{vertical-align:middle;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  font-family:var(--ym-body);color:var(--ym-navy-800);
  background:var(--ym-navy-900);
  /* 18px de base: o texto corrido lê melhor e o Google gosta — sem virar
     aquele corpo gigante que faz a página parecer apresentação. */
  font-size:1.125rem;line-height:1.7;letter-spacing:-.005em;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--ym-display);font-weight:400;letter-spacing:-.035em;line-height:1.02;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}
::selection{background:var(--ym-navy-800);color:#fff;}
:focus-visible{outline:2px solid var(--ym-orange);outline-offset:3px;border-radius:4px;}

.ym-section{padding-block:var(--ym-section);}
.ym-container{max-width:1240px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.ym-narrow{max-width:760px;}

.ym-eyebrow{
  font-family:var(--ym-body);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ym-gray-500);
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;
}
.ym-eyebrow::before{content:"";width:26px;height:1px;background:var(--ym-orange);flex:none;}
.ym-eyebrow--light{color:var(--ym-navy-300);}

.ym-h2{font-size:clamp(2rem,4.1vw,3.35rem);font-weight:300;}
.ym-h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:400;letter-spacing:-.025em;}
.ym-lead{font-size:clamp(1.14rem,1.5vw,1.3rem);line-height:1.68;color:var(--ym-gray-700);}
/* O mote da marca — o único lugar do site onde uma serifa divide a frase
   com a sans. Em todo o resto os títulos são de uma peça só. */
.ym-mote{
  font-family:var(--ym-accent);font-style:normal;font-weight:400;
  letter-spacing:0;line-height:1.06;
  font-size:clamp(2.6rem,5.4vw,4.4rem);
}
.ym-mote em{font-style:italic;font-weight:300;}
.ym-muted{color:var(--ym-gray-500);}
.ym-fine{font-size:.85rem;line-height:1.62;color:var(--ym-gray-500);}
.ym-todo{color:var(--ym-orange);}

.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}
.screen-reader-text:focus{
  position:fixed;top:1rem;left:1rem;z-index:3000;width:auto;height:auto;clip:auto;
  padding:.9rem 1.4rem;background:#fff;color:var(--ym-navy-800);border-radius:100px;font-weight:600;
}

/* utilitários próprios (o tema não carrega mais Bootstrap) */
.ym-mt{margin-top:1.5rem;}
.ym-nav__acoes{display:flex;align-items:center;gap:.5rem;}

/* --------------------------------------------------------------------------
   3. BOTÕES
   -------------------------------------------------------------------------- */
.ym-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ym-body);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  padding:1.05rem 2.1rem;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:all .35s var(--ym-ease);white-space:nowrap;
}
.ym-btn--primary{background:var(--ym-navy-800);color:#fff;}
.ym-btn--primary:hover{background:var(--ym-navy-600);color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(11,27,51,.55);}
.ym-btn--accent{background:var(--ym-orange);color:#fff;}
.ym-btn--accent:hover{background:#DE5C10;color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(242,106,27,.6);}
.ym-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);}
.ym-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff;}
.ym-btn--outline{background:transparent;color:var(--ym-navy-800);border-color:var(--ym-line);}
.ym-btn--outline:hover{border-color:var(--ym-navy-800);background:var(--ym-navy-800);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(11,27,51,.45);}
.ym-btn--block{width:100%;}
.ym-btn--lg{padding:1.2rem 2.6rem;font-size:.95rem;}

/* ==========================================================================
   ATO I — O FILME
   ========================================================================== */

/* 4. Palco -----------------------------------------------------------------
   A altura da seção é o "comprimento" do filme: 100vh de palco grudado
   + o resto vira curso de scroll. 400vh = 3 telas de rolagem para atravessar
   o filme inteiro. Abaixo de ~320vh os quadros começam a "pular"; acima de
   ~500vh a abertura cansa antes de chegar na loja.
   -------------------------------------------------------------------------- */
.ym-film{position:relative;height:400vh;background:var(--ym-navy-900);}
.ym-film__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--ym-navy-900);
}
.ym-film__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
/* Desktop: SÓ o gradiente da esquerda para a direita. O vídeo fica em cor.
   As duas faixas de cima e de baixo são leves e existem só para o menu e o
   "role para continuar" não flutuarem sobre uma área clara. */
.ym-film__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(5,15,29,.95) 0%,
      rgba(5,15,29,.88) 24%,
      rgba(5,15,29,.5)  46%,
      rgba(5,15,29,.12) 64%,
      rgba(5,15,29,0)   78%),
    /* rimo direito: é onde vive o contador do HUD */
    linear-gradient(270deg, rgba(5,15,29,.5) 0%, rgba(5,15,29,.16) 9%, transparent 18%),
    linear-gradient(to bottom,
      rgba(5,15,29,.28) 0%, transparent 14%,
      transparent 78%, rgba(5,15,29,.45) 90%, rgba(5,15,29,.72) 100%);
}
/* leve vinheta de grão, para o upscale dos frames não aparecer */
.ym-film__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;
}

/* 5. Carregamento ---------------------------------------------------------- */
.ym-loader{
  position:absolute;inset:0;z-index:20;display:grid;place-content:center;gap:1.6rem;
  background:var(--ym-navy-900);transition:opacity .8s var(--ym-ease),visibility .8s;
  justify-items:center;
}
.ym-loader.is-done{opacity:0;visibility:hidden;}
.ym-loader img{width:210px;opacity:.9;}
.ym-loader__bar{width:160px;height:1px;background:rgba(255,255,255,.18);overflow:hidden;}
.ym-loader__fill{display:block;height:100%;width:0;background:var(--ym-orange);transition:width .25s linear;}
.ym-loader__pct{
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;
}

/* 6. HUD ------------------------------------------------------------------- */
.ym-hud{position:absolute;inset:0;z-index:10;pointer-events:none;color:#fff;}
.ym-hud > *{position:absolute;}
/* trilho de progresso */
.ym-hud__rail{
  right:clamp(1.25rem,4vw,2.5rem);top:22%;bottom:22%;width:1px;
  background:rgba(255,255,255,.14);
}
.ym-hud__rail i{
  position:absolute;left:-1px;top:0;width:3px;height:0;background:var(--ym-orange);
  border-radius:2px;
}

/* rodapé do palco */
.ym-hud__scroll{
  left:0;right:0;bottom:clamp(1.5rem,4vh,2.5rem);text-align:center;
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  color:rgba(255,255,255,.4);transition:opacity .5s;
}
.ym-hud__scroll span{display:block;width:1px;height:34px;margin:.8rem auto 0;
  background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);}

/* 7. Falas do filme -------------------------------------------------------- */
.ym-cues{
  position:absolute;inset:0;z-index:12;display:grid;
  place-items:center start;pointer-events:none;
  padding-inline:clamp(1.25rem,6vw,5rem);
}
.ym-cue{
  /* com a serifa em 1.18em, as falas ficaram mais largas: 620px empurrava
     "PERFORMANCE PARA" para uma terceira linha */
  grid-area:1/1;max-width:min(58vw,760px);text-align:left;
  opacity:0;transform:translateY(26px);will-change:opacity,transform;
}
.ym-cue__kicker{
  display:block;font-size:var(--ym-hud);letter-spacing:var(--ym-track);
  text-transform:uppercase;color:var(--ym-orange);margin-bottom:1.6rem;
}
.ym-cue__line{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1.75rem,4.4vw,3.9rem);line-height:1.04;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 40px rgba(5,15,29,.6);text-wrap:balance;margin:0;
}
.ym-cue__line--sm{
  font-size:clamp(1.15rem,2.2vw,1.95rem);line-height:1.3;letter-spacing:.05em;
}
/* A Cormorant tem altura-x bem menor que a Outfit: no mesmo corpo ela sai
   visivelmente miúda ao lado da sans. Os 1.18em devolvem a mesma estatura
   óptica, e o -0.06em de baseline realinha as duas na mesma linha. */
.ym-cue__line em{
  font-family:var(--ym-accent);font-style:italic;font-weight:400;
  font-size:1.18em;line-height:.86;position:relative;top:.045em;
  text-transform:none;letter-spacing:0;
}
/* a fala do meio é corrida: sem quebra forçada, o em não precisa do ajuste
   vertical, só do tamanho */
.ym-cue__line--sm em{line-height:1;top:.03em;}
.ym-cue__sub{
  margin:1.8rem 0 0;max-width:44ch;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.7;color:rgba(255,255,255,.74);
}
/* O botão precisa receber clique: as falas inteiras são pointer-events:none
   para não roubarem o scroll do filme. */
.ym-cue__acao{margin:2.4rem 0 0;pointer-events:auto;}

/* legendas com linha de chamada, tipo ficha técnica */
.ym-cue__specs{
  display:flex;justify-content:flex-start;gap:clamp(1.5rem,4vw,3rem);
  margin-top:2.4rem;flex-wrap:wrap;
}
.ym-cue__specs div{text-align:left;}
.ym-cue__specs dt{
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:.5rem;
}
.ym-cue__specs dd{
  font-family:var(--ym-display);font-weight:300;font-size:1.25rem;
  letter-spacing:-.02em;color:#fff;margin:0;
}

/* ==========================================================================
   ATO II — A LOJA
   ========================================================================== */

/* 9. NAV ------------------------------------------------------------------- */
.ym-header{position:fixed;top:0;left:0;right:0;z-index:1030;}
/* Sobre o filme: gradiente azul de cima para baixo, garantindo leitura do
   menu sem escurecer o vídeo inteiro. Ao grudar, ele some e a barra vira
   azul sólido. Sem backdrop-filter em lugar nenhum — era ele que quebrava
   o painel do menu no celular. */
.ym-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:230%;
  pointer-events:none;z-index:-2;
  background:linear-gradient(to bottom,
    rgba(5,15,29,.95) 0%, rgba(5,15,29,.72) 38%,
    rgba(5,15,29,.32) 70%, rgba(5,15,29,0) 100%);
  transition:opacity .45s var(--ym-ease);
}
.ym-header.is-solid::before{opacity:0;}

.ym-topbar{
  background:#020A14;color:rgba(255,255,255,.75);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.62rem 1rem;
  max-height:3rem;overflow:hidden;
  transition:max-height .45s var(--ym-ease),padding .45s var(--ym-ease),opacity .3s;
}
/* ao virar sólida, a barra de anúncio recolhe e devolve altura à página */
.ym-header.is-solid .ym-topbar{max-height:0;padding-block:0;opacity:0;}
.ym-topbar b{color:#fff;font-weight:600;}

.ym-nav{
  position:relative;padding:1.1rem 0;
  transition:padding .45s var(--ym-ease),border-color .45s var(--ym-ease);
  background:transparent;border-bottom:1px solid transparent;
}
/* O vidro fosco vive num pseudo-elemento, NÃO na .ym-nav.
   Motivo: backdrop-filter transforma o elemento em bloco de contenção para
   descendentes position:fixed — e o painel do menu mobile é um deles. Com o
   filtro na .ym-nav, o painel passava a se medir pela barra (80px de altura)
   em vez da tela, e o menu travava depois que a nav virava sólida.
   Pseudo-elemento não contém nada, então o problema não existe. */
.ym-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  opacity:0;transition:opacity .45s var(--ym-ease);
  background:var(--ym-navy-800);
}
.ym-header.is-solid .ym-nav::before{opacity:1;}
.ym-header.is-solid .ym-nav{border-bottom-color:rgba(255,255,255,.1);padding:.55rem 0;}
.ym-header.is-solid .ym-nav__logo img{width:150px;}
.ym-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.ym-nav__logo img{width:180px;height:auto;display:block;transition:width .45s var(--ym-ease);}
.ym-nav__links{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0;}
.ym-nav__links a{
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  font-weight:500;color:rgba(255,255,255,.66);position:relative;padding-block:.3rem;
  transition:color .3s;
}
.ym-nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ym-orange);transition:width .35s var(--ym-ease);
}
.ym-nav__links a:hover{color:#fff;}
.ym-nav__links a:hover::after{width:100%;}
.ym-header.is-solid .ym-nav__links a{color:rgba(255,255,255,.78);}
.ym-header.is-solid .ym-nav__links a:hover{color:#fff;}
.ym-nav .ym-btn{padding:.68rem 1.45rem;font-size:.78rem;}
.ym-nav__cta{background:transparent;color:#fff;border-color:rgba(255,255,255,.38);}
.ym-nav__cta:hover{background:#fff;color:var(--ym-navy-800);border-color:#fff;}
.ym-nav__toggle{
  display:none;background:none;border:0;padding:.4rem;cursor:pointer;
  position:relative;z-index:1060;      /* acima do painel, senão não fecha */
}
.ym-nav__toggle span{
  display:block;width:22px;height:1.5px;background:#fff;margin:5px 0;
  transition:transform .35s var(--ym-ease),opacity .2s;
}
.ym-header.is-solid .ym-nav__toggle span{background:#fff;}
/* aberto: vira X, sempre branco (o painel atrás é escuro) */
.ym-header.is-menu-open .ym-nav__toggle span,
.ym-header.is-menu-open.is-solid .ym-nav__toggle span{background:#fff;}
.ym-header.is-menu-open .ym-nav__toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.ym-header.is-menu-open .ym-nav__toggle span:nth-child(2){opacity:0;}
.ym-header.is-menu-open .ym-nav__toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* véu: fecha ao tocar fora do painel */
.ym-nav__backdrop{
  position:fixed;inset:0;z-index:1040;background:rgba(2,8,18,.6);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ym-ease),visibility .35s;
}
.ym-nav__backdrop.is-on{opacity:1;visibility:visible;}

/* 10. Marquee -------------------------------------------------------------- */
.ym-marquee{
  background:var(--ym-navy-800);border-block:1px solid rgba(255,255,255,.07);
  padding:1.15rem 0;overflow:hidden;white-space:nowrap;
}
.ym-marquee__track{display:inline-flex;align-items:center;animation:ym-slide 46s linear infinite;}
.ym-marquee__track span{
  font-family:var(--ym-display);font-size:clamp(.95rem,1.6vw,1.25rem);font-weight:300;
  color:rgba(255,255,255,.4);letter-spacing:.16em;text-transform:uppercase;padding-inline:2rem;
}
.ym-marquee__track i{width:4px;height:4px;border-radius:50%;background:var(--ym-orange);opacity:.85;flex:none;}
@keyframes ym-slide{to{transform:translateX(-50%)}}

/* 11. Manifesto (substitui a seção da fundadora) --------------------------- */
.ym-manifesto{background:var(--ym-navy-800);color:#fff;position:relative;overflow:hidden;}
.ym-manifesto__mark{
  position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(52vw,620px);opacity:.045;pointer-events:none;
}
.ym-manifesto__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.3fr;
  gap:clamp(2.5rem,7vw,6rem);align-items:start;
}
.ym-manifesto h2{color:#fff;}
.ym-manifesto .ym-lead{color:rgba(255,255,255,.82);}
.ym-manifesto p{color:rgba(255,255,255,.62);margin-bottom:1.4rem;}
.ym-manifesto__quando{
  list-style:none;padding:0;margin:2rem 0;
  border-left:1px solid rgba(255,255,255,.16);padding-left:1.6rem;
}
.ym-manifesto__quando li{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.9);margin-bottom:.55rem;
}
.ym-manifesto__assina{
  margin-top:2.4rem;font-family:var(--ym-display);font-weight:400;
  font-size:1.1rem;letter-spacing:.22em;color:#fff !important;
}
.ym-manifesto__creed{
  margin-top:2.8rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
.ym-manifesto__creed dt{
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  color:var(--ym-orange);margin-bottom:.7rem;
}
.ym-manifesto__creed dd{
  margin:0;font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.68);
}

/* 12. Cards do dia --------------------------------------------------------- */
.ym-day__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ym-line);
  border:1px solid var(--ym-line);border-radius:var(--ym-radius-lg);overflow:hidden;margin-top:3.5rem;
}
.ym-day__card{background:#fff;padding:clamp(1.8rem,3vw,2.8rem);}
.ym-day__num{font-family:var(--ym-display);font-size:.78rem;letter-spacing:.2em;color:var(--ym-orange);margin-bottom:1.4rem;}
.ym-day__card h3{margin-bottom:.9rem;}
.ym-day__card p{font-size:.97rem;color:var(--ym-gray-700);margin:0;}

/* --------------------------------------------------------------------------
   12b. DIVISÓRIA EM VÍDEO
   Sem scrub: o vídeo roda sozinho, em loop, mudo. É a fronteira entre o
   discurso da marca e a loja. O material é vertical, então ele é emoldurado
   em vez de esticado — full-bleed com fonte vertical vira zoom no rótulo.
   -------------------------------------------------------------------------- */
.ym-break{
  position:relative;overflow:hidden;background:var(--ym-navy-900);
  padding-block:clamp(3.5rem,7vw,6.5rem);
}
.ym-break::before{                       /* halo frio atrás da moldura */
  content:"";position:absolute;right:8%;top:50%;transform:translateY(-50%);
  width:46vw;height:46vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(27,58,107,.42) 0%,transparent 68%);
}
.ym-break__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .62fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.ym-break__kicker{
  font-size:var(--ym-hud);letter-spacing:var(--ym-track);text-transform:uppercase;
  color:var(--ym-orange);margin-bottom:1.4rem;
}
.ym-break__line{
  font-family:var(--ym-display);font-weight:200;
  font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.16;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;margin:0;
}
.ym-break__sub{
  margin:1.5rem 0 0;max-width:56ch;font-size:1.02rem;line-height:1.72;
  color:rgba(255,255,255,.62);
}
.ym-break__sub strong{color:rgba(255,255,255,.92);font-weight:600;}
.ym-break__frame{
  margin:0;justify-self:end;width:min(100%,380px);
  aspect-ratio:2/3;position:relative;overflow:hidden;
  border-radius:var(--ym-radius-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75);
}
.ym-break__frame video{width:100%;height:100%;object-fit:cover;display:block;}
.ym-break__frame::after{                 /* assenta o vídeo no fundo escuro */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,15,29,.42) 0%,transparent 42%);
}

/* --------------------------------------------------------------------------
   12a. O DIA REAL — foto de fundo com parallax
   O véu branco existe para o texto ler. A foto desliza mais devagar que a
   página: é o JS que aplica o translate, não background-attachment:fixed
   (que trava no iOS e cria repaint caro).
   -------------------------------------------------------------------------- */
.ym-day{position:relative;overflow:hidden;background:var(--ym-off);}
.ym-day__bg{
  position:absolute;left:0;right:0;top:-14%;bottom:-14%;
  will-change:transform;pointer-events:none;
}
.ym-day__bg img{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block;}
.ym-day__veu{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 34%,
      rgba(255,255,255,.55) 58%, rgba(255,255,255,.26) 100%),
    linear-gradient(to bottom,
      rgba(255,255,255,.75) 0%, rgba(255,255,255,.12) 20%,
      rgba(255,255,255,.12) 80%, rgba(255,255,255,.8) 100%);
}
.ym-day > .ym-container{position:relative;z-index:2;}
/* sobre a foto, os cartões das perguntas ficam sólidos */
.ym-day .ym-perguntas{background:rgba(226,230,236,.9);border-color:rgba(226,230,236,.9);}
.ym-day .ym-perguntas li{background:#fff;}

/* As três perguntas: são um trio de verdade, então ganham forma de trio. */
.ym-perguntas{
  list-style:none;padding:0;margin:3.5rem 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--ym-line);border-block:1px solid var(--ym-line);
}
.ym-perguntas li{
  background:var(--ym-off);padding:clamp(1.8rem,3vw,2.6rem);
  font-family:var(--ym-accent);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.28;
  color:var(--ym-navy-700);text-wrap:balance;
}

/* 13. Produto -------------------------------------------------------------- */
.ym-product{background:var(--ym-navy-800);color:#fff;position:relative;overflow:hidden;}
.ym-product::after{
  content:"";position:absolute;right:-12%;top:50%;transform:translateY(-50%);
  width:52vw;height:52vw;border-radius:50%;
  background:radial-gradient(circle,rgba(27,58,107,.5) 0%,transparent 68%);pointer-events:none;
}
.ym-product__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;position:relative;z-index:2;}
.ym-product__shot{position:relative;width:fit-content;margin-inline:auto;}
.ym-product__shot img{
  display:block;max-width:min(100%,460px);border-radius:var(--ym-radius-lg);
  box-shadow:0 44px 84px -26px rgba(0,0,0,.65);
}
.ym-product__badge{
  position:absolute;top:1.1rem;left:1.1rem;z-index:3;background:var(--ym-femma);color:#fff;
  font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem 1.1rem;border-radius:100px;
}
.ym-product h2{color:#fff;margin-bottom:.6rem;}
.ym-product__tagline{font-family:var(--ym-accent);font-style:italic;font-weight:400;font-size:clamp(1.35rem,2.2vw,1.75rem);color:var(--ym-orange);margin-bottom:1.8rem;}
.ym-product .ym-lead{color:rgba(255,255,255,.72);}
.ym-product__specs{display:flex;flex-wrap:wrap;gap:.55rem;margin:2rem 0;padding:0;}
.ym-product__specs li{
  list-style:none;font-size:.68rem;letter-spacing:var(--ym-track);text-transform:uppercase;
  color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.2);
  padding:.5rem 1rem;border-radius:100px;
}
.ym-para{
  list-style:none;padding:0 0 0 1.5rem;margin:2rem 0;
  border-left:1px solid rgba(255,255,255,.18);
}
.ym-para li{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.015em;line-height:1.5;
  color:rgba(255,255,255,.86);margin-bottom:.7rem;
}
.ym-para li:last-child{color:#fff;margin-bottom:0;}

.ym-checks{list-style:none;padding:0;margin:0 0 2.4rem;}
.ym-checks li{display:flex;gap:.9rem;padding:.65rem 0;font-size:1rem;color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.09);}
.ym-checks li::before{content:"";flex:none;width:16px;height:16px;margin-top:.42rem;border-radius:50%;
  border:1.5px solid var(--ym-orange);
  background:radial-gradient(circle,var(--ym-orange) 0 3px,transparent 3px);}

/* 14. Benefícios ----------------------------------------------------------- */
.ym-light{background:#fff;}
.ym-soft{background:var(--ym-off);}
.ym-benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,2.5vw,2.5rem);margin-top:3.5rem;}
.ym-benefit{padding-top:1.6rem;border-top:2px solid var(--ym-navy-800);}
.ym-benefit__num{font-family:var(--ym-display);font-size:.76rem;letter-spacing:.2em;color:var(--ym-gray-500);margin-bottom:1rem;}
.ym-benefit h3{font-size:1.18rem;margin-bottom:.7rem;}
.ym-benefit p{font-size:.95rem;color:var(--ym-gray-700);margin:0;}

/* 15. Para quem é / não é -------------------------------------------------- */
.ym-fit{background:var(--ym-off);}
.ym-fit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2rem);margin-top:3.5rem;}
.ym-fit__card{background:#fff;border-radius:var(--ym-radius-lg);padding:clamp(2rem,3.4vw,3rem);border:1px solid var(--ym-line);}
.ym-fit__card--no{background:transparent;border-style:dashed;}
.ym-fit__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--ym-line);}
.ym-fit__icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.95rem;font-weight:600;}
.ym-fit__card--yes .ym-fit__icon{background:var(--ym-navy-800);color:#fff;}
.ym-fit__card--no .ym-fit__icon{background:var(--ym-sand);color:var(--ym-gray-500);}
.ym-fit__head h3{font-size:1.2rem;margin:0;}
.ym-fit ul{list-style:none;padding:0;margin:0;}
.ym-fit li{position:relative;padding:.6rem 0 .6rem 1.6rem;font-size:.98rem;color:var(--ym-gray-700);}
.ym-fit li::before{position:absolute;left:0;top:.6rem;font-weight:600;}
.ym-fit__card--yes li::before{content:"→";color:var(--ym-orange);}
.ym-fit__card--no li::before{content:"—";color:var(--ym-gray-500);}

.ym-fit__fecho{
  margin:3.5rem auto 0;max-width:640px;text-align:center;
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.7;color:var(--ym-gray-700);
}
.ym-fit__fecho strong{
  display:inline-block;margin-top:.6rem;font-family:var(--ym-display);
  font-weight:400;font-size:clamp(1.35rem,2.4vw,1.9rem);
  letter-spacing:-.02em;color:var(--ym-navy-800);
}

/* 16. Como usar ------------------------------------------------------------
   Passos empilhados à esquerda, foto do preparo à direita. A foto mostra o
   resultado — que é o argumento real do "sem ritual".
   -------------------------------------------------------------------------- */
.ym-howto{display:grid;grid-template-columns:1fr .52fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;}
.ym-howto__passos{list-style:none;padding:0;margin:3rem 0 0;}
.ym-step{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start;
  padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--ym-line);
}
.ym-howto__passos li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.ym-step__num{
  font-family:var(--ym-display);font-size:2.4rem;font-weight:200;line-height:1;
  color:var(--ym-navy-100);min-width:2.6rem;
}
.ym-step h3{font-size:1.15rem;margin-bottom:.5rem;}
.ym-step p{font-size:.96rem;color:var(--ym-gray-700);margin:0;}
.ym-note{
  margin-top:2.6rem;background:var(--ym-orange-soft);border-left:2px solid var(--ym-orange);
  padding:1.3rem 1.6rem;border-radius:0 var(--ym-radius) var(--ym-radius) 0;
  font-size:.95rem;color:var(--ym-navy-700);
}
.ym-howto__foto{
  margin:0;border-radius:var(--ym-radius-lg);overflow:hidden;
  position:sticky;top:7rem;
  box-shadow:0 30px 60px -30px rgba(11,27,51,.45);
}
.ym-howto__foto img{width:100%;display:block;}

/* 17. Composição ----------------------------------------------------------- */
.ym-facts{background:var(--ym-off);}
.ym-facts__box{background:#fff;border:1px solid var(--ym-line);border-radius:var(--ym-radius-lg);overflow:hidden;margin-top:3rem;}
.ym-facts__head{padding:1.4rem clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--ym-line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;}
.ym-facts__head strong{font-family:var(--ym-display);font-size:1.05rem;font-weight:500;}
.ym-facts table{width:100%;border-collapse:collapse;}
.ym-facts td{padding:1rem clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--ym-line);font-size:.97rem;}
.ym-facts tbody tr:last-child td{border-bottom:0;}
.ym-facts td{font-variant-numeric:tabular-nums;color:var(--ym-gray-700);}

/* Tabela nutricional: três colunas, no formato do rótulo brasileiro.
   Basta trocar os valores — as linhas que não existirem na fórmula saem. */
.ym-facts__tabela th{
  padding:.85rem clamp(1.4rem,3vw,2.2rem);
  font-family:var(--ym-body);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ym-gray-500);
  background:var(--ym-off);border-bottom:1px solid var(--ym-line);
  text-align:left;
}
.ym-facts__tabela th + th,
.ym-facts__tabela td + td{text-align:right;}
.ym-facts__tabela td:first-child{color:var(--ym-navy-800);font-weight:500;}
.ym-facts__tabela th:last-child,
.ym-facts__tabela td:last-child{width:5.5rem;}
.ym-facts__rodape{
  padding:1.4rem clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--ym-line);display:grid;gap:.7rem;
}

/* 18. Depoimentos ---------------------------------------------------------- */
.ym-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-top:3.5rem;}
.ym-review{border:1px solid var(--ym-line);border-radius:var(--ym-radius-lg);padding:2rem;background:#fff;}
.ym-review__stars{color:var(--ym-orange);font-size:.9rem;letter-spacing:.15em;margin-bottom:1.1rem;}
.ym-review p{font-size:.99rem;color:var(--ym-navy-700);margin-bottom:1.4rem;}
.ym-review__who{display:flex;align-items:center;gap:.8rem;font-size:.85rem;}
.ym-review__av{width:32px;height:32px;border-radius:50%;background:var(--ym-navy-100);
  display:grid;place-items:center;font-family:var(--ym-display);font-size:.85rem;color:var(--ym-navy-700);flex:none;}

.ym-facts__ingr,.ym-facts__alerta{
  font-size:.92rem;line-height:1.65;color:var(--ym-gray-700);
  margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--ym-line);
}
.ym-facts__alerta{margin-top:.8rem;padding-top:.8rem;border-top:0;color:var(--ym-navy-800);}
.ym-facts__ingr strong,.ym-facts__alerta strong{color:var(--ym-navy-800);}

/* 20a. CASOS DE USO — o que ocupa o lugar da prova social até haver
   depoimento real. Não imita depoimento de propósito: sem aspas, sem
   estrelas, sem nome. É a marca falando, e se lê como tal. */
.ym-caso{
  background:#fff;border:1px solid var(--ym-line);border-radius:var(--ym-radius-lg);
  padding:clamp(1.6rem,3vw,2.2rem);
}
.ym-caso__hora{
  font-family:var(--ym-body);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ym-orange);
  margin:0 0 1.2rem;
}
.ym-caso h3{
  font-size:1.2rem;font-weight:400;letter-spacing:-.025em;line-height:1.25;
  color:var(--ym-navy-800);margin:0 0 .9rem;
}
.ym-caso p:last-child{
  font-size:1rem;line-height:1.62;color:var(--ym-gray-700);margin:0;
}

/* Seções vizinhas de mesmo fundo -------------------------------------------
   Cada seção tem padding em cima e embaixo, então entre duas delas há o dobro
   do respiro — até 17rem. Quando a cor de fundo muda, esse vão lê como pausa.
   Quando não muda, lê como buraco: não há nada indicando que uma acabou e a
   outra começou. Aqui a segunda abre mão do respiro de cima.
   -------------------------------------------------------------------------- */
.ym-soft + .ym-soft,
.ym-soft + .ym-fit,
.ym-fit + .ym-soft,
.ym-fit + .ym-facts,
.ym-soft + .ym-facts,
.ym-facts + .ym-soft,
.ym-light + .ym-light,
.ym-offer + .ym-faq,
.ym-faq + .ym-offer{padding-top:0;}

/* as três perguntas ficam centradas na altura do cartão */
.ym-perguntas li{display:flex;align-items:center;}

/* Depoimentos em fundo marinho: uma pausa escura no meio do bloco claro,
   para a leitura não virar uma faixa cinza só. */
.ym-depos{background:var(--ym-navy-800);color:#fff;}
.ym-depos .ym-eyebrow{color:var(--ym-navy-300);}
.ym-depos .ym-h2{color:#fff;}
.ym-depos .ym-lead{color:rgba(255,255,255,.72);}
.ym-depos .ym-review{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);
}
.ym-depos .ym-review p{color:rgba(255,255,255,.9);}
.ym-depos .ym-review .ym-fine{color:rgba(255,255,255,.5);}
.ym-depos .ym-review__who{color:rgba(255,255,255,.7);}
.ym-depos .ym-review__av{background:rgba(255,255,255,.1);color:#fff;}

/* 18b. A FÓRMULA -----------------------------------------------------------
   Três cartões: os dois nutrientes que têm alegação autorizada e um terceiro
   que é só quantidade. O terceiro existe justamente porque não tem discurso —
   colocar a lista à vista vale mais do que inventar um benefício para cada
   ingrediente.
   -------------------------------------------------------------------------- */
.ym-formula__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);margin-top:3.5rem;align-items:stretch;
}
.ym-nutri{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--ym-line);
  border-radius:var(--ym-radius-lg);padding:clamp(1.7rem,3vw,2.4rem);
}
.ym-nutri__num{
  font-family:var(--ym-body);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ym-orange);
  margin:0 0 1.2rem;
}
.ym-nutri h3{
  font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:400;letter-spacing:-.025em;
  line-height:1.2;color:var(--ym-navy-800);margin:0 0 .9rem;
}
.ym-nutri__dado{
  font-family:var(--ym-display);font-size:1.02rem;font-weight:500;
  letter-spacing:-.01em;color:var(--ym-navy-700);
  padding-bottom:1rem;margin:0 0 1rem;border-bottom:1px solid var(--ym-line);
}
.ym-nutri > p:last-child{font-size:1rem;line-height:1.65;color:var(--ym-gray-700);margin:0;}

/* o cartão-lista: quantidade à direita, tabular, para as casas alinharem */
.ym-nutri--lista ul{list-style:none;padding:0;margin:0 0 1.2rem;}
.ym-nutri--lista li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.62rem 0;border-bottom:1px solid var(--ym-line);
  font-size:.97rem;color:var(--ym-gray-700);
}
.ym-nutri--lista li:last-child{border-bottom:0;}
.ym-nutri--lista li span:first-child{color:var(--ym-navy-800);}
.ym-nutri--lista li span + span{
  font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500;
}
.ym-nutri--lista .ym-fine{margin:auto 0 0;}

/* Cuidado e segurança -------------------------------------------------------
   Não é rodapé jurídico escondido, mas também não é argumento de venda: fica
   depois da fórmula, no tamanho do texto corrido, com a caixa de orientação
   ao lado — visível para quem precisa, sem virar o assunto da página.
   -------------------------------------------------------------------------- */
.ym-cuidado{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
  margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(2rem,3vw,2.6rem);
  border-top:1px solid var(--ym-line);
}
.ym-cuidado__texto h3{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.14;
  color:var(--ym-navy-800);margin:0 0 1rem;
}
.ym-cuidado__texto p{font-size:1.02rem;line-height:1.7;color:var(--ym-gray-700);margin:0;}
.ym-cuidado__box{
  background:#fff;border-left:3px solid var(--ym-orange);
  border-radius:0 var(--ym-radius) var(--ym-radius) 0;
  padding:1.5rem 1.7rem;
}
.ym-cuidado__titulo{
  font-family:var(--ym-body);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ym-orange);
  margin:0 0 .9rem;
}
.ym-cuidado__box p:last-child{font-size:.98rem;line-height:1.65;color:var(--ym-gray-700);margin:0;}

/* Três tardes --------------------------------------------------------------- */
.ym-tres{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);margin-top:3.5rem;
}

/* Prova social ainda não escrita -------------------------------------------
   Cartão fantasma com "[ inserir depoimento ]" lê como loja inacabada, e uma
   avaliação inventada é propaganda enganosa. O meio-termo honesto é dizer que
   não há depoimento ainda — e abrir um canal para receber o primeiro.
   -------------------------------------------------------------------------- */
.ym-espera{
  margin-top:3rem;max-width:680px;padding:clamp(2rem,4vw,2.8rem);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ym-radius-lg);
}
.ym-espera__nota{
  font-family:var(--ym-body);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ym-orange);
  margin:0 0 1.1rem;
}
.ym-espera__texto{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.45;letter-spacing:-.02em;
  color:#fff;margin:0 0 1.4rem;
}
.ym-espera__cta{font-size:.98rem;color:rgba(255,255,255,.68);margin:0;}
.ym-espera__cta a{
  color:#fff;border-bottom:1px solid var(--ym-orange);padding-bottom:2px;
  transition:color .3s;
}
.ym-espera__cta a:hover{color:var(--ym-orange);}

@media (max-width:991.98px){
  .ym-formula__grid,.ym-tres{grid-template-columns:1fr 1fr;}
  .ym-cuidado{grid-template-columns:1fr;}
}
@media (max-width:767.98px){
  .ym-formula__grid,.ym-tres{grid-template-columns:1fr;}
}

/* 19. Oferta --------------------------------------------------------------- */
.ym-offer{background:#fff;}
.ym-offer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem);margin-top:3.5rem;align-items:stretch;}
.ym-kit{position:relative;border:1px solid var(--ym-line);border-radius:var(--ym-radius-lg);
  padding:2.2rem 1.9rem;cursor:pointer;background:#fff;transition:all .35s var(--ym-ease);
  display:flex;flex-direction:column;}
.ym-kit{cursor:default;}
.ym-kit:hover{border-color:var(--ym-navy-300);transform:translateY(-3px);}
.ym-kit.is-active{border-color:var(--ym-navy-800);box-shadow:0 20px 50px -22px rgba(11,27,51,.45);}
.ym-kit__flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--ym-orange);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.38rem 1rem;border-radius:100px;white-space:nowrap;}
.ym-kit__qty{font-family:var(--ym-display);font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.2rem;}
.ym-kit__dur{font-size:.82rem;color:var(--ym-gray-500);margin-bottom:1.4rem;}
.ym-kit__price{margin-bottom:1.6rem;font-family:var(--ym-display);font-size:2.5rem;font-weight:300;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;}
.ym-kit__price sup{font-size:.9rem;top:-1.1em;font-weight:400;margin-right:.15rem;}
.ym-kit__unit{font-size:.85rem;color:var(--ym-gray-500);margin-top:.5rem;}
.ym-kit__from{
  font-size:.9rem;color:var(--ym-gray-500);text-decoration:line-through;margin-bottom:.3rem;
}
.ym-kit__cta{margin-top:auto;}
.ym-kit__flag--quiet{background:var(--ym-navy-800);}
/* A economia diz em relação a quê — sem isso o número não significa nada.
   Por ser uma frase e não um número solto, ela quebra: pílula com raio menor
   e line-height de texto, não de etiqueta. */
.ym-kit__save{display:inline-block;align-self:flex-start;margin:1rem 0 .6rem;font-size:.78rem;font-weight:600;
  line-height:1.45;letter-spacing:.01em;color:#B14A0E;background:var(--ym-orange-soft);
  padding:.45rem .85rem;border-radius:12px;max-width:100%;}
.ym-kit__frete{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  margin:0 0 1.6rem;font-size:.78rem;font-weight:600;letter-spacing:.01em;
  color:var(--ym-navy-700);}
.ym-kit__frete::before{content:"✓";color:var(--ym-orange);font-weight:700;}
.ym-kit__save + .ym-kit__frete{margin-top:.2rem;}
.ym-kit__radio{position:absolute;top:1.6rem;right:1.6rem;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--ym-line);transition:.3s;}
.ym-kit.is-active .ym-kit__radio{border-color:var(--ym-navy-800);
  background:radial-gradient(circle,var(--ym-navy-800) 0 5px,transparent 5px);}
.ym-offer__checkout{margin-top:2.6rem;max-width:520px;}
.ym-offer__total{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:1.2rem;margin-bottom:1.4rem;border-bottom:1px solid var(--ym-line);}
.ym-offer__total span{font-size:.72rem;color:var(--ym-gray-500);letter-spacing:var(--ym-track);text-transform:uppercase;}
.ym-offer__total strong{font-family:var(--ym-display);font-size:2rem;font-weight:400;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.ym-trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem;padding:0;}
.ym-trust li{list-style:none;display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ym-gray-500);}
.ym-trust li::before{content:"✓";color:var(--ym-orange);font-weight:700;}

/* 20. FAQ ------------------------------------------------------------------ */
.ym-faq{background:#fff;}
.ym-faq__list{margin-top:3rem;border-top:1px solid var(--ym-line);}
.ym-faq__item{border-bottom:1px solid var(--ym-line);}
.ym-faq__q{width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:1.6rem 3rem 1.6rem 0;position:relative;
  font-family:var(--ym-display);font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:-.02em;color:var(--ym-navy-800);}
.ym-faq__q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:300;color:var(--ym-orange);}
.ym-faq__item.is-open .ym-faq__q::after{content:"−";}
.ym-faq__a{display:none;padding:0 3.5rem 1.9rem 0;font-size:.99rem;color:var(--ym-gray-700);}
.ym-faq__a p{margin:0;}

/* 21. CTA final ------------------------------------------------------------ */
.ym-cta{background:var(--ym-navy-900);color:#fff;text-align:center;position:relative;overflow:hidden;}
.ym-cta__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(70vw,700px);opacity:.05;pointer-events:none;}
.ym-cta__inner{position:relative;z-index:2;}
.ym-cta__intro{
  font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.85;
  color:rgba(255,255,255,.55);margin-bottom:2.2rem;
}
.ym-cta h2{color:#fff;margin-bottom:1.4rem;}
.ym-cta p{color:rgba(255,255,255,.68);max-width:520px;margin:0 auto 2.4rem;}

/* 22. Rodapé --------------------------------------------------------------- */
.ym-footer{background:var(--ym-navy-800);color:rgba(255,255,255,.6);padding-block:4.5rem 2.5rem;font-size:.9rem;}
.ym-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);}
.ym-footer img{width:180px;height:auto;margin-bottom:1rem;}
.ym-footer__tag{
  font-family:var(--ym-accent);font-style:normal;font-size:1.35rem;letter-spacing:.01em;
  color:rgba(255,255,255,.85);margin-bottom:.8rem;
}
.ym-footer h4{font-family:var(--ym-body);font-size:.68rem;font-weight:600;letter-spacing:var(--ym-track);
  text-transform:uppercase;color:#fff;margin-bottom:1.2rem;}
.ym-footer ul{list-style:none;padding:0;margin:0;}
.ym-footer li{margin-bottom:.65rem;}
.ym-footer a:hover{color:#fff;}
.ym-footer__bottom{padding-top:2rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.76rem;}
.ym-footer__legal{margin-top:2rem;font-size:.72rem;line-height:1.65;color:rgba(255,255,255,.38);max-width:820px;}

/* 23. Barra de compra mobile + WhatsApp ------------------------------------ */
.ym-buybar{position:fixed;left:0;right:0;bottom:0;z-index:1050;display:none;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--ym-line);
  padding:.8rem 1rem;transform:translateY(110%);transition:transform .4s var(--ym-ease);}
.ym-buybar.is-visible{transform:translateY(0);}
.ym-buybar__inner{display:flex;align-items:center;gap:1rem;}
.ym-buybar__price{flex:1;}
.ym-buybar__price small{display:block;font-size:.66rem;color:var(--ym-gray-500);letter-spacing:.1em;text-transform:uppercase;}
.ym-buybar__price strong{font-family:var(--ym-display);font-size:1.2rem;font-weight:500;letter-spacing:-.03em;}
.ym-wa{opacity:0;visibility:hidden;transition:opacity .5s var(--ym-ease),visibility .5s,transform .3s var(--ym-ease);}
.ym-wa.is-visible{opacity:1;visibility:visible;}
.ym-wa{position:fixed;right:1.25rem;bottom:1.5rem;z-index:1045;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px -8px rgba(37,211,102,.6);
  transition:transform .3s var(--ym-ease);}
.ym-wa:hover{transform:scale(1.08);}
.ym-wa svg{width:26px;height:26px;fill:#fff;}

/* 24. Reveal --------------------------------------------------------------- */
.ym-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ym-ease),transform .8s var(--ym-ease);}
.ym-reveal.is-in{opacity:1;transform:none;}
.ym-reveal[data-delay="1"]{transition-delay:.1s}
.ym-reveal[data-delay="2"]{transition-delay:.2s}
.ym-reveal[data-delay="3"]{transition-delay:.3s}

/* 25. Responsivo ----------------------------------------------------------- */
@media (max-width:1199.98px){
  .ym-benefits__grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;}
  .ym-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:991.98px){
  .ym-nav__links{
    position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--ym-navy-800);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.8rem;padding:2.5rem;
    transform:translateX(100%);transition:transform .45s var(--ym-ease);
    z-index:1050;overflow-y:auto;overscroll-behavior:contain;
  }
  .ym-nav__links.is-open{transform:translateX(0);}
  .ym-nav__links a,.ym-header.is-solid .ym-nav__links a{
    color:#fff;font-size:1.05rem;font-family:var(--ym-display);letter-spacing:.16em;
  }
  .ym-nav__toggle{display:block;}
  .ym-nav__logo img,.ym-header.is-solid .ym-nav__logo img{width:150px;}
  .ym-nav__cta{display:none;}
  .ym-manifesto__grid,.ym-product__grid{grid-template-columns:1fr;}
  .ym-break__grid{grid-template-columns:1fr;gap:2.5rem;}
  .ym-howto{grid-template-columns:1fr;gap:2.5rem;}
  .ym-howto__foto{position:static;max-width:420px;}
  .ym-break__frame{justify-self:start;width:min(100%,320px);}
  .ym-day__grid,.ym-reviews__grid,.ym-offer__grid,.ym-fit__grid{grid-template-columns:1fr;}
  .ym-perguntas{grid-template-columns:1fr;}
  /* a foto é larga (o miolo é preenchimento borrado): no mobile puxamos o
     enquadramento para a figura, à direita, senão sobra só o borrão */
  /* a coluna é estreita: o recorte cai sobre a figura, e a caixa sobe um
     pouco para a cabeça não ficar cortada no topo da seção */
  .ym-day__bg{top:-8%;bottom:-20%;}
  .ym-day__bg img{object-position:74% center;}
  .ym-day__veu{
    background:linear-gradient(to bottom,
      rgba(255,255,255,.93) 0%, rgba(255,255,255,.84) 26%,
      rgba(255,255,255,.8) 62%, rgba(255,255,255,.94) 100%);
  }
  .ym-manifesto__quando{
  list-style:none;padding:0;margin:2rem 0;
  border-left:1px solid rgba(255,255,255,.16);padding-left:1.6rem;
}
.ym-manifesto__quando li{
  font-family:var(--ym-display);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.9);margin-bottom:.55rem;
}
.ym-manifesto__assina{
  margin-top:2.4rem;font-family:var(--ym-display);font-weight:400;
  font-size:1.1rem;letter-spacing:.22em;color:#fff !important;
}
.ym-manifesto__creed{grid-template-columns:1fr;gap:1.5rem;}
  .ym-product__shot{order:-1;}
  .ym-kit__flag{left:auto;right:1.5rem;transform:none;}
  .ym-hud__rail{display:none;}
}
@media (max-width:767.98px){
  .ym-section{padding-block:3.6rem;}
  .ym-film{height:330vh;}

  .ym-cues{place-items:center;}
  .ym-cue{max-width:86vw;text-align:center;}
  .ym-cue__line{letter-spacing:.04em;}
  .ym-cue__sub{margin-inline:auto;}
  .ym-cue__specs{justify-content:center;}
  .ym-cue__specs div{text-align:center;}
  /* No celular o texto cai por cima do produto: aqui o véu azul é
     necessário para a leitura. */
  .ym-film__scrim{
    background:
      linear-gradient(to bottom,
        rgba(5,15,29,.92) 0%, rgba(5,15,29,.6) 32%,
        rgba(5,15,29,.68) 68%, rgba(5,15,29,.95) 100%),
      linear-gradient(0deg, rgba(11,27,51,.52), rgba(11,27,51,.52));
  }
  .ym-benefits__grid,.ym-footer__grid{grid-template-columns:1fr;gap:2rem;}
  .ym-buybar{display:block;}
  .ym-wa{bottom:5.5rem;}
  /* a barra fixa cobre ~72px; o fim da página não pode terminar embaixo dela */
  .ym-footer{padding-bottom:6.5rem;}
}

/* 26. Movimento reduzido ---------------------------------------------------
   Sem scrub: o filme vira uma imagem só e as falas empilham normalmente.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .ym-reveal{opacity:1;transform:none;transition:none;}
  .ym-marquee__track{animation:none;}
  .ym-film{height:auto;}
  .ym-film__stage{position:relative;height:auto;min-height:100vh;}
  .ym-cues{position:relative;display:block;padding:6rem 1.5rem;}
  .ym-cue{opacity:1;transform:none;margin:0 auto 5rem;}
  .ym-hud__scroll{display:none;}
  .ym-break__frame video{display:none;}
  .ym-break__frame{background:url("../../video/divisoria.jpg") center/cover;}
}

/* ==========================================================================
   27. AJUSTES DA REVISÃO — contraste, toque e detalhes de marcação

   Boa parte desta seção existe porque elementos que antes eram <div> viraram
   <p> (um número solto não é um bloco genérico, é uma linha de texto). O
   reboot dá margem inferior a todo parágrafo, e sem estes zeros o espaçamento
   dos cartões cresceria sozinho.
   ========================================================================== */

/* --- Contraste ------------------------------------------------------------
   O cinza antigo (#7C8698) ficava em ~3,4:1 sobre o off-white. Passa longe do
   mínimo de 4,5:1 do WCAG AA para texto pequeno — e é justamente onde vive o
   texto pequeno: legendas, "por pote", selos de confiança. O tom novo dá
   ~5,1:1 sobre branco sem mudar a temperatura da paleta. */
:root{--ym-gray-500:#646E85;}
.ym-fine{font-size:.875rem;line-height:1.65;}

/* --- Área de toque --------------------------------------------------------
   44px é o mínimo recomendado pelas diretrizes de acessibilidade móvel; os
   botões pequenos da nav e dos cartões ficavam abaixo disso. */
.ym-btn{min-height:48px;}
.ym-nav .ym-btn{min-height:44px;}
.ym-faq__q{min-height:56px;}
/* O botão do menu chega aos 44px por padding, NUNCA mexendo no display.
   Foi o erro da revisão anterior: um `display:grid` aqui atropelou o
   `display:none` da regra base — o hambúrguer passou a aparecer no desktop e,
   como as barras viraram itens de grade, elas perderam o empilhamento que o
   X depende para se formar. */
.ym-nav__toggle{padding:.65rem .7rem;}

/* --- Números e rótulos que viraram parágrafo ------------------------------ */
.ym-benefit__num,.ym-caso__hora,.ym-nutri__num{margin-top:0;}
.ym-step__num{margin:0;}
.ym-kit__qty{margin:0 0 .2rem;}
.ym-kit__dur{margin:0 0 1.4rem;}
.ym-kit__from{margin:0 0 .3rem;}
.ym-kit__price{margin:0 0 .4rem;}
.ym-kit__unit{margin:.3rem 0 0;}
.ym-review__stars{margin:0 0 1.1rem;}
/* O mote é um <p>, então cai na regra `.ym-cta p` — que limita a 520px e
   centraliza a caixa com margin auto. Zerar a margem lateral aqui tirava
   justamente esse auto: o texto continuava com text-align:center, mas dentro
   de uma caixa de 520px encostada à esquerda. Daí ele parecer torto. */
.ym-cta .ym-mote{color:#fff;max-width:none;margin:0 auto 1.4rem;}

/* --- Tabela nutricional ---------------------------------------------------
   O scroll horizontal fica preso à tabela, nunca na página. */
.ym-facts__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* --- Assinatura do manifesto ---------------------------------------------- */
.ym-manifesto__assina{line-height:1.5;}
.ym-manifesto__assina span{
  display:block;font-family:var(--ym-accent);font-style:italic;
  font-size:1.35rem;letter-spacing:0;color:rgba(255,255,255,.78) !important;
  margin-top:.35rem;
}

/* --- Barra de compra ------------------------------------------------------
   Quem esconde a barra no rodapé e na seção de oferta é o JS (initBuyBar).
   Aqui só o que é forma: altura confortável para o toque e um preço legível. */
.ym-buybar__inner{min-height:52px;}
.ym-buybar__price strong{font-size:1.15rem;}
.ym-buybar .ym-btn{padding-inline:1.6rem;}

/* --- Leitura em telas pequenas -------------------------------------------- */
@media (max-width:767.98px){
  /* 17px de base: 18px empurrava parágrafo demais para a terceira linha */
  body{font-size:1.0625rem;}
  .ym-lead{font-size:1.06rem;line-height:1.66;}
  .ym-h2{font-size:clamp(1.75rem,7.2vw,2.3rem);}
  .ym-cue__sub{font-size:1rem;}
  /* o CTA da primeira fala precisa caber sem estourar a coluna */
  .ym-cue__acao .ym-btn{width:100%;justify-content:center;}
  .ym-espera{margin-top:2.2rem;}
  .ym-kit{padding:1.9rem 1.5rem;}
  .ym-facts td,.ym-facts__tabela th{padding-inline:1.1rem;}
}

/* ==========================================================================
   28. MERCADO PAGO — o formulário de pagamento

   O plugin desenha o cartão dentro de um app próprio (#mp-checkout-custom-root)
   com folha de estilo própria. Como ele monta boa parte do visual por JS, a
   ordem de carregamento não basta em todos os pontos: por isso o !important
   aqui, que é exceção no projeto e fica confinado a este bloco.
   ========================================================================== */

/* O botão de carteira do Mercado Pago duplica o "Finalizar compra" do
   checkout e leva para outro fluxo. Some. */
#mp-checkout-custom-root .mp-wallet-button-container-wrapper .mp-wallet-button-container{
  display:none !important;
}

.mp-checkout-container .mp-input-label{
  font-size:10px !important;
}

/* O bloco de pagamento fica sobre o fundo do tema, sem caixa dentro de caixa. */
#mp-checkout-custom-root .mp-checkout-custom-container,
.woocommerce-checkout #payment ul.payment_methods li{
  background:transparent !important;
}

#mp-checkout-custom-root .mp-checkout-custom-container{
  padding:0 24px 40px !important;
}

#mp-checkout-custom-root .mp-checkout-custom-container .mp-checkout-custom-card-flags{
  margin-bottom:0 !important;
}