@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

   body {
       font-family: 'Poppins', sans-serif;
       scroll-behavior: smooth;
   }

   .loan-select-box {
       transition: all 0.3s;
   }

   /* Chatbot hand blink */
   @keyframes blink {

       0%,
       20%,
       40%,
       60%,
       80%,
       100% {
           opacity: 1;
       }

       10%,
       30%,
       50%,
       70%,
       90% {
           opacity: 0.15;
       }
   }

   .blink-3x {
       animation: blink 0.9s ease-in-out 3;
   }

   .hand-fade {
       opacity: 0.35 !important;
       transition: opacity 1s ease-in-out;
   }

   #hand-icon {
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
       border-radius: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   /* typing + options styles */
   .message {
       margin-bottom: 10px;
   }

   .bot-message {
       background: #f7fafc;
       padding: 10px 12px;
       border-radius: 10px;
       display: inline-block;
       animation: fadeIn 0.25s;
       font-size: 14px;
       color: #111827;
   }

   .typing {
       border-right: 2px solid #111827;
       padding-right: 6px;
       white-space: nowrap;
       overflow: hidden;
       display: inline-block;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(6px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .options {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-top: 8px;
   }

   .option-card {
       background: rgba(56, 168, 69, 0.1);
       /* sml-primary/10 */
       padding: 10px;
       border-radius: 8px;
       cursor: pointer;
       transition: background 0.15s, transform 0.12s;
       border: 1px solid rgba(56, 168, 69, 0.15);
       /* sml-primary/15 */
       font-size: 14px;
       color: #38A845;
       /* sml-primary */
       font-weight: 600;
   }

   .option-card:hover {
       background: rgba(56, 168, 69, 0.2);
       /* sml-primary/20 */
       transform: translateY(-2px);
   }

   details {
       margin-top: 8px;
       background: #fff;
       padding: 8px;
       border-radius: 6px;
       border: 1px solid #eee;
   }

   summary {
       cursor: pointer;
       font-weight: 600;
   }

   a.button-link {
       display: block;
       margin: 6px 0;
       text-decoration: none;
       background: #F26E29;
       /* sml-secondary */
       color: #fff;
       padding: 8px;
       border-radius: 6px;
       text-align: center;
       transition: background 0.15s;
       font-weight: 600;
   }

   a.button-link:hover {
       background: #FF8C00;
   }

   /* sml-orange-light */

   /* small helpers */
   .input-field {
       width: 100%;
       padding: .5rem .75rem;
       border-radius: .5rem;
       border: 1px solid #e5e7eb;
       background: #fff;
       transition: border-color 0.2s, box-shadow 0.2s;
   }

   /* NOVIDADE: Foco verde no tema (sml-primary) */
   .input-field:focus {
       border-color: #38A845;
       /* sml-primary */
       outline: none;
       box-shadow: 0 0 0 3px rgba(56, 168, 69, 0.3);
       /* sml-primary com transparência */
   }

   /* mobile menu initial state */
   #mobile-menu {
       transition: transform 0.28s cubic-bezier(.2, .9, .2, 1), opacity 0.28s;
       will-change: transform, opacity;
   }

   /* ensure smooth scroll for anchor jumps */
   :target {
       scroll-margin-top: 80px;
   }

   /* Chatbot panel */
   .chat-panel {
       width: min(360px, 92vw);
       max-width: 360px;
       background: rgba(255, 255, 255, 0.96);
       backdrop-filter: blur(6px);
       border-radius: 12px;
       padding: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
   }

   /* Align the menu header line with close button boundary */
   .menu-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   }

   /* FIX para Hero e Fases: Remove altura mínima forçada para eliminar o espaço em branco */
   #hero {
       padding-top: 5rem;
       padding-bottom: 5rem;
       display: flex;
       flex-direction: column;
   }

   /* Força a Fase 1 a preencher a tela verticalmente, mas apenas na Fase 1 */
   #hero-rotation-content {
       min-height: calc(100vh - 10rem - 80px);
       align-items: center;
   }

   /* Ajustes para Fase 2 - Simulacao Container */
   #simulacao-container {
       position: relative;
       width: 100%;
       padding: 1rem 0;
       display: none;
       align-items: center;
       justify-content: center;
       opacity: 0;
       z-index: 30;
   }

   #simulacao-background {
       position: absolute;
       inset: 0;
       background-size: cover;
       background-position: center;
       transition: opacity 1s;
   }

   /* Ajuste Específico para o Card de Seleção de Perfil (Fase 2) */
   #simulacao {
       box-shadow: none !important;
       border-top: none !important;
       background-color: #f5f5f7 !important;
   }

   /* Fase 3 - Formulário Detalhado (Nova seção) */
   #detailed-form-section {
       padding-top: 4rem;
       padding-bottom: 4rem;
       background-color: #f5f5f7;
       display: none;
       opacity: 0;
       transition: opacity 0.5s ease-in-out;
   }

   /* O CARD do Formulário deve ser o elemento que tem a sombra, como na seção Contacto */
   #detailed-form {
       box-shadow: 0 4px 15px (0, 0, 0, 0.08);
       border-top: 4px solid #38A845;
   }

   /* === ESTILO PARA INPUT COM SETAS PERSONALIZADAS (Montante e Meses) === */
   /* Oculta as setas padrão para que possamos usar os botões */
   .input-number-wrapper input::-webkit-outer-spin-button,
   .input-number-wrapper input::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
   }

   .input-number-wrapper input {
       -moz-appearance: textfield;
       padding-right: 50px !important;
       /* Espaço para as setas */
       text-align: left;
       /* Alinha o texto à esquerda (valor) */
   }

   .input-number-wrapper {
       position: relative;
       display: flex;
       /* Para garantir que o wrapper ocupe o espaço */
   }

   .number-arrows {
       position: absolute;
       top: 0;
       right: 0;
       display: flex;
       flex-direction: column;
       height: 100%;
       width: 48px;
       border-left: 1px solid #e5e7eb;
       border-top-right-radius: 0.5rem;
       border-bottom-right-radius: 0.5rem;
       overflow: hidden;
       background-color: #f7fafc;
   }

   .arrow-btn {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 50%;
       background: none;
       border: none;
       cursor: pointer;
       color: #38A845;
       /* SML-Primary */
       transition: background-color 0.15s;
   }

   .arrow-btn:hover {
       background-color: #38A84520;
       /* SML-Primary com transparência */
   }

   .arrow-btn:first-child {
       border-bottom: 1px solid #e5e7eb;
   }

   /* === FIM ESTILO ARROWS === */


   /* Novo estilo para o dropdown de Créditos */
   .dropdown-menu {
       position: absolute;
       z-index: 40;
       background: white;
       padding: 0.5rem;
       border-radius: 0.5rem;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       top: 100%;
       left: 0;
       min-width: 150px;
   }

   .dropdown-menu a {
       padding: 0.5rem;
       display: block;
       border-radius: 0.3rem;
   }

   /* Tabela de Amortização (Estilo similar ao modelo Django) */
   .amortizacao-table th {
       background-color: #38A845;
       /* sml-primary */
       color: white;
       padding: 8px;
       font-size: 0.8rem;
       text-align: right;
   }

   .amortizacao-table th:first-child {
       text-align: center;
   }

   .amortizacao-table td {
       padding: 6px;
       font-size: 0.8rem;
       text-align: right;
       border-bottom: 1px solid #eee;
   }

   .amortizacao-table tbody tr:nth-child(even) {
       background-color: #f7f7f7;
   }

   .amortizacao-table td:first-child {
       text-align: center;
       font-weight: 500;
   }

   /* --- ESTILOS DO MODAL (NOVO) --- */
   .modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.65);
       display: none;
       /* Escondido por padrão */
       justify-content: center;
       align-items: center;
       z-index: 100;
       opacity: 0;
       transition: opacity 0.3s ease-in-out;
       overflow-y: auto;
       /* Permite scroll no modal */
   }

   .modal-content {
       background-color: white;
       padding: 20px;
       border-radius: 12px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
       width: 95%;
       max-width: 850px;
       /* Largura máxima maior para a tabela */
       transform: scale(0.9);
       transition: transform 0.3s ease-in-out;
       margin: 40px 0;
       /* Espaçamento vertical para scroll */
   }

   .modal.open {
       display: flex;
       opacity: 1;
   }

   .modal.open .modal-content {
       transform: scale(1);
   }

   /* Carrossel de Imagens de Localização (Seção Contacto) */
   .location-carousel-container {
       position: relative;
       overflow: hidden;
       border-radius: 12px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   .location-carousel {
       display: flex;
       transition: transform 0.5s ease-in-out;
   }

   .location-slide {
       min-width: 100%;
       height: 250px;
       /* Altura fixa para as imagens */
       background-size: cover;
       background-position: center;
   }

   /* ESTILO: Cards de Perfil minimalistas */
   .profile-card-minimal {
       background-color: white;
       padding: 32px 24px;
       border-radius: 12px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
       cursor: pointer;
       transition: all 0.25s ease;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       height: 100%;
   }

   .profile-card-minimal:hover {
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
       transform: translateY(-4px);
       border-color: #38A845;
   }

   .profile-card-minimal h4 {
       font-size: 1.5rem;
       font-weight: 700;
       color: #111827;
       margin-bottom: 0.5rem;
   }

   .profile-card-minimal p.profile-description {
       color: #4b5563;
       font-size: 1rem;
       line-height: 1.5;
       flex-grow: 1;
       margin-bottom: 1.5rem;
   }

   /* Ajuste do botão de seta */
   .profile-card-minimal .arrow-wrapper {
       align-self: flex-end;
       transition: transform 0.25s ease-in-out;
   }

   .profile-card-minimal:hover .arrow-wrapper {
       transform: translateX(4px);
       /* Move um pouco a seta ao passar o mouse */
   }

   /* NOVO: Estilo da Seta com fundo branco e borda arredondada */
   .arrow-button {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 40px;
       height: 40px;
       border-radius: 9999px;
       /* Full rounded */
       background-color: white;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       color: #111827;
       /* Seta preta */
       transition: all 0.3s ease;
   }

   /* Efeito de Picar o Fundo com cores do Tema */
   .profile-card-minimal:hover .arrow-button {
       /* Mapeia a cor de fundo de acordo com o perfil/card */
       background-color: var(--arrow-bg-color, #38A845);
       /* Padrão: Verde */
       color: white;
   }

   /* Cor de fundo no hover (Verde para Público, Laranja para Privado) */
   /* O estilo inline no HTML define o --arrow-bg-color */

   /* === NOVO: Estilo para o botão de Pulsar (Seção Quem Somos) === */
   @keyframes pulse-color {

       0%,
       100% {
           background-color: #38A845;
           /* sml-primary (verde) */
           box-shadow: 0 0 0 0 rgba(56, 168, 69, 0.7);
       }

       50% {
           background-color: #F26E29;
           /* sml-secondary (laranja) */
           box-shadow: 0 0 0 10px rgba(242, 110, 41, 0);
       }
   }

   .pulse-button-sml {
       /* Botão principal */
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background-color: white;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       position: relative;
       cursor: pointer;
       z-index: 10;
       transition: background-color 0.3s, transform 0.1s;
   }

   .pulse-button-sml:before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 50%;
       /* A animação de pulsar usa as cores do tema */
       animation: pulse-color 2s infinite ease-out;
       z-index: 1;
   }

   .pulse-button-sml .arrow-icon {
       /* Seta preta sobre o botão branco */
       position: relative;
       z-index: 20;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
       color: #111827;
       /* Preto */
       background-color: white;
       /* Fundo interno branco fixo */
       border-radius: 50%;
   }

   /* Ajuste do tamanho do ícone no interior */
   .pulse-button-sml .arrow-icon svg {
       width: 18px;
       height: 18px;
       transform: rotate(180deg);
       /* Aponta para a esquerda (<) */
   }

   /* FIM NOVO ESTILO PULSE */
   /* Indicador de Luz/Live */
   .status-dot {
       width: 8px;
       height: 8px;
       background-color: #F26E29;
       border-radius: 50%;
       display: inline-block;
       position: relative;
   }

   .status-dot::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: #F26E29;
       border-radius: 50%;
       animation: pulse-light 2s infinite;
   }

   @keyframes pulse-light {
       0% {
           transform: scale(1);
           opacity: 0.8;
       }

       100% {
           transform: scale(4);
           opacity: 0;
       }
   }

   /* Post Cards UI */
   .post-card {
       transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
       border: 1px solid #f1f1f1;
   }

   .post-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 30px -15px rgba(0, 0, 0, 0.08);
   }

   .category-badge {
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(8px);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }

   /* Seta Arredondada ( > ) */
   .rounded-arrow-btn {
       width: 38px;
       height: 38px;
       border-radius: 50%;
       background: #fff;
       border: 1px solid #e5e7eb;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       color: #111827;
   }

   /* Hero Indicators Animation */
   .dot-indicator {
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }

   /* Estilo da Tabela Price (Modal) */
   .modal {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.65);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 100;
       opacity: 0;
       transition: opacity 0.3s;
   }

   .modal.open {
       display: flex;
       opacity: 1;
   }

   .modal-content {
       background: white;
       padding: 24px;
       border-radius: 16px;
       width: 90%;
       max-width: 800px;
       transform: scale(0.9);
       transition: transform 0.3s;
   }

   .modal.open .modal-content {
       transform: scale(1);
   }
   
   /* Container de Dots - Fora da grade de conteúdo */
   .hero-dots-container {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 12px;
       z-index: 50;
   }

   .hero-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background-color: #d1d5db;
       border: none;
       cursor: pointer;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .hero-dot.active {
       background-color: #38A845;
       /* sml-primary */
       width: 32px;
       border-radius: 10px;
   }

   /* Ocultar dots no mobile e habilitar swipe puro */
   @media (max-width: 768px) {
       .hero-dots-container {
           display: none !important;
       }

       #hero {
           touch-action: pan-y;
           user-select: none;
       }
   }