/* Toque Real — folha de estilo do site público. Sem framework, sem build. */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/site/fraunces-600.woff2") format("woff2");
}

:root {
    --fundo: #faf6f1;
    --superficie: #ffffff;
    --linha: #e8dfd6;
    --texto: #2a1f24;
    --texto-suave: #6b5b62;
    --marca: #7a2e3a;
    --marca-escura: #5e2230;
    --cobre: #c08a5b;
    --disponivel: #2e7d5b;
    --whatsapp: #25d366;
    --whatsapp-texto: #0b3d2a;
    --erro: #b3261e;
    --raio: 14px;
    --sombra: 0 2px 10px rgba(42, 31, 36, 0.06);
}

* {
    box-sizing: border-box;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, .marca-nome {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    color: var(--marca);
    margin: 0;
}

a {
    color: var(--marca);
}

img {
    max-width: 100%;
    display: block;
}

/* Cabeçalho */

.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--linha);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.marca-icone {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
}

.marca-nome {
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}

.nav-desktop {
    display: none;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}

.botao-primario {
    background: var(--marca);
    color: #ffffff;
}

.botao-primario:hover {
    background: var(--marca-escura);
}

.botao-fantasma {
    background: transparent;
    color: var(--texto);
    border-color: var(--linha);
    opacity: 0.6;
    cursor: default;
}

/* Conteúdo principal */

main {
    flex: 1;
}

.secao {
    padding: 32px 16px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.hero {
    padding: 40px 16px 32px;
    text-align: left;
}

.hero h1 {
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1.1;
}

.hero p {
    font-size: 1.0625rem;
    color: var(--texto-suave);
    max-width: 44ch;
    margin: 14px 0 0;
}

/* Pesquisa */

.pesquisa {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campo label {
    font-size: 0.8125rem;
    color: var(--texto-suave);
}

.campo input,
.campo select {
    font: inherit;
    padding: 11px 12px;
    border-radius: 9px;
    border: 1px solid var(--linha);
    background: var(--fundo);
    color: var(--texto);
}

.pesquisa .botao {
    width: 100%;
}

.pesquisa-aviso {
    font-size: 0.8125rem;
    color: var(--texto-suave);
    margin: 0;
}

/* Títulos de secção */

.secao-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.secao-titulo h2 {
    font-size: 1.375rem;
}

.ver-todos {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.55;
}

/* Estado vazio */

.vazio {
    border: 1px dashed var(--linha);
    border-radius: var(--raio);
    padding: 24px 18px;
    color: var(--texto-suave);
    background: var(--superficie);
    font-size: 0.9375rem;
}

/* Carrossel horizontal (Disponíveis hoje) */

.carrossel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.carrossel::-webkit-scrollbar {
    height: 6px;
}

.carrossel::-webkit-scrollbar-thumb {
    background: var(--linha);
    border-radius: 999px;
}

.carrossel .cartao {
    scroll-snap-align: start;
    flex: 0 0 160px;
}

/* Grade (Novas massagistas) */

.grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Cartão de massagista */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
    display: block;
}

.cartao:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 3px;
}

.cartao-foto {
    aspect-ratio: 4 / 5;
    background: linear-gradient(145deg, #efe3d6, #e3d2c2);
    position: relative;
}

.cartao-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cartao-selo {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--disponivel);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.cartao-corpo {
    padding: 12px 14px 14px;
}

.cartao-corpo p {
    margin: 0;
}

.cartao-nome {
    font-weight: 700;
    font-size: 1rem;
}

.cartao:hover .cartao-nome {
    color: var(--marca);
}

.cartao-local {
    font-size: 0.875rem;
    color: var(--texto-suave);
    margin-top: 2px;
}

.cartao-preco {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--marca);
    margin-top: 6px;
}

/* Chips: cidades e tipos */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    font-size: 0.875rem;
    color: var(--texto);
    text-decoration: none;
}

/* Rodapé */

.rodape {
    background: var(--marca-escura);
    color: #f3e9e2;
    margin-top: 24px;
}

.rodape-conteudo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 16px 96px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rodape-marca {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.125rem;
    color: #ffffff;
}

.rodape-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.875rem;
}

.rodape-links a,
.rodape-links span {
    color: #f3e9e2;
    opacity: 0.75;
    text-decoration: none;
}

.rodape-aviso {
    font-size: 0.75rem;
    opacity: 0.6;
    line-height: 1.6;
}

/* Navegação inferior (telemóvel) */

.nav-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    z-index: 10;
}

.nav-mobile a,
.nav-mobile span {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px 10px;
    font-size: 0.6875rem;
    color: var(--texto-suave);
    text-decoration: none;
    opacity: 0.6;
}

.nav-mobile .ativo {
    color: var(--marca);
    opacity: 1;
}

.nav-mobile svg {
    width: 20px;
    height: 20px;
}

/* Desktop */

@media (min-width: 860px) {
    .cabecalho {
        padding: 16px 32px;
    }

    .nav-desktop {
        display: flex;
        align-items: center;
        gap: 24px;
        font-size: 0.9375rem;
    }

    .nav-desktop a,
    .nav-desktop span {
        text-decoration: none;
        color: var(--texto);
        opacity: 0.7;
    }

    .cabecalho-acoes {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .hero {
        padding: 56px 32px 40px;
    }

    .secao {
        padding: 40px 32px;
    }

    .pesquisa {
        flex-direction: row;
        align-items: flex-end;
        max-width: 640px;
    }

    .pesquisa .campo {
        flex: 1;
    }

    .pesquisa .botao {
        width: auto;
        padding: 11px 24px;
    }

    .grade {
        grid-template-columns: repeat(4, 1fr);
    }

    .carrossel .cartao {
        flex-basis: 200px;
    }

    .nav-mobile {
        display: none;
    }

    .rodape-conteudo {
        padding: 40px 32px;
    }

    .secao-perfil {
        padding-bottom: 40px;
    }

    .perfil-destaque {
        display: flex;
        gap: 32px;
        align-items: stretch;
        padding: 24px 32px 0;
    }

    .galeria {
        flex: 1 1 60%;
        padding: 0;
    }

    .galeria-principal {
        aspect-ratio: 4 / 5;
        max-height: 800px;
    }

    .perfil-identidade {
        flex: 1 1 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .perfil-secoes-grade {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0 32px;
        padding: 0 32px;
    }

    .perfil-secoes-grade .secao {
        padding: 32px 0;
        max-width: none;
    }

    .perfil-largura .grade {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Página de perfil */

.breadcrumb {
    font-size: 0.8125rem;
    color: var(--texto-suave);
    padding: 16px 16px 0;
    max-width: 1100px;
    margin: 0 auto;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li + li::before {
    content: ">";
    padding: 0 6px;
}

.aviso-indisponivel {
    margin: 16px auto 0;
    max-width: 1100px;
    padding: 0 16px;
}

.aviso-indisponivel p {
    background: #faf1e3;
    color: #7a5a1f;
    border-radius: var(--raio);
    padding: 10px 14px;
    font-size: 0.875rem;
    margin: 0;
}

.secao-perfil {
    padding-bottom: 88px;
}

.perfil-largura {
    max-width: 1100px;
    margin: 0 auto;
}

/* Destaque: galeria + identidade (mockup "Apresentação UI_UX Toque
   Real" — ecrãs "Perfil (mobile)" e "Perfil (desktop)"). Empilhado no
   telemóvel; lado a lado a partir do desktop (ver media query). */

.perfil-destaque {
    padding-top: 10px;
}

.galeria {
    padding: 0 16px;
}

.galeria-principal {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--linha);
}

.galeria-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--texto);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-seta-anterior {
    left: 10px;
}

.galeria-seta-seguinte {
    right: 10px;
}

.galeria-miniaturas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px 0;
}

.galeria-miniatura {
    flex: 0 0 64px;
    width: 64px;
    height: 80px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
}

.galeria-miniatura.ativa {
    border-color: var(--marca);
    opacity: 1;
}

.galeria-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-identidade {
    padding: 16px 16px 0;
}

.perfil-identidade h1 {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
    line-height: 1.15;
}

.perfil-chamada {
    font-size: 1.0625rem;
    color: var(--texto-suave);
    margin: 10px 0 0;
}

.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.selo-verificada {
    background: #e8f3ec;
    color: var(--disponivel);
}

.selo-disponivel {
    background: var(--disponivel);
    color: #ffffff;
}

.perfil-site {
    margin-top: 12px;
    font-size: 0.95rem;
}

.perfil-site a {
    color: var(--marca);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.selo-indisponivel {
    background: var(--linha);
    color: var(--texto-suave);
}

.factos-icones {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--texto);
}

.factos-icones li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.facto-idade strong {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--marca);
}

.factos-icones svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--cobre);
}

.facto-euro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cobre);
}

.perfil-contacto-linha {
    display: none;
}

@media (min-width: 860px) {
    .perfil-contacto-linha {
        display: flex;
        gap: 10px;
        margin-top: auto;
        padding-top: 20px;
    }

    .perfil-contacto-linha .botao {
        flex: 1 1 0;
    }

    .botao-placeholder {
        visibility: hidden;
    }
}

.contacto-fixo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--superficie);
    border-top: 1px solid var(--linha);
}

.contacto-fixo .botao {
    flex: 1;
}

@media (min-width: 860px) {
    .contacto-fixo {
        display: none;
    }
}

.botao-whatsapp {
    background: var(--whatsapp);
    color: var(--whatsapp-texto);
}

.botao-telegram {
    background: #2aabee;
    color: #ffffff;
}

.botao-sms {
    background: transparent;
    color: var(--texto);
    border-color: var(--linha);
}

.galeria-ampliar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--texto);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-ampliar svg {
    width: 18px;
    height: 18px;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 10, 12, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-anterior {
    left: 16px;
}

.lightbox-seguinte {
    right: 16px;
}

/* Foto seguinte ainda a chegar: a atual esbate e aparece um círculo a girar. */
.galeria-principal.a-carregar img,
.lightbox.a-carregar .lightbox-img {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.galeria-principal.a-carregar::after,
.lightbox.a-carregar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: galeria-girar 0.8s linear infinite;
    pointer-events: none;
}

@keyframes galeria-girar {
    to {
        transform: rotate(360deg);
    }
}

.perfil-secoes-grade .secao:first-child {
    padding-top: 0;
}

@media (min-width: 860px) {
    /* No desktop as secções ficam lado a lado (grid de 3 colunas); tirar o
       padding-top só do primeiro filho desalinha essa coluna com as outras
       duas, que mantêm o padding normal (regra acima pensada para o
       empilhamento do mobile, onde isso não tem efeito colateral). */
    .perfil-secoes-grade .secao:first-child {
        padding-top: 32px;
    }
}

.precos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preco-linha {
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: 320px;
    font-size: 0.9375rem;
}

.preco-pontilhado {
    flex: 1;
    border-bottom: 1px dotted rgba(42, 31, 36, 0.35);
    margin-bottom: 4px;
}

.preco-valor {
    color: var(--marca);
}

.perfil-secoes-grade .chip {
    background: var(--marca);
    border-color: var(--marca);
    color: var(--fundo);
}

/* Porta de 18 anos (skill, seção 11): camada em JS com cookie de 30 dias.
   O HTML da página continua inteiro por baixo — isto é só uma camada
   visual, nunca impede o Googlebot de ler o conteúdo. */

.porta-idade {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 10, 12, 0.95);
}

.porta-idade[hidden] {
    display: none;
}

.porta-idade-caixa {
    max-width: 420px;
    width: 100%;
    background: var(--superficie);
    border-radius: var(--raio);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--sombra);
}

.porta-idade-aviso {
    font-weight: 700;
    color: var(--marca);
    margin: 0 0 8px;
}

.porta-idade-pergunta {
    color: var(--texto-suave);
    margin: 0 0 24px;
}

.porta-idade-botoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.porta-idade-botoes .botao {
    width: 100%;
}

.botao-recusar {
    background: transparent;
    color: var(--texto-suave);
    border-color: var(--linha);
}

.perfil-denunciar {
    text-align: center;
    margin-top: 24px;
}

.perfil-denunciar a {
    color: var(--texto-suave);
    font-size: 0.8125rem;
    text-decoration: underline;
}

/* Formulário de denúncia (skill, seção 11, ponto 7) */

.secao-denuncia {
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 16px 64px;
}

.denuncia-caixa h1 {
    font-size: 1.5rem;
    margin: 0 0 8px;
}

.denuncia-intro {
    color: var(--texto-suave);
    margin: 0 0 24px;
    font-size: 0.9375rem;
}

.denuncia-caixa form {
    display: flex;
    flex-direction: column;
}

.denuncia-caixa label {
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 16px;
    margin-bottom: 6px;
}

.denuncia-caixa select,
.denuncia-caixa textarea,
.denuncia-caixa input[type="email"] {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 10px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
}

.denuncia-caixa button {
    margin-top: 24px;
    align-self: flex-start;
}

.denuncia-erro {
    background: #fbe9e7;
    color: var(--erro);
    border-radius: var(--raio);
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.denuncia-voltar {
    margin-top: 20px;
    font-size: 0.875rem;
}

/* Avaliações de clientes (Fase 5, passo 5.4): linha junto ao nome e janela */

.avaliacoes-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 0.9375rem;
    color: var(--texto-suave);
}

/* "♥ 4,8" no mesmo estilo do "28 anos" (Fraunces, cor da marca). */
.avaliacoes-media {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--marca);
}

.avaliacoes-abrir {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--marca);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.avaliacoes-janela {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    border: none;
    border-radius: var(--raio);
    padding: 20px;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 12px 40px rgba(20, 10, 12, 0.3);
}

.avaliacoes-janela::backdrop {
    background: rgba(20, 10, 12, 0.7);
}

.avaliacoes-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.avaliacoes-topo h2 {
    margin: 0;
    font-size: 1.25rem;
}

.avaliacoes-fechar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: var(--fundo);
    color: var(--texto);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}

.avaliacoes-obrigado {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: var(--raio);
    background: #e8f3ee;
    color: var(--disponivel);
    font-size: 0.9375rem;
}

.avaliacoes-lista {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.avaliacoes-lista li {
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}

.avaliacoes-cabeca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9375rem;
}

.avaliacoes-coracoes {
    color: var(--marca);
    letter-spacing: 1px;
}

.avaliacoes-coracoes-vazios {
    opacity: 0.2;
}

.avaliacoes-texto {
    margin: 4px 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.avaliacoes-deixar {
    margin-top: 16px;
    width: 100%;
}

.avaliacoes-deixar[hidden],
.avaliacoes-formulario[hidden] {
    display: none;
}

.avaliacoes-formulario {
    margin-top: 16px;
    border-top: 1px solid var(--linha);
}

.avaliacao-form {
    display: flex;
    flex-direction: column;
}

.avaliacao-form label {
    font-weight: 600;
    font-size: 0.875rem;
    margin-top: 14px;
    margin-bottom: 6px;
}

.avaliacao-form label small {
    font-weight: 400;
    color: var(--texto-suave);
}

.avaliacao-form input[type="text"],
.avaliacao-form input[type="email"],
.avaliacao-form textarea {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 10px 12px;
    font: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: var(--superficie);
}

.avaliacao-form textarea {
    resize: vertical;
}

.avaliacao-form button[type="submit"] {
    margin-top: 18px;
}

.avaliacao-erro {
    background: #fbe9e7;
    color: var(--erro);
    border-radius: var(--raio);
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 0.875rem;
}

.avaliacao-erro p {
    margin: 0;
}

/* Corações: DOM de 5 para 1, mostrado de 1 para 5; o escolhido e os
   anteriores ficam cheios. */
.avaliacao-nota {
    margin: 14px 0 0;
    padding: 0;
    border: none;
}

.avaliacao-nota-coracoes {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.avaliacao-nota legend {
    padding: 0;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.875rem;
}

.avaliacao-nota input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.avaliacao-nota label {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--linha);
    cursor: pointer;
}

.avaliacao-nota input:checked ~ label,
.avaliacao-nota label:hover,
.avaliacao-nota label:hover ~ label {
    color: var(--marca);
}

.avaliacao-nota input:focus-visible + label {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

.avaliacao-nota-moderacao {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    color: var(--texto-suave);
}

/* Coluna da direita do perfil maior no desktop, para encher a altura da
   foto (pedido do Rangel em 2026-10-21: "muito tímida, pequena"). Fica no
   fim do ficheiro para ganhar às regras base acima. */

@media (min-width: 860px) {
    /* A regra base (padding: 16px) vem depois do media query do topo e
       ganhava-lhe; sem isto o nome ficava 16 px abaixo do topo da foto. */
    .perfil-identidade {
        padding: 0;
    }

    .perfil-chamada {
        font-size: 1.1875rem;
        margin-top: 8px;
    }

    .selos {
        gap: 10px;
        margin-top: 12px;
    }

    .selo {
        font-size: 0.875rem;
        padding: 6px 14px;
    }

    .factos-icones {
        gap: 13px;
        margin-top: 14px;
        font-size: 1.0625rem;
    }

    .factos-icones li {
        gap: 14px;
    }

    .facto-idade {
        line-height: 1.15;
    }

    .facto-idade strong {
        font-size: 1.5rem;
    }

    .avaliacoes-media {
        font-size: 1.3125rem;
    }

    .factos-icones svg,
    .facto-euro {
        width: 22px;
        height: 22px;
    }

    .facto-euro {
        font-size: 1rem;
    }

    .perfil-contacto-linha .botao {
        min-height: 50px;
        font-size: 1.0625rem;
    }

    .avaliacoes-resumo {
        font-size: 1.0625rem;
    }
}

/* Perfil removido (410): o caminho continua */

.removido-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 56px 16px 64px;
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(192, 138, 91, 0.35), transparent 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(122, 46, 58, 0.55), transparent 60%),
        linear-gradient(160deg, #5e2230 0%, #3d1620 100%);
    color: #f6ece4;
}

.removido-conteudo {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.removido-sobretitulo {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border: 1px solid rgba(192, 138, 91, 0.55);
    border-radius: 999px;
    color: #e9c9a8;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.04);
}

.removido-hero h1 {
    color: #ffffff;
    font-size: clamp(2rem, 7.5vw, 3.5rem);
    line-height: 1.08;
}

.removido-destaque {
    color: #e3b384;
    font-style: italic;
}

.removido-texto {
    max-width: 560px;
    margin: 18px 0 0;
    font-size: 1.0625rem;
    color: rgba(246, 236, 228, 0.86);
}

.removido-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 30px;
}

.removido-botao {
    padding: 14px 26px;
    font-size: 1rem;
    color: #3d1620;
    background: linear-gradient(135deg, #f0cfa8, #c08a5b);
    box-shadow: 0 6px 18px rgba(192, 138, 91, 0.3);
}

.removido-botao:hover {
    background: #f0cfa8;
}

.removido-contador {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.9375rem;
    color: rgba(246, 236, 228, 0.8);
}

.removido-contador p {
    margin: 0;
}

.removido-contador strong {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.removido-contador svg {
    width: 34px;
    height: 34px;
    transform: rotate(-90deg);
    flex-shrink: 0;
}

.removido-anel-fundo,
.removido-anel {
    fill: none;
    stroke-width: 3;
}

.removido-anel-fundo {
    stroke: rgba(255, 255, 255, 0.15);
}

.removido-anel {
    stroke: #e3b384;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.removido-contador.parado svg {
    opacity: 0.35;
}

.removido-ficar {
    background: none;
    border: 0;
    padding: 4px 2px;
    color: #e9c9a8;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.removido-ficar:hover {
    color: #ffffff;
}

/* Linha até um ponto de luz: o caminho continua. */
.removido-caminho {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 32%;
    z-index: -1;
    pointer-events: none;
}

.removido-caminho path {
    fill: none;
    stroke: rgba(227, 179, 132, 0.35);
    stroke-width: 1.5;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Ponto de luz no fim da linha (fora do SVG para não deformar). */
.removido-destino {
    position: absolute;
    right: 6.67%;
    bottom: 27.2%;
    width: 14px;
    height: 14px;
    margin: 0 -7px -7px 0;
    border-radius: 50%;
    background: #f0cfa8;
    box-shadow: 0 0 12px 3px rgba(240, 207, 168, 0.6);
    z-index: -1;
}

.removido-sugestoes {
    padding-top: 40px;
}

@media (min-width: 860px) {
    .removido-hero {
        padding: 96px 32px 110px;
    }

    .removido-sugestoes .secao-titulo {
        justify-content: center;
    }

    .removido-grade {
        grid-template-columns: repeat(auto-fit, 240px);
        justify-content: center;
        gap: 20px;
    }
}

/* No telemóvel o ponto de luz cai sobre o texto. */
@media (max-width: 859px) {
    .removido-destino {
        display: none;
    }
}