:root { --azzurro:#EAF6FF; --azzurro-2:#DDF0FF; --creme:#FFF4E5; --creme-2:#FBE9D5; --rosso:#C83A2D; --rosso-claro:#E15B4E; --salmao:#F08A63; --terracota:#F4A77F; --grafite:#1F1F1F; --preto:#111; --cinza:#6E6E6E; --branco:#fff; --radius-lg:28px; --radius-md:18px; --pill:999px; --shadow:0 10px 30px rgba(0,0,0,.10); }

html, body { height:100%; }
body { margin:0; font-family:'Montserrat',sans-serif; color:var(--grafite); background:var(--creme); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
nav { display:flex; align-items:center; justify-content:space-between; min-height:72px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em; text-decoration:none; font-weight:900; letter-spacing:.06em; text-transform:uppercase; border:2px solid var(--preto); box-shadow:5px 5px 0 var(--preto); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; border-radius:var(--pill); padding:12px 20px; }
.btn::before { content:"↣"; font-weight:900; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--preto); }
.btn:active { transform:translate(0,0); box-shadow:3px 3px 0 var(--preto); }
.btn-primary { background:var(--salmao); color:var(--preto); }
.btn-primary:hover { background:var(--terracota); }
.btn-lg { padding:14px 28px; font-size:1rem; }
.btn-ghost { background:var(--creme-2); color:var(--grafite); }
.btn-ghost:hover { background:var(--branco); }

.mobile { display: none !important; }

.desktop-none { display: none !important;; }

.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo p { margin:0; font-weight:700; font-size:14px; letter-spacing:.04em; }
.ico { width:56px; height:56px; border-radius:50%; box-shadow:0 3px 10px rgba(0,0,0,.12); object-fit:cover; }

.titulo h1 { margin:0; font-family:'Playfair Display',serif; letter-spacing:.02em; font-weight:800; font-size:clamp(18px,3.2vw,28px); color:var(--grafite); }

.acoes { display:flex; gap:10px; align-items:center; }

/* Header */
.site-header { position:sticky; top:0; width:100%; z-index:1000; background:var(--creme); border-bottom:4px solid var(--rosso); transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow:0 6px 22px rgba(0,0,0,.08); background:rgba(255,244,229,.9); backdrop-filter:saturate(160%) blur(4px); }
.site-header.hide { transform:translateY(-100%); }
.central { max-width:1200px; margin:0 auto; padding:0 24px; }

.video-section {display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 0 10px;text-align:center;}
.video-title {margin:0 0 8px;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(18px,3.2vw,28px);color:var(--grafite);}
.video-card {width:100%;max-width:720px;margin:0 auto;}
.ratio-16x9 {position:relative;width:100%;aspect-ratio:16/9;background:var(--branco);border:2px solid var(--preto);border-radius:20px;box-shadow:8px 8px 0 var(--preto);overflow:hidden;}
.video-media {width:100%;height:100%;object-fit:cover;display:block;}
.video-cta {display:flex;justify-content:center;margin-top:12px;}
.video-cta .btn {min-width:220px;}

/* garante posicionamento relativo do container do vídeo */
.video-section .ratio-16x9 { position: relative; }

/* vídeo responsivo (ajuste se já tiver regras) */
.video-media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* use contain se preferir sem corte */
  display: block;
}

/* quadrado central com ícone e texto */
.mute-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 34vw, 320px);
  aspect-ratio: 1 / 1;            /* garante forma quadrada */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  color: #fff;
  background: rgba(0,0,0,0.62);
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 12px;             /* troque para 0 se quiser 100% quadrado */
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  z-index: 2;
  transition: transform .15s ease, opacity .2s ease;
}

.mute-overlay:hover   { transform: translate(-50%, -50%) scale(1.03); }
.mute-overlay:active  { transform: translate(-50%, -50%) scale(0.98); }
.mute-overlay.hidden  { display: none; }

.mute-overlay .icon {
  width: clamp(28px, 6vw, 44px);
  height: clamp(28px, 6vw, 44px);
  fill: currentColor;
}

.mute-overlay .label {
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  font-size: clamp(16px, 2.5vw, 18px);
}


/* Outdoor */
.outdoor { margin:12px auto 0; }
.outdoor-banner { margin:20px 0; position:relative; background:url("../imagens/italia.jpg") center/cover no-repeat; border-radius:var(--radius-lg); overflow:hidden; min-height:clamp(220px,36vw,420px); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.outdoor-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17, 17, 17, 0.411) 100%); }
.outdoor-banner h1 { position:relative; margin:0; padding:0 24px; color:var(--branco); text-align:center; text-transform:uppercase; letter-spacing:.08em; line-height:1.1; font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(22px,6vw,56px); text-shadow:0 2px 8px rgba(0,0,0,.35); }

/* Barras decorativas */
.barra { width:100%; height:34px; background-image:repeating-linear-gradient(to right, rgba(255,255,255,.22) 0, rgba(255,255,255,.22) 24px, transparent 24px, transparent 48px); }
.barra-rosso { background:var(--rosso); }
.barra-salmao { background:var(--salmao); margin:40px 0;}

/* Info */
.info { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:28px; padding:38px 0; }
.info .esquerda { display:flex; justify-content:center; }
.info .esquerda img { width:min(480px,92%); border-radius:20px; background:var(--branco); box-shadow:0 12px 30px rgba(0,0,0,.10); }
.kicker { color:var(--rosso); font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
.headline { font-family:'Playfair Display',serif; font-weight:800; margin:0 0 10px; line-height:1.15; font-size:clamp(22px,3.4vw,34px); }
.bullets { margin:0 0 14px 18px; padding:0; }
.bullets li { margin:8px 0; }
.cta-inline { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.garantia { font-size:.9rem; color:var(--cinza); }

.bella-section{ background:var(--creme); padding:34px 0; }
.bella-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:stretch; }

/* Sobre */
.sobre { background:var(--creme); padding:42px 0; }
.sobre .conteudo { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:28px; }
.card { background:var(--salmao); border:2px solid var(--preto); border-radius:var(--radius-md); box-shadow:6px 6px 0 var(--preto); padding:24px; }
.sobre .texto .intro { margin:0 0 8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--grafite); }
.sobre .imagem img { width:240px; height:240px; object-fit:cover; border-radius:50%; border:4px solid var(--preto); box-shadow:0 6px 18px rgba(0,0,0,.15); margin:0 auto; }

/* Título mantido centralizado */
.feedbacks { background: var(--creme); padding: 24px 0 34px; text-align: center; }
.feedback-title { margin: 0 0 20px; font-size: 28px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; }

#feedbacks-slider.splide { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

@media (min-width: 1440px) {
  #feedbacks-slider.splide { max-width: 1400px; } /* ainda mais largo em telas grandes */
}

/* Mobile: cards mais compactos e altura automática por item */
@media (max-width: 640px) {
  #feedbacks-slider.splide { max-width: 100%; padding: 0 16px; }
  .feedback-card { padding: 14px 14px 12px; }
  .feedback-quote { font-size: 15px; line-height: 1.55; }
  .handle { padding: 5px 10px; box-shadow: 2px 2px 0 var(--preto); }
}



/* Card MAIOR, sem rolagem interna */
.feedback-card {
  background: var(--salmao);
  border: 2px solid var(--preto);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--preto);
  padding: 18px 18px 16px;       /* mais espaço */
  /* altura será definida via JS com base no MAIOR card */
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;               /* mantém bordas */
}

/* Texto SEM rolagem */
.feedback-quote {
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 16px;                /* maior */
  font-style: italic;
  overflow: visible;              /* sem scroll */
  word-break: break-word;
  hyphens: auto;
}
.feedback-quote::-webkit-scrollbar { display: none; }

/* Rodapé com @ fixo na base do card */
.feedback-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.handle {
  font-weight: 900;
  background: var(--branco, #fff);
  color: var(--preto);
  padding: 6px 10px;              /* maior */
  border: 2px solid var(--preto);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--preto);
  line-height: 1;
}

/* Ajustes responsivos (o JS recalcula a altura após cada breakpoint) */
@media (max-width: 1024px) {
  .feedback-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .feedback-title { font-size: 24px; letter-spacing: 1.5px; }
}


/* CTA Final */
.cta-final { background:var(--creme-2); padding:40px 0 60px; border-top:4px solid var(--salmao); border-bottom:4px solid var(--salmao); }
.cta-card { background:var(--branco); border:2px solid var(--preto); border-radius:var(--radius-lg); box-shadow:8px 8px 0 var(--preto); padding:28px 24px; text-align:center; }
.cta-card h2 { margin:0 0 8px; font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(22px,3.4vw,36px); }
.cta-card .sub { margin:0 0 18px; color:var(--cinza); }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.cta-card .selo { margin:10px 0 0; color:var(--cinza); font-size:.95rem; }

.video-section {padding:22px 0 10px;}
.video-title {margin:0 0 12px;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(18px,3.2vw,28px);text-align:center;color:var(--grafite);}
.video-card {max-width:720px;margin:0 auto;}
.ratio-1x1 {position:relative;width:100%;padding-top:100%;background:var(--branco);border:2px solid var(--preto);border-radius:20px;box-shadow:8px 8px 0 var(--preto);overflow:hidden;}
.ratio-1x1 iframe {position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Benefícios blocos (como o eBook) */

#benefits-slider .splide__slide {background:transparent;border:0;border-radius:0;box-shadow:none;min-height:auto;display:block; height:auto; box-sizing: border-box;}
#benefits-slider .bloco {height:auto !important;}
#benefits-slider .splide__pagination__page {background:var(--salmao);}
#benefits-slider .splide__pagination__page.is-active {background:var(--rosso);}
#benefits-slider .splide__track {overflow-x:hidden; overflow-y:visible;}
#benefits-slider .splide__list {margin:0;}

.beneficios {display:block;padding:26px 0 8px;}
.beneficios .splide { max-width:100%;overflow:hidden; }
.bloco-grafite {background:var(--grafite);}
.bloco-preto {background:var(--preto);}
.bloco { padding:18px; border-radius:12px; color:var(--branco); min-height:130px; display:flex; flex-direction:column; gap:8px; border:2px solid var(--preto); box-shadow:6px 6px 0 var(--preto); }
.bloco h3 { margin:0; font-family:'Playfair Display',serif; font-weight:800; letter-spacing:.02em; }
.bloco p { margin:0; color:rgba(255,255,255,.92); }
.bloco-rosso { background:var(--rosso); }
.bloco-salmao { background:var(--salmao); }
.bloco-terracota { background:var(--terracota); }
.bloco-rosso-claro { background:var(--rosso-claro); }

.faq-section {padding:36px 0 12px;}
.faq-title {margin:0 0 16px;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(20px,3vw,28px);text-align:center;color:var(--grafite);}
.faq-list {max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-list details {background:var(--creme-2);border:2px solid var(--preto);border-radius:14px;box-shadow:6px 6px 0 var(--preto);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;}
.faq-list details[open] {border-color:var(--rosso);box-shadow:8px 8px 0 var(--preto);}
.faq-list summary {cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:800;color:var(--grafite);}
.faq-list summary::-webkit-details-marker {display:none;}
.faq-list summary::after {content:"+";margin-left:auto;font-weight:900;transition:transform .2s ease;}
.faq-list details[open] summary::after {content:"–";transform:rotate(0deg);}
.faq-content {padding:0 18px 16px 18px;color:var(--grafite);line-height:1.55;}
.faq-cta {display:flex;justify-content:center;margin-top:14px;}
@media (max-width:640px){.faq-list{max-width:92%;}}


.rodape {
  background: transparent;         /* nada de barra/caixa */
  padding: 18px 0 26px;
}
.rodape .central {
  text-align: center;
}
.rodape-linha,
.rodape-copy {
  margin: 6px 0;
  color: var(--cinza);
  font-size: .95rem;
  line-height: 1.4;
}
.rodape-linha a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;   /* só destaca no hover */
  text-underline-offset: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.rodape-linha a:hover {
  color: var(--grafite);
  border-bottom-color: currentColor;
}
@media (max-width: 480px) {
  .rodape-linha, .rodape-copy { font-size: .9rem; }
}

@media (max-width:760px)
{
    .video-card{max-width:92%;}
    .video-cta .btn{min-width:auto;width:100%;max-width:360px;}
}

/* ===========================
   RESPONSIVIDADE GLOBAL
   (cole no final do seu CSS)
   =========================== */

/* caixa consistente em todos os elementos */
*, *::before, *::after { box-sizing: border-box; }

/* iOS notch-friendly em cabeçalho */
.site-header { padding-top: env(safe-area-inset-top, 0); }

/* transições mais leves para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ====== 1200px ↓: respiros e pequenos ajustes ====== */
@media (max-width: 1200px) {
  .central { padding: 0 20px; }
  .info { gap: 22px; }
  .cta-card { padding: 24px 20px; }
}

/* ====== 1024px ↓: duas colunas mais equilibradas ====== */
@media (max-width: 1024px) {
  .info { grid-template-columns: 1fr 1fr; }
  .sobre .conteudo { grid-template-columns: 1fr 1fr; }
  .feedback-grid { gap: 18px; }
  .titulo h1 { font-size: clamp(18px, 3vw, 26px); }
}

/* ====== 900px ↓: header em grade, ações encaixam ao lado ====== */
@media (max-width: 900px) {
  .site-header nav {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo acoes"
      "titulo titulo";
    row-gap: 8px;
  }
  .logo { grid-area: logo; }
  .titulo { grid-area: titulo; justify-self: start; }
  .acoes { grid-area: acoes; justify-self: end; gap: 8px; flex-wrap: wrap; }
  .acoes .btn { padding: 10px 14px; font-size: .9rem; letter-spacing: .04em; }
  .ico { width: 52px; height: 52px; }
  .outdoor-banner { min-height: clamp(220px, 34vw, 380px); }
}

/* ====== 840px ↓: grids viram coluna, CTAs em “stack” ====== */
@media (max-width: 840px) {
  /* INFO: texto primeiro, imagem depois (melhor conversão) */
  .info { grid-template-columns: 1fr; }
  .info .direita { order: 1; }
  .info .esquerda { order: 2; }
  .info .esquerda img { width: min(520px, 88%); margin: 6px auto 0; }

  .faq-title { margin-top:30px; font-size: 30px; }
  .faq-section a { margin-bottom:30px; }

  .beneficios { margin-top:20px; }

  /* SOBRE: card antes, foto depois */
  .sobre .conteudo { grid-template-columns: 1fr; gap: 20px; }
  .sobre .imagem img { margin: 8px auto 0; }

  /* FEEDBACKS: 2 colunas */
  .feedback-grid { grid-template-columns: repeat(2, 1fr); }

  /* CTA final: botões empilhados e mais largos */
  .cta-actions { flex-direction: column; gap: 10px; }
  .cta-actions .btn { width: 100%; max-width: 420px; }
}

/* ====== 640px ↓: mobile “real” ====== */
@media (max-width: 640px) {
  .central { padding: 0 16px; }
  .site-header { border-bottom-width: 3px; }
  .logo p { display: none; }         /* economiza espaço no topo */
  .ico { width: 44px; height: 44px; }

  .titulo h1 { font-size: clamp(18px, 5.2vw, 22px); }
  .outdoor-banner { min-height: clamp(200px, 48vw, 320px); }
  .outdoor-banner h1 { font-size: clamp(20px, 7vw, 34px); padding: 0 14px; }

  .barra { height: 26px; }
  .barra-salmao { margin: 28px 0; }

  .card { padding: 18px; border-radius: 14px; box-shadow: 5px 5px 0 var(--preto); }

  /* vídeo + CTA */
  .video-card { max-width: 92%; }
  .video-cta { margin-top: 10px; }
  .video-cta .btn { min-width: auto; width: 100%; max-width: 360px; }

  /* overlay do mute: texto e ícone um pouco menores */
  .mute-overlay { width: clamp(160px, 58vw, 280px); border-radius: 10px; }
  .mute-overlay .label { font-size: clamp(14px, 3.6vw, 16px); }
  .mute-overlay .icon { width: clamp(24px, 7vw, 40px); height: clamp(24px, 7vw, 40px); }

  /* feedbacks título menor e grid mais “apertado” */
  .feedback-title { font-size: 22px; margin-bottom: 12px; letter-spacing: 1px; }
  .feedback-grid { gap: 14px; }

  /* FAQ menos espaçado */
  .faq-list { max-width: 94%; gap: 10px; }
  .faq-list summary { padding: 12px 14px; }
  .faq-content { padding: 0 14px 14px; }
}

/* ====== 480px ↓: coluna única, tudo fluido ====== */
@media (max-width: 480px) {
  .feedback-grid { grid-template-columns: 1fr; }
  .cta-card { border-radius: 16px; padding: 20px 16px; }
  .cta-card h2 { font-size: clamp(20px, 6vw, 26px); }
  .cta-card .sub, .cta-card .selo { font-size: .95rem; }

  .btn { width: 100%; }              /* por padrão, botões ocupam a linha */
  .btn-lg { padding: 12px 18px; }

  .sobre .imagem img { width: 200px; height: 200px; }
}

/* ====== 360px ↓: micro-tunings ====== */
@media (max-width: 360px) {
  .titulo h1 { letter-spacing: .01em; }
  .acoes .btn { padding: 9px 12px; font-size: .85rem; box-shadow: 4px 4px 0 var(--preto); }
  .mute-overlay { width: 82%; }
}

@media (max-width: 640px) {
  .site-header nav {
    /* centraliza o conteúdo como um bloco compacto */
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas: "logo titulo";
    justify-content: center;   /* centra o grupo inteiro */
    align-items: center;
    gap: 10px;
    min-height: 64px;
    text-align: center;
  }

  .logo   { grid-area: logo; justify-self: center; }
  .titulo { grid-area: titulo; justify-self: center; }

  /* esconde os botões no mobile */
  .acoes { display: none !important; }

  /* esconde @ do lado da foto */
  .logo p { display: none !important; }

  /* ajustes de tamanho */
  .ico { width: 44px; height: 44px; }
  .titulo h1 { 
    font-size: clamp(18px, 5.2vw, 22px); 
    margin: 0;                 /* remove o margin-left */
    line-height: 1.1;
  }
}

/* opcional: em telas MUITO estreitas, pode empilhar */
@media (max-width: 360px) {
  .site-header nav {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "titulo";
    row-gap: 6px;
  }
}

/* SOBRE: no mobile, mostra a imagem primeiro e depois o texto */
@media (max-width: 840px) {
  .sobre .conteudo {
    display: grid;
    grid-template-columns: 1fr;              /* uma coluna */
    grid-template-areas:
      "imagem"
      "texto";                                /* imagem em cima, texto abaixo */
    gap: 20px;
    justify-items: center;                    /* centraliza os blocos */
    align-items: start;
  }

  /* mapeia as áreas */
  .sobre .imagem { grid-area: imagem; }
  .sobre .texto  { grid-area: texto;  }

  /* aumenta a foto no mobile (mantém formato circular) */
  .sobre .imagem img {
    width: clamp(260px, 72vw, 360px);
    height: clamp(260px, 72vw, 360px);
    margin: 8px auto 0;                      /* centralizada */
  }

  /* mantém o card de texto confortável em telas pequenas */
  .sobre .texto.card {
    width: 100%;
  }
}

/* SOBRE — mobile simples: imagem primeiro (maior) e texto depois */
@media (max-width: 840px) {
  .sobre { padding: 34px 0; }

  .sobre .conteudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "imagem"
      "texto";
    gap: 16px;
    justify-items: center;   /* centraliza os blocos */
    align-items: start;
  }

  /* ordem e áreas */
  .sobre .imagem { grid-area: imagem; }
  .sobre .texto  { grid-area: texto;  }

  /* garante que qualquer efeito anterior seja removido */
  .sobre .imagem::before { content: none !important; }

  /* foto maior e centralizada (mantém círculo) */
  .sobre .imagem img {
    width: clamp(260px, 70vw, 380px);
    height: clamp(260px, 70vw, 380px);
    margin: 0 auto;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--preto);
    box-shadow: 0 8px 20px rgba(0,0,0,.12), 6px 6px 0 var(--preto);
  }

  /* card de texto enxuto e legível */
  .sobre .texto.card {
    width: 100%;
    max-width: 720px;
    padding: 18px;
    box-shadow: 6px 6px 0 var(--preto);
    text-align: left;
    margin: 0 auto;
  }

  /* tipografia básica */
  .sobre .texto .intro {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .sobre .texto p { margin: 10px 0; line-height: 1.6; }
  .sobre .texto ul { margin: 10px 0 0; padding-left: 18px; }
  .sobre .texto li { margin: 6px 0; }
}

/* mobile estreito: pequena redução para caber melhor */
@media (max-width: 480px) {
  .sobre .imagem img {
    width: clamp(240px, 74vw, 340px);
    height: clamp(240px, 74vw, 340px);
  }
  .sobre .texto.card { padding: 16px; }
}

/* ===== Overlay "Clique aqui para ativar o som" — responsivo ao vídeo ===== */
.video-section .ratio-16x9 { position: relative; } /* garante o posicionamento do overlay */

.mute-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Escala pelo TAMANHO DO VÍDEO (percentual da .ratio-16x9), com limites */
  width: clamp(140px, 36%, 360px);
  max-width: 92%;           /* nunca encosta nas bordas em players pequenos */
  aspect-ratio: 1 / 1;      /* mantém quadrado */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem;

  color: #fff;
  background: rgba(0,0,0,.62);
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  z-index: 2;
  transition: transform .15s ease, opacity .2s ease;
}

.mute-overlay .icon {
  /* também escala com o tamanho do overlay */
  width: clamp(22px, 20%, 44px);
  height: clamp(22px, 20%, 44px);
  fill: currentColor;
}

.mute-overlay .label {
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  /* fonte cresce sem estourar em telas pequenas */
  font-size: clamp(13px, 2.2vw, 18px);
}

/* Mobile: overlay menor e texto ajustado */
@media (max-width: 640px) {
  .mute-overlay {
    width: clamp(120px, 52%, 260px);
    padding: .85rem;
    border-radius: 10px;
  }
  .mute-overlay .icon  { width: clamp(20px, 18%, 36px); height: clamp(20px, 18%, 36px); }
  .mute-overlay .label { font-size: clamp(13px, 3.5vw, 16px); }
}

/* Telefones muito estreitos */
@media (max-width: 360px) {
  .mute-overlay {
    width: clamp(110px, 66%, 220px);
    padding: .75rem;
  }
  .mute-overlay .label { font-size: clamp(12px, 4vw, 15px); }
}

/* ====== PREÇO (bloco dentro de .info .direita) — sem mudar o HTML ====== */
.info .direita .headline { margin-bottom: 6px; }

.info .direita h3,
.info .direita h4 { margin: 0; }

/* "Tudo isso por apenas..." — discreto como kicker */
.info .direita h3:first-of-type{
  color: var(--cinza);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(13px, .9vw, 14px);
  margin-top: 6px;
}

/* "12x de R$ 10,21" — destaque principal */
.info .direita h3:nth-of-type(2){
  font-weight: 800;
  color: var(--preto);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.1;
  margin: 6px 0 8px;
  position: relative;
  display: inline-block;
  padding-right: 4px;
  font-variant-numeric: tabular-nums; /* números alinhadinhos */
}

/* sublinhado em degradê com bordas arredondadas */
.info .direita h3:nth-of-type(2)::after{
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 2px;
  height: 12px;
  border-radius: 8px;
  opacity: .4;
  z-index: -1;
}

/* "OU R$ 99,90 À VISTA" — badge em pill */
.info .direita h4{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 10px;
  padding: 6px 12px;
  background: var(--creme-2);
  color: var(--grafite);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 14px);
  border: 2px solid var(--preto);
  border-radius: var(--pill);
  box-shadow: 3px 3px 0 var(--preto);
}

/* respiro entre preço e lista */
.info .direita .bullets{ margin-top: 10px; }
.info .direita .cta-inline{ margin-top: 6px; }

/* Mobile: centraliza só os preços, mantém texto restante fluido */
@media (max-width: 640px){

  .mobile { display:flex !important; }
  .valor-mobile { display:none !important; }

  .info .direita h3:first-of-type,
  .info .direita h3:nth-of-type(2),
  .info .direita h4 { display:block; text-align:center; }
  .info .direita h3:nth-of-type(2){ margin: 8px auto; }
  .info .direita h4{ margin: 0 auto 10px; }
  .info .direita h4 { margin: 0; }
  .valor { margin: 20px 0; padding:10px; display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--preto);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 var(--preto);
    padding: 24px; }
  .mobile-none { display:none; }
  .desktop-none { display: flex !important; }
}