@charset "UTF-8";
/*------------------------------------*\
  bhhs-header-footer.css
  Header + footer de Berkshire Hathaway HomeServices California Properties
  (portado de www.reliancedemo5.com — Reliance CMS, BHHS Theme 2)

  Archivo autocontenido y AISLADO: todas las reglas cuelgan de
  .site-header / .site-footer, así que se puede soltar en cualquier
  sitio sin pisar sus estilos ni heredar los suyos. No necesita Bootstrap:
  las piezas que header y footer usaban de él (container, row/col,
  utilidades y .btn) están reimplementadas aquí con especificidad 0.

  Dependencias externas:
    - Font Awesome 6 (el original usa un kit Pro 6.7.2; con Free basta: solo
      se usan fa-brands y el caret \f0d7)
    - header.js (burger, dropdowns, ARIA)
    - fonts/reliance-icons/ri-solid.woff y ri-light.woff junto a este archivo

  Clases de estado / contexto:
    .nav-button.active          burger en "X"
    .site-header-nav-list.open  menú móvil visible
    .has-dropdown.show          dropdown abierto
    .bhhs-site                  envoltura opcional de header + <main> + footer;
                                no aplica estilos, solo agrupa y lleva el contexto.
\*------------------------------------*/

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

/* ===================================================================
   1. Aislamiento: tokens + reset local
   =================================================================== */
.site-header,
.site-footer {
    /* tokens de marca: valores leídos del sitio en producción (los inyecta la
       plataforma en un <style> con !important sobre :root) */
    --hs-main: #000000;
    --hs-main-rgb: 0, 0, 0;
    --hs-main-dark: #000000;
    --hs-main-dark-rgb: 0, 0, 0;
    --hs-accent: #670038;
    --hs-accent-rgb: 103, 0, 56;
    --hs-accent-dark: #4C002A;
    --hs-accent-dark-rgb: 76, 0, 42;
    --hs-text: #212529;

    /* equivalentes a las variables de Bootstrap que consumen las reglas de abajo */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-color: var(--hs-text);
    --bs-link-color: var(--hs-main);
    --bs-link-color-rgb: var(--hs-main-rgb);
    --bs-link-hover-color: var(--hs-main-dark);
    --bs-link-hover-color-rgb: var(--hs-main-dark-rgb);
    --bs-border-width: 1px;
    --bs-border-radius: 0.375rem;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hs-text);
    text-align: left;
    letter-spacing: normal;
    -webkit-text-size-adjust: 100%;
}

/* Tipografía: el header fija Manrope en su propia regla (sección 4). El footer,
   en cambio, está fuera de <main class="site-home"> y hereda la fuente de
   sistema del body de Bootstrap: así es en el original y así se reproduce. */
.site-header {
    --site-font-family: Manrope, arial, helvetica neue, helvetica, sans-serif;
    font-family: var(--site-font-family);
}

.site-footer {
    font-family: var(--bs-font-sans-serif);
}

/* Reset local con :where() -> especificidad 0: pisa los estilos por defecto
   del navegador y los "a { }" / "ul { }" del sitio anfitrión, pero nunca
   a las reglas de componente de la sección 4. Reproduce lo que el header y
   el footer heredaban del reboot de Bootstrap. */
:where(.site-header, .site-footer) *,
:where(.site-header, .site-footer) *::before,
:where(.site-header, .site-footer) *::after {
    box-sizing: border-box;
}

:where(.site-header, .site-footer) ul,
:where(.site-header, .site-footer) ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

:where(.site-header, .site-footer) li {
    margin: 0;
    padding: 0;
}

:where(.site-header, .site-footer) p {
    margin-top: var(--p-margin-top, 0);
    margin-bottom: var(--p-margin-bottom, 1rem);
}

:where(.site-header, .site-footer) :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--heading-margin-top, 0);
    margin-bottom: var(--heading-margin-bottom, 1rem);
}

:where(.site-header, .site-footer) a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}

:where(.site-header, .site-footer) a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

:where(.site-header, .site-footer) img {
    vertical-align: middle;
    border: 0;
}

:where(.site-header) button {
    margin: 0;
    padding: 1px 6px; /* valor por defecto del navegador, fijado para que un "button { padding }" del anfitrión no mueva el burger */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
    border-radius: 0;
    -webkit-appearance: button;
    appearance: button;
}

:where(.site-header, .site-footer) i {
    font-style: normal;
}

:where(.site-header, .site-footer) ul.no-bullet {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===================================================================
   2. Grid y utilidades (equivalentes exactos de Bootstrap 5.3, con
      especificidad 0 para que la cascada sea la misma que en el original)
   =================================================================== */
:where(.site-header, .site-footer) .container-fluid,
:where(.site-header, .site-footer) .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) { :where(.site-header, .site-footer) .container-xxl { max-width: 540px; } }
@media (min-width: 768px) { :where(.site-header, .site-footer) .container-xxl { max-width: 720px; } }
@media (min-width: 992px) { :where(.site-header, .site-footer) .container-xxl { max-width: 960px; } }
@media (min-width: 1200px) { :where(.site-header, .site-footer) .container-xxl { max-width: 1140px; } }
@media (min-width: 1400px) { :where(.site-header, .site-footer) .container-xxl { max-width: 1320px; } }

:where(.site-footer) .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

:where(.site-footer) .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

:where(.site-footer) .col { flex: 1 0 0%; }
:where(.site-footer) .row-cols-1 > * { flex: 0 0 auto; width: 100%; }
:where(.site-footer) .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 768px) {
    :where(.site-footer) .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
    :where(.site-footer) .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
}

@media (min-width: 992px) {
    :where(.site-footer) .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    :where(.site-footer) .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
}

:where(.site-footer) .gy-2 { --bs-gutter-y: 0.5rem; }
:where(.site-footer) .gy-4 { --bs-gutter-y: 1.5rem; }
:where(.site-footer) .mb-3 { margin-bottom: 1rem !important; }
:where(.site-footer) .mb-4 { margin-bottom: 1.5rem !important; }
:where(.site-footer) .mb-5 { margin-bottom: 3rem !important; }
:where(.site-footer) .mt-5 { margin-top: 3rem !important; }
:where(.site-footer) .fw-semibold { font-weight: 600 !important; }

/* .btn de Bootstrap (el enlace "Login / Sign Up"). Los --bs-btn-* los
   sobreescribe la regla .site-header-user .user.logged-out .btn de abajo. */
:where(.site-header) .btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

:where(.site-header) .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

:where(.site-header) .btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

:where(.site-header) .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

/* ===================================================================
   3. Iconos
   =================================================================== */

/* rni-eho / rni-realtor: en este sitio no tienen CSS y no pintan nada (ancho 0
   en producción), así que se dejan igual. Si algún día se quieren mostrar, las
   imágenes EHO / REALTOR que usa Carolinas son:
   https://content.mediastg.net/dyna_images/ImageLibrary/7/e/f/4/7ef48891-fa35-4a57-9bed-eeee003c377c.png
   https://content.mediastg.net/dyna_images/ImageLibrary/d/9/0/2/d902afa0-6d4d-4521-a0d2-8f692fa0c442.png */

/* Fuente "Reliance Icons" (caret de los menús, icono de usuario). Copiada del
   sitio: /dist/fonts/reliance-icons/. La ruta es relativa a ESTE css, así que en
   el S3 la carpeta fonts/reliance-icons/ debe subirse junto al archivo. Si no
   carga, las reglas de la sección 4 caen en Font Awesome (mismos códigos). */
@font-face {
    font-display: block;
    font-family: "Reliance Icons";
    font-style: normal;
    font-weight: 900;
    src: url("fonts/reliance-icons/ri-solid.woff") format("woff");
}

@font-face {
    font-display: block;
    font-family: "Reliance Icons";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/reliance-icons/ri-light.woff") format("woff");
}

/* ===================================================================
   4. Header y footer (extraído del CSS compilado del sitio)
   =================================================================== */

/* Ajuste California: el header es SIEMPRE blanco, con logo y textos negros,
   también en la home (el tema original lo ponía transparente con logo blanco
   sobre el hero cuando el body lleva .site-home-page; esa variante se ha
   quitado a propósito, así que la clase del body ya no afecta al header). */
.site-header {
    --site-header-bg: #fff;
    --site-header-border: 1px solid #fff;
    --site-header-logo-white-display: none;
    --site-header-logo-black-display: block;
    --site-header-link-color: #000;
    --site-header-link-color-hover: #373737;
    --nav-burger-color: #000;
}

/* ---------- Header ---------- */
.site-header h6,
.site-header h5,
.site-header h4,
.site-header h3,
.site-header h2,
.site-header h1 {
    color: var(--heading-color, #000);
    font-family: var(--heading-font-family, Marcellus, georgia, times, times new roman, serif);
    font-size: var(--heading-font-size);
    font-weight: var(--heading-font-weight, 400);
    line-height: var(--heading-line-height, 1.2);
    text-align: var(--heading-text-align);
    text-transform: var(--heading-text-transform, uppercase);
    margin-top: 0;
    margin-bottom: var(--heading-margin-bottom, 0.5rem);
}

.site-header h6 p,
.site-header h5 p,
.site-header h4 p,
.site-header h3 p,
.site-header h2 p,
.site-header h1 p {
    --p-margin-bottom: 0;
}

.site-header {
    --site-header-gap: 1rem;
    background: var(--site-header-bg, transparent);
    border-bottom: var(--site-header-border, 1px solid #fff);
    height: var(--site-header-height);
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 999;
    --site-font-family: Manrope, arial, helvetica neue, helvetica, sans-serif;
    font-family: var(--site-font-family);
}

.site-header h1 {
    --heading-font-size: 3rem;
    letter-spacing: 0.1em;
}

.site-header h2 {
    --heading-font-size: 2.25rem;
    letter-spacing: 0.1em;
}

.site-header h3 {
    --heading-font-size: 2rem;
    letter-spacing: 0.1em;
}

.site-header h4 {
    --heading-font-size: 1.5rem;
}

.site-header h5 {
    --heading-font-size: 1.25rem;
}

.site-header h6 {
    --heading-font-size: 1rem;
}

.site-header p {
    color: var(--p-color, inherit);
    font-family: var(--p-font-family, inherit);
    font-size: var(--p-font-size, inherit);
    font-weight: var(--p-font-weight, inherit);
    line-height: var(--p-line-height, inherit);
    margin-top: var(--p-margin-bottom, 0);
    margin-bottom: var(--p-margin-bottom, 1rem);
    padding: var(--p-padding, 0);
}

.site-header .sub-header {
    color: var(--sub-header-color, #000);
    font-size: var(--sub-header-fs, 0.875rem);
    font-weight: var(--sub-header-fw, 700);
    letter-spacing: 0.1em;
    text-align: var(--sub-header-ta);
    text-transform: uppercase;
    margin-bottom: var(--sub-header-mb);
}

@media (max-width: 767.98px) {
.site-header {
    --site-header-height: 3.75rem;
    --site-header-padding-x: 0.75rem;
}
}

@media (768px <=width < 1024px) {
.site-header {
    --site-header-height: 4.75rem;
    --site-header-padding-x: 1rem;
}
}

@media (max-width: 991.98px) {
.site-header {
    z-index: 1021;
}
}

@media (width >=1024px) {
.site-header {
    --site-header-height: 7rem;
    --site-header-padding-x: 2rem;
    --alt-header-container-align-items: stretch;
    --alt-header-container-flex-direction: column;
    --alt-header-container-gap: 0;
}
}

.site-header.solid {
    --site-header-bg: #fff;
    --site-header-logo-white-display: none;
    --site-header-logo-black-display: block;
}

.site-header.alt {
    --nav-list-flex-wrap: nowrap;
    --user-logged-in-flex-flow: row wrap;
}

.site-header .container-xxl,
.site-header .container-fluid {
    --bs-gutter-x: var(--site-header-padding-x);
    height: var(--site-header-height);
    min-height: 0;
    display: flex;
    flex: 1;
}

.site-header .container-xxl {
    align-items: center;
    gap: var(--site-header-gap);
}

.site-header .container-fluid {
    align-items: var(--alt-header-container-align-items, center);
    flex-direction: var(--alt-header-container-flex-direction, row);
    gap: var(--alt-header-container-gap, var(--site-header-gap));
}

.site-header .top {
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: var(--site-header-gap);
    justify-content: space-between;
}

.site-header-user {
    --bs-link-color: var(--hs-main);
    --bs-link-color-rgb: var(--hs-main-rgb);
    --bs-link-hover-color: var(--hs-main-dark);
    --bs-link-hover-color-rgb: var(--hs-main-dark-rgb);
    --user-padding-x: 1rem;
    --user-padding-y: .375rem;
    font-size: 0.875rem;
    font-weight: 700;
    display: var(--user-display, flex);
    flex: 0 1 auto;
    justify-content: flex-end;
    position: relative;
}

@media (width < 1024px) {
.site-header-user {
    --user-display: none;
}
}

.site-header-user:hover {
    --logged-in-background: #000;
    --logged-in-color: #fff;
    --dashboard-display: grid;
}

.site-header-user ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header-user a {
    text-decoration: none;
}

.site-header-user .user {
    font-size: 0.75rem;
}

.site-header-user .user.logged-out .btn {
    --bs-btn-color: var(--site-header-link-color, #fff);
    --bs-btn-bg: transparent;
    --bs-btn-line-height: 1.4;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 1.375rem;
    --bs-btn-hover-color: var(--site-header-link-hover-color, #F7F7F7);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: black;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: transparent;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: var(--user-padding-x);
    --bs-btn-padding-y: var(--user-padding-y);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-header-user .user.logged-out .btn p {
    line-height: var(--bs-btn-line-height);
    margin: 0;
}

.site-header-user .user.logged-in {
    background: var(--logged-in-background, var(--site-header-bg));
    border-radius: 1.5rem;
    color: var(--logged-in-color, var(--site-header-link-color, #fff));
    padding: var(--user-padding-y) var(--user-padding-x);
    display: flex;
    align-items: flex-end;
    column-gap: 0.5rem;
    flex-flow: var(--user-logged-in-flex-flow, column);
    row-gap: 0.25rem;
    cursor: pointer;
    transition: 300ms ease-in-out all;
}

.site-header-user .user.logged-in i {
    display: none;
}

.site-header-user .dashboard {
    --dashboard-triangle-size: 1.25rem;
    --dashboard-padding: 0.5rem;
    background: #fff;
    box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.7);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--dashboard-padding);
    width: 25rem;
    max-width: calc(100vw - 3 * var(--dashboard-padding));
    display: var(--dashboard-display, none);
    grid-template-columns: 1fr 14rem;
    position: absolute;
    top: calc(100% + var(--dashboard-triangle-size) * 0.5);
    right: calc(-1 * var(--dashboard-padding));
    z-index: 1022;
    transition: all 250ms ease-in-out;
    --ri-icon: "\f0d8";
}

.site-header-user .dashboard::before {
    display: var(--ri-display, inline-block);
    font-family: "Reliance Icons", "Font Awesome 6 Pro", "Font Awesome 6 Free"; /* mismos códigos (\f0d7 caret, \f007 user) */
    font-size: var(--ri-font-size);
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: var(--ri-icon);
}

.site-header-user .dashboard::before {
    color: #fff;
    font-size: var(--dashboard-triangle-size);
    text-align: right;
    padding-right: 1rem;
    width: 100%;
    position: absolute;
    top: calc(-0.5 * var(--dashboard-triangle-size));
    right: 0;
}

.site-header-user .dashboard ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-header-user .dashboard .activity {
    background: #F7F7F7;
    padding: var(--dashboard-padding);
}

.site-header-user .dashboard .title {
    border-bottom: 1px solid #D0D0D0;
}

.site-header-logo {
    height: 100%;
}

.site-header-logo a {
    height: 100%;
    display: flex;
    align-items: center;
}

.site-header-logo img {
    height: 100%;
    padding: var(--site-header-logo-padding-y, 0.5rem) 0;
    width: auto;
}

.site-header-logo img.white {
    display: var(--site-header-logo-white-display, none);
}

.site-header-logo img.black {
    display: var(--site-header-logo-black-display, block);
}

@media (max-width: 991.98px) {
.site-header-logo img {
    --site-header-logo-padding-y: 0;
}
}

.site-header-nav {
    background: transparent;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    z-index: 1021;
}

@media (width >=1024px) {
.site-header-nav {
    --nav-burger-display: none;
}
}

.site-header-nav .nav-button {
    background: transparent;
    border: none;
    display: var(--nav-burger-display);
}

.site-header-nav .nav-button.active .nav-burger {
    background-color: transparent;
}

.site-header-nav .nav-button.active .nav-burger::before,
.site-header-nav .nav-button.active .nav-burger::after {
    background-color: var(--nav-burger-color, #000);
}

.site-header-nav .nav-button.active .nav-burger::before {
    transform: translateY(var(--burger-margin)) rotate(45deg);
}

.site-header-nav .nav-button.active .nav-burger::after {
    transform: translateY(calc(-1 * (var(--burger-margin)))) rotate(-45deg);
}

.site-header-nav .nav-burger {
    --burger-height: 0.25rem;
    --burger-gutter: 0.5rem;
    --burger-width: 2rem;
    --burger-margin: 0.75rem;
    margin-top: var(--burger-margin);
    margin-bottom: var(--burger-margin);
    position: relative;
    user-select: none;
}

.site-header-nav .nav-burger,
.site-header-nav .nav-burger::before,
.site-header-nav .nav-burger::after {
    background-color: var(--nav-burger-color, #000);
    height: var(--burger-height);
    width: var(--burger-width);
    display: block;
    outline: 1px solid transparent;
    transition-property: background-color, transform;
    transition-duration: 0.3s;
}

.site-header-nav .nav-burger::before,
.site-header-nav .nav-burger::after {
    position: absolute;
    content: "";
}

.site-header-nav .nav-burger::before {
    top: -0.75rem;
}

.site-header-nav .nav-burger::after {
    top: 0.75rem;
}

.site-header-nav-list {
    --nav-list-top-link-color: #000;
    --nav-list-top-link-color-hover: #373737;
    --nav-list-dropdown-link-bg: #fff;
    --nav-list-dropdown-link-color: #000;
    --nav-list-dropdown-link-bg-hover: #000;
    --nav-list-dropdown-link-color-hover: #fff;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--nav-list-bg, transparent);
    border-bottom: var(--nav-list-border);
    color: var(--nav-list-top-link-color);
    width: 100%;
    display: var(--nav-list-display, flex);
    align-items: center;
    flex-direction: var(--nav-list-flex-direction);
    flex-wrap: var(--nav-list-flex-wrap, wrap);
    gap: 0;
    justify-content: flex-end;
    position: var(--nav-list-position, relative);
    top: var(--nav-list-top);
    left: 0;
}

@media (width < 1024px) {
.site-header-nav-list {
    --nav-list-bg: #fff;
    --nav-list-border: 1px solid #fff;
    --nav-list-display: none;
    --nav-list-flex-direction: column;
    --nav-list-position: absolute;
    --nav-list-top: 100%;
    --nav-list-item-width: 100%;
    --nav-list-top-link-bg-active: var(--hs-accent);
    --nav-list-top-link-color: #000;
    --nav-list-top-link-color-hover: var(--nav-list-top-link-color);
    --nav-list-top-link-color-active: #000;
    --nav-list-top-link-padding: 1rem 2rem;
    --nav-list-top-link-justify-content: space-between;
    --nav-list-dropdown-padding: 0.25rem 0.75rem 1rem;
    --nav-list-dropdown-position: static;
    --nav-list-dropdown-li-padding: 0.25rem 0.5rem;
    --nav-list-dropdown-link-padding: 0.5rem 0.75rem;
}
}

@media (width >=1024px) {
.site-header-nav-list {
    --nav-list-top-link-border: 4px solid transparent;
    --nav-list-top-link-border-hover: 4px solid var(--nav-list-top-link-border-color-hover, #373737);
    --nav-list-top-link-color: var(--nav-list-top-link-color-lg, #000);
    --nav-list-top-link-color-hover: var(--nav-list-top-link-color);
    --nav-list-top-link-color-active: var(--nav-list-top-link-color-active-lg, #000);
    --nav-list-top-link-padding: 0.75rem 1rem 0.5rem;
    --nav-list-dropdown-border: 1px solid #fff;
    --nav-list-dropdown-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    --nav-list-dropdown-position: absolute;
    --nav-list-dropdown-transform: translate(-50%, 0);
    --nav-list-dropdown-li-border: 1px solid #fff;
    --nav-list-dropdown-li-padding: 0.5rem;
    --nav-list-dropdown-link-padding: 0.75rem 1rem;
}
}

.site-header-nav-list.open {
    --nav-list-display: flex;
}

.site-header-nav-list a {
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 250ms ease-out;
    display: var(--nav-list-link-display, block);
}

.site-header-nav-list>li {
    width: var(--nav-list-item-width, auto);
}

.site-header-nav-list>li:last-of-type .dropdown {
    --nav-list-dropdown-transform: none;
    right: 0;
    left: auto;
}

.site-header-nav-list>li>a {
    border-bottom: var(--nav-list-top-link-border, none);
    color: var(--nav-list-top-link-color);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    padding: var(--nav-list-top-link-padding);
}

.site-header-nav-list>li>a:hover {
    border-bottom: var(--nav-list-top-link-border-hover, none);
    color: var(--nav-list-top-link-color-hover);
}

.site-header-nav-list .has-dropdown {
    position: relative;
}

.site-header-nav-list .has-dropdown:hover>a {
    background: var(--nav-list-top-link-bg-active);
    border-bottom: var(--nav-list-top-link-border-hover);
    color: var(--nav-list-top-link-color-active);
}

.site-header-nav-list .has-dropdown:hover>a::after {
    transform: rotate(180deg);
}

.site-header-nav-list .has-dropdown:hover .dropdown {
    display: block;
}

.site-header-nav-list .has-dropdown>a {
    --nav-list-link-display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: var(--nav-list-top-link-justify-content);
    --ri-icon: "\f0d7";
}

.site-header-nav-list .has-dropdown>a::after {
    display: var(--ri-display, inline-block);
    font-family: "Reliance Icons", "Font Awesome 6 Pro", "Font Awesome 6 Free"; /* mismos códigos (\f0d7 caret, \f007 user) */
    font-size: var(--ri-font-size);
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: var(--ri-icon);
}

.site-header-nav-list .has-dropdown>a::after {
    --ri-font-size: 0.875rem; /* el original traía una variable Sass sin compilar */
    transition: 150ms transform ease-in-out;
}

.site-header-nav-list .dropdown {
    background: #fff;
    border: var(--nav-list-dropdown-border, none);
    box-shadow: var(--nav-list-dropdown-box-shadow, none);
    white-space: nowrap;
    list-style: none;
    margin-bottom: 0;
    padding: var(--nav-list-dropdown-padding, 0);
    min-width: 10rem;
    display: none;
    position: var(--nav-list-dropdown-position);
    top: 100%;
    left: 50%;
    z-index: 1000;
    transform: var(--nav-list-dropdown-transform);
}

.site-header-nav-list .dropdown li {
    padding: var(--nav-list-dropdown-li-padding);
}

.site-header-nav-list .dropdown li:not(:last-of-type) {
    border-bottom: var(--nav-list-dropdown-li-border);
}

.site-header-nav-list .dropdown a {
    background: var(--nav-list-dropdown-link-bg);
    color: var(--nav-list-dropdown-link-color);
    font-size: 0.875rem;
    padding: var(--nav-list-dropdown-link-padding);
    width: 100%;
}

.site-header-nav-list .dropdown a:focus,
.site-header-nav-list .dropdown a:hover {
    background: var(--nav-list-dropdown-link-bg-hover);
    color: var(--nav-list-dropdown-link-color-hover);
}

/* Estados que pone header.js (.has-dropdown.show); espejo de las reglas :hover de arriba */
.site-header-nav-list .has-dropdown.show > a {
    background: var(--nav-list-top-link-bg-active);
    border-bottom: var(--nav-list-top-link-border-hover);
    color: var(--nav-list-top-link-color-active);
}

.site-header-nav-list .has-dropdown.show > a::after {
    transform: rotate(180deg);
}

.site-header-nav-list .has-dropdown.show > .dropdown {
    display: block;
}

/* ===================================================================
   4b. Fallback SIN JavaScript para los dropdowns
   -------------------------------------------------------------------
   En escritorio ya abren con :hover (reglas de arriba). En móvil, si
   header.js no carga, abren con foco/tap (los <li> tienen tabindex=0).
   =================================================================== */
@media (width < 1024px) {
    .site-header-nav .site-header-nav-list .has-dropdown:focus-within > .dropdown {
        display: block;
    }

    .site-header-nav .site-header-nav-list .has-dropdown:focus-within > a::after {
        transform: rotate(180deg);
    }
}

/* ---------- Footer ---------- */
.site-footer {
    --bs-link-color: #fff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #cccccc;
    --bs-link-hover-color-rgb: 204, 204, 204;
    background: #000;
    color: #fff;
    font-size: 0.875rem;
    margin-top: var(--footer-margin-top, 5rem);
    padding: var(--footer-padding, 2rem 1rem 5rem);
    position: relative;
    isolation: isolate;
}

.site-footer::before {
    background-image: url(https://content.mediastg.net/dyna_images/ImageLibrary/0/f/4/e/0f4e20d3-d00f-4c40-bb24-3a3b7a2585ad.png);
    background-position: top 2rem right 2rem;
    background-repeat: no-repeat;
    background-size: 18rem;
    content: "";
    inset: 0;
    opacity: 0.3;
    position: absolute;
    z-index: -1;
}

@media (max-width: 991.98px) {
.site-footer {
    --footer-margin-top: 3rem;
    --footer-padding: 1rem 0.5rem 3rem;
    --footer-social-align-items: center;
}

.site-footer .site-footer-logo {
    text-align: center;
}
}

.site-footer a {
    --bs-link-color: #fff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #cccccc;
    --bs-link-hover-color-rgb: 204, 204, 204;
    color: var(--bs-link-color);
    text-decoration: var(--footer-a-text-decoration, none);
}

.site-footer a:hover {
    --footer-a-text-decoration: underline;
    color: var(--bs-link-hover-color);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: var(--ul-display, flex);
    align-items: var(--ul-align-items);
    flex-flow: var(--ul-flex-flow, row wrap);
    gap: var(--ul-gap, 0.75rem);
    justify-content: var(--ul-justify-content, center);
}

.site-footer ul.social {
    --ul-align-items: var(--footer-social-align-items);
    height: 100%;
}

.site-footer ul.social i {
    font-size: 1.75rem;
}

.site-footer ul.social .text {
    display: none;
}

.site-footer ul.links {
    --ul-flex-flow: column;
    --ul-gap: 0;
    margin-bottom: 0.75rem;
}

.site-footer ul.links li:first-of-type {
    font-weight: 600;
    text-transform: uppercase;
}

.site-footer ul.offices {
    --ul-flex-flow: column;
    --ul-gap: 0;
    margin-bottom: 1rem;
}

.site-footer-logo img {
    height: auto;
    max-width: 25rem;
    width: 100%;
}

.site-footer-hsoa-logo img {
    height: auto;
    max-width: 15rem;
    width: 100%;
}

.site-footer-disclaimer ul {
    --ul-justify-content: flex-start;
    margin-bottom: 1rem;
}

.site-footer-disclaimer a {
    --footer-a-text-decoration: underline;
}

.site-footer-branding {
    font-size: 0.75rem;
}

.site-footer-branding ul {
    --ul-justify-content: flex-start;
}

.site-footer-branding a {
    --footer-a-text-decoration: underline;
}