/* =============================================================
   CAMINHO DE DESTINO: /home/call4med/public_html/css/pagina.css
   -------------------------------------------------------------
   Paginas de texto: privacidade, termos, cookies e contactos.
   Carrega-se DEPOIS do index.css, de onde herda as cores, a
   barra e o rodape.

   Regra do registo: coluna estreita, muito ar, riscos finissimos
   a separar. Nada de caixas.
   ============================================================= */

.c4-corpo-texto { background: var(--fundo); }

.c4-pagina {
    max-width: 780px;
    margin: 0 auto;
    padding: 90px 32px 110px;
}

.c4-pagina__titulo {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 4vw, 2.9rem);
    font-weight: 200;
    letter-spacing: 0.08em;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--leite);
}

.c4-pagina__data {
    margin: 0 0 56px;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cinza-2);
}

.c4-pagina h2 {
    margin: 62px 0 18px;
    padding-top: 26px;
    border-top: 1px solid var(--risco);
    font-size: 1.06rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--azul-luz);
}

.c4-pagina h3 {
    margin: 34px 0 10px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--leite);
}

.c4-pagina p,
.c4-pagina li {
    color: var(--cinza);
    font-size: 1.04rem;
    line-height: 1.75;
}

.c4-pagina p { margin: 0 0 18px; }

.c4-pagina ul { margin: 0 0 18px; padding-left: 22px; }
.c4-pagina li { margin-bottom: 10px; }

.c4-pagina strong { color: var(--leite); font-weight: 500; }

.c4-pagina a { color: var(--azul-luz); text-decoration: none; border-bottom: 1px solid rgba(143,166,255,0.35); }
.c4-pagina a:hover { border-bottom-color: var(--azul-luz); }

/* Tabela simples, para prazos e subcontratantes */
.c4-quadro { width: 100%; border-collapse: collapse; margin: 0 0 26px; }
.c4-quadro th,
.c4-quadro td {
    text-align: left;
    padding: 15px 14px 15px 0;
    border-bottom: 1px solid var(--risco-2);
    font-size: 0.98rem;
    color: var(--cinza);
    vertical-align: top;
}
.c4-quadro th {
    color: var(--cinza-2);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom-color: var(--risco);
}
.c4-quadro td:first-child { color: var(--leite); width: 38%; }


/* -------------------------------------------------------------
   CONTACTOS
   ------------------------------------------------------------- */
.c4-contactos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 10px;
}

.c4-contacto {
    margin: 0 0 30px;
}
.c4-contacto__etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cinza-2);
}
.c4-contacto__valor {
    font-size: 1.18rem;
    color: var(--leite);
}
.c4-contacto__valor a { color: var(--leite); border-bottom-color: rgba(242,244,251,0.3); }
.c4-contacto__nota { font-size: 0.86rem; color: var(--cinza-2); }


/* -------------------------------------------------------------
   PAGINAS DE AUTENTICACAO
   Coluna estreita, centrada: nada distrai de dois campos e um
   botao.
   ------------------------------------------------------------- */
.c4-pagina--estreita { max-width: 460px; padding-top: 76px; }
.c4-pagina--estreita .c4-pagina__titulo { text-align: center; }
.c4-pagina--estreita .c4-pagina__data { text-align: center; margin-bottom: 44px; }

.c4-forma { margin: 0; }

.c4-botao--largo {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
}

.c4-campo__nota {
    text-transform: none;
    letter-spacing: 0;
    color: var(--cinza-2);
    font-size: 0.78rem;
    margin-left: 8px;
}

/* O codigo de 6 digitos merece caixa propria */
.c4-campo--codigo {
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-variant-numeric: tabular-nums;
    padding: 18px 16px;
}

.c4-forma__pe {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.94rem;
    color: var(--cinza);
}

.c4-forma__legal {
    margin: 26px 0 0;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--cinza-2);
    text-align: center;
}


/* -------------------------------------------------------------
   FORMULARIO
   ------------------------------------------------------------- */
.c4-campo { margin-bottom: 24px; }

.c4-campo label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cinza-2);
}

.c4-campo input,
.c4-campo textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(242,244,251,0.04);
    border: 1px solid var(--risco);
    border-radius: 10px;
    color: var(--leite);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}
.c4-campo textarea { min-height: 150px; resize: vertical; }

/* Sugestões dentro dos campos: bem apagadas sobre o fundo
   escuro, para não se confundirem com texto escrito. */
.c4-campo input::placeholder,
.c4-campo textarea::placeholder {
    color: rgba(242,244,251,0.28);
    opacity: 1;
}

.c4-campo input:focus,
.c4-campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    background: rgba(74,108,247,0.08);
}


/* -------------------------------------------------------------
   OLHO DAS SENHAS
   Botão posto pelo js/olho.js dentro de cada campo de senha.
   ------------------------------------------------------------- */
.olho-caixa { position: relative; }

.olho-botao {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}
.olho-caixa input { padding-right: 46px !important; }
.olho-botao { color: rgba(242,244,251,0.42); }
.olho-botao:hover { color: var(--azul-luz); background: rgba(242,244,251,0.07); }



/* -------------------------------------------------------------
   MEDIDOR DA SENHA
   Posto pelo js/senha.js por baixo de cada campo de senha nova.
   Orienta enquanto se escreve; quem decide e o servidor.
   ------------------------------------------------------------- */
.senha-medidor {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.senha-medidor--visivel {
    max-height: 70px;
    opacity: 1;
    margin-top: 10px;
}

.senha-barra {
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
}
.senha-barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.senha-texto {
    margin: 7px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
}
.senha-texto b { font-weight: 600; }

.senha--1 .senha-barra span { background: #d1483f; }
.senha--2 .senha-barra span { background: #d1483f; }
.senha--3 .senha-barra span { background: #b3702e; }
.senha--4 .senha-barra span { background: #3f8f5f; }
.senha--5 .senha-barra span { background: #2e9c68; }

.senha--1 .senha-texto b { color: #d1483f; }
.senha--2 .senha-texto b { color: #d1483f; }
.senha--3 .senha-texto b { color: #b3702e; }
.senha--4 .senha-texto b { color: #3f8f5f; }
.senha--5 .senha-texto b { color: #2e9c68; }
.senha-barra { background: rgba(242,244,251,0.12); }
.senha-texto span { color: var(--cinza-2); }

.senha--1 .senha-barra span, .senha--2 .senha-barra span { background: #ef6b62; }
.senha--3 .senha-barra span { background: #e0a35c; }
.senha--4 .senha-barra span { background: #46c48a; }
.senha--5 .senha-barra span { background: #46c48a; }
.senha--1 .senha-texto b, .senha--2 .senha-texto b { color: #ef6b62; }
.senha--3 .senha-texto b { color: #e0a35c; }
.senha--4 .senha-texto b, .senha--5 .senha-texto b { color: #46c48a; }


/* Campo-isco: invisivel para gente, apetecivel para robos. */
.c4-isco {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.c4-aviso {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 0.98rem;
    line-height: 1.6;
}
.c4-aviso--bom {
    background: rgba(70,196,138,0.12);
    border: 1px solid rgba(70,196,138,0.4);
    color: #a8e6c6;
}
.c4-aviso--mau {
    background: rgba(239,107,98,0.12);
    border: 1px solid rgba(239,107,98,0.4);
    color: #f4b4b0;
}


/* -------------------------------------------------------------
   CASA
   So o icone, a abrir o grupo da direita, antes do "Como
   funciona". E o unico caminho de volta a pagina inicial desde
   que o logotipo saiu da barra.
   ------------------------------------------------------------- */
.c4-barra__casa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--cinza);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.c4-barra__casa:hover {
    color: var(--leite);
    background: rgba(242,244,251,0.07);
}


/* -------------------------------------------------------------
   CONTACTOS NA BARRA
   ------------------------------------------------------------- */
.c4-barra__contacto {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    color: var(--cinza);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    transition: color 0.15s ease;
}
.c4-barra__contacto:hover { color: var(--leite); }
.c4-barra__contacto .bi { color: var(--azul-luz); font-size: 0.92rem; }

/* O botao da barra e mais pequeno do que o das seccoes. */
.c4-botao--barra { padding: 11px 20px; font-size: 0.72rem; white-space: nowrap; }

/* Entre 900 e 1150 o menu fica apertado: o email da esquerda e a
   primeira coisa a sair, que o telefone chega. */
@media (max-width: 1150px) {
    .c4-barra__contacto[href^="mailto"] { display: none; }
    .c4-barra__dir { gap: 18px !important; }
}

/* -------------------------------------------------------------
   MENU DE HAMBURGUER
   Fora do telemovel nao existe: fica escondido.
   ------------------------------------------------------------- */
.c4-hamburguer,
.c4-barra__tel,
.c4-menu { display: none; }


@media (max-width: 900px) {

    /* Tres coisas so, e cada uma no seu canto: menu a esquerda,
       nome ao centro, telefone a direita. */
    .c4-barra__interior {
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
    }

    .c4-barra__esq,
    .c4-barra__dir { display: none; }

    .c4-hamburguer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        grid-column: 1;
        width: 44px;
        height: 44px;
        padding: 0;
        margin-left: -10px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .c4-hamburguer span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--leite);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .c4-menu-aberto .c4-hamburguer span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .c4-menu-aberto .c4-hamburguer span:nth-child(2) { opacity: 0; }
    .c4-menu-aberto .c4-hamburguer span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .c4-marca {
        display: inline-flex;
        grid-column: 2;
        justify-self: center;
    }
    .c4-marca__texto { font-size: 0.88rem; letter-spacing: 0.24em; }

    .c4-barra__tel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 3;
        justify-self: end;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        color: var(--azul-luz);
        font-size: 1.15rem;
        text-decoration: none;
    }

    /* O painel: desce por baixo da barra, a toda a largura. */
    .c4-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: var(--fundo);
        text-align: center;
        transition: max-height 0.25s ease;
    }
    .c4-menu-aberto .c4-menu {
        max-height: 70vh;
        overflow-y: auto;
        border-top: 1px solid var(--risco);
    }

    .c4-menu a {
        display: block;
        padding: 18px 22px;
        color: var(--leite);
        text-decoration: none;
        font-size: 0.82rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--risco-2);
    }

    .c4-menu__botao {
        margin: 20px auto;
        max-width: 300px;
        background: var(--azul);
        border: none;
        border-radius: 999px;
        padding: 16px 22px;
    }

    .c4-menu__contactos {
        margin: 0;
        padding: 4px 22px 28px;
        font-size: 0.86rem;
        line-height: 2;
        color: var(--cinza-2);
    }
    .c4-menu__contactos a {
        display: inline;
        padding: 0;
        border: none;
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.86rem;
        color: var(--cinza);
    }

    /* Com o menu aberto a pagina nao rola por tras. */
    .c4-menu-aberto { overflow: hidden; }
}


/* -------------------------------------------------------------
   MEIOS DE PAGAMENTO
   Um por cima do outro, com os ficheiros horizontais da SIBS.
   Sem titulo: os simbolos dizem-se sozinhos.
   ------------------------------------------------------------- */
.c4-pagamentos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* Bem apagados, so como sinal de confianca. */
    opacity: 0.38;
    /* Desce o suficiente para o primeiro simbolo comecar na
       mesma linha do "Um servico da Uebdigital" -- a altura do
       "Call4Med" mais a folga que ele tem por baixo. */
    padding-top: 28px;
}
.c4-pagamentos img {
    display: block;
    width: auto;
    height: 26px;
}

@media (max-width: 900px) {
    .c4-pagamentos { order: 3; margin-top: 8px; }
    .c4-pagamentos img { height: 22px; }
}


/* -------------------------------------------------------------
   RODAPE ALARGADO
   ------------------------------------------------------------- */
.c4-rodape__interior { align-items: flex-start; }
.c4-rodape__marca { margin: 0; }
.c4-rodape__nome {
    margin: 0 0 10px;
    font-size: 0.86rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--leite);
}
.c4-rodape__legal {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--cinza-2);
}
.c4-rodape__legal a { color: var(--cinza); text-decoration: none; }
.c4-rodape__legal a:hover { color: var(--leite); }
.c4-rodape__custo { font-size: 0.74rem; }

.c4-rodape__fim {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--risco-2);
}
.c4-rodape__fim p { margin: 0; font-size: 0.76rem; color: var(--cinza-2); }


@media (max-width: 900px) {
    .c4-pagina { padding: 54px 22px 70px; }
    .c4-pagina h2 { margin-top: 46px; }
    .c4-contactos { grid-template-columns: 1fr; gap: 44px; }
    .c4-quadro td:first-child { width: auto; }
    .c4-quadro,
    .c4-quadro tbody,
    .c4-quadro tr,
    .c4-quadro td { display: block; }
    .c4-quadro thead { display: none; }
    .c4-quadro tr { padding: 14px 0; border-bottom: 1px solid var(--risco-2); }
    .c4-quadro td { border: none; padding: 2px 0; }
}


/* -------------------------------------------------------------
   O NOME PARTIDO PELA c4-espinha, EM QUALQUER TAMANHO
   -------------------------------------------------------------
   Mesma construcao do herói, reduzida a uma classe reutilizavel:
   o nome existe UMA vez no texto, em caixa mista; as duas
   metades e o fio do meio sao desenhados por CSS, que nem o
   Google nem os leitores de ecra leem.

   Usa-se assim, e o tamanho vem do font-size de quem a leva:
   <span class="c4-espinha" data-nome="CALL4MED">Call4Med</span>
   ------------------------------------------------------------- */
.c4-espinha {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: transparent;
    white-space: nowrap;

    /* o fio ao meio */
    background-image: linear-gradient(180deg,
        rgba(242,244,251,0) 0%,
        rgba(242,244,251,0.30) 28%,
        rgba(242,244,251,0.30) 72%,
        rgba(242,244,251,0) 100%);
    background-size: 1px calc(100% + 0.28em);
    background-position: center center;
    background-repeat: no-repeat;
}

.c4-espinha::before,
.c4-espinha::after {
    content: attr(data-nome);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.c4-espinha::before {
    clip-path: inset(0 50% 0 0);
    background: linear-gradient(175deg, #ffffff 8%, #c8cee6 46%, #6f7699 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.c4-espinha::after {
    clip-path: inset(0 0 0 50%);
    background: linear-gradient(175deg, #cfd9ff 8%, var(--azul-luz) 46%, #3f55a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}