/* Alma Centro de Estudos Visuais · site
   Sistema da loja Alma Materiais Artísticos (tema Shopify "Horizon · Alma"):
   Host Grotesk · grade de 12 colunas · margem 16/40 px · calha 16/20 px · respiro 48/64 px. */

:root{
  --claro:#FEFCE6; --claro2:#D5D4BF; --claro3:#ABAA98;
  --preto:#000; --cinza:#757575; --cinza-baixo:#3A3A3A;
  --linha:rgb(0 0 0 / .14);
  --linha-escura:rgb(254 252 230 / .2);
  --texto:rgb(0 0 0 / .74);          /* corpo de texto da loja (opacidade .74) */
  --texto-claro:rgb(254 252 230 / .74);
  --texto-card:rgb(0 0 0 / .62);     /* texto de card (opacidade .62) */
  --px:16px;                          /* margem lateral (Horizon: 16 px; 40 px a partir de 750 px) */
  --gap:16px;                         /* calha da grade (16 px; 20 px a partir de 990 px) */
  --r:48px;                           /* respiro entre seções (48 px; 64 px a partir de 990 px) */
  --largura:1920px;                   /* largura máxima do conteúdo (página "normal" da loja) */
  --f:"Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width:750px){ :root{ --px:40px } }
@media (min-width:990px){ :root{ --gap:20px; --r:64px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--claro);color:var(--preto);font-family:var(--f);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
.wrap{padding-left:max(var(--px), calc((100% - var(--largura)) / 2));padding-right:max(var(--px), calc((100% - var(--largura)) / 2))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Grade de 12 colunas ---------- */
.grade12,.duas,.form-linha,.rodape .contatos,.faixa .lin,.hero .chamada{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.duas > *:first-child{grid-column:1 / span 5}       /* título: colunas 1–5 */
.duas > *:last-child{grid-column:7 / -1}            /* lado: colunas 7–12 */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap)}
.apos-cab{margin-top:32px}

/* ---------- Tipografia (escala da loja) ---------- */
.t1{font-size:2rem;line-height:1.1;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.t2{font-size:1.625rem;line-height:1.15;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.t3{font-size:1.125rem;line-height:1.3;font-weight:500;letter-spacing:-.005em}
@media (min-width:990px){ .t1{font-size:2.5rem} .t2{font-size:2rem} }
.corpo{font-size:1rem;line-height:1.6;color:var(--texto);text-wrap:pretty}
.corpo p + p{margin-top:.6em}
.claro{color:var(--claro)}

/* ---------- Botões (alma-btn) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:144px;min-height:36px;padding:10px 14px;font-size:.75rem;font-weight:400;line-height:1;text-decoration:none;border:1px solid var(--preto);border-radius:0;background:var(--preto);color:var(--claro);cursor:pointer;white-space:nowrap;transition:opacity .15s ease}
.btn:hover{opacity:.8}
.btn-preto{background:var(--preto);border-color:var(--preto);color:var(--claro)}
.btn-claro{background:var(--claro);border-color:var(--claro);color:var(--preto)}
.btn-linha{background:transparent;border-color:currentColor;color:var(--claro)}
.seta{font-size:.75rem;line-height:1}
.botoes{display:flex;flex-wrap:wrap;gap:20px}

/* ---------- Navegação ---------- */
.nav{position:absolute;inset:0 0 auto 0;height:72px;display:flex;align-items:center;justify-content:space-between;z-index:20;color:var(--claro)}
.nav.solida{position:relative;background:var(--claro);color:var(--preto);border-bottom:1px solid var(--linha)}
.nav .marca{display:block;color:inherit}
.nav .marca svg{height:28px;width:auto;display:block}
.nav .esq{display:flex;align-items:center;gap:clamp(40px,6vw,120px)}
.nav .menu{display:flex;gap:clamp(20px,2.2vw,40px);font-size:.875rem;line-height:1.4}
.nav .menu a{text-decoration:none}
.nav .menu a:hover,.nav .menu a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav .loja{background:var(--claro);border-color:var(--claro);color:var(--preto)}
.nav.solida .loja{background:var(--preto);border-color:var(--preto);color:var(--claro)}
.nav .abrir{display:none;background:none;border:0;padding:8px;margin-right:-8px;color:inherit;cursor:pointer}
.nav .abrir svg{width:24px;height:24px;display:block}

/* Gaveta (celular) */
.gaveta{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:var(--preto);color:var(--claro);padding:20px 16px;transform:translateX(-102%);transition:transform .28s ease;z-index:60;display:flex;flex-direction:column;gap:24px}
.gaveta.aberta{transform:none}
.gaveta .topo{display:flex;align-items:center;justify-content:space-between}
.gaveta .topo svg.logo{height:24px;width:auto;color:var(--claro)}
.gaveta .fechar{background:none;border:0;color:var(--claro);padding:6px;cursor:pointer}
.gaveta nav{display:flex;flex-direction:column}
.gaveta nav a{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--linha-escura);font-size:1rem;text-decoration:none}
.gaveta .loja-m{margin-top:8px;align-self:flex-start}
.veu{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .28s;z-index:50}
.veu.aberto{opacity:1;pointer-events:auto}

/* ---------- Abertura com foto (alma-hero grande) ---------- */
.hero{position:relative;background:var(--preto);min-height:max(520px,78svh);display:flex;flex-direction:column;justify-content:flex-end;padding-block:40px;overflow:hidden;color:var(--claro)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;filter:grayscale(1)}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.hero .chamada{position:relative;z-index:1;align-items:end;row-gap:20px}
.hero h1{grid-column:1 / span 7;color:var(--claro);font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.01em;max-width:18em}
.hero .botoes{grid-column:8 / -1;justify-content:flex-end}
.hero .botoes .btn{background:var(--preto);border-color:var(--preto);color:var(--claro)}

/* ---------- Abertura de texto (páginas internas) ---------- */
.abertura{text-align:center;padding-top:calc(72px + var(--r) * 1.5);padding-bottom:calc(var(--r) * 1.5)}
.abertura.escura{background:var(--preto);color:var(--claro)}
.abertura.escura h1{color:var(--claro)}
.abertura h1 + p{max-width:42rem;margin:20px auto 0;font-size:1rem;line-height:1.6;color:var(--texto);text-wrap:pretty}
.abertura.escura h1 + p{color:var(--texto-claro)}
.abertura.curta{padding-bottom:var(--r)}

/* ---------- Faixa preta "Três frentes" ---------- */
.faixa{background:var(--preto);color:var(--claro);padding-top:calc(var(--r) * .75);padding-bottom:var(--r)}
.faixa .lin{align-items:end;row-gap:24px}
.faixa .txt{grid-column:1 / span 7}
.faixa .botoes{grid-column:8 / -1;justify-content:flex-end}
.faixa h2{color:var(--claro);margin-bottom:16px}
.faixa .corpo{color:var(--texto-claro);max-width:65ch}

/* ---------- Seções ---------- */
.secao{padding-top:calc(var(--r) * .75);padding-bottom:var(--r)}
.secao:has(> .filete:last-child),.secao:has(> .wrap:last-child > .filete){padding-bottom:0}
.secao .filete{margin-top:var(--r)}
.filete{border:0;border-top:1px solid var(--linha);margin:0}
.intro .direita{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.intro .corpo{max-width:65ch}

/* ---------- Frentes (cards altos) ---------- */
.frente{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.frente .foto{aspect-ratio:3/4;overflow:hidden;background:var(--claro3);margin-bottom:12px}
.frente .foto img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}
.frente:hover .foto img{opacity:.88}
.frente .txt{display:flex;flex-direction:column;gap:4px}
.frente .t3,.cartao .t3,.post .t3{font-size:1rem;line-height:1.3}
.frente .corpo{font-size:.75rem;line-height:1.5;color:var(--texto-card)}

/* ---------- Imagem larga ---------- */
.larga{aspect-ratio:16/7;overflow:hidden;background:var(--claro3)}
.larga img{width:100%;height:100%;object-fit:cover}

/* ---------- Notas e Ensaios (cartões) ---------- */
.cartao{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.cartao .foto{aspect-ratio:4/3;overflow:hidden;background:var(--claro2);margin-bottom:12px}
.cartao .foto img{width:100%;height:100%;object-fit:cover}
.meta{display:flex;gap:12px;align-items:baseline;font-size:.75rem;line-height:1.4}
.meta .cat{font-weight:500}
.meta time{color:var(--texto-card)}

/* ---------- Como começar ---------- */
.comecar{background:var(--claro2);padding-top:calc(var(--r) * .75);padding-bottom:var(--r)}
.comecar p.corpo{color:var(--texto);max-width:65ch;margin-top:16px}
.form-linha{margin-top:32px;align-items:center;row-gap:12px}
.form-linha .campo{grid-column:1 / span 6}
.form-linha .btn{grid-column:7 / span 3;justify-self:start;min-height:44px}
.campo{height:44px;border:1px solid #8C8B7A;background:transparent;padding:0 14px;font-size:.875rem;line-height:1.4;width:100%;border-radius:0;outline:none}
.campo::placeholder{color:var(--cinza)}
.campo:focus{border-color:var(--preto)}
.aviso{font-size:.75rem;line-height:1.4;margin-top:8px;min-height:17px}

/* ---------- Rodapé ---------- */
.rodape{background:var(--preto);color:var(--claro);padding-top:calc(var(--r) * .75);padding-bottom:40px;font-size:.875rem;line-height:1.6}
.rodape .novidades{display:flex;flex-direction:column;gap:0}
.rodape .campo{border-color:var(--claro3);color:var(--claro)}
.rodape .campo::placeholder{color:var(--claro3)}
.rodape .campo:focus{border-color:var(--claro)}
.rodape .btn{background:var(--claro);border-color:var(--claro);color:var(--preto)}
.rodape .termos{font-size:.75rem;line-height:1.4;margin-top:8px;color:var(--texto-claro)}
.rodape .contatos{row-gap:24px;margin-top:var(--r);padding-top:calc(var(--r) * .75);border-top:1px solid var(--linha-escura)}
.rodape .contatos > div:first-child{grid-column:1 / span 5}
.rodape .contatos > div:last-child{grid-column:7 / -1}
.rodape .contatos > div{display:flex;flex-direction:column;gap:12px}
.rodape strong{font-weight:500}
.rodape .links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:var(--r);font-size:.75rem;line-height:1.4}
.rodape .links a{text-decoration:none;color:var(--texto-claro)}
.rodape .links a:hover{color:var(--claro);text-decoration:underline;text-underline-offset:4px}

/* ---------- Sobre ---------- */
.sobre-topo{padding-bottom:0}
.sobre-topo .secao{padding-bottom:var(--r)}
.sobre-foto{margin-top:calc(var(--r) * -.75);position:relative}
.historia{position:relative;background:var(--preto);color:var(--claro);padding-top:calc(var(--r) * .75);padding-bottom:var(--r);overflow:hidden}
.historia > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(1)}
.historia .duas{position:relative}
.historia .corpo{color:var(--texto-claro)}

/* ---------- Acordeão (Sobre o ensino / FAQ) ---------- */
.acordeao{margin-top:32px;border-top:1px solid var(--linha)}
.acordeao details{border-bottom:1px solid var(--linha)}
.acordeao summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;font-size:1.125rem;line-height:1.3;font-weight:500}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::after{content:"+";font-size:1.25rem;line-height:1;font-weight:300;flex:none;transition:transform .2s}
.acordeao details[open] summary::after{transform:rotate(45deg)}
.acordeao .resp{padding:0 0 20px;max-width:65ch;font-size:1rem;line-height:1.6;color:var(--texto)}

/* ---------- Trabalhos de alunos ---------- */
.trabalhos{margin-top:32px}
.trabalhos figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--claro2)}
.trabalhos img{width:100%;height:100%;object-fit:cover}

/* ---------- Blog ---------- */
.busca{max-width:42rem;margin:32px auto 0;text-align:center}
.busca label{display:block;font-size:.75rem;line-height:1.4;color:var(--texto-card);margin-bottom:12px}
.busca .barra{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--linha);padding:0 0 12px}
.busca .barra svg{width:20px;height:20px;flex:none}
.busca input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:1.25rem;line-height:1.3;font-weight:500}
.busca input::placeholder{color:var(--claro3);font-weight:400}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.tags button{display:inline-flex;align-items:center;min-height:32px;padding:0 16px;border:1px solid #8C8B7A;border-radius:6px;background:transparent;font-size:.75rem;color:var(--cinza-baixo);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.tags button:hover{border-color:var(--preto);color:var(--preto)}
.tags button[aria-pressed="true"]{background:var(--preto);border-color:var(--preto);color:var(--claro)}
.contagem{text-align:center}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gap);margin-top:32px}
.post{display:flex;flex-direction:column;text-decoration:none}
.post .foto{aspect-ratio:4/3;overflow:hidden;background:var(--claro2);margin-bottom:12px}
.post .foto img{width:100%;height:100%;object-fit:cover}
.post .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.post .pill{flex:none;font-size:.6875rem;line-height:1.3;padding:4px 8px;background:var(--claro2);border-radius:2px}
.post .corpo{margin-top:4px;font-size:.75rem;line-height:1.5;color:var(--texto-card)}
.post .ler{margin-top:10px;font-size:.75rem;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;opacity:.82}
.post[hidden]{display:none}
.vazio{text-align:center;color:var(--texto-card);margin-top:40px}

/* ---------- Faça Parte ---------- */
.formulario{padding-bottom:var(--r)}
.formulario .grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px var(--gap)}
.formulario .grade > .col:first-child{grid-column:1 / span 6}
.formulario .grade > .col:last-child{grid-column:7 / -1}
.formulario label{display:flex;flex-direction:column;gap:8px;font-size:.875rem;line-height:1.4;font-weight:500}
.formulario input,.formulario textarea{height:44px;border:1px solid #8C8B7A;background:transparent;padding:0 14px;font-size:.875rem;font-weight:400;border-radius:0;outline:none}
.formulario textarea{height:280px;padding:12px 14px;resize:vertical}
.formulario input:focus,.formulario textarea:focus{border-color:var(--preto)}
.formulario .col{display:flex;flex-direction:column;gap:20px}
.formulario .enviar{display:flex;justify-content:flex-end;margin-top:32px}

/* ---------- Contato ---------- */
.contatos-sec{padding-bottom:0}
.contatos-sec .duas > *:first-child{grid-column:1 / span 5}
.contatos-sec .lista{display:flex;flex-direction:column;gap:32px}
.contatos-sec .lista div{display:flex;flex-direction:column;gap:8px}
.contatos-sec .filete{margin-top:var(--r)}
.mapa{min-height:420px;background:#E3E2D9;border:0;width:100%;height:100%;filter:grayscale(1)}

/* ---------- Revelar ao rolar ---------- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- Telas menores ---------- */
@media (max-width:989px){
  .duas > *:first-child,.duas > *:last-child,
  .hero h1,.hero .botoes,.faixa .txt,.faixa .botoes,
  .rodape .contatos > div:first-child,.rodape .contatos > div:last-child,
  .form-linha .campo,.form-linha .btn,
  .formulario .grade > .col:first-child,.formulario .grade > .col:last-child{grid-column:1 / -1}
  .duas{row-gap:16px}
  .hero .botoes,.faixa .botoes{justify-content:flex-start}
  .tres,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav{height:56px}
  .nav .menu,.nav .loja{display:none}
  .nav .abrir{display:block}
  .nav .marca svg{height:24px}
  .abertura{padding-top:calc(56px + var(--r))}
}
@media (max-width:749px){
  .tres,.posts{grid-template-columns:1fr}
  .larga{aspect-ratio:4/3}
  .form-linha .btn{justify-self:stretch}
  .btn{white-space:normal;text-align:center}
  .mapa{min-height:300px}
  .formulario textarea{height:200px}
}