/* Wyipi TKS v2 — ecrã de entrada: branco com o logótipo Wyipi; acesso com o mesmo azul e vermelho do interior */
:root {
    --azul: #21569e;
    --azul-vivo: #2f6fd0;
    --noite: #003173;
    --noite-2: #0a3f8a;
    --vermelho: #c8221a;
    --vermelho-w: #a71516;
    --tinta: #14171c;
    --suave: #4a5361;
    --linha: #e1e6ee;
    --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: Calibri, Carlito, "Segoe UI", sans-serif;
    color: var(--tinta);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(47, 111, 208, .28); }

.entrada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- lado da identidade: branco, o logótipo manda ---------- */
.identidade {
    display: flex; flex-direction: column;
    padding: clamp(32px, 5vw, 64px);
    background: #fff;
}
.identidade .acc img { width: 170px; height: auto; display: block; }
.produto { margin: auto 0; padding: 40px 0; max-width: 620px; }
.produto h1 { margin: 0; line-height: 0; }
.logo-wyipi { width: 100%; height: auto; display: block; overflow: visible; }
.logo-wyipi image { opacity: 0; animation: surgir .8s var(--ease) .95s forwards; }
.logo-wyipi .z { fill: none; stroke-linecap: butt; stroke-dasharray: 400; stroke-dashoffset: 400; animation: traco .75s var(--ease) forwards; }
.logo-wyipi .z1 { stroke: var(--azul); stroke-width: 7; animation-delay: .1s; }
.logo-wyipi .z2 { stroke: var(--vermelho-w); stroke-width: 8; animation-delay: .3s; }
.logo-wyipi .z3 { stroke: var(--azul); stroke-width: 8; animation-delay: .5s; }
.logo-wyipi .z4 { stroke: var(--vermelho-w); stroke-width: 12.5; animation-delay: .7s; }
.tese {
    margin: 28px 0 0; max-width: 30rem;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; font-weight: 700;
    color: var(--tinta);
}
.assinatura { margin: 0; font-size: .88rem; color: var(--suave); }

/* ---------- lado do acesso: o azul do menu lateral (acc.css) ---------- */
.acesso {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 5vw, 64px);
    background: linear-gradient(180deg, #21569e 0%, #1c4a8a 100%);
    color: #fff;
}
form { width: 100%; max-width: 360px; }
h2 { margin: 0 0 6px; font-size: 2.1rem; color: #fff; letter-spacing: -.01em; }
.ajuda { margin: 0 0 30px; color: #e3ecf9; font-size: 1.02rem; }

.campo { margin-bottom: 18px; }
label { display: block; font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: 6px; }
input[type="text"], input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    font: inherit; font-size: 1.08rem;
    color: var(--tinta);
    background: #fff;
    border: 2px solid #fff;
    border-radius: 7px;
    caret-color: var(--azul);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus { outline: 0; border-color: var(--azul-vivo); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.com-erro input { border-color: var(--vermelho); }
.erro { margin: 7px 0 0; color: #ffc9c4; font-size: .95rem; font-weight: 700; }
.erro::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6b61; margin-right: 8px; vertical-align: .1em; }

.entrar {
    width: 100%; height: 54px; margin-top: 10px;
    font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
    color: #fff; background: var(--vermelho);
    border: 0; border-radius: 7px; cursor: pointer;
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6);
    transition: background-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.entrar:hover { background: #9c1812; }
.entrar:active { transform: translateY(1px); }
.entrar:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--azul), 0 0 0 6px #fff; }

.idiomas { display: flex; gap: 6px; margin-top: 30px; justify-content: center; }
.idiomas a {
    min-width: 50px; padding: 8px 12px; text-align: center;
    font-weight: 700; font-size: .92rem; text-decoration: none;
    color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
}
.idiomas a:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.idiomas a[aria-current] { color: var(--azul); background: #fff; border-color: #fff; }
.idiomas a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes surgir { to { opacity: 1; } }

/* ---------- telemóvel e tablet ---------- */
@media (max-width: 860px) {
    .entrada { grid-template-columns: 1fr; }
    .identidade { padding: 24px 24px 8px; }
    .identidade .acc img { width: 130px; }
    .produto { padding: 22px 0 18px; max-width: 420px; }
    .tese { margin-top: 16px; font-size: 1.08rem; }
    .assinatura { display: none; }
    .acesso { padding: 32px 24px 48px; align-items: flex-start; border-top: 6px solid var(--vermelho); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-wyipi .z { animation: none; stroke-dashoffset: 0; }
    .logo-wyipi image { animation: none; opacity: 1; }
}

/* logótipo de um produto genérico (img), no lugar do SVG animado do Wyipi */
.logo-produto { display: block; width: 100%; max-width: 620px; height: auto; }