/* Plataforma Loja do Feltro — protótipo de estrutura (04/11/2026)
   Identidade: Loja do Feltro / Rosa Feltro (Loja do feltro/Identidade/identidade-visual.md) */
:root{
  --fundo:#FFF4F1;        /* fundo rosado (nunca branco puro) */
  --rosa:#C93F5F;         /* rosa principal */
  --rosa-escuro:#A82F4D;
  --verde:#2F6B5A;        /* verde pinheiro */
  --mostarda:#F2B544;     /* atenção: usar pouco */
  --texto:#3A2A2E;        /* marrom do texto */
  --card:#FFFFFF;
  --linha:#EBCFCB;
  --suave:#FBE6E1;
  --f-titulo:'Fredoka',system-ui,sans-serif;
  --f-texto:'Nunito',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){ :root{ color-scheme:light } } /* marca é clara; sem tema escuro nesta versão */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fundo);color:var(--texto);font-family:var(--f-texto);font-size:18px;line-height:1.55}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;line-height:1.15}
h1{font-size:clamp(34px,6vw,56px)}
h2{font-size:clamp(26px,4vw,36px)}
h3{font-size:20px}
.etiqueta{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;font-family:var(--f-titulo);font-weight:600;font-size:18px;border:0;cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-2px)}
.btn-rosa{background:var(--rosa);color:#fff}
.btn-rosa:hover{background:var(--rosa-escuro)}
.btn-mostarda{background:var(--mostarda);color:var(--texto)}   /* texto marrom sobre mostarda */
.btn-contorno{background:transparent;color:var(--rosa);box-shadow:inset 0 0 0 2px var(--rosa)}
.btn-pequeno{min-height:42px;padding:8px 18px;font-size:16px}
.btn-bloco{display:flex;width:100%}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}

/* ---------- cabeçalho ---------- */
.topo{background:var(--fundo);position:sticky;top:0;z-index:20;border-bottom:2px dashed var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
.marca{display:flex;align-items:center;gap:12px}
.marca svg{width:48px;height:48px;flex:none}
.marca-nome{font-family:var(--f-titulo);font-weight:600;font-size:22px;line-height:1;color:var(--rosa)}
.marca-nome small{display:block;font-family:var(--f-texto);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--verde);margin-top:4px}
.menu{display:flex;align-items:center;gap:22px;font-weight:700}
.menu a:hover{color:var(--rosa)}
@media(max-width:820px){ .menu .link{display:none} .marca-nome{font-size:19px} }

/* ---------- placeholders ---------- */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--suave) 0 12px,#FFF 12px 24px);
  border:2px dashed var(--rosa);border-radius:18px;color:var(--rosa);
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:12px;overflow:hidden}
.ph span{background:var(--fundo);padding:4px 10px;border-radius:999px}
.r16x9{aspect-ratio:16/9}
.r1x1{aspect-ratio:1/1}
.r4x5{aspect-ratio:4/5}

/* ---------- hero ---------- */
.hero{padding:40px 0 24px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero p.sub{font-size:20px;margin:16px 0 24px;max-width:520px}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px}
.hero h1 em{font-style:normal;color:var(--rosa)}
.selos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-weight:700;font-size:15px;color:var(--verde)}
.selos li{list-style:none}
.selos li::before{content:"✓ ";font-weight:800}
@media(max-width:820px){ .hero .wrap{grid-template-columns:1fr} }

/* ---------- seções ---------- */
section.bloco{padding:40px 0}
.cab{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.cab p{max-width:560px;margin-top:6px}
.ver-todas{font-family:var(--f-titulo);font-weight:600;color:var(--rosa)}
.ver-todas:hover{text-decoration:underline}
.costura{border:0;border-top:3px dashed var(--linha);margin:0}   /* pontilhado de costura */

/* nichos */
.nichos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.nicho{border-radius:20px;padding:20px 14px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:150px;justify-content:center;transition:transform .12s;position:relative}
.nicho:hover{transform:translateY(-3px)}
.nicho .ico{font-size:34px;line-height:1}
.nicho strong{font-family:var(--f-titulo);font-weight:600;font-size:20px;line-height:1.1}
.nicho small{font-weight:700;font-size:14px;opacity:.95}
.n-rosa{background:var(--rosa)}
.n-verde{background:var(--verde)}
.n-mostarda{background:var(--mostarda);color:var(--texto)}
.n-vinho{background:#8E2C45}
.n-musgo{background:#4C8A77}
.nicho.forte::after{content:"MAIS PROCURADO";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--mostarda);color:var(--texto);font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:999px;white-space:nowrap}
@media(max-width:900px){ .nichos{grid-template-columns:repeat(2,1fr)} .nicho:first-child{grid-column:1/-1} }

/* cards de aula */
.grade{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){ .g3{grid-template-columns:1fr} }
@media(max-width:480px){ .g4{grid-template-columns:1fr} }
.card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 2px 0 var(--linha),0 8px 22px rgba(58,42,46,.06);display:flex;flex-direction:column;transition:transform .12s}
.card:hover{transform:translateY(-3px)}
.card .thumb{position:relative;padding:10px 10px 0}
.card .thumb .ph{border-radius:14px}
.badge{position:absolute;left:20px;top:20px;background:var(--rosa);color:#fff;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.badge.verde{background:var(--verde)}
.duracao{position:absolute;right:20px;bottom:10px;background:rgba(58,42,46,.88);color:#fff;font-size:13px;font-weight:800;padding:2px 8px;border-radius:8px}
.card .corpo{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .prof{font-size:14px;font-weight:700;color:var(--verde)}
.card .vende{margin-top:auto;font-size:14px;font-weight:700;color:var(--rosa)}

/* aula destaque (grande) */
.destaque{display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:var(--card);border-radius:24px;overflow:hidden;box-shadow:0 2px 0 var(--linha),0 12px 30px rgba(58,42,46,.08)}
.destaque .lado{padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.destaque .thumb{padding:12px}
.destaque .thumb .ph{border-radius:16px;height:100%;min-height:240px}
@media(max-width:820px){ .destaque{grid-template-columns:1fr} }

/* produtos */
.produto{background:var(--card);border-radius:20px;padding:10px 10px 16px;box-shadow:0 2px 0 var(--linha);display:flex;flex-direction:column;gap:8px}
.produto .nome{font-weight:800;padding:0 6px;line-height:1.25}
.produto .preco{font-family:var(--f-titulo);font-weight:600;font-size:24px;color:var(--rosa);padding:0 6px}
.produto .preco s{font-family:var(--f-texto);font-size:14px;color:#8a7a7d;font-weight:600;margin-left:6px}
.produto .btn{margin:4px 6px 0}
.flag{position:absolute;right:10px;top:10px;z-index:2;background:var(--mostarda);color:var(--texto);font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.produto .cx{position:relative}

/* como funciona */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:p}
.passo{background:var(--card);border-radius:20px;padding:24px;box-shadow:0 2px 0 var(--linha);position:relative}
.passo::before{counter-increment:p;content:counter(p);width:44px;height:44px;border-radius:50%;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-titulo);font-weight:600;font-size:22px;margin-bottom:10px}
@media(max-width:760px){ .passos{grid-template-columns:1fr} }

/* faixa final */
.faixa{background:var(--rosa);color:#fff;border-radius:28px;padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;background-image:radial-gradient(circle at 12px 12px,rgba(255,255,255,.18) 2px,transparent 3px);background-size:28px 28px}
.faixa p{max-width:560px}

/* rodapé */
.rodape{margin-top:48px;background:var(--texto);color:#F5E6E2;padding:36px 0 28px;font-size:15px}
.rodape .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.rodape h4{font-family:var(--f-titulo);font-weight:600;font-size:18px;color:#fff;margin-bottom:8px}
.rodape li{list-style:none;margin:4px 0}
.rodape a:hover{text-decoration:underline}
.rodape .copy{grid-column:1/-1;border-top:2px dashed rgba(255,255,255,.25);padding-top:16px;font-size:13px;opacity:.85}
@media(max-width:760px){ .rodape .wrap{grid-template-columns:1fr} }

/* ---------- página da aula ---------- */
.migalha{font-size:14px;font-weight:700;padding:18px 0 6px;color:var(--verde)}
.migalha a:hover{text-decoration:underline}
.aula-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start;padding-bottom:24px}
@media(max-width:900px){ .aula-grid{grid-template-columns:1fr} }
.video{border-radius:20px;overflow:hidden;box-shadow:0 2px 0 var(--linha),0 12px 30px rgba(58,42,46,.1)}
.video .ph{border-radius:0;border:0;aspect-ratio:16/9;font-size:15px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}
.chip{background:var(--suave);color:var(--rosa);font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px}
.chip.verde{background:#DCEBE5;color:var(--verde)}
.texto-aula h2{margin:28px 0 10px;font-size:26px}
.texto-aula ul{padding-left:22px}
.texto-aula li{margin:4px 0}
.caixa-compra{background:var(--card);border-radius:24px;padding:20px;box-shadow:0 2px 0 var(--linha),0 12px 30px rgba(58,42,46,.1);position:sticky;top:90px;border:2px dashed var(--rosa)}
.caixa-compra h3{font-size:22px;margin-bottom:4px;color:var(--rosa)}
.item-mat{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;padding:12px 0;border-top:2px dashed var(--linha)}
.item-mat:first-of-type{border-top:0}
.item-mat .ph{border-radius:12px;font-size:10px;padding:4px}
.item-mat .ph span{padding:2px 6px}
.item-mat .nome{font-weight:800;line-height:1.2}
.item-mat .preco{font-family:var(--f-titulo);font-weight:600;color:var(--rosa);font-size:18px}
.item-mat .btn{grid-column:1/-1}
.garantias{font-size:14px;font-weight:700;color:var(--verde);margin-top:12px;display:grid;gap:4px}
.barra-fixa{display:none}
@media(max-width:900px){
  .caixa-compra{position:static}
  .barra-fixa{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--fundo);border-top:2px dashed var(--rosa);padding:10px 16px;gap:12px;align-items:center;justify-content:space-between}
  .barra-fixa span{font-family:var(--f-titulo);font-weight:600;color:var(--rosa);line-height:1.1}
  body.tem-barra{padding-bottom:76px}
}

/* aviso de protótipo */
.aviso-proto{background:var(--mostarda);color:var(--texto);font-weight:800;font-size:13px;text-align:center;padding:6px 12px}

/* ---------- v2 (04/11): intro compacta + correções de mobile ---------- */
.intro{padding:28px 0 8px}
.intro h1{font-size:clamp(28px,5.5vw,46px);max-width:760px;margin:8px 0 10px}
.intro h1 em{font-style:normal;color:var(--rosa)}
.intro .sub{font-size:19px;max-width:620px}
.titulo-destaque{font-size:clamp(22px,4vw,30px)}

/* nunca deixar título estourar a borda */
h1,h2,h3,.nicho strong,.marca-nome,.card h3,.produto .nome,.item-mat .nome{overflow-wrap:break-word;hyphens:none;min-width:0}
.grade>*,.nichos>*,.destaque>*,.aula-grid>*,.cab>*{min-width:0}
.wrap{overflow-x:clip}
@media(max-width:600px){
  body{font-size:17px}
  h2{font-size:24px}
  h3{font-size:18px}
  .nicho{min-height:120px;padding:14px 8px}
  .nicho strong{font-size:17px}
  .nicho .ico{font-size:28px}
  .destaque .lado{padding:18px}
  .cab{flex-direction:column;align-items:flex-start}
  .marca-nome{font-size:18px}
  .marca svg{width:42px;height:42px}
  .topo .btn-pequeno{padding:8px 14px;font-size:15px}
  .item-mat{grid-template-columns:72px 1fr}
  .faixa{padding:28px 16px}
  .caixa-compra{padding:16px}
}

/* v2.1: cartão de destaque não pode passar da tela no celular */
@media(max-width:820px){
  .destaque{grid-template-columns:minmax(0,1fr)}
  .destaque .thumb .ph{height:auto;min-height:0;aspect-ratio:16/9}
}
.ph span{max-width:100%}

/* ---------- v3 (04/11): página da aula em coluna única ---------- */
.aula-col{max-width:760px;margin:0 auto;padding-bottom:8px}
.aula-col .migalha{padding-top:18px}
.titulo-aula{font-size:clamp(26px,5vw,38px);margin-top:6px}
.prof-aula{color:var(--verde);font-weight:700;margin:6px 0 16px}
.aula-col .video{margin-bottom:18px}
.aula-col .btn-bloco{margin-bottom:12px}
.btn-grande{min-height:56px;font-size:19px;text-align:center}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:#245547}
hr.espaco{margin:28px 0}
.sec{padding:8px 0 20px}
.sec h2{margin-bottom:6px}
.intro-sec{margin-bottom:16px}
.lista-mat{background:var(--card);border-radius:22px;padding:6px 16px;box-shadow:0 2px 0 var(--linha),0 10px 26px rgba(58,42,46,.07)}
.lista-mat .item-mat{grid-template-columns:96px 1fr auto;padding:16px 0}
.lista-mat .item-mat .btn{grid-column:auto;width:auto;white-space:nowrap}
.lista-mat .item-mat .detalhe{font-size:14px;color:#7a6a6d;font-weight:700}
@media(max-width:560px){
  .lista-mat .item-mat{grid-template-columns:76px 1fr}
  .lista-mat .item-mat .btn{grid-column:1/-1;width:100%}
}
.outros-itens{margin-top:18px;padding:16px 18px;border-radius:18px;background:var(--suave);border:2px dashed var(--linha)}
.outros-itens h3{margin-bottom:4px}
.outros-itens ul{padding-left:22px;margin-top:6px}
.alunas{grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){ .alunas{grid-template-columns:repeat(2,1fr)} }
.alunas figure{margin:0}
.alunas figcaption{font-weight:800;font-size:14px;margin-top:6px;color:var(--verde)}
.manda-foto{margin-top:14px;font-weight:700}
.manda-foto a{color:var(--rosa);text-decoration:underline}

/* ---------- extras do site real (thumbs, ganho, convite das alunas) ---------- */
.thumb-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:var(--suave)}
.destaque .thumb-img{border-radius:16px}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

.ganho{background:var(--card);border-radius:24px;padding:20px;box-shadow:0 2px 0 var(--linha),0 10px 26px rgba(58,42,46,.07);border:2px dashed var(--mostarda)}
.ganho h2{font-size:clamp(22px,4vw,28px);margin-bottom:12px}
.ganho-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ganho-col{background:var(--fundo);border-radius:16px;padding:12px 8px;text-align:center}
.ganho-col small{display:block;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--verde)}
.ganho-col strong{display:block;font-family:var(--f-titulo);font-weight:600;font-size:clamp(18px,4.2vw,26px);line-height:1.15;margin-top:4px;overflow-wrap:break-word;hyphens:none}
.ganho-col.lucro{background:var(--mostarda)}
.ganho-col.lucro small,.ganho-col.lucro strong{color:var(--texto)}
.ganho-nota{font-size:13px;margin-top:12px;color:#7a6a6d;font-weight:700}

.convite{background:var(--suave);border:2px dashed var(--linha);border-radius:20px;padding:20px;text-align:center}
.convite p+p{margin-top:8px}

.foto-prod{display:block;width:100%;aspect-ratio:5/7;object-fit:contain;background:#fff;border:2px solid var(--linha);border-radius:12px}
.lista-mat .item-mat{align-items:start}

/* ---------- formulário e mural das alunas ---------- */
.enviar{margin-top:16px}
.enviar summary{list-style:none;cursor:pointer}
.enviar summary::-webkit-details-marker{display:none}
.form-trab{background:var(--card);border-radius:20px;padding:18px;margin-top:12px;box-shadow:0 2px 0 var(--linha),0 10px 26px rgba(58,42,46,.07);display:grid;gap:14px}
.form-trab label{display:grid;gap:6px;font-weight:800;font-size:16px}
.form-trab input[type=text],.form-trab input:not([type=checkbox]):not([type=file]){font:inherit;font-weight:600;min-height:48px;padding:10px 14px;border:2px solid var(--linha);border-radius:14px;background:var(--fundo);color:var(--texto);width:100%}
.form-trab input[type=file]{font:inherit;font-weight:600;padding:10px;border:2px dashed var(--rosa);border-radius:14px;background:var(--suave);width:100%}
.form-trab .dica{font-size:14px;font-weight:700;color:#7a6a6d;margin-top:-6px}
.form-trab .check{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:15px}
.form-trab .check input{width:24px;height:24px;flex:none;margin-top:2px;accent-color:var(--rosa)}
.form-trab .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-weight:800;border-radius:14px;padding:12px 14px}
.form-msg.ok{background:#DCEBE5;color:var(--verde)}
.form-msg.erro{background:#FBE0E0;color:#8E2C45}
.convite[hidden],.form-msg[hidden]{display:none}

/* ---------- v4: topo no celular, leitor de tela, select, links do mural ---------- */
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.so-cel{display:none}
.menu .link-fixo{font-weight:700}
.menu .link-fixo:hover{color:var(--rosa)}
@media(max-width:600px){
  .so-pc{display:none}
  .so-cel{display:inline}
  .menu{gap:14px}
}
.form-trab select{font:inherit;font-weight:600;min-height:48px;padding:10px 14px;border:2px solid var(--linha);border-radius:14px;background:var(--fundo);color:var(--texto);width:100%}
.alunas .foto-link{display:block}
.alunas figcaption a{color:var(--rosa);text-decoration:underline}
.bloco[hidden]{display:none}

/* ---------- paginação do mural ---------- */
.paginacao{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:22px}
.paginacao[hidden]{display:none}
.paginacao-n{font-weight:800}
.paginacao button:disabled{opacity:.4;cursor:default;transform:none}
.mural-link{margin-top:12px}

/* ---------- Materiais da aula: botão ao lado da foto (celular) + balanço leve do botão ---------- */
@keyframes balanca-leve{
  0%,72%,100%{transform:translateX(0) rotate(0)}
  78%{transform:translateX(-3px) rotate(-1.2deg)}
  84%{transform:translateX(3px) rotate(1.2deg)}
  90%{transform:translateX(-2px) rotate(-.8deg)}
  95%{transform:translateX(1px) rotate(.4deg)}
}
.lista-mat .item-mat .btn{animation:balanca-leve 4.5s ease-in-out infinite;transform-origin:center}
.lista-mat .item-mat .btn:hover,.lista-mat .item-mat .btn:focus-visible{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.lista-mat .item-mat .btn{animation:none}}
@media(max-width:560px){
  .lista-mat .item-mat{grid-template-columns:112px 1fr;grid-template-rows:1fr 1fr;column-gap:16px;row-gap:0;align-items:stretch;padding:16px 0}
  .lista-mat .item-mat .foto-prod,.lista-mat .item-mat .ph{grid-column:1;grid-row:1/3;align-self:center}
  .lista-mat .item-mat>div:not(.ph){grid-column:2;grid-row:1;align-self:end;padding-bottom:12px}
  .lista-mat .item-mat .nome{font-size:21px}
  .lista-mat .item-mat .detalhe{margin-top:4px;line-height:1.3}
  .lista-mat .item-mat .btn{grid-column:2;grid-row:2;align-self:start;width:100%;padding-left:8px;padding-right:8px}
}
html{-webkit-hyphens:none;hyphens:none}