/* Intermediação de Crédito — folha da landing /creditohabitacao (ticket 464, Out/2026).
   Desenho do creditohabitacao.html do zip «LP Credito» anexado ao ticket; daqui saiu o header e
   o footer réplica (a página usa os do site, via MainLayout). Tudo prefixado com .rnic: a página
   vive dentro do site e o CSS dela não pode tocar no menu, no footer nem no resto. As regras de
   documento do original (:root, html, body) passaram para o wrapper; o «reveal» passou a .rv, com
   a animação só quando o credito.js liga .js-motion — sem JS a página vê-se inteira. */

.rnic{
  --rn-black:#0C0C0C;
  --rn-white:#ffffff;
  --rn-red:#EE3442;          /* vermelho do site rodolfonatario.pt */
  --rn-red-dark:#D42A37;
  --rn-paper:#f4f3f0;
  --rn-grey-1:#2b2b2b;
  --rn-grey-2:#5a5a5a;
  --rn-grey-3:#bdbdbd;
  --rn-line:#d6d3cc;
  --font:'Sofia Sans Condensed', system-ui, sans-serif;
  --wrap:1280px;
  --gutter:24px;

  background:var(--rn-white);color:var(--rn-black);font-family:var(--font);font-weight:300;
  overflow-x:clip;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;color-scheme:light;
}
.rnic *,.rnic *::before,.rnic *::after{box-sizing:border-box}
.rnic img{max-width:100%;display:block}
.rnic a{color:inherit}
.rnic h1,.rnic h2,.rnic h3,.rnic p,.rnic figure{margin:0}
.rnic :focus-visible{outline:2px solid var(--rn-red);outline-offset:3px}
/* Foco por programa, não por teclado: o FocusOnNavigate do site põe-no no h1 ao carregar, e o salto
   para o formulário e a confirmação do envio também — nenhum deles leva o anel. */
.rnic [tabindex="-1"]:focus,.rnic h1:focus{outline:none}
.rnic .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.rnic .eyebrow{margin:0 0 20px;font-size:13px;letter-spacing:.28em;font-weight:600;color:var(--rn-grey-2);text-transform:uppercase}
.rnic .display{margin:0;font-weight:800;line-height:.94;letter-spacing:-.005em;text-transform:uppercase}
.rnic .red{color:var(--rn-red)}

/* ---------- 1. POR SI ---------- */
.rnic .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:end;padding-top:56px;padding-bottom:104px}
.rnic .hero h1{font-size:clamp(44px,6.4vw,96px)}
.rnic .hero .sub{margin:32px 0 0;font-style:italic;font-size:clamp(20px,2vw,26px);line-height:1.35;max-width:30ch}
.rnic .btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:0 32px;font-family:var(--font);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s,transform .2s}
.rnic .btn-dark{background:var(--rn-black);color:var(--rn-white)}
.rnic .btn-dark:hover{background:var(--rn-red)}
.rnic .btn-red{background:var(--rn-red);color:var(--rn-white)}
.rnic .btn-red:hover{background:var(--rn-red-dark)}
.rnic .btn .arrow{transition:transform .2s}
.rnic .btn:hover .arrow{transform:translateX(4px)}
.rnic .hero .btn{margin-top:40px}
.rnic .hero-photo{position:relative;margin:0;aspect-ratio:1145/1374;background:#2b2b2b;overflow:hidden}
.rnic .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* ---------- 2. DECISÃO PESSOAL ---------- */
.rnic .statement{background:var(--rn-black);color:var(--rn-white)}
.rnic .statement .wrap{padding-top:clamp(88px,11vw,168px);padding-bottom:clamp(88px,11vw,168px)}
.rnic .statement h2{font-size:clamp(36px,5.4vw,80px);max-width:17ch;line-height:.98}
.rnic .statement .row{display:flex;flex-wrap:wrap;gap:32px;margin-top:56px;align-items:flex-start}
.rnic .statement .bar{width:64px;height:6px;background:var(--rn-red);margin-top:18px;flex:none}
.rnic .statement p{margin:0;max-width:34ch;font-size:clamp(22px,2.2vw,30px);line-height:1.35}

/* ---------- 3. PROCESSO ---------- */
.rnic .process .wrap{padding-top:clamp(88px,10vw,152px);padding-bottom:clamp(88px,10vw,152px)}
.rnic .process h2{margin:0;font-weight:800;font-stretch:92%;font-size:clamp(32px,4vw,56px);line-height:1.04;max-width:20ch}
.rnic .steps{list-style:none;margin:88px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.rnic .step{border-top:2px solid var(--rn-black);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.rnic .step .n{font-weight:900;font-stretch:80%;font-size:clamp(80px,7.4vw,120px);line-height:.85;color:var(--rn-red)}
.rnic .step h3{margin:0;font-weight:800;font-size:20px;line-height:1.15}
.rnic .step p{margin:0;font-size:18px;line-height:1.45;color:var(--rn-grey-1)}
@media (min-width:1101px){
  .rnic .step:nth-child(even){margin-top:80px}   /* sequência alternada no desktop */
}
@media (max-width:1100px){
  .rnic .steps{grid-template-columns:1fr;gap:0;margin-top:56px;position:relative}
  .rnic .step{display:grid;grid-template-columns:96px 1fr;column-gap:20px;row-gap:8px;border-top:0;padding:0 0 40px;position:relative}
  .rnic .step::before{content:"";position:absolute;left:30px;top:76px;bottom:12px;width:2px;background:var(--rn-line)}
  .rnic .step:last-child::before{display:none}
  .rnic .step .n{grid-row:1 / span 2;font-size:72px}
  .rnic .step h3{padding-top:8px}
}

/* ---------- 4. LINGUAGEM DOS BANCOS ---------- */
.rnic .language{background:var(--rn-red);color:var(--rn-white);position:relative;overflow:hidden}
.rnic .language .terms{position:absolute;top:0;bottom:0;right:0;left:52%;display:flex;flex-wrap:wrap;align-content:center;justify-content:flex-end;gap:6px 32px;padding:32px 48px 32px 0;font-weight:800;font-size:clamp(36px,4.4vw,68px);line-height:1;color:rgba(255,255,255,.16);text-transform:uppercase;pointer-events:none;user-select:none}
.rnic .language .wrap{position:relative;padding-top:clamp(104px,12vw,184px);padding-bottom:clamp(104px,12vw,184px)}
.rnic .language h2{font-size:clamp(42px,6.4vw,100px)}
.rnic .language h2 .k{color:var(--rn-black)}
.rnic .language p{margin:48px 0 0;max-width:36ch;font-size:clamp(20px,2vw,26px);line-height:1.4}
@media (max-width:960px){
  .rnic .language{display:flex;flex-direction:column-reverse}
  .rnic .language .terms{position:static;justify-content:flex-start;padding:0 var(--gutter) 64px;font-size:30px;gap:4px 18px;color:rgba(255,255,255,.2)}
  .rnic .language .wrap{padding-bottom:40px}
}

/* ---------- 5. INSTITUIÇÕES ---------- */
.rnic .lenders{background:var(--rn-paper)}
.rnic .lenders .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;padding-top:clamp(88px,10vw,144px);padding-bottom:clamp(88px,10vw,144px);align-items:start}
.rnic .lenders h2{margin:0;font-weight:800;font-stretch:92%;font-size:clamp(28px,3.2vw,46px);line-height:1.05;text-transform:uppercase}
.rnic .lenders .lead{margin:28px 0 0;max-width:42ch;font-size:19px;line-height:1.5;color:var(--rn-grey-1)}
.rnic .lenders .logos{background:var(--rn-white);padding:32px;border:1px solid var(--rn-line)}
.rnic .lenders .logos img{width:100%;height:auto;filter:grayscale(1);opacity:.85}
.rnic .lenders .legal{margin:16px 0 0;font-size:13px;color:var(--rn-grey-2)}

/* ---------- 6. RICARDO BRUNHETA ---------- */
.rnic .person .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;padding-top:clamp(88px,10vw,152px);padding-bottom:clamp(88px,10vw,152px)}
.rnic .person figure{margin:0;background:#d9d6cf;min-height:480px;position:relative;overflow:hidden}
.rnic .person figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 30%}
.rnic .person h2{font-size:clamp(32px,4.2vw,62px);line-height:.98}
.rnic .person .name{margin:40px 0 0;font-weight:800;font-size:24px}
.rnic .person .role{margin:4px 0 0;font-size:13px;letter-spacing:.2em;color:var(--rn-grey-2);text-transform:uppercase}
.rnic .facts{list-style:none;margin:32px 0 0;padding:0}
.rnic .facts li{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rn-line)}
.rnic .facts li:last-child{border-bottom:1px solid var(--rn-line)}
.rnic .facts b{font-weight:900;font-stretch:80%;font-size:32px;color:var(--rn-red);min-width:76px}
.rnic .facts span{font-size:19px}
.rnic .direct{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.rnic .direct a{display:flex;flex-direction:column;gap:4px;padding:20px 24px;text-decoration:none;transition:background-color .2s,color .2s}
.rnic .direct small{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.rnic .direct strong{font-weight:800;font-size:clamp(18px,2vw,26px);word-break:break-word}
.rnic .direct .tel{background:var(--rn-black);color:var(--rn-white)}
.rnic .direct .tel small{color:var(--rn-grey-3)}
.rnic .direct .tel:hover{background:var(--rn-red)}
.rnic .direct .mail{border:2px solid var(--rn-black);color:var(--rn-black)}
.rnic .direct .mail small{color:var(--rn-grey-2)}
.rnic .direct .mail:hover{background:var(--rn-black);color:var(--rn-white)}
.rnic .direct .mail:hover small{color:var(--rn-grey-3)}

/* ---------- 7. CONVERSA ---------- */
.rnic .talk{background:var(--rn-black);color:var(--rn-white)}
.rnic .talk .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;padding-top:clamp(88px,11vw,168px);padding-bottom:clamp(88px,11vw,168px)}
.rnic .talk h2{font-size:clamp(36px,5vw,76px);line-height:.96}
.rnic .talk .lead{margin:36px 0 0;max-width:32ch;font-size:clamp(20px,2vw,26px);line-height:1.4}
.rnic .talk .alt{margin:40px 0 0;font-size:14px;letter-spacing:.08em;color:var(--rn-grey-3)}
.rnic .talk .alt a{color:var(--rn-white);font-weight:800;text-decoration:none;border-bottom:2px solid var(--rn-red)}
/* O fieldset desactivado até o circuito ligar não pode sair da coluna do formulário. */
.rnic .form__fields{display:flex;flex-direction:column;gap:28px;margin:0;padding:0;border:0;min-width:0}
.rnic .field{display:flex;flex-direction:column;gap:10px}
.rnic .field label{font-size:12px;letter-spacing:.2em;font-weight:600;text-transform:uppercase}
.rnic .field input{height:52px;background:transparent;border:0;border-bottom:2px solid var(--rn-white);color:var(--rn-white);font-family:var(--font);font-size:20px;padding:0 2px;border-radius:0;-webkit-appearance:none;appearance:none}
/* O foco é a linha vermelha do desenho; o campo inválido fica com a linha branca e a mensagem por baixo,
   para o foco que o formulário lhe dá depois de um envio recusado continuar a ver-se. */
.rnic .field input:focus{outline:none;border-bottom-color:var(--rn-red)}
.rnic .consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--rn-grey-3)}
.rnic .consent input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--rn-red)}
.rnic .consent a{color:var(--rn-white)}
.rnic .field__error,.rnic .form__fail{margin:0;font-size:15px;line-height:1.4;color:#ff8a92}
.rnic .form__fields .btn{width:100%;min-height:60px}
.rnic .form__fields .btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.rnic .form__fields:disabled{opacity:.6}
.rnic .form-msg{margin:0;font-style:italic;font-size:20px}

/* ---------- Barra de contacto fixa (telemóvel) ---------- */
.rnic .call-bar{display:none}
@media (max-width:760px){
  /* z-index abaixo dos 40 do menu móvel do site (#mobile-menu), que abre por cima de tudo. */
  .rnic .call-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;padding-bottom:env(safe-area-inset-bottom);background:var(--rn-black);transform:translateY(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  .rnic .call-bar.is-visible{transform:none;visibility:visible;transition-delay:0s}
  .rnic .call-bar a{min-height:56px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}
  .rnic .call-bar .c1{background:var(--rn-black);color:var(--rn-white)}
  .rnic .call-bar .c2{background:var(--rn-red);color:var(--rn-white)}
  /* O anel por fora seria cortado pelo ecrã e não se via no vermelho do .c2. */
  .rnic .call-bar a:focus-visible{outline:2px solid var(--rn-white);outline-offset:-6px}
  /* Quem navega por teclado (ou com zoom a 200%) não fica com o foco escondido atrás da barra. */
  :root:has(.rnic .call-bar.is-visible){scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ---------- Responsivo geral ---------- */
@media (max-width:960px){
  .rnic .hero .wrap,.rnic .lenders .wrap,.rnic .person .wrap,.rnic .talk .wrap{grid-template-columns:1fr;gap:48px}
  .rnic .hero .wrap{padding-top:24px;padding-bottom:72px}
  .rnic .hero-photo{aspect-ratio:4/4.2}
  .rnic .person figure{min-height:420px}
}
@media (max-width:560px){
  .rnic{--gutter:20px}
  .rnic .direct{grid-template-columns:1fr}
  .rnic .hero .btn{width:100%}
}

/* ---------- Animações discretas ---------- */
.rnic .rv{transition:opacity .8s ease,transform .8s ease}
.rnic.js-motion .rv{opacity:0;transform:translateY(24px)}
.rnic.js-motion .rv.in{opacity:1;transform:none}
.rnic .steps .rv:nth-child(2){transition-delay:.08s}
.rnic .steps .rv:nth-child(3){transition-delay:.16s}
.rnic .steps .rv:nth-child(4){transition-delay:.24s}
.rnic .steps .rv:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rnic .rv,.rnic.js-motion .rv{opacity:1;transform:none;transition:none}
}