/* Home editorial (só /home). Paleta 60/30/10: 60% branco (fundos), 30% vermelho da marca (faixa,
   bloco das etapas, botões, rodapé), 10% preto (títulos e textos). Carregado depois de style.css;
   o prefixo ":root .home-ed" vence as regras por id/tema de style.css sem precisar de !important.
   Cores só pelos tokens abaixo (o vermelho é o mesmo #D0121F dos e-mails). */
.home-ed{
  --ed-bg:#fff;--ed-ink:#111;--ed-soft:#f2f2f2;--ed-line:#d9d9d9;--ed-muted:#5b5b5b;
  --ed-branco:#fff;--ed-preto:#111;
  --ed-red:#d0121f;--ed-red-claro:#ef1423;--ed-red-escuro:#a50f1a;--ed-sobre-red:#ffe1e3;
  --ed-vermelho-bloco:linear-gradient(115deg,var(--ed-red-claro) 0%,var(--ed-red) 55%,var(--ed-red-escuro) 100%);
  --ed-sombra:rgb(0 0 0 / 40%);
  --ed-display:'Anton',Impact,'Arial Narrow Bold',sans-serif
}
html[data-theme=dark] .home-ed{--ed-bg:#000;--ed-ink:#fff;--ed-soft:#161616;--ed-line:#333;--ed-muted:#bdbdbd}
:root .home-ed{background:var(--ed-bg);color:var(--ed-ink)}

/* Tipografia */
.ed-titulo{font-family:var(--ed-display);font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.92;color:var(--ed-ink)}
:root .home-ed .ed-titulo{font-size:clamp(40px,5.4vw,72px);margin:0}
:root .home-ed .eyebrow{color:var(--ed-red)}

/* Botões: vermelho cheio; preto no hover */
.ed-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;border:1px solid var(--ed-red);border-radius:4px;background:var(--ed-red);color:var(--ed-branco);font-size:14px;font-weight:700;transition:background .2s,color .2s,border-color .2s}
.ed-btn:hover{background:var(--ed-preto);border-color:var(--ed-preto);color:var(--ed-branco)}
.ed-btn-claro{background:var(--ed-branco);border-color:var(--ed-branco);color:var(--ed-red)}

/* Cabeçalho: logo no canto esquerdo, menu em caixa alta e ações à direita */
:root .home-ed .header{background:color-mix(in srgb,var(--ed-bg) 94%,transparent);border-bottom:1px solid transparent}
:root .home-ed .links{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
:root .home-ed .links a:not(.nav-ia),:root .home-ed .nav-dropdown>summary{color:var(--ed-ink)}
:root .home-ed .links a:not(.nav-ia):hover{color:var(--ed-red)}
:root .home-ed .nav>.btn{background:var(--ed-red);border-color:var(--ed-red);color:var(--ed-branco);border-radius:4px}
:root .home-ed .nav>.btn:hover{background:var(--ed-preto);border-color:var(--ed-preto)}
@media(min-width:1240px){
  :root .home-ed .links{gap:16px;font-size:11px;letter-spacing:.6px;white-space:nowrap}
  :root .home-ed .nav-dropdown>summary{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding-block:26px}
  :root .home-ed .nav>.btn{padding:9px 14px;font-size:12px}
  :root .home-ed .theme-toggle{width:40px;height:40px}
}

/* Hero em arco (arco.js): cards correndo por um arco acima do título centralizado */
.ed-hero.ed-hero-arco{--w:clamp(104px,14.5vw,236px);--h:calc(var(--w) * 1.12);position:relative;min-height:clamp(600px,52vw,780px);padding:0;background:var(--ed-bg);overflow:hidden}
.ed-arco{position:absolute;inset:0;perspective:1400px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;-webkit-mask:linear-gradient(#000 52%,transparent 96%);mask:linear-gradient(#000 52%,transparent 96%)}
.ed-arco.arrastando{cursor:grabbing}
.ed-arco:focus-visible{outline:3px solid var(--ed-red);outline-offset:-3px}
.ed-arco-palco{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d}
.ed-arco-card{position:absolute;left:calc(var(--w) / -2);top:calc(var(--h) / -2);width:var(--w);height:var(--h);margin:0;border-radius:22px;overflow:hidden;background:var(--ed-soft);box-shadow:0 22px 40px -26px var(--ed-sombra);will-change:transform,opacity;visibility:hidden} /* arco.js mostra cada card já posicionado no arco (sem a pilha no centro antes do script) */
.ed-arco-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .4s ease,filter .4s ease,opacity .5s ease}
.ed-arco.com-js .ed-arco-card:not(.pronto) img{opacity:0}
.ed-arco-card:hover img{transform:scale(1.07);filter:saturate(1.12)}
.ed-arco-conteudo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(24px + var(--h) + clamp(70px,9vw,140px)) 0 60px;pointer-events:none}
.ed-arco-conteudo>*{pointer-events:auto}
:root .home-ed .ed-arco-titulo{margin:0;max-width:820px;font-family:Arial,Helvetica,sans-serif;font-weight:700;text-transform:none;font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-.045em;color:var(--ed-ink)}
.ed-arco-titulo em{font-style:normal;color:var(--ed-red)}
.ed-arco-sub{max-width:520px;margin:18px 0 26px;font-size:15px;line-height:1.55;color:var(--ed-muted)}
.ed-btn-pilula{display:inline-flex;align-items:center;gap:22px;padding:7px 7px 7px 30px;border-radius:999px;background:var(--ed-red);color:var(--ed-branco);font-size:16px;font-weight:600;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ed-red) 60%,transparent);transition:background .2s,transform .2s}
.ed-btn-pilula:hover{background:var(--ed-red-escuro);transform:translateY(-2px)}
.ed-btn-pilula-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ed-branco);color:var(--ed-red);transition:transform .25s}
.ed-btn-pilula:hover .ed-btn-pilula-ico{transform:rotate(45deg)}
.ed-btn-pilula:focus-visible{outline:3px solid var(--ed-ink);outline-offset:4px}

/* Faixa vermelha com a logo branca (a trilha é preenchida por menu.js) */
.ed-ticker{background:var(--ed-vermelho-bloco);color:var(--ed-branco);overflow:hidden;border-block:1px solid var(--ed-red)}
.ed-ticker .faixa-track{align-items:center}
.ed-ticker .faixa-track .ed-ticker-logo{display:inline-flex;align-items:center;padding:7px 0}
/* O SVG da logo é branco: vira máscara sobre a cor */
.ed-ticker .faixa-track .ed-ticker-logo::before{content:"";display:block;width:59px;height:16px;background:var(--ed-branco);-webkit-mask:url(/home/assets/img/vanini-logo.svg) center/contain no-repeat;mask:url(/home/assets/img/vanini-logo.svg) center/contain no-repeat}
.ed-ticker .faixa-track span::after{content:"✦";margin:0 20px;font-size:12px;color:var(--ed-branco);opacity:.8}

/* Vitrine em blocos: duas fotos altas + dois cartões horizontais */
.ed-vitrine{padding:72px 0 24px}
.ed-bento{display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(460px,46vw,600px)}
.ed-tile{position:relative;display:block;overflow:hidden;border-radius:14px;background:var(--ed-soft);color:var(--ed-ink)}
.ed-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ed-tile:hover img{transform:scale(1.04)}
.ed-tile:focus-visible{outline:3px solid var(--ed-red);outline-offset:4px}
.ed-tile-alto{grid-row:1/3}
.ed-tile-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:11px 18px;border-radius:4px;background:var(--ed-branco);color:var(--ed-preto);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 6px 20px rgb(0 0 0 / 13%);transition:background .2s,color .2s}
.ed-tile:hover .ed-tile-btn{background:var(--ed-red);color:var(--ed-branco)}
.ed-tile-largo{display:grid;grid-template-columns:1.1fr 1fr}
.ed-tile-txt{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 26px}
.ed-tile-txt small{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ed-red)}
.ed-tile-txt strong{font-size:clamp(19px,1.9vw,25px);line-height:1.2;font-weight:700}
.ed-tile-link{align-self:flex-start;margin-top:6px;padding:7px 12px;border:1px solid var(--ed-red);border-radius:4px;color:var(--ed-red);font-size:12px;font-weight:700;transition:background .2s,color .2s}
.ed-tile:hover .ed-tile-link{background:var(--ed-red);color:var(--ed-branco)}

/* Cabeçalho de seção: título à esquerda, texto curto à direita */
.ed-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:30px}
.ed-head p{max-width:330px;margin:0;font-size:13px;line-height:1.6;color:var(--ed-muted);text-align:right}

/* Coleção (cards gerados por main.js) */
:root .home-ed #produtos{background:var(--ed-bg);color:var(--ed-ink);padding:72px 0}
:root .home-ed .filter{border-radius:3px;border:1px solid var(--ed-line);background:transparent;color:var(--ed-ink);font-size:13px;padding:9px 18px}
:root .home-ed .filter:hover{border-color:var(--ed-red)}
:root .home-ed .filter[aria-pressed=true]{background:var(--ed-red);border-color:var(--ed-red);color:var(--ed-branco)}
:root .home-ed .grid#catalogo{grid-template-columns:repeat(3,1fr);gap:18px}
:root .home-ed .card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
:root .home-ed .card .photo{position:relative;height:auto;aspect-ratio:4/3.4;border-radius:14px;background:var(--ed-soft);overflow:hidden}
:root .home-ed .card .photo::after{content:'Ver categoria';position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--ed-red) 80%,transparent);color:var(--ed-branco);font-size:14px;font-weight:700;opacity:0;transition:opacity .25s}
:root .home-ed .card:hover .photo::after,:root .home-ed .card:has(.card-link:focus-visible) .photo::after{opacity:1}
:root .home-ed .card-body{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 2px 0}
:root .home-ed .card h3{order:1;margin:0;font-size:15px;font-weight:700;line-height:1.3}
:root .home-ed .card small{order:2;flex:none;font-size:11px;letter-spacing:.5px;color:var(--ed-red)}
:root .home-ed .card-cta{display:none}
:root .home-ed #contagem{margin:22px 0 0;font-size:12px;color:var(--ed-muted)}

/* Manifesto: texto pequeno à esquerda, título gigante alinhado à direita */
.ed-manifesto{padding:40px 0 80px}
.ed-manifesto-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:end}
.ed-manifesto p{margin:0;font-size:13px;line-height:1.7;color:var(--ed-muted)}
:root .home-ed .ed-manifesto .ed-titulo{text-align:right;font-size:clamp(46px,6.6vw,92px)}

/* Bloco vermelho: foto da fábrica + etapas do pedido (igual nos dois temas) */
:root .home-ed #como-funciona{background:var(--ed-vermelho-bloco);border:0;color:var(--ed-branco);padding:90px 0}
.ed-escuro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.ed-escuro-foto{margin:0;border:4px solid var(--ed-branco);border-radius:16px;overflow:hidden;background:var(--ed-branco);aspect-ratio:4/4.4;box-shadow:0 30px 60px -30px var(--ed-sombra)}
.ed-escuro-foto img{display:block;width:100%;height:100%;object-fit:cover}
:root .home-ed #como-funciona .ed-titulo{color:var(--ed-branco);margin-top:12px}
:root .home-ed #como-funciona .eyebrow{color:var(--ed-branco);opacity:.85}
:root .home-ed #como-funciona .process{grid-template-columns:repeat(2,1fr);gap:26px 32px;margin:36px 0 34px}
:root .home-ed #como-funciona .step{border-top:1px solid color-mix(in srgb,var(--ed-branco) 35%,transparent);padding-top:16px}
:root .home-ed #como-funciona .step b{font-family:var(--ed-display);font-weight:400;font-size:30px;color:var(--ed-branco)}
:root .home-ed #como-funciona .step h3{color:var(--ed-branco);font-size:17px;margin:8px 0 4px}
:root .home-ed #como-funciona .step p{color:var(--ed-sobre-red);font-size:14px;margin:0}
.ed-btn-claro:hover{background:var(--ed-preto);border-color:var(--ed-preto);color:var(--ed-branco)}

/* Destaques: o carrossel de banners vira um bloco arredondado dentro da grade */
.ed-destaques{padding:80px 0 40px}
:root .home-ed .ed-destaques .hero-slider{border:0;border-radius:14px;background:var(--ed-soft)}

/* Orçamento e dúvidas */
:root .home-ed #orcamento,:root .home-ed #duvidas{background:var(--ed-bg);background-image:none;border:0;color:var(--ed-ink)}
:root .home-ed #orcamento{padding:70px 0 90px}
:root .home-ed #duvidas{border-top:1px solid var(--ed-line)}
:root .home-ed .quote .ed-titulo,:root .home-ed .faq .ed-titulo{margin:12px 0 18px}
:root .home-ed .quote p,:root .home-ed .faq>div:first-child p{color:var(--ed-muted)}
:root .home-ed .quote li:before{color:var(--ed-red)}
:root .home-ed form{background:var(--ed-soft);border:0;border-radius:14px}
:root .home-ed form .btn{background:var(--ed-red);border-color:var(--ed-red);color:var(--ed-branco);border-radius:4px}
:root .home-ed form .btn:hover{background:var(--ed-preto);border-color:var(--ed-preto)}
:root .home-ed form .btn.outline{background:transparent;color:var(--ed-red);border-color:var(--ed-red)}
:root .home-ed .faq details{background:transparent;padding-inline:0;border-color:var(--ed-line)}
:root .home-ed .faq summary{font-size:16px}
:root .home-ed .faq details p{color:var(--ed-muted)}

/* Rodapé vermelho */
:root .home-ed .footer{background:var(--ed-vermelho-bloco);border-top:1px solid var(--ed-red);color:var(--ed-branco)}
:root .home-ed .footer p{color:var(--ed-sobre-red)}
:root .home-ed .foot-links a:hover{color:var(--ed-preto)}

@media(max-width:1000px){
  .ed-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}
  .ed-tile-alto{grid-row:auto;aspect-ratio:4/5}
  .ed-tile-largo{grid-column:1/-1;min-height:220px}
  .ed-escuro-grid{gap:40px}
}
@media(max-width:900px){
  :root .home-ed .grid#catalogo{grid-template-columns:repeat(2,1fr)}
  .ed-escuro-grid{grid-template-columns:1fr}
  .ed-escuro-foto{aspect-ratio:16/10}
  .ed-manifesto-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:620px){
  .ed-hero.ed-hero-arco{--w:108px;min-height:600px}
  .ed-arco-conteudo{padding-top:calc(24px + var(--h) + 96px)}
  .ed-arco-sub{font-size:14px}
  .ed-btn-pilula{font-size:15px;padding-left:22px;gap:16px}
  .ed-btn-pilula-ico{width:40px;height:40px}
  .ed-vitrine{padding:44px 0 8px}
  .ed-bento{gap:10px}
  .ed-tile-btn{bottom:12px;padding:9px 12px;font-size:12px}
  .ed-tile-largo{grid-template-columns:1.2fr 1fr;min-height:190px}
  .ed-tile-txt{padding:18px}
  .ed-head{display:block}.ed-head p{text-align:left;margin-top:12px}
  :root .home-ed #produtos{padding:52px 0}
  :root .home-ed .grid#catalogo{gap:18px 10px}
  :root .home-ed .card-body{display:block}
  :root .home-ed .card small{display:block;margin-top:2px}
  :root .home-ed .ed-manifesto .ed-titulo{text-align:left}
  .ed-manifesto{padding:24px 0 56px}
  :root .home-ed #como-funciona{padding:60px 0}
  :root .home-ed #como-funciona .process{grid-template-columns:1fr}
  .ed-destaques{padding:56px 0 24px}
}
@media(prefers-reduced-motion:reduce){.ed-arco-card img,.ed-btn-pilula,.ed-btn-pilula-ico,.ed-tile img,.ed-tile-btn,.ed-tile-link,.ed-btn{transition:none}}