/* ==========================================================================
   em24horas.pt — folha base (comum a todas as páginas)
   Destino: public_html/css/base.css
   ========================================================================== */

:root {
    /* Paleta — papel claro, tinta preta, um só acento */
    --em-papel:        #FAFAF7;
    --em-papel-alt:    #F1F1EC;
    --em-tinta:        #101010;
    --em-tinta-suave:  #5A5C55;
    --em-lima:         #C8FF33;
    --em-lima-escura:  #AEE31A;
    --em-borda:        #E0E0D8;
    --em-ph:           #C9CBC4; /* cinza médio das caixas de imagem */

    --em-raio: 14px;
    --em-folga: clamp(3.5rem, 8vw, 7rem); /* espaço vertical entre secções */
}

/* --------------------------------------------------------------- base --- */

body {
    background-color: var(--em-papel);
    color: var(--em-tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; }

a { color: var(--em-tinta); }

.em-suave { color: var(--em-tinta-suave); }

/* Sobrelinhado: rótulo pequeno acima dos títulos */
.em-sobre {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-tinta-suave);
    margin-bottom: 1rem;
}

/* Marcador — a assinatura da marca. Usar com conta: duas vezes por página. */
.em-marcador {
    background-image: linear-gradient(var(--em-lima), var(--em-lima));
    background-repeat: no-repeat;
    background-size: 100% 0.42em;
    background-position: 0 78%;
    padding: 0 0.08em;
}

.em-seccao { padding: var(--em-folga) 0; }
.em-seccao-alt { background-color: var(--em-papel-alt); }

/* ---------------------------------------------------------- cabeçalho --- */

.em-cabecalho {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(250, 250, 247, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--em-borda);
}

.em-marca {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.em-marca span { color: var(--em-tinta-suave); font-weight: 600; }

/* ------------------------------------------------------------- botões --- */

.em-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--em-tinta);
    border-radius: 100px;
    padding: 0.7rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    background-color: transparent;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.em-btn:hover { background-color: var(--em-tinta); color: var(--em-papel); }

.em-btn-lima { background-color: var(--em-lima); }
.em-btn-lima:hover { background-color: var(--em-tinta); color: var(--em-lima); }

.em-btn-peq { padding: 0.45rem 1.1rem; font-size: 0.95rem; }

/* ------------------------------------------- caixas de imagem (temp.) --- */
/* Substituir por <img> quando as fotografias chegarem. O texto mostra a
   medida que a caixa espera, para não haver enganos no recorte.          */

.em-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--em-ph);
    color: rgba(16, 16, 16, 0.55);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: var(--em-raio);
    overflow: hidden;
}

.em-ph-quadrada { aspect-ratio: 1 / 1; }
.em-ph-larga    { aspect-ratio: 16 / 9; }
.em-ph-topo     { aspect-ratio: 21 / 9; }

/* Fotografias já colocadas — quadradas, cortadas ao centro pelo browser */
.em-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: var(--em-raio);
    background-color: var(--em-ph);
}

/* --------------------------------------------------------------- rodapé --- */

.em-rodape {
    background-color: var(--em-tinta);
    color: rgba(250, 250, 247, 0.75);
    padding: 4rem 0 2rem;
    font-size: 0.95rem;
}

.em-rodape a { color: rgba(250, 250, 247, 0.75); text-decoration: none; }
.em-rodape a:hover { color: var(--em-lima); }
.em-rodape h4 { color: var(--em-papel); font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0; }
.em-rodape .em-marca { color: var(--em-papel); }
.em-rodape hr { border-color: rgba(250, 250, 247, 0.18); }
.em-rodape .em-custo { font-size: 0.8rem; opacity: 0.7; }

/* --------------------------------------------------------- acessórios --- */

:focus-visible {
    outline: 3px solid var(--em-lima-escura);
    outline-offset: 2px;
}

.em-revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.em-revelar.em-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .em-revelar { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }


/* ==========================================================================
   FORMULÁRIOS — comuns a todas as páginas (configurador, conta, conteúdos)
   Duas colunas: etiqueta à direita na primeira, campo na segunda.
   ========================================================================== */

.em-formulario { max-width: 720px; }

.em-grupo {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.em-grupo > label {
    grid-column: 1;
    text-align: right;
    padding-top: 0.7rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.em-grupo > label + * { grid-column: 2; }
.em-grupo > .em-campo,
.em-grupo > textarea.em-campo,
.em-grupo > .em-opcoes,
.em-grupo > .em-ajuda,
.em-grupo > div { grid-column: 2; }

.em-facultativo {
    display: block;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--em-tinta-suave);
}

.em-campo {
    display: block;
    width: 100%;
    border: 2px solid var(--em-borda);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    background-color: #FFFFFF;
    color: var(--em-tinta);
    transition: border-color 0.15s ease;
}

.em-campo:focus { border-color: var(--em-tinta); outline: none; }
.em-campo::placeholder { color: #A8AAA2; }
.em-campo:disabled { background-color: var(--em-papel-alt); color: var(--em-tinta-suave); }

.em-campo-erro { border-color: #C0392B; background-color: #FDF3F2; }

textarea.em-campo { resize: vertical; min-height: 6rem; }

.em-ajuda {
    display: block;
    font-size: 0.83rem;
    color: var(--em-tinta-suave);
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* Numa coluna só, abaixo dos 768px — a etiqueta volta para cima e à esquerda */
@media (max-width: 767.98px) {
    .em-grupo { grid-template-columns: 1fr; gap: 0; }
    .em-grupo > label { grid-column: 1; text-align: left; padding-top: 0; margin-bottom: 0.4rem; }
    .em-grupo > * { grid-column: 1 !important; }
}

/* ------------------------------------------------------------- opções --- */

.em-opcoes { display: grid; gap: 0.6rem; }

.em-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 2px solid var(--em-borda);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    margin: 0;
}

.em-radio input { margin-top: 0.28rem; accent-color: var(--em-tinta); width: 1.1rem; height: 1.1rem; }
.em-radio span { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.em-radio small { display: block; font-weight: 500; font-size: 0.83rem; color: var(--em-tinta-suave); margin-top: 0.15rem; }

.em-radio:has(input:checked) {
    border-color: var(--em-tinta);
    background-color: rgba(200, 255, 51, 0.18);
}

@media (min-width: 576px) {
    .em-opcoes { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------- aceitações --- */

.em-aceitacoes {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--em-borda);
    display: grid;
    gap: 0.9rem;
}

.em-aceitar {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--em-tinta-suave);
    cursor: pointer;
}

.em-aceitar input {
    margin-top: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    accent-color: var(--em-tinta);
}

.em-aceitar a { color: var(--em-tinta); }


/* ------------------------------------------------ palavra-passe à vista --- */

.em-passe-caixa { position: relative; grid-column: 2; }

.em-passe-caixa .em-campo { padding-right: 3rem; }

.em-passe-olho {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 0.35rem;
    line-height: 1;
    color: var(--em-tinta-suave);
}

.em-passe-olho:hover { color: var(--em-tinta); }

/* Campos que não ganham nada em serem largos (NIF, código postal). */
.em-campo-curto { max-width: 12rem; }

@media (max-width: 767.98px) {
    .em-passe-caixa { grid-column: 1; }
    .em-campo-curto { max-width: 100%; }
}

/* ================================================== espera do MB WAY ------ */

.em-mbway-texto { font-size: 0.98rem; line-height: 1.5; margin-bottom: 1.25rem; }

.em-mbway-relogio {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--em-tinta);
}

.em-mbway-relogio.em-a-acabar { color: #C0392B; }

.em-mbway-barra {
    height: 8px;
    border-radius: 100px;
    background-color: var(--em-papel-alt);
    border: 1px solid var(--em-borda);
    overflow: hidden;
    margin: 0.9rem 0 1.25rem;
}

.em-mbway-barra > div {
    height: 100%;
    background-color: var(--em-lima);
    transition: width 1s linear;
}

.em-mbway-pedido {
    font-size: 0.85rem;
    color: var(--em-tinta-suave);
    margin: 0;
}


/* ------------------------------------------ meios de pagamento no rodapé --- */
/* Um por linha e esbatidos: são uma garantia discreta, não são publicidade. */

.em-pagamentos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.em-pagamentos img {
    display: block;
    height: 26px;
    width: auto;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.em-pagamentos img:hover { opacity: 0.8; }