/* ==========================================================================
MS Gestão de Imóveis — Design System
Navy profundo + dourado (acento) + off-white editorial.
Tipografia: Fraunces (display) + Archivo (corpo/UI).
Identidade de marca fixa — cores explícitas em toda a folha
(o site não segue o tema claro/escuro do sistema, por decisão de marca).
========================================================================== */
/* Fontes carregadas via +
no de cada página (não via @import, que bloqueia o carregamento
em paralelo e atrasa a primeira renderização). Ver head de index.html. */
:root{
/* cor — navy */
--navy-950:#0a1524;
--navy-900:#0f1e35;
--navy-800:#16294a;
--navy-700:#20375c;
--navy-600:#2c4771;
/* cor — dourado (acento, nunca dominante) */
--gold-700:#8f6d2c;
--gold-600:#ab8437;
--gold-500:#c6a04c;
--gold-300:#ddc07f;
--gold-100:#f1e3c4;
/* cor — neutros editoriais */
--paper:#faf7f1;
--off-white:#f3efe6;
--white:#ffffff;
--ink:#161a22;
--ink-soft:#3f4451;
--stone-600:#6b6f7b;
--stone-400:#9a9ea8;
--stone-200:#dcdcd6;
--line:#e4ded0;
--line-navy:rgba(221,192,127,.22);
/* tipografia */
--font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
--font-body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
/* medidas */
--container:1220px;
--container-narrow:760px;
--gutter:clamp(20px, 5vw, 64px);
--radius-s:3px;
--radius-m:6px;
/* sombra discreta, uso pontual */
--shadow-card:0 1px 2px rgba(10,21,36,.06), 0 12px 32px -16px rgba(10,21,36,.18);
}
/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select{ font:inherit; color:inherit; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
/* ---------- tipografia ---------- */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:500;
line-height:1.12;
letter-spacing:-.01em;
text-wrap:balance;
color:var(--navy-950);
}
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4{ color:var(--white); }
h1{ font-size:clamp(2.35rem, 3.4vw + 1.2rem, 4.4rem); font-weight:400; }
h2{ font-size:clamp(1.85rem, 1.8vw + 1.1rem, 3rem); }
h3{ font-size:clamp(1.3rem, .8vw + 1rem, 1.7rem); }
h4{ font-size:clamp(1.05rem, .3vw + .95rem, 1.2rem); font-family:var(--font-body); font-weight:600; text-transform:none; }
.eyebrow{
display:inline-flex; align-items:center; gap:.6em;
font-family:var(--font-body); font-weight:600; font-size:.72rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700);
}
.on-navy .eyebrow{ color:var(--gold-300); }
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.7; }
p{ color:var(--ink-soft); max-width:62ch; }
p.lede{ font-size:clamp(1.05rem, .3vw + 1rem, 1.25rem); color:var(--ink-soft); max-width:56ch; }
.on-navy p{ color:rgba(255,255,255,.78); }
strong{ color:var(--navy-950); font-weight:600; }
.on-navy strong{ color:var(--gold-300); }
.serif-quote{
font-family:var(--font-display); font-style:italic; font-weight:400;
font-size:clamp(1.3rem, 1vw + 1.05rem, 1.9rem); color:var(--navy-900);
line-height:1.35; max-width:34ch;
}
.on-navy .serif-quote{ color:var(--gold-100); }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
/* ---------- layout ---------- */
.container{
width:100%; max-width:var(--container); margin-inline:auto;
padding-inline:var(--gutter);
}
.container-narrow{ max-width:var(--container-narrow); }
.section{ padding-block: clamp(64px, 9vw, 128px); }
.section--tight{ padding-block: clamp(40px, 5vw, 72px); }
.section--navy{ background:var(--navy-950); }
.section--off{ background:var(--off-white); }
.section--paper{ background:var(--paper); }
.section--white{ background:var(--white); }
.section-head{ max-width:640px; margin-bottom:clamp(32px,4vw,56px); display:flex; flex-direction:column; gap:16px; }
.section-head.wide{ max-width:760px; }
.hairline{ border:0; border-top:1px solid var(--line); margin:0; }
.on-navy .hairline, .hairline--navy{ border-top:1px solid var(--line-navy); }
.grid{ display:grid; gap:clamp(24px, 3vw, 48px); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:900px){
.grid-3, .grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
.grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split.reverse{ grid-template-columns:.95fr 1.05fr; }
.split.reverse > *:first-child{ order:2; }
@media (max-width:860px){
.split, .split.reverse{ grid-template-columns:1fr; }
.split.reverse > *:first-child{ order:0; }
}
/* ---------- header ---------- */
.site-header{
position:sticky; top:0; z-index:50;
background:var(--navy-950);
border-bottom:1px solid var(--line-navy);
}
.site-header .container{
display:flex; align-items:center; justify-content:space-between;
padding-block:14px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:40px; width:auto; }
.brand-word{ font-family:var(--font-display); color:var(--white); font-size:1.05rem; letter-spacing:.02em; line-height:1.1; }
.brand-word b{ display:block; color:var(--gold-300); font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; margin-top:2px; }
.nav-desktop{ display:flex; align-items:center; gap:clamp(16px,2vw,34px); }
.nav-desktop a{
font-size:.88rem; font-weight:500; color:rgba(255,255,255,.82);
padding-block:6px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
white-space:nowrap;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color:var(--gold-300); border-color:var(--gold-500); }
.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
display:none; width:42px; height:42px; align-items:center; justify-content:center;
color:var(--white); border:1px solid var(--line-navy); border-radius:var(--radius-s);
}
.nav-toggle svg{ width:20px; height:20px; }
.mobile-menu{
display:none; position:fixed; inset:0; z-index:60; background:var(--navy-950);
padding:20px var(--gutter) 40px; overflow-y:auto;
}
.mobile-menu.is-open{ display:block; }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu a{
font-family:var(--font-display); font-size:1.7rem; color:var(--white);
padding-block:14px; border-bottom:1px solid var(--line-navy);
}
.mobile-menu .btn{ margin-top:28px; width:100%; justify-content:center; }
.mobile-close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--white); border:1px solid var(--line-navy); border-radius:var(--radius-s); }
@media (max-width:940px){
.nav-desktop, .header-actions .btn{ display:none; }
.nav-toggle{ display:inline-flex; }
}
/* ---------- botões ---------- */
.btn{
display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
font-family:var(--font-body); font-weight:600; font-size:.82rem;
letter-spacing:.05em; text-transform:uppercase;
padding:15px 26px; border-radius:var(--radius-s); border:1px solid transparent;
transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
cursor:pointer;
}
.btn svg{ width:14px; height:14px; flex-shrink:0; transition:transform .15s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold-500); color:var(--navy-950); }
.btn--gold:hover{ background:var(--gold-300); }
.btn--ghost-navy{ background:transparent; color:var(--navy-950); border-color:var(--navy-950); }
.btn--ghost-navy:hover{ background:var(--navy-950); color:var(--white); }
.btn--ghost-gold{ background:transparent; color:var(--gold-300); border-color:var(--line-navy); }
.btn--ghost-gold:hover{ border-color:var(--gold-500); color:var(--gold-100); }
.btn--navy{ background:var(--navy-950); color:var(--white); }
.btn--navy:hover{ background:var(--navy-800); }
.btn--wa{ background:#1f2f26; color:#e9f3ec; border-color:rgba(233,243,236,.18); }
.btn--wa:hover{ background:#25392e; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; border-bottom:1px solid currentColor; padding-bottom:2px; }
.text-link svg{ width:13px; height:13px; }
/* ---------- hero ---------- */
.hero{
background:var(--navy-950); color:var(--white);
padding-block: clamp(56px, 8vw, 100px) clamp(48px, 7vw, 88px);
position:relative; overflow:hidden;
}
.hero::after{
content:''; position:absolute; right:-10%; top:-30%; width:60%; height:160%;
background:radial-gradient(closest-side, rgba(198,160,76,.14), transparent 70%);
pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center; position:relative; }
.hero-copy{ display:flex; flex-direction:column; gap:22px; }
.hero-copy h1{ color:var(--white); }
.hero-copy .lede{ color:rgba(255,255,255,.8); }
.hero-figure{ position:relative; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; border-radius:var(--radius-m); }
.hero-figure-cap{
position:absolute; left:-18px; bottom:-18px; background:var(--paper); color:var(--navy-950);
padding:16px 20px; max-width:230px; font-size:.82rem; border-radius:var(--radius-s);
box-shadow:var(--shadow-card);
}
.hero-figure-cap b{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--navy-950); margin-bottom:2px; }
@media (max-width:860px){
.hero-grid{ grid-template-columns:1fr; }
.hero-figure{ order:-1; max-width:360px; margin-inline:auto; }
.hero-figure-cap{ display:none; }
}
.stat-row{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); margin-top:8px; }
.stat-row .stat b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--gold-300); }
.stat-row .stat span{ font-size:.78rem; color:rgba(255,255,255,.62); }
.hero-figure-cap--tag{
left:auto; right:16px; bottom:16px; max-width:none; padding:9px 16px;
font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
background:rgba(10,21,36,.55); color:var(--gold-300); border:1px solid var(--line-navy);
box-shadow:none; backdrop-filter:blur(2px);
}
@media (max-width:860px){ .hero-figure-cap--tag{ display:block; } }
/* ---------- princípio da marca ---------- */
.principle-band{ padding-block:clamp(28px,4vw,44px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.principle-band-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; }
.principle-band .serif-quote{ margin:0; }
.process-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-700); }
.process-chain i{ width:16px; height:1px; background:currentColor; opacity:.5; display:inline-block; }
/* ---------- pilares editoriais (gestão · estratégia · operação) ---------- */
.pillars-editorial{ display:flex; flex-direction:column; }
.pillar-row{
display:grid; grid-template-columns:80px 220px 1fr; align-items:baseline; gap:clamp(16px,3vw,40px);
padding-block:clamp(20px,2.6vw,30px); border-top:1px solid var(--line-navy);
}
.pillar-row:last-child{ border-bottom:1px solid var(--line-navy); }
.pillar-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-500); line-height:1; }
.pillar-name{ color:#fff; font-size:clamp(1.6rem, 1.6vw + 1rem, 2.4rem); }
.pillar-def{ margin:0; max-width:52ch; }
@media (max-width:760px){
.pillar-row{ grid-template-columns:44px 1fr; grid-template-rows:auto auto; }
.pillar-def{ grid-column:2; }
}
/* ---------- cards ---------- */
.card{
background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:14px;
}
.card--flush{ border:0; background:transparent; padding:0; }
.card-icon{ width:40px; height:40px; color:var(--gold-600); }
.card-icon svg{ width:100%; height:100%; }
.tick-list{ display:flex; flex-direction:column; gap:14px; }
.tick-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.tick-list svg{ width:18px; height:18px; flex-shrink:0; margin-top:3px; color:var(--gold-600); }
.on-navy .tick-list li{ color:rgba(255,255,255,.82); }
.on-navy .tick-list svg{ color:var(--gold-300); }
/* ---------- timeline (como funciona) ---------- */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{
display:grid; grid-template-columns:96px 1fr; gap:clamp(16px,3vw,40px);
padding-block:clamp(24px,3vw,36px); border-top:1px solid var(--line);
}
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-num{ font-family:var(--font-display); font-size:2.1rem; color:var(--gold-500); line-height:1; }
.timeline-body h3{ margin-bottom:8px; }
@media (max-width:640px){
.timeline-item{ grid-template-columns:56px 1fr; }
.timeline-num{ font-size:1.5rem; }
}
/* ---------- categorias de operação ---------- */
.op-group{ display:flex; flex-direction:column; gap:12px; padding-block:8px; }
.op-group h4{ color:var(--navy-950); }
.on-navy .op-group h4{ color:var(--gold-300); }
.op-group ul{ display:flex; flex-direction:column; gap:8px; }
.op-group li{ font-size:.95rem; color:var(--ink-soft); position:relative; padding-left:16px; }
.op-group li::before{ content:'—'; position:absolute; left:0; color:var(--gold-600); }
.on-navy .op-group li{ color:rgba(255,255,255,.75); }
/* ---------- accordion (FAQ / objeções) ---------- */
.accordion{ display:flex; flex-direction:column; }
.acc-item{ border-top:1px solid var(--line); }
.acc-item:last-child{ border-bottom:1px solid var(--line); }
.acc-item.on-navy, .on-navy .acc-item{ border-color:var(--line-navy); }
.acc-trigger{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
text-align:left; padding-block:22px; font-family:var(--font-display); font-size:1.1rem; color:var(--navy-950);
}
.on-navy .acc-trigger{ color:var(--white); }
.acc-trigger .plus{ position:relative; width:18px; height:18px; flex-shrink:0; color:var(--gold-600); }
.on-navy .acc-trigger .plus{ color:var(--gold-300); }
.acc-trigger .plus::before, .acc-trigger .plus::after{ content:''; position:absolute; background:currentColor; }
.acc-trigger .plus::before{ left:0; top:8px; width:18px; height:2px; }
.acc-trigger .plus::after{ left:8px; top:0; width:2px; height:18px; transition:transform .2s ease; }
.acc-item[data-open="true"] .plus::after{ transform:rotate(90deg); }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.acc-item[data-open="true"] .acc-panel{ max-height:600px; }
.acc-panel-inner{ padding-bottom:24px; padding-right:10%; }
@media (max-width:640px){ .acc-panel-inner{ padding-right:0; } }
/* ---------- pessoa / sobre ---------- */
.person-figure{ position:relative; }
.person-figure img{ width:100%; border-radius:var(--radius-m); aspect-ratio:4/5; object-fit:cover; }
.person-mark{
position:absolute; right:-16px; top:-16px; background:var(--navy-950); padding:12px; border-radius:var(--radius-s);
}
.person-mark img{ height:34px; width:auto; border-radius:0; aspect-ratio:auto; }
/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-800); }
.on-navy .field label{ color:rgba(255,255,255,.7); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea, .field select{
width:100%; padding:14px 16px; border:1px solid var(--stone-200); border-radius:var(--radius-s);
background:var(--white); color:var(--ink); font-size:1rem; transition:border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--gold-500); outline-offset:1px; border-color:var(--gold-500); }
.on-navy .field input, .on-navy .field textarea, .on-navy .field select{ background:rgba(255,255,255,.04); border-color:var(--line-navy); color:var(--white); }
.field textarea{ min-height:120px; resize:vertical; }
.field-hint{ font-size:.78rem; color:var(--stone-600); }
.field.has-error input, .field.has-error textarea{ border-color:#b3462c; }
.field.has-error .choice-grid{ outline:1px solid #b3462c; outline-offset:4px; border-radius:8px; }
.field-error{ display:none; font-size:.78rem; color:#b3462c; }
.field.has-error .field-error{ display:block; }
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.choice{
position:relative; border:1px solid var(--stone-200); border-radius:var(--radius-s);
padding:14px 16px; cursor:pointer; transition:border-color .15s, background-color .15s;
display:flex; align-items:center; gap:10px; font-size:.92rem;
}
.choice:hover{ border-color:var(--gold-500); }
.choice input{ position:absolute; opacity:0; }
.choice input:checked ~ .choice-label{ color:var(--navy-950); font-weight:600; }
.choice:has(input:checked){ border-color:var(--gold-500); background:var(--gold-100); }
.choice input:focus-visible ~ .choice-label{ outline:2px solid var(--gold-500); }
/* ---------- wizard (estudo de potencial) ---------- */
.wizard{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-card); overflow:hidden; }
.wizard-progress{ display:flex; gap:4px; padding:20px clamp(20px,3vw,40px) 0; }
.wizard-progress i{ flex:1; height:3px; background:var(--stone-200); border-radius:2px; }
.wizard-progress i.is-active, .wizard-progress i.is-done{ background:var(--gold-500); }
.wizard-meta{ display:flex; justify-content:space-between; padding:14px clamp(20px,3vw,40px) 0; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--stone-600); }
.wizard-body{ padding:clamp(28px,3.5vw,44px); }
.wizard-step{ display:none; flex-direction:column; gap:6px; }
.wizard-step.is-active{ display:flex; }
.wizard-step h3{ margin-bottom:4px; }
.wizard-step .field-block{ margin-top:18px; }
.wizard-actions{ display:flex; justify-content:space-between; align-items:center; padding:0 clamp(28px,3.5vw,44px) clamp(28px,3.5vw,44px); gap:14px; }
.wizard-actions .spacer{ flex:1; }
.summary-list{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; margin-top:8px; }
.summary-row{ display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-top:1px solid var(--line); font-size:.92rem; }
.summary-row:first-child{ border-top:0; }
.summary-row dt{ color:var(--stone-600); }
.summary-row dd{ margin:0; font-weight:600; color:var(--navy-950); text-align:right; }
.notice{ display:none; margin-top:14px; padding:12px 16px; border-radius:var(--radius-s); background:var(--gold-100); color:var(--navy-900); font-size:.86rem; border:1px solid var(--gold-300); }
.notice.is-visible{ display:block; }
.form-disclaimer{
display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px;
border:1px solid var(--line); border-radius:var(--radius-s); background:var(--off-white);
font-size:.8rem; color:var(--stone-600);
}
.form-disclaimer svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--gold-600); }
.on-navy .form-disclaimer, .section--navy .form-disclaimer{ background:rgba(255,255,255,.04); border-color:var(--line-navy); color:rgba(255,255,255,.6); }
button[aria-busy="true"]{ opacity:.75; cursor:progress; }
.success-box{ display:none; text-align:center; padding:20px 0; }
.success-box.is-visible{ display:block; }
.success-box svg{ width:44px; height:44px; color:var(--gold-600); margin-inline:auto; margin-bottom:14px; }
/* ---------- CTA final ---------- */
.cta-final{ background:var(--navy-950); color:var(--white); text-align:center; padding-block:clamp(64px,9vw,120px); }
.cta-final .container{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta-final h2{ color:var(--white); max-width:20ch; }
/* ---------- footer ---------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.75); padding-block:56px 30px; border-top:1px solid var(--line-navy); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ height:34px; width:auto; }
.footer-col h5{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); margin-bottom:14px; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.9rem; color:rgba(255,255,255,.75); }
.footer-col a:hover{ color:var(--gold-300); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px; border-top:1px solid var(--line-navy); font-size:.8rem; color:rgba(255,255,255,.5); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
/* ---------- whatsapp fab ---------- */
.wa-fab{
position:fixed; right:20px; bottom:20px; z-index:40;
width:56px; height:56px; border-radius:50%; background:#1f2f26; color:#e9f3ec;
display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(10,21,36,.5);
border:1px solid rgba(233,243,236,.2);
}
.wa-fab svg{ width:26px; height:26px; }
/* ---------- utilidades ---------- */
.mt-0{ margin-top:0; }
.max-w-form{ max-width:640px; }
.skip-link{
position:absolute; left:-999px; top:auto; background:var(--gold-500); color:var(--navy-950);
padding:12px 18px; z-index:100; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }
.badge-soft{
display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600;
color:var(--navy-900); background:var(--gold-100); border:1px solid var(--gold-300);
padding:7px 14px; border-radius:100px; letter-spacing:.02em;
}
.divider-word{ display:flex; align-items:center; gap:16px; color:var(--stone-600); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.divider-word::before, .divider-word::after{ content:''; flex:1; height:1px; background:var(--line); }
.page-hero{ background:var(--navy-950); color:var(--white); padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,64px); }
.page-hero h1{ color:var(--white); max-width:18ch; }
.breadcrumb{ font-size:.78rem; color:rgba(255,255,255,.55); margin-bottom:14px; letter-spacing:.04em; }
.breadcrumb a:hover{ color:var(--gold-300); }