/* ===== QX · q-hero v1.4 ===== */
.q-hero{
  --q-hero-minh: clamp(420px, 64vh, 720px);
  --q-hero-pad-y: clamp(48px, 10vh, 104px);
  --q-hero-fg: var(--q-white, #fff);
  --q-hero-fg-muted: rgba(255,255,255,.85);
  --q-hero-bg-hero: var(--q-blue-900, #0b3d5c);
  --q-hero-bg-alt: var(--q-bg-alt-cool, #F2F6F9);
  --q-hero-radius: 24px;
  position: relative; isolation: isolate; display: grid;
  min-height: var(--q-hero-minh);
  padding: var(--q-hero-pad-y) 16px;
  border-radius: var(--q-hero-radius);
  overflow: hidden; color: var(--q-hero-fg);
  background: var(--q-hero-bg-hero);
}

/* Full-bleed estable y centrado al viewport */
.q-hero.q-hero--fullbleed{
  border-radius:0 !important;
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
  position: relative;
  overflow: hidden;     /* recorta lo que se salga del hero */
}


/* Alturas */
.q-hero.h-short{ --q-hero-minh: clamp(340px,52vh,560px); }
.q-hero.h-standard{ --q-hero-minh: clamp(420px,64vh,720px); }
.q-hero.h-tall{ --q-hero-minh: clamp(520px,80vh,860px); }
.q-hero.h-full{ --q-hero-minh: 100dvh; }

.q-hero.bg-alt{ background: var(--q-hero-bg-alt); color: var(--q-ink-950,#0b2233); }
.q-hero[style*="--q-hero-bg-custom"]{ background: var(--q-hero-bg-custom); }

/* Capas */
/* === Fix: media centrado a viewport, sin franjas === */
.q-hero--fullbleed .q-hero__media,
.q-hero--fullbleed .q-hero__overlay{
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 del hero */
  width: auto;           /* hereda del contenedor */
  transform: none;       /* quita el left:50% + translateX */
}
.q-hero--fullbleed .q-hero__media{
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;                 /* centro del viewport */
  right: auto;
  width: 100vw;              /* ocupa el ancho del viewport */
  transform: translateX(-50%);
  z-index: 0;
  background-image: var(--q-hero-poster);
  background-size: cover;
  background-position: center;
}
/* El overlay debe coincidir exactamente con el media */
.q-hero--fullbleed .q-hero__overlay{
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.q-hero__inner{ position:relative; z-index:2; }
/* El video/imagen llena y encuadra al centro */
.q-hero__bg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50% !important;
}
.q-hero__video{ filter:saturate(1.05) contrast(1.05); }

/* Tipografía */
.q-hero__inner{ margin-inline:auto; width:min(1120px,100%); display:grid; gap:16px; align-content:center; text-align:left; }
.q-hero.align-center .q-hero__inner{ text-align:center; }
.q-hero.align-right .q-hero__inner{ text-align:right; }

.q-hero__eyebrow{ font:700 12px/1.2 var(--font-sans,ui-sans-serif,system-ui); letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.q-hero__title{ color:#fff !important; font:800 clamp(28px,5.5vw,56px)/1.05 var(--font-sans,ui-sans-serif,system-ui); letter-spacing:-.02em; margin:4px 0; text-shadow:0 1px 0 rgba(0,0,0,.14); }
.q-hero.bg-alt .q-hero__title{ color:var(--q-ink-950,#0b2233) !important; text-shadow:none; }
.q-hero__sub{ font:400 clamp(16px,1.8vw,20px)/1.5 var(--font-sans,ui-sans-serif,system-ui); color:var(--q-hero-fg-muted); max-width:72ch; margin:0; }

/* Botones */
.q-hero__actions{ display:inline-flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.q-btn{
  --_fg:#fff; --_bg:var(--q-blue-500,#0073B8); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; border:1px solid var(--_bd);
  background:var(--_bg); color:var(--_fg);
  font:700 15px/1 var(--font-sans,ui-sans-serif,system-ui);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.q-hero a.q-btn,
.q-hero a.q-btn:visited,
.q-hero a.q-btn:hover,
.q-hero a.q-btn:active,
.q-hero a.q-btn:focus{
  color:var(--_fg) !important;
  font-family:var(--font-sans,ui-sans-serif,system-ui) !important;
  font-size:15px !important; line-height:1 !important; font-weight:700 !important;
  text-decoration:none !important;
}
.q-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(0,115,184,.6); }
.q-btn--primary{ --_fg:#fff; --_bg:var(--q-blue-500,#0073B8); --_bg-hover:color-mix(in srgb, var(--q-blue-500,#0073B8) 88%, #fff); }
.q-btn--primary:hover{ background:var(--_bg-hover); }
.q-btn--ghost{ --_fg:#fff; --_bd:rgba(255,255,255,.45); background:transparent; border-color:var(--_bd); }
.q-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.65); }
.q-hero.bg-alt .q-btn--ghost{ --_fg:var(--q-ink-950,#0b2233); --_bd:rgba(0,0,0,.25); }
.q-hero.bg-alt .q-btn--ghost:hover{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.38); }

/* Toggle media */
.only-desktop{ display:none !important; }
.only-tablet-mobile{ display:block !important; }
@media (min-width:992px){
  .only-desktop{ display:block !important; }
  .only-tablet-mobile{ display:none !important; }
}

/* Sticky CTA — oculto en desktop sí o sí */
.q-hero__sticky-cta{
  display:none !important; position:fixed; left:0; right:0; bottom:0;
  padding:12px clamp(12px,4vw,24px) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--q-ink-950,#00283F) 85%, transparent);
  backdrop-filter:blur(6px); z-index:40;
}
.q-btn--sticky{ width:100%; box-shadow:0 6px 24px rgba(0,0,0,.22); }
@media (max-width:991px){
  .q-hero__sticky-cta{ display:block !important; }
}

/* Quitar padding/margin del wrapper cuando es fullbleed */
.dnd-section:has(.q-hero.q-hero--fullbleed),
.section:has(.q-hero.q-hero--fullbleed),
.body-container-wrapper:has(.q-hero.q-hero--fullbleed) .dnd-section{
  padding:0 !important; margin:0 !important;
}
.dnd-section > .row-fluid:has(.q-hero),
.row-fluid:has(.q-hero) [class*="span"]{
  padding:0 !important; margin:0 !important;
}
/* Neutraliza gutters/overflow del grid cuando hay hero fullbleed */
.dnd-section:has(.q-hero--fullbleed),
.dnd-section:has(.q-hero--fullbleed) > .row-fluid,
.dnd-section:has(.q-hero--fullbleed) [class*="span"]{
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;  /* permite que el hero “respire” */
}


/* Evita scroll horizontal por redondeos/scrollbar */
html, body{ overflow-x: clip; }
@supports not (overflow-x: clip){ html, body{ overflow-x: hidden; } }