/* ============================================================
   Alugo — Redesign da homepage (mockup Jul/2026)
   Mobile-first · WCAG 2.1 AA · usa as variáveis de cor do tema
   (--base = verde, --secondary = âmbar, definidas em color.php)
   ============================================================ */

:root {
    --rd-radius: 16px;
    --rd-radius-sm: 12px;
    --rd-ink: #14261c;
    --rd-muted: #51615a;
    --rd-surface: #f6f8f7;
    --rd-shadow: 0 8px 28px rgba(10, 40, 25, 0.10);
    --rd-shadow-sm: 0 3px 12px rgba(10, 40, 25, 0.08);
}

/* ---------- Acessibilidade base ---------- */
.rd-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: hsl(var(--base));
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--rd-radius-sm) 0;
    font-weight: 600;
}

.rd-skip-link:focus {
    left: 0;
    color: #fff;
    outline: 3px solid hsl(var(--base-two));
    outline-offset: 2px;
}

.rd-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid hsl(var(--base));
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Botões ---------- */
.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.rd-btn:hover {
    transform: translateY(-1px);
}

.rd-btn--primary {
    background: hsl(var(--base));
    color: #fff;
}

.rd-btn--primary:hover,
.rd-btn--primary:focus {
    background: hsl(var(--base-d-100, var(--base)));
    color: #fff;
}

.rd-btn--amber {
    background: hsl(var(--base-two));
    color: var(--rd-ink);
}

.rd-btn--amber:hover,
.rd-btn--amber:focus {
    filter: brightness(0.96);
    color: var(--rd-ink);
}

.rd-btn--outline {
    background: transparent;
    color: hsl(var(--base));
    border-color: hsl(var(--base));
}

.rd-btn--outline:hover,
.rd-btn--outline:focus {
    background: hsl(var(--base) / 0.08);
    color: hsl(var(--base));
}

.rd-btn--block {
    width: 100%;
}

/* ---------- Topo da página inicial ----------
   Cabeçalho, hero e pesquisa sobre o mesmo fundo pontilhado das páginas
   de entrada e registo. O bloco é único (não uma cor por secção) para o
   padrão não apresentar emenda entre o hero e a pesquisa. */
.rd-top {
    background-color: hsl(var(--section-bg));
    background-image: radial-gradient(hsl(var(--black) / 0.1) 1px, transparent 1px);
    background-size: 16px 16px;
    border-bottom: 1px solid rgba(20, 38, 28, 0.06);
}

/* ---------- Hero ---------- */
/* Na página inicial o cabeçalho é absoluto e sobrepõe-se ao hero. O
   padding do topo tem de o compensar: com 40px o texto começava atrás do
   menu e os cartões flutuantes tapavam-no. Cabeçalho ≈ 78px + folga. */
.rd-hero {
    padding: 104px 0 24px;
    overflow: hidden;
}

.rd-hero__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: hsl(var(--base));
    background: hsl(var(--base) / 0.08);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.rd-hero__title {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    line-height: 1.12;
    font-weight: 800;
    color: var(--rd-ink);
    margin-bottom: 18px;
}

.rd-hero__title .highlight {
    color: hsl(var(--base));
}

.rd-hero__lead {
    font-size: 17px;
    color: var(--rd-muted);
    max-width: 46ch;
    margin-bottom: 26px;
}

.rd-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}

.rd-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.rd-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rd-ink);
}

.rd-hero__badges .rd-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: hsl(var(--base) / 0.10);
    color: hsl(var(--base));
    font-size: 14px;
}

/* Lado direito: blob + cartões flutuantes */
.rd-hero__stage {
    position: relative;
    min-height: 420px;
}

.rd-hero__blob {
    position: absolute;
    inset: 6% 4% 6% 10%;
    background: radial-gradient(120% 120% at 30% 20%, hsl(var(--base) / 0.92), hsl(var(--base)) 70%);
    border-radius: 58% 42% 52% 48% / 52% 55% 45% 48%;
}

.rd-hero__blob::after {
    content: "";
    position: absolute;
    right: -6%;
    bottom: -4%;
    width: 38%;
    height: 34%;
    background: hsl(var(--base-two));
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    z-index: -1;
}

.rd-hero__photo {
    position: absolute;
    inset: 6% 4% 6% 10%;
    width: 86%;
    height: 88%;
    object-fit: cover;
    object-position: top center;
    border-radius: 58% 42% 52% 48% / 52% 55% 45% 48%;
}

.rd-float-card {
    position: absolute;
    z-index: 2;
    display: block;
    width: min(158px, 42%);
    background: #fff;
    border-radius: var(--rd-radius-sm);
    box-shadow: var(--rd-shadow);
    padding: 10px;
    text-decoration: none;
    color: var(--rd-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rd-float-card:hover,
.rd-float-card:focus {
    transform: translateY(-3px);
    color: var(--rd-ink);
    box-shadow: 0 12px 32px rgba(10, 40, 25, 0.16);
}

.rd-float-card img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--rd-surface);
}

.rd-float-card__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-float-card__price {
    display: block;
    font-size: 12.5px;
    color: hsl(var(--base));
    font-weight: 600;
}

.rd-float-card--1 { top: 2%;   left: 0; }
.rd-float-card--2 { top: 8%;   right: 0; }
.rd-float-card--3 { bottom: 14%; left: 2%; }
.rd-float-card--4 { bottom: 4%;  right: 2%; }

/* ---------- Barra de pesquisa ---------- */
.rd-search {
    padding: 8px 0 48px;
}

.rd-search__card {
    background: #fff;
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 22px;
}

.rd-search__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: end;
}

.rd-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-ink);
    margin-bottom: 7px;
}

.rd-field .form-control,
.rd-field .form-select,
.rd-field select,
.rd-field input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d8e0dc;
    border-radius: var(--rd-radius-sm);
    padding: 10px 14px;
    font-size: 15px;
    color: var(--rd-ink);
    background-color: #fff;
}

.rd-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2314261c' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.rd-field input:focus,
.rd-field select:focus {
    border-color: hsl(var(--base));
    box-shadow: 0 0 0 3px hsl(var(--base) / 0.15);
    outline: none;
}

.rd-field--icon {
    position: relative;
}

.rd-field--icon .rd-field__icon {
    position: absolute;
    left: 14px;
    bottom: 15px;
    color: var(--rd-muted);
    pointer-events: none;
}

.rd-field--icon input {
    padding-left: 40px;
}

/* ---------- Secções genéricas ---------- */
.rd-section {
    padding: 56px 0;
}

.rd-section--tinted {
    background: var(--rd-surface);
}

.rd-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 30px;
}

.rd-section__title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--rd-ink);
    margin: 0;
}

.rd-section__link {
    font-weight: 600;
    color: hsl(var(--base));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rd-section__link:hover,
.rd-section__link:focus {
    color: hsl(var(--base));
    text-decoration: underline;
}

/* ---------- Categorias populares ---------- */
.rd-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    border-radius: var(--rd-radius);
    overflow: hidden;
}

.rd-cat {
    background: #fff;
    padding: 26px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--rd-ink);
    border: 1px solid #eef2f0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rd-cat:hover,
.rd-cat:focus {
    box-shadow: var(--rd-shadow-sm);
    transform: translateY(-2px);
    color: var(--rd-ink);
    position: relative;
    z-index: 1;
}

.rd-cat__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: hsl(var(--base) / 0.08);
    color: hsl(var(--base));
    font-size: 24px;
}

.rd-cat__icon i {
    color: hsl(var(--base));
}

.rd-cat__name {
    font-weight: 700;
    font-size: 15.5px;
}

.rd-cat__meta {
    font-size: 13px;
    color: var(--rd-muted);
    margin: 0;
}

/* ---------- Como funciona ---------- */
.rd-steps {
    display: flex;
    flex-direction: column;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rd-step;
}

.rd-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.rd-step__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: hsl(var(--base));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.rd-step__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.rd-step__body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--rd-ink);
    margin-bottom: 6px;
    counter-increment: rd-step;
}

.rd-step__body h3::before {
    content: counter(rd-step) ". ";
}

.rd-step__body p {
    color: var(--rd-muted);
    margin: 0;
    font-size: 15px;
}

.rd-earn {
    background: #fff;
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow-sm);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rd-earn__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
}

.rd-earn__photo {
    width: 100%;
    max-width: 220px;
    justify-self: center;
    border-radius: var(--rd-radius-sm);
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

@media (min-width: 576px) {
    .rd-earn__grid {
        grid-template-columns: 1.4fr 1fr;
    }

    .rd-earn__photo {
        max-width: none;
        justify-self: stretch;
        height: 100%;
    }
}

.rd-phone {
    width: 100%;
    height: auto;
    border-radius: var(--rd-radius);
}

.rd-green__photo {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: var(--rd-radius-sm);
}

@media (min-width: 992px) {
    .rd-green__photo {
        height: 210px;
    }
}

/* ---------- Acentos amarelos institucionais ----------
   O amarelo puro (#FFBF00) sobre fundo claro tem contraste ~1.7:1 e é
   ilegível como texto; --rd-amber-ink mantém a mesma matiz da marca com
   luminosidade suficiente para cumprir o mínimo AA (4.5:1). */
:root {
    --rd-amber-ink: hsl(var(--base-two-h) var(--base-two-s) 29%);
}

/* ---------- Cartões de itens ----------
   Layout de duas colunas: imagem sobre branco à esquerda, conteúdo sobre
   um tom claro da marca à direita, com o botão circular recortado no
   canto inferior direito. */
.product__card.alugo-open-frame {
    background: hsl(var(--base) / 0.09);
    border: 1px solid hsl(var(--base) / 0.14);
    box-shadow: 0 4px 16px rgba(10, 40, 25, 0.06);
    border-radius: 24px;
    overflow: hidden;
}

.product__card.alugo-open-frame::before,
.product__card.alugo-open-frame::after {
    content: none;
}

.product__card:hover {
    box-shadow: 0 10px 28px rgba(10, 40, 25, 0.12);
}

/* Lado da imagem: fundo branco e produto inteiro visível */
.product__card .product__img {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.product__card .product__img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product__card:hover .product__img img {
    filter: none;
}

/* Conteúdo */
.product__card .product__content h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.product__card .product__content ul li {
    color: var(--rd-muted);
    font-size: 14.5px;
    gap: 8px;
    margin-bottom: 6px;
}

.product__content ul li i {
    background-color: hsl(var(--base-two));
    color: var(--rd-ink);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

/* Com quatro cartões por linha o preço fica com 254px para si. A 26px,
   "3.300.000,00 MT /mês" pede 258 e passava para uma segunda linha — o
   preço é o número mais importante do cartão e não pode partir-se. A 22px
   pede 219 e cabe com folga, sem deixar de ser o maior elemento do
   cartão: mantém o peso 800 e o âmbar que o distinguem do título. */
.product__price {
    color: var(--rd-amber-ink) !important;
    font-size: 22px;
    font-weight: 800;
    margin-top: 14px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.product__price p {
    font-size: 14px;
    font-weight: 500;
    margin-left: 2px;
}

.product__card .product__content h6 {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.product__card .product__content h6 img,
.product__card.product__column .product__content h6 img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.product__card .badge {
    font-weight: 600;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 999px;
}

/* Recorte do botão: tem de usar a cor de fundo da secção */
.product__btn,
.product__btn::before,
.product__btn::after {
    background-color: #fff;
}

.product__btn::before {
    box-shadow: 0 16px 0 0 #fff;
    background-color: transparent;
}

.product__btn::after {
    box-shadow: 16px 0 0 0 #fff;
    background-color: transparent;
}

.product__arrow {
    background-color: hsl(var(--base-two)) !important;
    color: var(--rd-ink) !important;
    width: 54px;
    height: 54px;
    font-size: 18px;
}

.product__arrow:hover,
.product__arrow:focus {
    color: var(--rd-ink) !important;
    filter: brightness(0.95);
}

/* Cartão em coluna (listagem /products): imagem no topo */
.product__card.product__column .product__img {
    border-radius: 24px 24px 0 0;
    padding: 12px;
}

.product__card.product__column .product__content {
    background: transparent;
}

@media (max-width: 575.98px) {
    .product__card:not(.product__column) {
        grid-template-columns: 1fr;
    }

    .product__card:not(.product__column) .product__img {
        border-radius: 24px 24px 0 0;
        height: 220px;
    }
}

/* Notícias recentes (blog) — mesma linguagem visual dos cartões de itens */
.blog__arrow {
    background-color: hsl(var(--base-two)) !important;
    color: var(--rd-ink) !important;
}

.blog__arrow:hover,
.blog__arrow:focus {
    background-color: hsl(var(--base-two)) !important;
    color: var(--rd-ink) !important;
}

.blog__date span i {
    color: var(--rd-amber-ink);
}

/* Ícones das categorias na landing page: quadrado arredondado creme
   com o glifo no amarelo institucional (#FEB903). */
.rd-cat__icon {
    background: #FEF3DA;
    width: 64px;
    height: 64px;
    border-radius: 20px;
}

.rd-cat__icon,
.rd-cat__icon i,
.rd-cat__icon svg,
.rd-cat__icon svg * {
    color: #FEB903;
    fill: currentColor;
    stroke: currentColor;
}

.rd-cat__icon i,
.rd-cat__icon svg {
    font-size: 26px;
    width: 28px;
    height: 28px;
}

/* Itens disponíveis na landing page: substitui my-120 (120px acima e
   abaixo), que somados aos 72px das secções vizinhas davam 192px de
   intervalo em cada lado. */
.rd-items--home {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
}

@media (min-width: 992px) {
    .rd-items--home {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* Notícias Recentes na landing page: espaçamento contido */
.rd-blog--home {
    padding-top: 24px;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 0;
}

.rd-blog--home .blog__topbar {
    margin-bottom: 32px !important;
}

@media (min-width: 992px) {
    .rd-blog--home {
        padding-top: 32px;
        padding-bottom: 12px;
    }
}

/* Selector de idiomas: texto legível em qualquer fundo */
.dropdown-menu .language__item p,
.dropdown-menu .language__item span,
.rd-footer .dropdown-toggle .language__item span {
    color: var(--rd-ink);
}

.rd-footer .dropdown-menu .dropdown-item:hover .language__item p {
    color: hsl(var(--base));
}

/* Páginas de autenticação: header/rodapé partilhados com o resto do site.
   O header é sobreposto, por isso o conteúdo precisa de folga no topo
   para a imagem não ficar colada ao menu. */
.auth__area {
    padding-top: 120px;
    padding-bottom: 60px;
}

@media (max-width: 991.98px) {
    .auth__area {
        padding-top: 96px;
    }
}

.auth__thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--rd-radius);
    object-fit: cover;
}

.rd-earn__title {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: var(--rd-ink);
    margin-bottom: 20px;
}

.rd-earn__list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-earn__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--rd-ink);
}

.rd-earn__list i {
    color: hsl(var(--base));
    margin-top: 3px;
}

/* ---------- Faixa de estatísticas ---------- */
.rd-stats {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    padding: 28px 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    align-items: center;
}

.rd-stats__label {
    font-size: 18px;
    font-weight: 800;
    color: var(--rd-ink);
    margin: 0;
}

.rd-stat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rd-stat__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: hsl(var(--base));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--rd-shadow-sm);
}

.rd-stat__value {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: hsl(var(--base));
    line-height: 1.1;
}

.rd-stat__name {
    display: block;
    font-size: 13.5px;
    color: var(--rd-muted);
}

/* ---------- Faixa de sustentabilidade ---------- */
.rd-green {
    background: linear-gradient(115deg, hsl(var(--base)) 0%, hsl(var(--base) / 0.88) 100%);
    border-radius: var(--rd-radius);
    color: #fff;
    padding: 34px 26px;
    position: relative;
    overflow: hidden;
}

.rd-green::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.14), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.rd-green__title {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.rd-green__text {
    color: rgba(255, 255, 255, 0.92);
    max-width: 52ch;
    margin: 0;
    font-size: 15px;
}

.rd-green__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rd-green__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 15.5px;
}

.rd-green__list .rd-green-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* ---------- Header (ajustes) ---------- */
.header__auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.menu__open,
button.menu__close {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

.rd-btn--header {
    min-height: 42px;
    padding: 8px 20px;
    font-size: 15px;
}



/* ---------- Faixa por trás do cabeçalho (páginas secundárias) ----------
   O header é absoluto e assenta sobre .breadcrumb, que reservava espaço
   com um padrão de linhas próprio. Passa a usar o mesmo fundo pontilhado
   das páginas de entrada e registo, para a navegação ser coerente em
   todo o site. A página inicial não tem breadcrumb, por isso mantém-se. */
.breadcrumb {
    background-color: hsl(var(--section-bg)) !important;
    background-image: radial-gradient(hsl(var(--black) / 0.1) 1px, transparent 1px);
    background-size: 16px 16px;
    border-bottom: 1px solid rgba(20, 38, 28, 0.06);
}

/* ---------- Menu do cabeçalho ----------
   Com mais entradas (Como Funciona, Segurança) os rótulos partiam a meio
   da palavra. Impede-se a quebra e aperta-se ligeiramente o espaçamento. */
.header__area .header__menu ul li a {
    white-space: nowrap;
    padding: 8px 12px;
}

.header__area .header__menu {
    flex-shrink: 1;
    min-width: 0;
}

.header__area .header__menu ul {
    flex-wrap: wrap;
    row-gap: 2px;
}

@media screen and (min-width: 992px) and (max-width: 1399px) {
    .header__area .header__menu ul li a {
        font-size: 13.5px;
        padding: 8px 9px;
    }
}

/* ---------- Páginas de conteúdo (Como Funciona, Segurança) ---------- */
.rd-content__intro {
    max-width: 70ch;
    margin-bottom: 40px;
}

.rd-content__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--rd-ink);
    margin-bottom: 12px;
}

.rd-content__lead {
    font-size: 17px;
    color: var(--rd-muted);
    margin: 0;
}

.rd-content__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.rd-content__card {
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: var(--rd-radius);
    padding: 26px;
}

.rd-content__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: hsl(var(--base) / 0.10);
    color: hsl(var(--base));
    font-size: 21px;
    margin-bottom: 16px;
}

.rd-content__card h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--rd-ink);
    margin-bottom: 10px;
}

.rd-content__card .wyg,
.rd-content__card .wyg p {
    color: var(--rd-muted);
    font-size: 15.5px;
    line-height: 1.65;
    margin-bottom: 0;
}

.rd-content__card .wyg ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.rd-content__card .wyg li {
    margin-bottom: 6px;
}

.rd-content__card .wyg strong {
    color: var(--rd-ink);
}

.rd-content__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .rd-content__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .rd-content__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Rótulo do código de verificação: era text-white sobre cartão branco */
.rd-verification-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-ink);
}

/* ============================================================
   Painel do utilizador
   ============================================================ */

/* No painel o header é sticky: fica no fluxo (não tapa o conteúdo ao
   carregar, como acontecia com o position:absolute da landing page) e
   acompanha o scroll, como no resto do site. */
.dashboard-layout {
    --rd-header-h: 80px;
}

.dashboard-layout .header__area,
.dashboard-layout .header__area.fixed-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #fff;
    border-bottom: 1px solid rgba(20, 38, 28, 0.08);
    animation: none;
    /* padding constante para a altura não saltar quando o JS acrescenta
       a classe .fixed-header ao fazer scroll */
    padding: 14px 0;
}

/* A barra lateral acompanha o topo do conteúdo, não o topo da janela */
.dashboard-layout .dashboard__sidebar {
    padding-top: 12px;
}

/* Folga entre o header e a barra de ferramentas do painel */
.dashboard-layout .dashboard__header {
    padding-top: 12px;
}

/* O painel passou a ter o header e o rodapé do site. A barra lateral era
   fixa em top:0, o que a punha por cima do header; em ecrã largo passa a
   sticky dentro de uma linha flex, ficando naturalmente abaixo dele.
   Abaixo de 992px mantém-se o comportamento off-canvas original. */
@media screen and (min-width: 992px) {
    .dashboard {
        display: flex;
        align-items: flex-start;
    }

    /* Encosta abaixo do header sticky, para não ficarem sobrepostos */
    .dashboard__sidebar {
        position: sticky;
        top: var(--rd-header-h, 0px);
        left: auto;
        flex: 0 0 275px;
        width: 275px;
        height: calc(100vh - var(--rd-header-h, 0px));
    }

    .dashboard__wrap {
        padding-left: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Barra lateral num cinzento muito claro, harmonioso com o fundo do painel.
   para manter a identidade sem cansar a vista. O template usava fundo
   escuro com texto e logótipo brancos; passam a escuros, e os destaques
   ficam no verde da marca (texto #14261c sobre #F9F9F6 ≈ 16:1). */
.dashboard__sidebar,
.dashboard__sidebar.active {
    background-color: #F9F9F6;
    border-right: 1px solid rgba(20, 38, 28, 0.08);
}

@media screen and (max-width: 991px) {
    .dashboard__sidebar {
        background-color: #F9F9F6;
    }
}

.dashboard__menu ul li a {
    color: var(--rd-ink);
    font-weight: 500;
}

.dashboard__menu ul li a i {
    color: hsl(var(--base));
}

.dashboard__menu ul li a:hover {
    background-color: hsl(var(--base) / 0.10);
    color: hsl(var(--base));
}

.dashboard__menu ul li a:hover i {
    color: hsl(var(--base));
}

/* O item activo mantém o verde da marca, com texto branco por cima */
.dashboard__menu ul li a.active,
.dashboard__menu ul li a.active:hover {
    background-color: hsl(var(--base));
    color: #fff;
}

.dashboard__menu ul li a.active i {
    color: #fff;
}

.dashboard__menu ul li a::after {
    background-color: var(--rd-ink);
}

.dashboard__menu ul li a[aria-expanded="true"],
.sidebar__dropdown {
    background-color: rgba(20, 38, 28, 0.08);
}

.sidebar__dropdown a {
    color: var(--rd-ink);
}

.dashboard__logo {
    border-bottom: 1px solid rgba(20, 38, 28, 0.12);
}
.rd-dash__greeting h1 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--rd-ink);
    margin-bottom: 4px;
}

.rd-dash__greeting p {
    color: var(--rd-muted);
    margin: 0;
    font-size: 15px;
}

/* Indicadores */
.rd-dash__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.rd-dash__stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: var(--rd-radius);
    padding: 18px;
    text-decoration: none;
    color: var(--rd-ink);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.rd-dash__stat:hover,
a.rd-dash__stat:focus {
    box-shadow: var(--rd-shadow-sm);
    transform: translateY(-2px);
    color: var(--rd-ink);
}

.rd-dash__stat-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.rd-dash__stat-icon--green  { background: hsl(var(--base) / 0.10); color: hsl(var(--base)); }
.rd-dash__stat-icon--mint   { background: #e6f6ee; color: #0f8a52; }
.rd-dash__stat-icon--amber  { background: #FEF3DA; color: var(--rd-amber-ink); }
.rd-dash__stat-icon--blue   { background: #e8f1fd; color: #1c62c4; }
.rd-dash__stat-icon--violet { background: #efeafc; color: #6642c9; }

.rd-dash__stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rd-dash__stat-label {
    font-size: 13.5px;
    color: var(--rd-muted);
    font-weight: 500;
}

.rd-dash__stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--rd-ink);
    line-height: 1.2;
    word-break: break-word;
}

.rd-dash__stat-caption {
    font-size: 12.5px;
    color: var(--rd-muted);
}

/* Painéis */
.rd-dash__panel {
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: var(--rd-radius);
    padding: 22px;
}

.rd-dash__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.rd-dash__panel-head h2 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--rd-ink);
    margin: 0;
}

.rd-dash__link {
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--base));
    text-decoration: none;
    white-space: nowrap;
}

.rd-dash__link:hover,
.rd-dash__link:focus {
    text-decoration: underline;
    color: hsl(var(--base));
}

/* Listas dos painéis */
.rd-dash__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rd-dash__list > li + li {
    border-top: 1px solid #f1f5f3;
}

.rd-dash__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: var(--rd-ink);
}

.rd-dash__item:hover,
.rd-dash__item:focus {
    color: hsl(var(--base));
}

.rd-dash__item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.rd-dash__item-main strong {
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-dash__item-main small,
.rd-dash__item-side small {
    font-size: 12.5px;
    color: var(--rd-muted);
}

.rd-dash__item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    text-align: right;
}

.rd-dash__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: hsl(var(--base) / 0.10);
    color: hsl(var(--base));
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rd-dash__avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: hsl(var(--base) / 0.12);
    color: hsl(var(--base));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.rd-dash__empty {
    padding: 18px 0;
    color: var(--rd-muted);
    font-size: 14px;
    text-align: center;
}

@media (min-width: 576px) {
    .rd-dash__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .rd-dash__stats {
        grid-template-columns: repeat(5, 1fr);
    }

    .rd-dash__stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ---------- Footer (redesenho) ---------- */
.rd-footer {
    background: #fff;
    border-top: 1px solid #eef2f0;
    padding: 56px 0 24px;
}

.rd-footer__brand p {
    color: var(--rd-muted);
    font-size: 14.5px;
    margin: 14px 0 18px;
    max-width: 32ch;
}

.rd-footer__brand img {
    max-width: 132px;
    height: auto;
}

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

.rd-footer__social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rd-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.rd-footer__social a:hover,
.rd-footer__social a:focus {
    background: hsl(var(--base));
    color: #fff;
}

.rd-footer h4 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--rd-ink);
    margin-bottom: 16px;
}

.rd-footer nav ul,
ul.rd-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rd-footer nav ul a,
.rd-footer__contact a {
    color: var(--rd-muted);
    text-decoration: none;
    font-size: 14.5px;
}

.rd-footer nav ul a:hover,
.rd-footer nav ul a:focus,
.rd-footer__contact a:hover,
.rd-footer__contact a:focus {
    color: hsl(var(--base));
    text-decoration: underline;
}

/* O dropdown de idiomas segue o Bootstrap: fechado por omissão */
.rd-footer .dropdown-menu {
    list-style: none;
}

.rd-footer .dropdown-menu:not(.show) {
    display: none;
}

.rd-footer__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rd-muted);
    font-size: 14.5px;
}

.rd-footer__contact i {
    color: hsl(var(--base));
    width: 18px;
    text-align: center;
}

.rd-newsletter {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    padding: 22px;
}

.rd-newsletter p {
    font-size: 13.5px;
    color: var(--rd-muted);
    margin-bottom: 14px;
}

.rd-newsletter__group {
    display: flex;
    gap: 8px;
}

.rd-newsletter__group input {
    flex: 1 1 auto;
    min-height: 46px;
    min-width: 0;
    border: 1px solid #d8e0dc;
    border-radius: var(--rd-radius-sm);
    padding: 10px 14px;
    font-size: 14.5px;
}

.rd-newsletter__group button {
    flex: 0 0 auto;
    width: 46px;
    min-height: 46px;
    border: none;
    border-radius: var(--rd-radius-sm);
    background: hsl(var(--base));
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.rd-newsletter__group button:hover,
.rd-newsletter__group button:focus {
    filter: brightness(1.08);
}

.rd-footer__credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rd-footer__credits p {
    margin: 0;
}

.rd-footer__operator a {
    color: hsl(var(--base));
    font-weight: 700;
    text-decoration: none;
}

.rd-footer__operator a:hover,
.rd-footer__operator a:focus {
    text-decoration: underline;
}

.rd-footer__bottom {
    border-top: 1px solid #eef2f0;
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--rd-muted);
}

/* ---------- Breakpoints ---------- */
@media (min-width: 576px) {
    .rd-search__grid {
        grid-template-columns: 1fr 1fr;
    }

    .rd-cats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .rd-hero {
        padding: 120px 0 30px;
    }

    .rd-stats {
        grid-template-columns: auto repeat(2, 1fr);
        padding: 30px 34px;
    }

    .rd-green {
        padding: 44px 40px;
    }

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

@media (min-width: 992px) {
    .rd-search__grid {
        grid-template-columns: 2fr 1.3fr 1.3fr auto;
    }

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

    .rd-section {
        padding: 72px 0;
    }
}

@media (min-width: 1200px) {
    .rd-cats {
        grid-template-columns: repeat(7, 1fr);
    }

    .rd-hero__stage {
        min-height: 500px;
    }
}

/* Ecrãs muito pequenos: cartões flutuantes ficam em fluxo */
@media (max-width: 575.98px) {
    .rd-hero__stage {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-top: 8px;
    }

    .rd-hero__blob,
    .rd-hero__community {
        display: none;
    }

    .rd-float-card {
        position: static;
        width: 100%;
    }
}

/* ==========================================================================
   Tipo de conta do anunciante (particular / empresa)
   ========================================================================== */
.rd-owner-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rd-owner-type i {
    font-size: 10px;
}

.rd-owner-type--company {
    color: #08783e;
    background: hsl(var(--base) / .1);
    border-color: hsl(var(--base) / .25);
}

.rd-owner-type--individual {
    color: #65736a;
    background: #f1f5f2;
    border-color: #e0e8e3;
}

.rd-owner-type--lg {
    font-size: 12px;
    padding: 4px 12px;
}

/* ==========================================================================
   WhatsApp — canal de contacto e partilha
   ========================================================================== */
.rd-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: #25d366;
    border: 1px solid #1eb355;
    font-weight: 700;
}

.rd-btn-whatsapp:hover,
.rd-btn-whatsapp:focus {
    color: #ffffff;
    background: #1eb355;
}

.rd-btn-whatsapp i {
    font-size: 1.1em;
}

/* ==========================================================================
   Publicação em dois tempos: o essencial, e o resto atrás de um botão
   ========================================================================== */
.rd-optional {
    display: none;
}

.rd-optional.is-open {
    display: block;
}

.rd-more-options {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    margin: 4px 0 8px;
    border: 1px dashed #c8ddd0;
    border-radius: 14px;
    background: #f8faf8;
    color: #26332c;
    cursor: pointer;
    transition: .2s;
}

.rd-more-options:hover {
    border-color: hsl(var(--base));
    background: hsl(var(--base) / .04);
}

.rd-more-options span {
    display: block;
    font-weight: 700;
    color: hsl(var(--base));
}

.rd-more-options small {
    display: block;
    margin-top: 2px;
    color: #65736a;
    line-height: 1.5;
}

.rd-more-options[aria-expanded="true"] {
    border-style: solid;
}

/* ==========================================================================
   Pacotes de anúncio e destaques
   ========================================================================== */
.rd-package {
    display: block;
    margin: 0;
    cursor: pointer;
}

.rd-package input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rd-package > span {
    display: block;
    padding: 14px 16px;
    border: 1px solid #dce9e1;
    border-radius: 14px;
    transition: .2s;
}

.rd-package:hover > span {
    border-color: hsl(var(--base));
}

.rd-package input:checked + span {
    border-color: hsl(var(--base));
    background: hsl(var(--base) / .06);
    box-shadow: inset 0 0 0 1px hsl(var(--base));
}

.rd-package strong {
    display: block;
    font-size: 15px;
}

.rd-package em {
    display: block;
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    color: hsl(var(--base));
    margin-top: 4px;
}

.rd-package small {
    display: block;
    color: #65736a;
    line-height: 1.5;
    margin-top: 2px;
}

/* Etiqueta de anúncio destacado */
.rd-featured-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #6b4b00;
    background: hsl(var(--base-two) / .28);
    border: 1px solid hsl(var(--base-two) / .55);
}

/* Directório de empresas */
.rd-directory-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid #dce9e1;
}

.rd-directory-card {
    transition: .2s;
}

.rd-directory-card:hover {
    border-color: hsl(var(--base));
    transform: translateY(-2px);
}

/* Texto de apresentação de uma categoria.
   Fica acima da grelha, e é o que dá ao motor de busca alguma coisa para
   ler numa página que de outro modo seria só imagens e preços. */
.rd-category-intro {
    max-width: 70ch;
    color: var(--rd-text-muted, #55606a);
    font-size: 1rem;
    line-height: 1.7;
}

/* Preço na página de detalhe do anúncio.
   O cartão da listagem sempre mostrou o preço; a página do anúncio não —
   este bloco fica logo abaixo do título, com as restantes tarifas ao lado. */
.rd-price-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 4px 0 22px;
}

.rd-price-detail__value {
    color: var(--rd-amber-ink);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
}

.rd-price-detail__unit {
    font-size: 15px;
    font-weight: 600;
    color: var(--rd-text-muted, #55606a);
}

/* O bloco vive dentro de .product__desc.wyg, cujas regras de lista
   (marcador e avanço) são mais específicas do que uma classe só. */
.rd-price-detail ul.rd-price-detail__more {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-price-detail ul.rd-price-detail__more li {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    list-style: none;
    background: hsl(var(--base) / .08);
    border: 1px solid hsl(var(--base) / .18);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1d2b25;
}

.rd-price-detail ul.rd-price-detail__more li span {
    font-weight: 500;
    color: var(--rd-text-muted, #55606a);
}

.rd-price-detail p.rd-price-detail__note {
    flex-basis: 100%;
    margin: 0;
    font-size: 14px;
    color: var(--rd-text-muted, #55606a);
}

@media (max-width: 575px) {
    .rd-price-detail__value {
        font-size: 26px;
    }
}

/* ---------- Aluguer por categoria e cidade ----------
   Páginas que respondem à frase que a pessoa escreve — "aluguer de tendas
   em Maputo" — em vez da categoria no país inteiro. */
.rd-locality__head {
    margin-bottom: 34px;
}

.rd-locality__intro {
    max-width: 75ch;
    margin-top: 12px;
    color: var(--rd-text-muted, #55606a);
    font-size: 16px;
    line-height: 1.7;
}

.rd-locality__links {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid #dce9e1;
}

.rd-locality__links ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.rd-locality__links li {
    margin-bottom: 8px;
}

.rd-locality__links a {
    font-weight: 600;
    color: #12211a;
}

.rd-locality__links a:hover {
    color: hsl(var(--base));
}

.rd-locality__links a span {
    color: var(--rd-text-muted, #55606a);
    font-weight: 500;
}

.rd-locality__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.rd-locality__chips > span {
    font-weight: 700;
    color: #12211a;
}

.rd-locality__chips a {
    background: hsl(var(--base) / .08);
    border: 1px solid hsl(var(--base) / .18);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 600;
    color: #12211a;
}

.rd-locality__chips a:hover {
    border-color: hsl(var(--base));
}

.rd-locality__chips a span {
    color: var(--rd-text-muted, #55606a);
    font-weight: 500;
}

/* ---------- As quatro portas no topo do formulário ----------
   Substituem a página intermédia de escolha: a decisão fica à vista, mas
   o formulário abre já preenchível por baixo. Mesmo desenho das caixas
   "particular / empresa" do registo — duas por linha, com espaço para a
   descrição respirar por baixo do título. */
.rd-portas {
    margin-top: 20px;
}

.rd-portas__pergunta {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: #12211a;
    margin-bottom: 12px;
}

.rd-portas__grelha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 575px) {
    .rd-portas__grelha {
        grid-template-columns: 1fr;
    }
}

.rd-porta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #dce9e1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: .2s;
    color: inherit;
    text-decoration: none;
}

.rd-porta:hover {
    border-color: hsl(var(--base));
}

.rd-porta:has(input:checked),
.rd-porta--activa {
    border-color: hsl(var(--base));
    background: hsl(var(--base) / .04);
}

.rd-porta input {
    margin-top: 4px;
    accent-color: hsl(var(--base));
    flex: 0 0 auto;
}

/* Serviço e pedido são ligações, não botões de rádio — mas fazem parte da
   mesma escolha. Sem um círculo à frente, o texto delas ficava desalinhado
   das outras duas e as quatro deixavam de se ler como um conjunto. */
a.rd-porta::before {
    content: '';
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 5px;
    border: 2px solid #c2d2c9;
    border-radius: 50%;
}

a.rd-porta--activa::before {
    border-color: hsl(var(--base));
    border-width: 4px;
}

.rd-porta strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #12211a;
    line-height: 1.3;
}

.rd-porta small {
    display: block;
    margin-top: 3px;
    color: #65736a;
    font-size: 13px;
    line-height: 1.4;
}

/* ---------- Caixa de descrição do anúncio ----------
   O campo é um editor de texto (CKEditor), não uma textarea simples, e o
   editor nasce com a altura do conteúdo: com o campo vazio sobravam 55px,
   pouco mais do que uma linha, e não se percebia que ali se escreve um
   texto. Os formulários de serviço e de pedido não têm o problema porque
   usam textarea com rows.

   Uma descrição curta é das coisas que mais custa a um anúncio — vários
   dos que temos não têm nenhuma. A caixa deve pedir texto pelo tamanho. */
.editor--dashboard .ck-editor__editable_inline {
    min-height: 180px;
}