/* ============================================================
   MATTRESS STORE COLCHÕES — landing page "Experimenta 90"
   Skill: site-institucional-html · rascunho de 10/09/2026 · revisão de 17/09/2026

   >>> TODOS OS TOKENS FICAM NO BLOCO :root ABAIXO. <<<
   Trocar identidade = trocar este bloco, nada mais.

   ORIGEM DAS CORES (nada aqui foi inventado):
   #941029  fundo do arquivo oficial 02_MATERIAIS/01_IDENTIDADE_VISUAL/Logo.png
   #73191A  "Primary / 400" da paleta global do WordPress da loja
   #5C0001  "Primary / 500" da paleta global do WordPress da loja
   #983031  "Primary / 300" da mesma paleta
   #343232  "Secundary / 500" da mesma paleta
   #FED073  amostra do arquivo 02_MATERIAIS/01_IDENTIDADE_VISUAL/Paleta de cores.PNG
   #EAE5E2  neutro claro da paleta global do WordPress
   ============================================================ */

:root{
  /* --- Tipografia ------------------------------------------- */
  --fonte-titulo:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fonte-texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* --- Paleta ----------------------------------------------- */
  --acento:#941029;         /* botões e destaques: a cor da marca */
  --acento-esc:#73191A;     /* hover, e link em texto sobre claro */
  --acento-claro:#FED073;   /* acento sobre fundo escuro (areia) */
  --acento-medio:#983031;   /* bordas e detalhes sobre claro */

  --vinho:#5C0001;          /* seção da oferta */
  --escuro:#343232;         /* cabeçalho, rodapé, seção institucional */
  --escuro-2:#443F3F;       /* card dentro do escuro */
  --escuro-3:#57504F;       /* borda dentro do escuro */

  --claro:#FAF7F5;          /* fundo principal */
  --superficie:#F1EBE8;     /* fundo alternado, quase imperceptível */
  --branco:#FFFFFF;
  --off-white:#FBF6F3;      /* texto sobre o escuro */

  --texto:#2A2626;
  --texto-sec:#6B6260;
  --texto-escuro-sec:#C4BAB7;  /* secundário sobre o escuro */
  --borda:rgba(42,38,38,.13);
  --borda-clara:rgba(251,246,243,.16);
  --whatsapp:#137A41;
  --whatsapp-esc:#0F6435;

  /* --- Forma ------------------------------------------------ */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:100px;
  --container:1200px; --header-h:74px;
  --altura-aviso:0px;

  --sombra-sm:0 1px 2px rgba(42,38,38,.06), 0 2px 8px rgba(42,38,38,.05);
  --sombra-md:0 4px 12px rgba(42,38,38,.07), 0 12px 28px rgba(42,38,38,.07);
  --sombra-lg:0 10px 24px rgba(42,38,38,.09), 0 26px 60px rgba(42,38,38,.11);

  /* --- Textura da marca -------------------------------------
     Grade de losangos arredondados: a trama de um pillow-top.
     SVG em data URI: escala, pesa quase nada, muda de cor por opacidade. */
  --ico-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6F3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M11 8.4v5.2M8.4 11h5.2'/%3E%3C/svg%3E");

  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M42 6 L78 42 L42 78 L6 42 Z' rx='6'/%3E%3Cpath d='M0 0 L6 42 L0 84'/%3E%3Cpath d='M84 0 L78 42 L84 84'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* âncora não some sob o cabeçalho fixo */
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:1rem;
  line-height:1.62;
  color:var(--texto);
  background:var(--claro);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--acento-esc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:600;line-height:1.14;letter-spacing:-.018em;margin:0 0 .5em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--acento-medio);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}

/* --- A largura é a primeira decisão -------------------------
   O container tem 1200px. O TEXTO NÃO. Sem estes tetos a linha
   passa de 90 caracteres e a página "parece esticada". */
.cabecalho-secao{max-width:720px;margin-bottom:44px}
.cabecalho-secao--largo{max-width:880px}
.cabecalho-secao--centro{margin-inline:auto;text-align:center}
.cabecalho-secao p{color:var(--texto-sec);font-size:1.06rem;margin-bottom:0}

.etiqueta{
  display:inline-flex;align-items:center;
  font-family:var(--fonte-titulo);font-size:.74rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);margin-bottom:16px;
}
/* Sem traço decorativo antes da etiqueta: decisão do Daniel, 17/09/2026. */
.secao-escura .etiqueta,.secao-vinho .etiqueta{color:var(--acento-claro)}

.secao{padding-block:88px}
.secao--clara{background:var(--claro)}
.secao--superficie{background:var(--superficie);border-block:1px solid var(--borda)}
.secao-escura{background:var(--escuro);color:var(--off-white)}
.secao-vinho{background:var(--vinho);color:var(--off-white)}
.secao-escura h2,.secao-escura h3,.secao-vinho h2,.secao-vinho h3{color:var(--off-white)}
.secao-vinho h2 em{font-style:normal;color:var(--acento-claro)}
.secao-escura .cabecalho-secao p,.secao-vinho .cabecalho-secao p{color:var(--texto-escuro-sec)}

/* --- Textura ------------------------------------------------ */
.com-trama{position:relative;overflow:hidden}
.com-trama > *{position:relative;z-index:1}
.com-trama::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--trama);background-size:84px 84px;
  opacity:.020;pointer-events:none;
}
.secao-escura.com-trama::before,.secao-vinho.com-trama::before,.cta-final.com-trama::before{
  opacity:.055;filter:invert(1);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-titulo);font-weight:600;font-size:1rem;line-height:1;
  padding:16px 28px;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn svg{width:19px;height:19px;flex:none;fill:currentColor}

.btn--wa{background:var(--whatsapp);color:#fff;box-shadow:var(--sombra-md)}
.btn--wa:hover{background:var(--whatsapp-esc);box-shadow:var(--sombra-lg)}
.btn--acento{background:var(--acento);color:#fff;box-shadow:var(--sombra-md)}
.btn--acento:hover{background:var(--acento-esc);box-shadow:var(--sombra-lg)}
.btn--borda-dourada,.btn--borda-dourada:hover{border:1.5px solid var(--acento-claro)}
.btn--claro{background:var(--off-white);color:var(--vinho)}
.btn--claro:hover{background:#fff}
.btn--linha{background:transparent;color:var(--texto);border-color:var(--borda)}
.btn--linha:hover{border-color:var(--acento);color:var(--acento)}
.btn--peq{padding:11px 20px;font-size:.9rem}
.btn--largo{width:100%}

.nota-btn{
  display:block;margin-top:12px;font-size:.83rem;color:var(--texto-sec);
  max-width:400px;
}
.secao-vinho .nota-btn,.cta-final .nota-btn{color:rgba(251,246,243,.72)}

/* ============================================================
   CABEÇALHO
   ============================================================ */
/* Efeito de rolagem (referência aprovada pelo Daniel em 17/09/2026:
   antes-do-fruto.vercel.app). No topo o cabeçalho é TRANSPARENTE sobre
   o herói claro, com logo nas cores originais e menu escuro. Ao rolar
   ele ganha o fundo escuro, a borda e a sombra, em ~500ms.

   ⚠️ Estado seguro: SEM JS o cabeçalho nasce sólido. O modo transparente
   só existe com a classe .js no <html> (script de uma linha no <head>),
   porque cabeçalho transparente sem JS deixaria o menu por cima do texto.
   Nas páginas legais o topo é escuro: lá o cabeçalho leva
   .cabecalho-site--solido e nunca fica transparente. */
.cabecalho-site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(52,50,50,.95);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borda-clara);
  box-shadow:0 2px 20px rgba(42,38,38,.28);
  transition:background-color .5s ease, border-color .5s ease, box-shadow .5s ease,
             backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
.js .cabecalho-site:not(.rolado):not(.cabecalho-site--solido){
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cabecalho-interno{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.marca{display:flex;align-items:center;flex:none}
/* Logo e menu BRANCOS nos dois estados do cabeçalho (topo transparente
   e rolado). A hero agora é foto escura: a versão colorida sumia ali.
   Decisão do Daniel, 17/09/2026. O filtro deixa o PNG branco sem perder
   resolução. */
.marca img{height:38px;width:auto;filter:brightness(0) invert(1)}
.marca:hover{text-decoration:none}
.menu a,.menu-btn,.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  transition:color .5s ease, background-color .5s ease, border-color .5s ease;
}
/* No topo, uma sombra leve no texto segura a leitura sobre a foto. */
.js .cabecalho-site:not(.rolado):not(.cabecalho-site--solido) .menu a{text-shadow:0 1px 8px rgba(0,0,0,.35)}

.menu{display:flex;align-items:center;gap:30px}
.menu a{
  position:relative;color:var(--off-white);font-size:.82rem;font-weight:600;
  padding-block:6px;text-transform:uppercase;letter-spacing:.07em;
}
.menu a:hover{text-decoration:none;color:var(--acento-claro)}
.menu a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--acento-claro);transition:width .22s ease;
}
.menu a:hover::after{width:100%}
.cabecalho-acao{display:flex;align-items:center;gap:14px}

.menu-btn{
  display:none;width:42px;height:42px;border:1px solid var(--borda-clara);
  background:transparent;border-radius:var(--r-sm);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-btn span{display:block;width:19px;height:2px;background:var(--off-white);position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:'';position:absolute;left:0;width:19px;height:2px;background:var(--off-white);
}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}

.menu-painel{
  display:none;position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--escuro);padding:34px 22px;overflow-y:auto;
}
.menu-painel.aberto{display:block}
.menu-painel a{
  display:block;color:var(--off-white);font-family:var(--fonte-titulo);
  font-size:1.24rem;font-weight:500;padding:16px 0;border-bottom:1px solid var(--borda-clara);
}
.menu-painel .btn{margin-top:28px}

/* ============================================================
   HERO — o endereço, não o ângulo
   ============================================================ */
/* O cabeçalho é fixed: o herói desce a altura dele para nada ficar por baixo */
/* A hero é uma FOTO DE FUNDO com o texto por cima. O cabeçalho é fixed,
   por isso ela desce a altura dele para nada ficar por baixo. */
.hero--foto{
  position:relative;overflow:hidden;
  background:var(--escuro);color:var(--off-white);
  padding-block:calc(var(--header-h) + 88px) 88px;
  display:flex;align-items:center;
  min-height:clamp(560px,76vh,780px);
}
.hero-fundo{position:absolute;inset:0;z-index:0}
.hero-fundo img{width:100%;height:100%;object-fit:cover;object-position:center}
/* O véu é o que faz o texto ser legível sobre qualquer foto. Mais fechado
   à esquerda, onde mora o título; mais aberto à direita, onde a foto respira. */
.hero-fundo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(28,23,23,.95) 0%,rgba(28,23,23,.88) 38%,rgba(28,23,23,.62) 72%,rgba(28,23,23,.48) 100%),
    linear-gradient(to top,rgba(28,23,23,.6) 0%,rgba(28,23,23,0) 42%);
}
.hero--foto > .container{position:relative;z-index:1}
.hero-conteudo{max-width:780px}

.hero--foto .etiqueta{color:var(--acento-claro)}
.hero-frase{
  font-family:var(--fonte-titulo);font-weight:600;font-size:1.02rem;
  color:rgba(251,246,243,.86);margin-bottom:12px;
}
.hero-conteudo h1{
  font-size:clamp(2.1rem,5vw,3.5rem);font-weight:700;color:var(--off-white);
  margin-bottom:20px;
}
.hero-conteudo h1 em{font-style:normal;color:var(--acento-claro)}
.hero-apoio{
  max-width:52ch;font-size:1.09rem;line-height:1.6;
  color:rgba(251,246,243,.9);margin-bottom:30px;
}
.hero-botoes{display:flex;flex-wrap:wrap;gap:12px}
.btn--linha-claro{color:var(--off-white);border-color:rgba(251,246,243,.45)}
.btn--linha-claro:hover{background:rgba(251,246,243,.12);border-color:rgba(251,246,243,.7)}
.hero--foto .nota-btn{display:block;margin-top:14px;color:rgba(251,246,243,.68);max-width:none}

/* Botões, endereço e selos formam um bloco só. O bloco tem a largura
   dos dois botões; os selos se espalham exatamente nessa largura
   (width:0 + min-width:100% = não empurram, só ocupam). */
.hero-acoes{display:inline-flex;flex-direction:column;max-width:100%}

/* Selos sobre foto: vidro, discretos, sem competir com os botões. */
.selos{
  display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;
  width:0;min-width:100%;
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(251,246,243,.18);
}
.selo{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:rgba(251,246,243,.08);border:1px solid rgba(251,246,243,.2);
  border-radius:var(--r-pill);backdrop-filter:blur(6px);
  padding:6px 11px;font-size:.74rem;font-weight:500;color:var(--off-white);
}
.selo svg{width:12px;height:12px;flex:none;fill:var(--acento-claro)}

/* ============================================================
   LETREIRO — faixa fina vermelha, texto dourado correndo
   ============================================================ */
.letreiro{
  background:var(--acento);overflow:hidden;
  padding-block:11px;border-block:1px solid rgba(254,208,115,.25);
}
.letreiro-trilho{display:flex;width:max-content;animation:letreiro 38s linear infinite}
.letreiro-grupo{display:flex;flex:none}
.letreiro-grupo span{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--fonte-titulo);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acento-claro);
}
.letreiro-grupo span::after{
  content:'';width:5px;height:5px;margin-inline:28px;
  background:var(--acento-claro);transform:rotate(45deg);opacity:.7;
}
@keyframes letreiro{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.letreiro-trilho{animation:none}}

/* ============================================================
   O ÂNGULO — a objeção real
   ============================================================ */
/* O botão que leva ao Experimenta 90, logo abaixo */
.angulo-texto > .btn{margin-top:24px}
.angulo-grade{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:56px;align-items:stretch}
.angulo-figura{margin:0;height:100%}
.angulo-figura img{
  width:100%;height:100%;min-height:360px;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--sombra-md);
}
.angulo-texto{max-width:none;align-self:center;min-width:0}
.angulo-texto h2{font-size:clamp(1.45rem,2.3vw,1.95rem)}
.angulo-texto > p{font-size:.96rem}
.angulo-texto p{color:var(--texto-sec);max-width:56ch}
/* Os quatro motivos para trocar, em card com ícone (2x2 no desktop,
   empilhados no celular). Ícone chapado na cor da marca: ilustra sem
   competir com a foto da seção. */
.risco-controles{display:flex;gap:10px;margin-top:24px;margin-bottom:16px}
.risco-carrossel{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 10px;margin:0;list-style:none;scrollbar-width:none;
}
.risco-carrossel::-webkit-scrollbar{display:none}
.risco-card{
  flex:0 0 calc((100% - 36px) / 3.2);scroll-snap-align:start;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:20px 20px 22px;
}
/* Icone e titulo na mesma linha (pedido do Daniel, 24/10/2026) */
.risco-topo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.risco-icone{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:rgba(148,16,41,.09);
}
.risco-icone svg{width:21px;height:21px;fill:var(--acento)}
.risco-card h3{
  font-family:var(--fonte-titulo);font-size:1rem;font-weight:600;
  color:var(--texto);margin:0;
}
/* Texto justificado (pedido do Daniel). Hifenização evita buracos
   entre palavras em coluna estreita; o <html lang="pt-BR"> garante as regras. */
.risco-card p,.angulo-texto > p:not(.angulo-ponte){text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.risco-card p{font-size:.85rem;line-height:1.55;margin:0;max-width:none}
/* Semente de curiosidade: empurra a leitura para o Experimenta 90 */
.angulo-texto .angulo-ponte{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--borda);font-size:.94rem;
  font-family:var(--fonte-titulo);font-weight:600;color:var(--acento);
  max-width:none;text-align:center;
}
/* O botao fecha a secao centralizado, embaixo da ponte */
.angulo-texto > .btn{display:flex;width:fit-content;margin-inline:auto}

/* ============================================================
   EXPERIMENTA 90 — a oferta
   ============================================================ */
.oferta-topo{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:52px;
}
.oferta-topo .cabecalho-secao{margin-bottom:0}
.oferta-selo{
  flex:none;text-align:center;border:2px solid var(--acento-claro);
  border-radius:var(--r-lg);padding:20px 30px;
}
.oferta-selo strong{
  display:block;font-family:var(--fonte-titulo);font-size:3rem;font-weight:700;
  color:var(--acento-claro);line-height:1;
}
.oferta-selo span{
  display:block;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(251,246,243,.82);margin-top:6px;
}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.passo{
  background:rgba(251,246,243,.06);border:1px solid rgba(251,246,243,.14);
  border-radius:var(--r-md);padding:28px 26px;
  /* bloco escuro precisa declarar a própria cor de texto */
  color:var(--off-white);
}
.passo-num{
  font-family:var(--fonte-titulo);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  color:var(--acento-claro);display:block;margin-bottom:12px;
}
.passo h3{font-size:1.14rem;margin-bottom:8px;color:var(--off-white)}
.passo p{margin:0;font-size:.95rem;color:var(--texto-escuro-sec);max-width:38ch}

.oferta-rodape{
  margin-top:44px;display:flex;flex-wrap:wrap;gap:22px;
  align-items:center;justify-content:space-between;
}
.aviso-condicoes{
  font-size:.83rem;color:rgba(251,246,243,.66);margin:0;
}

/* ============================================================
   PRODUTOS
   ============================================================ */
.produtos-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.produtos-topo .cabecalho-secao{max-width:none;min-width:0}
.produtos-topo .cabecalho-secao p{max-width:72ch}
.carrossel-controles{display:flex;gap:10px;margin-bottom:44px}
.seta{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--borda);
  background:var(--branco);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease, background-color .2s ease;
}
.seta:hover{border-color:var(--acento);background:var(--acento);}
.seta:hover svg{fill:#fff}
.seta svg{width:17px;height:17px;fill:var(--texto)}
.seta[disabled]{opacity:.35;cursor:default}
.seta[disabled]:hover{border-color:var(--borda);background:var(--branco)}
.seta[disabled]:hover svg{fill:var(--texto)}

.carrossel{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;scrollbar-width:none;
}
.carrossel::-webkit-scrollbar{display:none}
.produto{
  flex:0 0 calc((100% - 60px) / 3.3);scroll-snap-align:start;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);
  overflow:hidden;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.produto:hover{transform:translateY(-3px);box-shadow:var(--sombra-md);border-color:var(--acento-medio)}
/* Fotos de produto em quarto decorado (18/09/2026): ocupam o card inteiro. */
.produto-foto{background:var(--superficie);padding:0;overflow:hidden}
/* As fotos já vêm cortadas em 8:7 (o formato do card), então cover não corta nada. */
.produto-foto img{
  width:100%;height:auto;aspect-ratio:8/7;object-fit:cover;display:block;
}
.produto-info{padding:4px 22px 24px;border-top:1px solid var(--borda)}
.produto-marca{
  display:block;font-family:var(--fonte-titulo);font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acento);margin:16px 0 6px;
}
.produto-info h3{font-size:1.04rem;margin-bottom:6px}
.produto-info p{margin:0;font-size:.88rem;color:var(--texto-sec);max-width:34ch}

.nota-catalogo{
  margin-top:30px;font-size:.9rem;color:var(--texto-sec);max-width:62ch;
}
.produtos-rodape{
  margin-top:30px;display:flex;flex-direction:column;gap:14px;
  align-items:center;text-align:center;
}
.produtos-rodape .nota-catalogo{margin:0}
.nota-catalogo--legal{font-size:.78rem;font-style:italic;max-width:none}

/* ============================================================
   OS QUATRO DIFERENCIAIS (seção escura)
   O comparativo com a concorrência saiu em 17/09/2026, por decisão
   do Daniel: "falar dos outros é dar ibope para os outros".
   Ficaram os quatro ícones, que são fato da loja.
   ============================================================ */
.diferenciais{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:48px;
}
.diferencial{color:var(--off-white);padding-inline:26px}
.diferencial:first-child{padding-left:0}
.diferencial + .diferencial{border-left:1px solid rgba(254,208,115,.3)}
.diferencial svg{width:26px;height:26px;fill:var(--acento-claro);margin-bottom:14px}
.diferencial h3{font-size:1.02rem;margin-bottom:6px;color:var(--off-white)}
.diferencial p{margin:0;font-size:.9rem;color:var(--texto-escuro-sec);max-width:34ch}


/* ============================================================
   A LOJA — endereço, mapa e formulário
   ============================================================ */
/* Desde 24/10/2026 a grade tem só os dados: o formulário virou seção
   própria. Os quatro itens se espalham em 2x2 para não virar uma lista
   fina atravessando a página. O mapa continua fora, em largura total. */
/* Esquerda: dados com o mapa embaixo. Direita: o orçamento.
   (Daniel, 24/10/2026 — encurta a página, que tinha seção só para o form.) */
.loja-grade{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.loja-coluna{display:flex;flex-direction:column;gap:28px}
.loja-dados{max-width:none}
.loja-grade .mapa iframe{height:280px}
/* Herdava align-self:center de .form-caixa e descia 62px em relacao aos
   dados ao lado. Aqui as duas colunas comecam juntas. */
.loja-grade > #falar{align-self:start}
.dado{display:flex;gap:15px;padding-block:18px;border-bottom:1px solid var(--borda)}
.dado:first-of-type{border-top:1px solid var(--borda)}
.dado svg{width:20px;height:20px;flex:none;margin-top:3px;fill:var(--acento)}
.dado b{display:block;font-family:var(--fonte-titulo);font-size:.94rem;margin-bottom:2px}
.dado span{display:block;font-size:.95rem;color:var(--texto-sec)}
.mapa{
  margin-top:28px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--borda);
  box-shadow:var(--sombra-sm);
}
.mapa iframe{display:block;width:100%;height:260px;border:0}
/* Fora da grade, o mapa ocupa a largura inteira da seção. */
.mapa--largo{margin-top:44px}
.mapa--largo iframe{height:380px}

.form-caixa{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);
  padding:34px;box-shadow:var(--sombra-md);
}
.form-caixa h3{font-size:1.3rem;margin-bottom:6px}
/* Caixa que ocupa o lugar do formulário enquanto FORM_ATIVO = false
   (assets/js/site.js). Mesma moldura, conversão só por WhatsApp. */
/* Caixa de dúvida: compacta, centralizada na coluna, botão no meio
   e texto justificado (pedido do Daniel, 17/09/2026). */
.form-caixa--whatsapp{
  width:100%;max-width:440px;justify-self:center;align-self:center;
  padding:28px 30px;text-align:center;
}
.form-caixa--whatsapp h3{font-size:1.15rem}
.form-caixa--whatsapp > p{font-size:.9rem;text-align:justify;hyphens:auto;max-width:none;margin-inline:auto}
.form-caixa--whatsapp .btn{margin-top:10px;font-size:.92rem;padding:13px 22px}
.form-caixa--whatsapp .nota-btn{max-width:none}
/* A caixa e centralizada, mas formulario se le alinhado a esquerda. */
/* Em seção própria desde 24/10/2026: a caixa centraliza e tem largura
   de leitura, senão o campo vira uma régua de 1100px. */
/* Centralizado na coluna (Daniel, 24/10/2026) */
.form-caixa--whatsapp#falar{padding:28px 30px;max-width:460px;margin-inline:auto}
.form-caixa--whatsapp#falar h3{margin-bottom:4px;font-size:1.12rem}
#form-qualifica{text-align:left;margin-top:14px}
#form-qualifica .campo{margin-bottom:12px}
#form-qualifica .btn{margin-top:4px}
#form-qualifica .nota-consentimento{margin-top:10px;font-size:.76rem;line-height:1.45;text-align:center;max-width:none}
#form-qualifica .form-retorno{text-align:center;margin-top:8px;font-size:.86rem;color:var(--texto-sec)}
.form-caixa > p{font-size:.94rem;color:var(--texto-sec);max-width:44ch}
.campo{margin-bottom:16px}
.campo label{
  display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:var(--texto);
}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:.96rem;color:var(--texto);
  padding:13px 15px;border:1px solid var(--borda);border-radius:var(--r-sm);
  background:var(--claro);transition:border-color .18s ease, box-shadow .18s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px rgba(148,16,41,.12);
}
.campo textarea{min-height:88px;resize:vertical}
.consentimento{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.82rem;color:var(--texto-sec);margin-bottom:20px;line-height:1.5;
}
.consentimento input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--acento)}
.form-retorno{
  margin-top:14px;font-size:.88rem;color:var(--acento-esc);font-weight:500;
}

/* ============================================================
   DÚVIDAS
   ============================================================ */
.faq{max-width:820px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--borda)}
.faq-item:first-child{border-top:1px solid var(--borda)}
.faq-pergunta{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-family:var(--fonte-titulo);font-size:1.05rem;font-weight:500;
  color:var(--texto);
}
.faq-pergunta:hover{color:var(--acento)}
.faq-mais{
  flex:none;width:24px;height:24px;position:relative;
  transition:transform .25s ease;
}
.faq-mais::before,.faq-mais::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--acento);
  transform:translate(-50%,-50%);
}
.faq-mais::before{width:14px;height:2px}
.faq-mais::after{width:2px;height:14px}
.faq-item.aberto .faq-mais{transform:rotate(45deg)}
.faq-resposta{height:0;overflow:hidden;transition:height .28s ease}
.faq-resposta p{
  padding:0 4px 22px;margin:0;color:var(--texto-sec);font-size:.98rem;max-width:70ch;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{background:var(--acento);color:var(--off-white);padding-block:80px;text-align:center}
.cta-final h2{
  color:var(--off-white);font-size:clamp(1.7rem,3.3vw,2.5rem);
  max-width:720px;margin-inline:auto;
}
.cta-final > .container > p{
  color:rgba(251,246,243,.9);max-width:560px;margin-inline:auto;font-size:1.05rem;
}
.cta-botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta-final .nota-btn{margin-inline:auto;text-align:center}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{background:var(--escuro);color:var(--off-white);padding-top:64px}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px;padding-bottom:40px}
.rodape img{height:40px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px}
.rodape-frase{color:var(--texto-escuro-sec);font-size:.94rem;max-width:34ch}
.rodape h4{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento-claro);margin-bottom:16px;
}
.rodape li{margin-bottom:9px}
.rodape a{color:var(--off-white);font-size:.94rem}
.rodape a:hover{color:var(--acento-claro);text-decoration:none}
.rodape address{font-style:normal;color:var(--texto-escuro-sec);font-size:.94rem;line-height:1.7}
.rodape-base{
  padding-block:26px 14px;display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;font-size:.82rem;color:var(--texto-escuro-sec);
  border-top:1px solid var(--borda-clara);
}
.rodape-legais{display:flex;gap:16px;flex-wrap:wrap}
/* © à esquerda, CNPJ no centro, páginas legais à direita */
.rodape-base--tres{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.rodape-base--tres > :first-child{justify-self:start}
.rodape-base--tres > .rodape-legais{justify-self:end}

.rodape-social{display:flex;gap:10px;margin-top:18px;list-style:none;padding:0;flex-wrap:wrap}
.rodape-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(251,246,243,.08);border:1px solid var(--borda-clara);
  transition:background .18s ease,border-color .18s ease;
}
.rodape-social a:hover{background:rgba(251,246,243,.16);border-color:rgba(251,246,243,.4)}
.rodape-social svg{width:19px;height:19px;fill:var(--off-white)}
.rodape-credito{
  padding-block:14px 92px;text-align:center;
  border-top:1px solid rgba(251,246,243,.08);
  font-size:.78rem;color:rgba(251,246,243,.42);
}
.rodape-credito a{color:rgba(251,246,243,.72);font-weight:500;font-size:.78rem}
.rodape-credito a:hover{color:var(--acento-claro)}

/* ============================================================
   FLUTUANTE E AVISO DE COOKIES
   ============================================================ */
.wa-flutuante{
  position:fixed;right:20px;z-index:90;
  bottom:calc(20px + var(--altura-aviso));
  width:58px;height:58px;border-radius:50%;
  background:var(--whatsapp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-lg);
  transition:transform .2s ease, bottom .3s ease;
}
.wa-flutuante:hover{transform:scale(1.07);text-decoration:none}
.wa-flutuante svg{width:30px;height:30px;fill:#fff}
/* No topo da página o flutuante fica escondido: no celular ele cobria
   exatamente o botão principal do herói. Volta assim que a pessoa rola.
   Nasce VISÍVEL: sem JS, o botão continua no ar. */
.wa-flutuante.oculto{
  opacity:0;visibility:hidden;transform:scale(.7) translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}

.aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--escuro);color:var(--off-white);
  padding:16px 22px;display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;
  transform:translateY(100%);transition:transform .34s ease;
  box-shadow:0 -4px 20px rgba(42,38,38,.24);
}
.aviso-cookies.visivel{transform:translateY(0)}
.aviso-cookies p{margin:0;font-size:.86rem;max-width:70ch;color:var(--texto-escuro-sec)}
.aviso-cookies a{color:var(--acento-claro)}
.aviso-cookies-btn{
  flex:none;background:var(--acento-claro);color:var(--vinho);border:0;cursor:pointer;
  font-family:var(--fonte-titulo);font-weight:600;font-size:.88rem;
  padding:11px 24px;border-radius:var(--r-pill);
}

/* ============================================================
   LIGHTBOX — clicar na foto abre ampliada
   Mesmo padrão do site da VSI Fibras. Sem biblioteca.
   ============================================================ */
[data-zoom]{cursor:zoom-in}
[data-zoom]::after{
  /* lupa discreta no canto, só no hover e só onde há mouse */
  content:'';position:absolute;right:12px;bottom:12px;width:34px;height:34px;
  border-radius:50%;background:rgba(42,38,38,.62) var(--ico-lupa) center/17px no-repeat;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
[data-zoom]:hover::after,[data-zoom]:focus-visible::after{opacity:1;transform:none}
@media (hover:none){[data-zoom]::after{display:none}}

.lightbox{
  position:fixed;inset:0;z-index:220;background:rgba(26,20,20,.95);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lightbox.aberto{display:flex}
.lightbox img{
  max-width:min(1100px,92vw);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-md);background:var(--branco);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.lightbox-legenda{
  position:absolute;bottom:28px;left:24px;right:24px;text-align:center;
  color:var(--off-white);font-size:.85rem;letter-spacing:.06em;
}
.lightbox-btn{
  position:absolute;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(251,246,243,.13);color:var(--off-white);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;
}
.lightbox-btn svg{width:21px;height:21px}
.lightbox-btn:hover{background:rgba(251,246,243,.26)}
.lightbox-fechar{top:22px;right:22px}
.lightbox-ant{left:22px;top:50%;transform:translateY(-50%)}
.lightbox-prox{right:22px;top:50%;transform:translateY(-50%)}
/* Modo simples: foto avulsa, sem lista para navegar */
.lightbox--simples .lightbox-ant,
.lightbox--simples .lightbox-prox{display:none}

/* ============================================================
   DEPOIMENTOS DO GOOGLE — esteira horizontal contínua
   ⚠️ A seção nasce com o atributo `hidden` no HTML: só sai do ar
      quando existir depoimento REAL. Ver o comentário no index.html.
   ============================================================ */
.depoimentos{overflow:hidden}
.depo-esteira{
  position:relative;margin-top:34px;
  /* as pontas somem em degradê: dá a sensação de fita infinita */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.depo-trilho{
  display:flex;gap:20px;width:max-content;padding:6px 22px;
  animation:esteira 46s linear infinite;
}
.depo-esteira:hover .depo-trilho,
.depo-esteira:focus-within .depo-trilho{animation-play-state:paused}
@keyframes esteira{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}

.depo{
  flex:0 0 340px;background:var(--branco);border:1px solid var(--borda);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--sombra-sm);
  display:flex;flex-direction:column;gap:14px;
}
.depo-estrelas{display:flex;gap:3px}
.depo-estrelas svg{width:17px;height:17px;fill:#E8A21C}
.depo blockquote{
  margin:0;font-size:.97rem;line-height:1.62;color:var(--texto);flex:1;
}
.depo-autor{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--borda);padding-top:13px}
.depo-nome{font-family:var(--fonte-titulo);font-weight:600;font-size:.94rem}
.depo-fonte{font-size:.82rem;color:var(--texto-sec)}

/* Sem JS a esteira ainda rola sozinha pelo CSS; com movimento reduzido
   ela para e vira uma faixa que a pessoa arrasta. */
@media (prefers-reduced-motion: reduce){
  .depo-trilho{animation:none;overflow-x:auto;width:auto}
}

/* Âncora da lupa do lightbox */
.angulo-figura,.produto-foto{position:relative}

/* ============================================================
   REVELAÇÃO AO ROLAR
   A primeira dobra NÃO leva .revelar: o herói tem que estar
   legível no primeiro quadro (prévia do link, captura, visitante
   apressado). Sem JS ou com movimento reduzido, tudo nasce visível.
   ============================================================ */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.revelar.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .revelar{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   PÁGINAS LEGAIS (política de privacidade e termos de uso)
   Mesmo esqueleto do site da VSI Fibras, com os tokens desta marca.
   ============================================================ */
.legal-topo{
  position:relative;background:var(--escuro);color:var(--off-white);
  padding:calc(var(--header-h) + 52px) 0 44px;
}
.legal-topo::before{
  content:'';position:absolute;inset:0;background:var(--trama);
  opacity:.055;pointer-events:none;
}
.legal-topo .container{position:relative}
.legal-topo h1{color:var(--off-white);font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:10px}
.legal-data{font-size:.86rem;color:var(--texto-escuro-sec)}
.legal-voltar{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:20px;
  font-size:.88rem;color:var(--texto-escuro-sec);text-decoration:none;
}
.legal-voltar:hover{color:var(--off-white);text-decoration:none}
.legal-voltar svg{width:15px;height:15px}

.legal-corpo{padding-block:clamp(46px,6vw,76px)}
.legal-corpo .container{max-width:760px}
.legal-intro{
  font-size:1.03rem;line-height:1.75;color:var(--texto);
  padding-bottom:26px;border-bottom:1px solid var(--borda);
}
.legal-secao{padding-block:26px;border-bottom:1px solid var(--borda)}
.legal-secao:last-of-type{border-bottom:0}
.legal-secao h2{
  display:flex;align-items:baseline;gap:14px;
  font-size:1.16rem;font-weight:600;margin-bottom:14px;
}
.legal-num{
  font-size:.8rem;font-weight:600;color:var(--acento);
  letter-spacing:.1em;flex:none;
}
.legal-secao p{color:var(--texto-sec);line-height:1.75;margin-bottom:12px}
.legal-secao p:last-child{margin-bottom:0}
.legal-secao a{color:var(--acento-esc);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.legal-secao ul{margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.legal-secao li{position:relative;padding-left:20px;color:var(--texto-sec);line-height:1.7}
.legal-secao li::before{
  content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;transform:rotate(45deg);background:var(--acento);
}
.legal-aviso{
  margin-top:38px;padding:28px;border-radius:var(--r-lg);
  background:var(--superficie);border:1px solid var(--borda);
}
.legal-aviso h3{font-size:1.06rem;margin-bottom:8px}
.legal-aviso p{color:var(--texto-sec);font-size:.95rem;line-height:1.7;margin-bottom:18px}

/* Caixa de aviso de validação jurídica: fica NA PÁGINA, visível,
   enquanto o documento não for validado por advogado. */
.legal-rascunho{
  margin-bottom:30px;padding:18px 20px;border-radius:var(--r-md);
  background:#FFF6E3;border:1px solid #E8C980;color:#6A4A05;
  font-size:.9rem;line-height:1.62;
}
.legal-rascunho strong{color:#4E3603}

@media (max-width:640px){
  .legal-secao h2{flex-direction:column;gap:3px}
  .legal-aviso{padding:22px 20px}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .diferenciais{grid-template-columns:repeat(2,1fr);gap:30px}
  .diferencial,.diferencial:first-child{padding:0;border-left:0}
  .diferencial + .diferencial{border-left:0}
  .produto{flex:0 0 calc((100% - 40px) / 2.3)}
}

/* Frases que o Daniel quer em linha única. Só em tela larga: no
   celular elas quebram normalmente, senão estouram a largura. */
@media (min-width:1100px){
  .hero--foto .nota-btn,.aviso-condicoes{white-space:nowrap}
}

@media (max-width:1100px){
  .risco-carrossel{gap:16px}
  .risco-card{flex:0 0 calc((100% - 16px) / 2.15)}
}

@media (max-width:900px){
  .secao{padding-block:66px}
  .menu,.cabecalho-acao .btn{display:none}
  .menu-btn{display:flex}
  .angulo-grade,.loja-grade{
    grid-template-columns:1fr;gap:40px;
  }
  .angulo-texto,.loja-dados{max-width:none}
  .angulo-figura{order:-1;height:auto}
  .angulo-figura img{height:auto;min-height:0;aspect-ratio:4/3}
  .hero--foto{padding-block:calc(var(--header-h) + 56px) 64px;min-height:0}
  .mapa--largo iframe{height:300px}
  .oferta-topo{grid-template-columns:1fr;gap:26px;align-items:start}
  .oferta-selo{justify-self:start}
  .passos{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr;gap:34px}
}

@media (max-width:640px){
  body{font-size:.97rem}
  .container{padding-inline:18px}
  .secao{padding-block:56px}
  .hero-botoes .btn{width:100%}
  .hero-acoes{display:flex}
  .selos{width:auto;flex-wrap:wrap;justify-content:flex-start}
  .rodape-base--tres{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .rodape-base--tres > :first-child,.rodape-base--tres > .rodape-legais{justify-self:center}
  .selos{gap:8px}
  .selo{font-size:.8rem;padding:8px 13px}
  .produto{flex:0 0 82%}
  .carrossel-controles{display:none}
  /* Celular: um card por tela, arrastando. As setas somem, o dedo basta. */
  .risco-controles{display:none}
  .risco-carrossel{gap:14px}
  .risco-card{flex:0 0 86%}
  .form-caixa{padding:24px 20px}
  .cta-botoes .btn{width:100%}
  .oferta-rodape{flex-direction:column;align-items:flex-start}
  .rodape-base{justify-content:center}
  .depo{flex:0 0 78vw}
  .depo-trilho{animation-duration:34s}
  .lightbox{padding:12px}
  .lightbox-btn{width:42px;height:42px}
  .lightbox-fechar{top:12px;right:12px}
  .lightbox-ant{left:8px}
  .lightbox-prox{right:8px}
}