/* ============================================================================
   COMERCIAL IMAM · HEADER-CHASIS UNIFICADO + HERO ESTANDARIZADO
   Barra fija estrecha (3 zonas) + hero patron Campoaras. Temable claro/oscuro.
   ============================================================================ */
.hx--light{
  --ink:#1C1C1C; --ink-soft:#56544f; --role:#7d776b;
  --bd:rgba(0,0,0,0.12); --logo-rest:#141414;
  --logo-c:#8E2A3A; --logo-i:#2E7D52; --accent:#2E7D52;
}
.hx--dark{
  --ink:#F3EFE6; --ink-soft:rgba(243,239,230,0.82); --role:rgba(243,239,230,0.66);
  --bd:rgba(255,255,255,0.16); --logo-rest:#EFEBDD;
  --logo-c:#C75365; --logo-i:#45A06B; --accent:#45A06B;
}
.hx-bar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:62px; padding:8px clamp(20px,3.4vw,44px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hx-bar *{box-sizing:border-box;}
.hx-bar.ci-scrolled{ background:var(--hx-solid,#EFEBDD); border-bottom-color:var(--bd); box-shadow:0 8px 26px -22px rgba(0,0,0,0.5); }
.hx__id{display:flex; flex-direction:column; gap:3px; flex:0 0 auto;}
.hx__home{text-decoration:none; color:inherit; display:inline-block;}
.hx__home:hover .hx__word{opacity:.82;}
.hx__word{ font-family:"Fraunces", Georgia, "Times New Roman", serif; font-weight:600; font-size:1.22rem; line-height:1; letter-spacing:.005em; color:var(--logo-rest); }
.hx__word .c{color:var(--logo-c);}
.hx__word .i{color:var(--logo-i);}
.hx__role{font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--role); line-height:1;}
.hx__role .hx__brand{font-size:13px; letter-spacing:.05em;}
.hx__nav{display:flex; align-items:center; gap:clamp(16px,2vw,30px); flex:1 1 auto; justify-content:center;}
.hx__nav a{color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; opacity:.9; transition:opacity .18s;}
.hx__nav a:hover{opacity:1;}
.hx__menu{position:relative;}
.hx__menu-btn{ display:none; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; color:var(--ink); font:inherit; font-size:14px; font-weight:600; list-style:none; }
.hx__menu-btn::-webkit-details-marker{display:none;}
.hx__menu-btn::marker{content:"";}
.hx__menu-btn .car{font-size:10px; transition:transform .2s;}
.hx__menu[open] .hx__menu-btn .car{transform:rotate(180deg);}
.hx__menu-drop{ position:absolute; top:calc(100% + 14px); right:0; min-width:210px; z-index:30; background:var(--hx-solid,#EFEBDD); border:1px solid var(--bd); border-radius:6px; padding:8px; display:none; flex-direction:column; gap:2px; box-shadow:0 18px 40px -20px rgba(0,0,0,.45); }
.hx__menu[open] .hx__menu-drop{display:flex;}
.hx__menu-drop a{padding:9px 12px; border-radius:4px; font-size:14px; color:var(--ink); text-decoration:none;}
.hx__menu-drop a:hover{background:var(--bd);}
.hx__contact{display:flex; align-items:center; gap:clamp(14px,1.8vw,24px); flex:0 0 auto;}
.hx__tel{color:var(--ink); text-decoration:none; font-size:14px; font-weight:700; white-space:nowrap;}
.hx__tel:hover{color:var(--logo-i);}
.hx__cta{ background:var(--hx-cta-fill,#8E2A3A); color:var(--hx-cta-color,#fff); text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; padding:9px 18px; border-radius:4px; transition:filter .18s; }
.hx__cta:hover{filter:brightness(1.08);}
.hx{ position:relative; isolation:isolate; overflow:hidden; min-height:clamp(520px, 66vh, 640px); display:flex; flex-direction:column; background:var(--hx-bg, #EFEBDD); font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
.hx *{box-sizing:border-box;}
.hx__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0;}
.hx__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--hx-veil,239,235,221),0.94) 0%,
    rgba(var(--hx-veil,239,235,221),0.78) 30%,
    rgba(var(--hx-veil,239,235,221),0.34) 52%,
    rgba(var(--hx-veil,239,235,221),0.06) 74%,
    rgba(var(--hx-veil,239,235,221),0) 90%); }
.hx__hero{ position:relative; z-index:2; flex:1 1 auto; display:flex; align-items:center; padding:calc(62px + clamp(26px,4vw,52px)) clamp(20px,3.4vw,44px) clamp(44px,6vw,72px); }
.hx__inner{max-width:640px;}
.hx__eyebrow{display:block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hx-eyebrow,#B58A4C); margin-bottom:18px;}
.hx__title{ font-family:"Fraunces", Georgia, "Times New Roman", serif; font-weight:600; font-size:clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:0 0 20px; }
.hx__title em{font-style:italic; font-weight:500; color:var(--accent);}
.hx__para{font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:440px; margin:0 0 30px;}
.hx__btns{display:flex; flex-wrap:wrap; gap:14px;}
.hx__btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:14px; font-weight:700; padding:14px 26px; border-radius:4px; transition:filter .18s, background .18s, color .18s;}
.hx__btn--fill{background:var(--hx-cta-fill,#8E2A3A); color:var(--hx-cta-color,#fff); border:1.5px solid transparent;}
.hx__btn--fill:hover{filter:brightness(1.08);}
.hx__btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}
.hx__btn--ghost:hover{background:var(--ink); color:var(--hx-bg,#EFEBDD);}
html{scroll-padding-top:74px;}
@media (max-width:1000px){
  .hx__nav .hx__nav-link{display:none;}
  .hx__menu-btn{display:inline-flex;}
  .hx__nav{justify-content:flex-end; flex:0 1 auto;}
}
@media (max-width:760px){
  .hx__photo{object-position:center;}
  .hx__veil{background:linear-gradient(180deg, rgba(var(--hx-veil,239,235,221),0.86) 0%, rgba(var(--hx-veil,239,235,221),0.60) 42%, rgba(var(--hx-veil,239,235,221),0.90) 100%);}
  .hx__inner{max-width:none;}
  .hx__role{display:none;}
}
@media (max-width:520px){
  .hx__tel{display:none;}
  .hx__btns .hx__btn{flex:1 1 auto; justify-content:center;}
}