/*
 * Página de escolha da marca — identidade combinada PISOATÉRMICO + SENHOR DAS PEDRAS.
 * Cada metade segue o manual da sua marca; a faixa de cima usa a base neutra das duas (preto e Montserrat).
 */
:root {
  --pa-amarelo: #E0D932; --pa-preto: #1D1D1B;
  --sr-preto: #231F20; --sr-pedra: #B9B9B8; --sr-claro: #E7E4E1;
}
body { background: var(--sr-preto); color: #fff; font: 400 1rem/1.55 "Montserrat", "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }

.cabeca-grupo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.18); }
.cabeca-grupo h1 { margin: 0; font: 300 1rem "Oswald", "Arial Narrow", sans-serif; letter-spacing: .32em; text-transform: uppercase; }
.cabeca-grupo p { margin: 0; color: var(--sr-pedra); font-size: .92rem; }

.escolha { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .escolha { grid-template-columns: 1fr; } }

.lado { position: relative; overflow: hidden; display: grid; align-content: center; justify-items: start; gap: 22px; padding: 64px clamp(24px, 6vw, 80px); text-decoration: none; min-height: 420px; }
.lado .logo { position: relative; z-index: 1; }
.lado p { position: relative; z-index: 1; margin: 0; max-width: 34ch; }
.lado .entrar { position: relative; z-index: 1; display: inline-flex; padding: 15px 28px; }

/* PISOATÉRMICO: amarelo, preto, Raleway, forma a 45° */
.lado--pa { background: var(--pa-amarelo); color: var(--pa-preto); }
.lado--pa .logo { width: min(240px, 60%); }
.lado--pa p { font: 400 1.05rem/1.5 "Figtree", "Segoe UI", sans-serif; }
.lado--pa .entrar { background: var(--pa-preto); color: var(--pa-amarelo); font: 800 1rem "Raleway", sans-serif; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.lado--pa::after { content: ""; position: absolute; width: 360px; height: 360px; right: -180px; bottom: -180px; border: 44px solid var(--pa-preto); transform: rotate(45deg); opacity: .9; transition: transform .35s ease; }
.lado--pa:hover::after { transform: rotate(45deg) scale(1.08); }

/* SENHOR DAS PEDRAS: preto, textura geométrica, moldura, Oswald Light */
.lado--sr { background-color: var(--sr-preto); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px); color: #fff; }
.lado--sr .logo { width: min(300px, 75%); }
.lado--sr p { color: var(--sr-pedra); }
.lado--sr .entrar { border: 1px solid #fff; color: #fff; font: 500 .82rem "Montserrat", sans-serif; letter-spacing: .24em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.lado--sr:hover .entrar { background: #fff; color: var(--sr-preto); }
.lado--sr::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }