/* ============================================================================
   CMS-PARAGRAFOS.CSS — sistema de grid usado pelos parágrafos do CMS

   Os parágrafos do módulo /site/ usam classes herdadas de uma versão antiga
   da plataforma:

     <div class="div-100 margin-bottom-50">
         <div class="div-40 div-xs-100 padding-right-10">...</div>
         <div class="div-60 div-xs-100 padding-left-10">...</div>
     </div>

   Este ficheiro mapeia essas classes para flexbox moderno responsivo.

   Carregado APENAS na pagina.php (não polui o main.css do resto do site).

   Convenções:
     - div-N           → flex-basis: N%
     - div-xs-N        → mobile (≤600px)
     - div-s-N         → tablet (≤900px)
     - padding-LADO-N  → padding direccional em px (de 10 em 10)
     - margin-LADO-N   → margem direccional em px

   Suporta também os classes para imagens responsivas e tipografia herdada.
   ========================================================================= */


/* 1. Wrapper de conteúdo CMS ─────────────────────────────────────────────── */

.cms-main {
    padding: 60px 0 80px;
    background: var(--cor-fundo);
    min-height: 60vh;
}
.cms-header {
    margin-bottom: 40px;
    text-align: center;
}
.cms-titulo {
    font-size: 2.4rem;
    color: var(--cor-secundaria);
    margin: 0;
    font-weight: 700;
}
.cms-conteudo {
    /* Sem moldura — background/sombra/border-radius removidos para o
       conteúdo (cards, banners de filtro, widgets) respirar livremente
       sobre o fundo cinza-claro do .cms-main. Mantém line-height para
       legibilidade de parágrafos e padding lateral pequeno só para
       não colar aos extremos da viewport quando .container já não
       limita. */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    line-height: 1.7;
}
.cms-vazio {
    text-align: center;
    color: var(--cor-texto-mute);
    padding: 60px;
}


/* 2. Cada parágrafo é um bloco isolado ───────────────────────────────────── */

.cms-paragrafo {
    margin-bottom: 40px;
}
.cms-paragrafo:last-child {
    margin-bottom: 0;
}


/* 3. Sistema de grid herdado (.div-N) ───────────────────────────────────── */

/*
 * Os parágrafos do CMS produzem HTML como:
 *   <div class="div-100 margin-bottom-50">
 *     <div class="div-40 ...">col 1</div>
 *     <div class="div-60 ...">col 2</div>
 *   </div>
 *
 * Aplicamos display:flex no contentor pai para que as colunas alinhem.
 * O flex-wrap permite quebrar para nova linha em mobile.
 */

.cms-paragrafo [class*="div-100"] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Cada coluna toma a percentagem indicada como flex-basis */
.cms-paragrafo .div-100 { flex: 0 0 100%; max-width: 100%; }
.cms-paragrafo .div-90  { flex: 0 0 90%;  max-width: 90%;  }
.cms-paragrafo .div-80  { flex: 0 0 80%;  max-width: 80%;  }
.cms-paragrafo .div-75  { flex: 0 0 75%;  max-width: 75%;  }
.cms-paragrafo .div-70  { flex: 0 0 70%;  max-width: 70%;  }
.cms-paragrafo .div-66  { flex: 0 0 66.66%;max-width: 66.66%; }
.cms-paragrafo .div-65  { flex: 0 0 65%;  max-width: 65%;  }
.cms-paragrafo .div-60  { flex: 0 0 60%;  max-width: 60%;  }
.cms-paragrafo .div-55  { flex: 0 0 55%;  max-width: 55%;  }
.cms-paragrafo .div-50  { flex: 0 0 50%;  max-width: 50%;  }
.cms-paragrafo .div-45  { flex: 0 0 45%;  max-width: 45%;  }
.cms-paragrafo .div-40  { flex: 0 0 40%;  max-width: 40%;  }
.cms-paragrafo .div-35  { flex: 0 0 35%;  max-width: 35%;  }
.cms-paragrafo .div-33  { flex: 0 0 33.33%;max-width: 33.33%; }
.cms-paragrafo .div-30  { flex: 0 0 30%;  max-width: 30%;  }
.cms-paragrafo .div-25  { flex: 0 0 25%;  max-width: 25%;  }
.cms-paragrafo .div-20  { flex: 0 0 20%;  max-width: 20%;  }
.cms-paragrafo .div-10  { flex: 0 0 10%;  max-width: 10%;  }


/* 4. Padding direccional ────────────────────────────────────────────────── */

.cms-paragrafo .padding-right-10  { padding-right: 10px; }
.cms-paragrafo .padding-right-20  { padding-right: 20px; }
.cms-paragrafo .padding-right-30  { padding-right: 30px; }
.cms-paragrafo .padding-left-10   { padding-left: 10px; }
.cms-paragrafo .padding-left-20   { padding-left: 20px; }
.cms-paragrafo .padding-left-30   { padding-left: 30px; }
.cms-paragrafo .padding-top-10    { padding-top: 10px; }
.cms-paragrafo .padding-top-20    { padding-top: 20px; }
.cms-paragrafo .padding-top-30    { padding-top: 30px; }
.cms-paragrafo .padding-bottom-10 { padding-bottom: 10px; }
.cms-paragrafo .padding-bottom-20 { padding-bottom: 20px; }
.cms-paragrafo .padding-bottom-30 { padding-bottom: 30px; }


/* 5. Margins direccionais ──────────────────────────────────────────────── */

.cms-paragrafo .margin-bottom-10  { margin-bottom: 10px; }
.cms-paragrafo .margin-bottom-20  { margin-bottom: 20px; }
.cms-paragrafo .margin-bottom-30  { margin-bottom: 30px; }
.cms-paragrafo .margin-bottom-50  { margin-bottom: 50px; }
.cms-paragrafo .margin-top-10     { margin-top: 10px; }
.cms-paragrafo .margin-top-20     { margin-top: 20px; }
.cms-paragrafo .margin-top-30     { margin-top: 30px; }
.cms-paragrafo .margin-top-50     { margin-top: 50px; }


/* 6. Imagens responsivas ────────────────────────────────────────────────── */

.cms-paragrafo .responsive,
.cms-paragrafo img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}


/* 7. Vídeos (YouTube embed + Vimeo + local) ─────────────────────────────── */

/*
 * O admin produz parágrafos de vídeo com 2 formatos distintos:
 *
 * 1. YouTube (saveParagrafoVideoYoutube):
 *      <div class="video-container margin-bottom-50">
 *        <iframe src="https://www.youtube.com/embed/XXX" ... ></iframe>
 *      </div>
 *
 * 2. Local (saveParagrafoVideoLocal):
 *      <div style="width:100%;position:relative;padding-bottom:56.25%;...">
 *        <video poster="..." controls> <source src="..." type="video/webm"> </video>
 *      </div>
 *
 * O .video-container abaixo cobre o caso 1. O caso 2 já tem inline styles
 * que funcionam (mas podemos melhorar via fallback).
 */

.cms-paragrafo .video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 30px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-md);
}
.cms-paragrafo .video-container iframe,
.cms-paragrafo .video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Fallback genérico para iframes/videos fora de .video-container */
.cms-paragrafo iframe,
.cms-paragrafo video {
    max-width: 100%;
    border: none;
    border-radius: var(--radius-sm);
}
.cms-paragrafo iframe:not(.video-container iframe) {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}


/* 8. Tipografia dentro de parágrafos ────────────────────────────────────── */

.cms-paragrafo h1,
.cms-paragrafo h2,
.cms-paragrafo h3 {
    color: var(--cor-secundaria);
    margin: 24px 0 14px;
}
.cms-paragrafo h2 { font-size: 1.6rem; }
.cms-paragrafo h3 { font-size: 1.3rem; }
.cms-paragrafo p {
    margin: 0 0 16px;
    color: var(--cor-texto);
}
.cms-paragrafo p:last-child { margin-bottom: 0; }
.cms-paragrafo a {
    color: var(--cor-primaria);
    text-decoration: underline;
}
.cms-paragrafo a:hover { text-decoration: none; }

/* Excepção: o botão "RESERVAR" do widget frota (e qualquer outro CTA com
   classe .viatura-card-btn) deve manter o aspecto de botão sólido — sem
   underline. Sem esta regra, .cms-paragrafo a (especificidade 0,1,1) sobrepõe
   o .viatura-card-btn (0,1,0) do main.css. */
.cms-paragrafo a.viatura-card-btn,
.cms-paragrafo a.viatura-card-btn:hover {
    text-decoration: none;
    color: var(--cor-branco);
}
/* Botão "Ver todas" do banner de filtro activo (widget frota): outlined
   style — vermelho no idle, branco quando hover. Replicamos as cores aqui
   para vencer a regra global `.cms-paragrafo a` (specificity 0,1,1) que
   pintaria todo o link com a cor primária e underline. */
.cms-paragrafo a.widget-frota-filtro-limpar,
.cms-paragrafo a.widget-frota-filtro-limpar:visited {
    text-decoration: none;
    color: var(--cor-primaria);
}
.cms-paragrafo a.widget-frota-filtro-limpar:hover,
.cms-paragrafo a.widget-frota-filtro-limpar:focus-visible {
    text-decoration: none;
    color: #fff;
}
.cms-paragrafo ul,
.cms-paragrafo ol {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style: revert;  /* contrariar o reset global do main.css */
}
.cms-paragrafo li { margin-bottom: 6px; }


/* 9. Galeria de fotos da página ─────────────────────────────────────────── */

.cms-galeria-pagina {
    margin-top: 60px;
}
.cms-galeria-titulo {
    text-align: center;
    color: var(--cor-secundaria);
    font-size: 1.6rem;
    margin-bottom: 30px;
}
.cms-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.cms-galeria-item {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--cor-fundo-suave);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cms-galeria-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cms-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* 10. Responsividade — mobile (≤ 600px) ─────────────────────────────────── */

@media (max-width: 600px) {
    /* Em mobile o header sticky é compacto. Mantemos uma folga generosa
       (48px) entre o cabeçalho e o título para o título "respirar" e não
       parecer colado à barra superior. */
    .cms-main { padding: 48px 0 50px; }
    .cms-header { margin-bottom: 20px; }
    .cms-titulo { font-size: 1.8rem; display: block; }
    /* .cms-conteudo agora sem padding (moldura removida) — o .container
       pai já trata do recuo lateral. Override antigo de 24px deixou de
       fazer sentido. */

    /* `.div-xs-100` força full-width em mobile (esconde a coluna lado-a-lado) */
    .cms-paragrafo .div-xs-100 { flex: 0 0 100%; max-width: 100%; }
    .cms-paragrafo .div-xs-50  { flex: 0 0 50%;  max-width: 50%;  }

    /* Em mobile, anula paddings horizontais para evitar scrolls horizontais */
    .cms-paragrafo .padding-xs-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cms-galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* 11. Responsividade — tablet (≤ 900px) ─────────────────────────────────── */

@media (max-width: 900px) {
    .cms-paragrafo .div-s-100 { flex: 0 0 100%;  max-width: 100%;  }
    .cms-paragrafo .div-s-50  { flex: 0 0 50%;   max-width: 50%;   }
    .cms-paragrafo .div-s-40  { flex: 0 0 40%;   max-width: 40%;   }
    .cms-paragrafo .div-s-60  { flex: 0 0 60%;   max-width: 60%;   }
    /* .cms-conteudo padding removido — moldura branca eliminada */
}


/* ============================================================================
   12. WIDGETS dinâmicos (Fase 2)
   ============================================================================ */

.cms-paragrafo-widget {
    margin: 30px 0;
}

/* ── Widget FROTA — grid de viaturas ────────────────────────────────────── */

/* Mensagem de "sem viaturas". Os cards em si reaproveitam .viatura-card +
   .resultados-grid de main.css — pixel-perfect igual aos da pesquisa. */
.widget-frota-vazio {
    text-align: center;
    color: var(--cor-texto-mute);
    padding: 40px;
    background: var(--cor-fundo-suave);
    border-radius: var(--radius-sm);
}

/* Booking widget embutido no widget frota — pequeno ajuste de margem
   inferior, já que o `.cms-paragrafo` aplica margin externo e o widget
   tem o seu próprio max-width interno (1100px) com padding. */
.widget-frota-booking {
    margin-bottom: 18px;
}

/* Mensagem informativa abaixo do booking, a explicar que a grelha em
   baixo reflecte os critérios escolhidos no formulário acima. */
.widget-frota-aviso {
    width: 100%;
    margin: 20px;
    margin-top: 30px;
    padding: 30px 18px 20px 0px;
    color: var(--cor-texto);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* O wrapper de resultados dentro do widget frota — overrides leves para
   não herdar paddings/margens do `.resultados-section` da homepage. */
.widget-frota-resultados {
    padding: 0;
    background: transparent;
    margin-top: 50px;
}
.widget-frota-resultados .resultados-contador {
    margin: 0 0 16px;
}
.widget-frota-resultados .resultados-contador:empty {
    display: none;
}


/* ── Widget GALERIA — grid de fotos da página ──────────────────────────── */

.widget-galeria-vazio {
    text-align: center;
    color: var(--cor-texto-mute);
    padding: 40px;
    background: var(--cor-fundo-suave);
    border-radius: var(--radius-sm);
}
.widget-galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.widget-galeria-item {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--cor-fundo-suave);
    transition: transform 0.2s, box-shadow 0.2s;
}
.widget-galeria-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.widget-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ── Widget CONTACTO — formulário ──────────────────────────────────────── */

.widget-contacto-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    margin-top: 8px;
}
.widget-contacto-info h3 {
    font-size: 1.4rem;
    color: var(--cor-secundaria);
    margin: 0 0 18px;
}
.widget-contacto-bloco {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.widget-contacto-bloco i {
    background: var(--cor-primaria);
    color: var(--cor-branco);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.widget-contacto-bloco strong {
    display: block;
    color: var(--cor-secundaria);
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.widget-contacto-bloco a,
.widget-contacto-bloco span {
    color: var(--cor-texto-mute);
    font-size: 0.92rem;
    text-decoration: none;
    line-height: 1.4;
}
.widget-contacto-bloco a:hover {
    color: var(--cor-primaria);
}

.widget-contacto-form {
    background: var(--cor-fundo-suave);
    border-radius: var(--radius);
    padding: 30px;
}
.widget-contacto-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.widget-contacto-form .form-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.widget-contacto-form .form-campo-full {
    grid-column: 1 / -1;
}
.widget-contacto-form label {
    font-size: 0.85rem;
    color: var(--cor-secundaria);
    font-weight: 600;
}
.widget-contacto-form input,
.widget-contacto-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--cor-branco);
    color: var(--cor-texto);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.widget-contacto-form input:focus,
.widget-contacto-form textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}
.widget-contacto-form textarea {
    resize: vertical;
}
.widget-contacto-form-actions {
    display: flex;
    justify-content: flex-end;
}
.widget-contacto-form-feedback {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--cor-branco);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}


/* ── Widget em falta (placeholder informativo) ─────────────────────────── */

.cms-widget-em-falta {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm);
}


/* ── Widget EQUIPA — cards dos membros ─────────────────────────────────── */

.widget-equipa-vazio {
    text-align: center; color: var(--cor-texto-mute);
    padding: 40px; background: var(--cor-fundo-suave); border-radius: var(--radius-sm);
}
.widget-equipa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 8px;
}
.widget-equipa-card {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.widget-equipa-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.widget-equipa-foto-wrap {
    width: 130px;
    height: 130px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cor-fundo-suave);
}
.widget-equipa-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.widget-equipa-avatar {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--cor-secundaria), var(--cor-primaria));
    color: var(--cor-branco);
    font-size: 2.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-equipa-nome {
    font-size: 1.05rem;
    color: var(--cor-secundaria);
    margin: 0 0 4px;
    font-weight: 700;
}
.widget-equipa-funcao {
    color: var(--cor-texto-mute);
    font-size: 0.85rem;
    margin: 0 0 14px;
}
.widget-equipa-contactos {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.widget-equipa-contacto {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cor-fundo-suave);
    color: var(--cor-secundaria) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s;
}
.widget-equipa-contacto:hover {
    background: var(--cor-primaria);
    color: var(--cor-branco) !important;
}


/* ── Widget TESTEMUNHOS — cards com estrelas ───────────────────────────── */

.widget-testemunhos-vazio {
    text-align: center; color: var(--cor-texto-mute);
    padding: 40px; background: var(--cor-fundo-suave); border-radius: var(--radius-sm);
}
.widget-testemunhos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.widget-testemunhos-card {
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius);
    padding: 28px 24px;
    position: relative;
}
.widget-testemunhos-card::before {
    content: "“";
    position: absolute;
    top: 0;
    left: 18px;
    font-size: 4rem;
    line-height: 1;
    color: var(--cor-primaria);
    opacity: 0.18;
    font-family: Georgia, serif;
}
.widget-testemunhos-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    color: var(--cor-borda);
    font-size: 1rem;
}
.widget-testemunhos-stars i.is-filled {
    color: #f59e0b;  /* dourado para estrelas preenchidas */
}
.widget-testemunhos-texto {
    margin: 0 0 16px;
    color: var(--cor-texto);
    font-size: 0.95rem;
    line-height: 1.55;
    font-style: italic;
    quotes: none;
}
.widget-testemunhos-autor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--cor-borda-suave);
    padding-top: 12px;
}
.widget-testemunhos-autor strong {
    color: var(--cor-secundaria);
    font-size: 0.95rem;
}
.widget-testemunhos-meta {
    color: var(--cor-texto-mute);
    font-size: 0.78rem;
}


/* ── Widget MAPA — info + iframe Google Maps ───────────────────────────── */

.widget-mapa-vazio {
    text-align: center; color: var(--cor-texto-mute);
    padding: 40px; background: var(--cor-fundo-suave); border-radius: var(--radius-sm);
}
.widget-mapa-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    margin-top: 8px;
}
.widget-mapa-info {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    border-radius: var(--radius);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.widget-mapa-titulo {
    font-size: 1.4rem;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-branco);
}
.widget-mapa-titulo i {
    color: var(--cor-primaria);
    font-size: 1.6rem;
}
.widget-mapa-morada {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 22px;
    opacity: 0.95;
}
.widget-mapa-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cor-primaria);
    color: var(--cor-branco) !important;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    align-self: flex-start;
    transition: background 0.2s;
}
.widget-mapa-link:hover {
    background: color-mix(in srgb, var(--cor-primaria) 88%, black);
}
.widget-mapa-iframe-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--cor-fundo-suave);
}
.widget-mapa-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* ── Widget CTA-RESERVAR — banner com chamada ─────────────────────────── */

.widget-cta {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    padding: 50px 40px;
    margin: 8px 0;
    color: var(--cor-branco);
}
.widget-cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--cor-secundaria) 0%,
        color-mix(in srgb, var(--cor-secundaria) 70%, var(--cor-primaria)) 100%);
    z-index: 0;
}
.widget-cta-bg::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.widget-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.widget-cta-titulo {
    font-size: 2rem;
    margin: 0 0 12px;
    color: var(--cor-branco);
    font-weight: 800;
    line-height: 1.2;
}
.widget-cta-subtitulo {
    font-size: 1.05rem;
    margin: 0 0 26px;
    opacity: 0.95;
    line-height: 1.5;
}
.widget-cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.widget-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.15s, background 0.2s;
}
.widget-cta-btn:hover {
    transform: translateY(-1px);
}
.widget-cta-btn-primary {
    background: var(--cor-primaria);
    color: var(--cor-branco) !important;
}
.widget-cta-btn-primary:hover {
    background: color-mix(in srgb, var(--cor-primaria) 88%, black);
}
.widget-cta-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--cor-branco) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.widget-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}


/* 13. Responsividade dos widgets ──────────────────────────────────────── */

@media (max-width: 900px) {
    .widget-contacto-grid,
    .widget-mapa-grid {
        grid-template-columns: 1fr;
    }
    .widget-equipa-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .widget-cta { padding: 40px 24px; }
    .widget-cta-titulo { font-size: 1.6rem; }
}

@media (max-width: 600px) {
    .widget-equipa-grid,
    .widget-testemunhos-grid {
        grid-template-columns: 1fr;
    }
    .widget-galeria-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .widget-contacto-form { padding: 20px; }
    .widget-contacto-form .form-grid { grid-template-columns: 1fr; }
    .widget-cta { padding: 32px 18px; }
    .widget-cta-titulo { font-size: 1.4rem; }
    .widget-cta-buttons { flex-direction: column; }
    .widget-cta-btn { justify-content: center; }
}

/* ── Widget TERMOS E CONDIÇÕES — documento legal long-form ───────────────
   Conteúdo estático (sem interacção JS) gerado por substituição de
   placeholders {{...}} no template HTML, com dados do tenant vindos da
   API. Estilo optimizado para legibilidade prolongada — line-height
   generoso, espaçamento entre cláusulas e numeração visualmente clara. */
.widget-termos {
    /* Ocupa toda a largura disponível dentro do contentor da página —
       o `.container` do CMS já constrange a largura horizontal a um
       valor sensato. Não duplicar o limite aqui para evitar margens
       brancas excessivas em ecrãs largos. */
    width: 100%;
    padding: 16px 0;
    color: var(--cor-texto);
    line-height: 1.65;
    font-size: 0.95rem;
}
.widget-termos h1 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    color: var(--cor-secundaria);
    margin: 0 0 8px;
}
.widget-termos h2 {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    margin: 36px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda-suave, #e5e7eb);
}
.widget-termos h3 {
    font-size: 1.05rem;
    color: var(--cor-secundaria);
    margin: 28px 0 12px;
}
.widget-termos p { margin: 0 0 12px; }
.widget-termos ol, .widget-termos ul { margin: 0 0 14px; padding-left: 24px; }
.widget-termos ol > li, .widget-termos ul > li { margin-bottom: 8px; }
.widget-termos ol ol { margin-top: 6px; }
.widget-termos ol ol > li { margin-bottom: 4px; }
.widget-termos hr {
    border: 0;
    border-top: 1px solid var(--cor-borda-suave, #e5e7eb);
    margin: 36px 0 24px;
}
.widget-termos-erro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 8px;
}