/*
 * Cores da marca, num lugar só.
 *
 * PRIMARY = #ED0022 — cor oficial da marca, fixada em 23/09/2026.
 *
 * `--marca-escura` é um nome histórico: apesar dele, o token NÃO é hover. Ele
 * pinta o preenchimento do botão principal, as bordas, os destaques dos títulos,
 * os ícones dos indicadores e o total do pedido — ou seja, é a primária em uso.
 * Por isso aponta para `--marca`. Valia #ED0028, que não aparece como decisão
 * em documento nenhum; a diferença para #ED0022 é imperceptível (6/255 no
 * azul), e a troca não mexe em nenhum estado de hover.
 *
 * O HOVER do botão principal é #cc0022, escrito à parte em `.primary:hover`,
 * e continua exatamente como estava.
 */
:root {
  --marca: #ed0022;
  --marca-escura: var(--marca);
}

.login-page{display:grid;grid-template-columns:minmax(0,61fr) minmax(0,39fr);min-height:100dvh;background:#fff}
.login-story{position:relative;min-height:100dvh;overflow:hidden;background:#fdf0f2;isolation:isolate}
.login-story .brand{position:absolute;top:42px;left:7%;width:155px;z-index:3;mix-blend-mode:multiply}
.login-illustration{position:absolute;right:0;bottom:0;width:62%;height:auto;aspect-ratio:972/976;z-index:0;max-width:none;max-height:100%;mask-image:linear-gradient(to right,transparent,#000 8%),linear-gradient(to bottom,transparent,#000 10%);mask-composite:intersect}
.login-editorial{position:relative;z-index:1;padding:clamp(150px,23vh,250px) 0 75px 7%;pointer-events:none}
.login-editorial h1{font-size:clamp(36px,3.45vw,66px);line-height:1.05;letter-spacing:-1.8px;color:#a2001b;font-weight:800}
.login-editorial h1 em{font-style:normal;color:var(--marca-escura)}
.login-editorial ul{display:grid;gap:26px;list-style:none;margin:40px 0 0;padding:0}
.login-editorial li{display:flex;align-items:center;gap:16px;max-width:340px}
.login-editorial li>span{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:#ffdee5;color:#e4002c}
.login-editorial li svg{width:25px;height:25px}
.login-editorial strong{font-size:16px;color:#28252b}
.login-editorial p{font-size:13px;color:#79727c;margin-top:5px}
.login-access{min-width:0;min-height:100dvh;padding:95px clamp(24px,3vw,60px) 55px;background:#fff}
.login-card{width:100%;max-width:480px}
.tagline{right:clamp(24px,3vw,60px);top:30px}
.activation-hint{font-size:11px!important;color:#8a7b87;line-height:1.6;text-align:center;margin:16px 0 0}
@media(min-width:2000px){.login-editorial{padding-top:23vh}.login-editorial h1{font-size:clamp(66px,3.3vw,96px)}.login-editorial ul{gap:34px;margin-top:55px}.login-editorial strong{font-size:21px}.login-editorial p{font-size:16px}.login-editorial li{max-width:440px}.login-editorial li>span{flex-basis:60px;height:60px}.login-story .brand{width:200px}}
@media(max-width:1200px) and (min-width:801px){.login-editorial{padding-left:6%}.login-editorial strong{font-size:14px}.login-editorial p{font-size:11px}.login-editorial li{gap:12px;max-width:270px}.login-editorial li>span{flex-basis:40px;height:40px}.login-illustration{width:58%}}
@media(max-width:800px){.login-page{grid-template-columns:minmax(0,1fr)}.login-story{min-height:580px}.login-story .brand{top:24px;left:6%;width:125px}.login-editorial{padding:105px 0 32px 6%}.login-editorial h1{font-size:clamp(30px,5.4vw,44px);letter-spacing:-1px}.login-editorial ul{margin-top:25px;gap:17px}.login-editorial li{max-width:240px;gap:10px}.login-editorial li>span{flex-basis:34px;height:34px}.login-editorial li svg{width:19px;height:19px}.login-editorial strong{font-size:12px}.login-editorial p{font-size:10px;margin-top:3px}.login-illustration{width:100%;height:250px;max-height:none;opacity:1}.login-access{min-height:0;padding:75px 20px 35px}.tagline{top:23px;right:24px}}