/* HDL Hospital de Lentes - Static Mirror CSS Fixes */

/* Fix elementor-invisible elements that are stuck hidden */
.elementor-invisible { visibility: visible !important; animation: none !important; opacity: 1 !important; }

/* Eicons font (Elementor icons) */
@font-face {
    font-family: eicons;
    src: url(../../../plugins/elementor/assets/lib/eicons/fonts/eicons.woff2) format("woff2"),
         url(../../../plugins/elementor/assets/lib/eicons/fonts/eicons.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}

/* Auxin-front icons (Phlox Pro theme) */
@font-face {
    font-family: "auxin-front";
    src: url(../../../themes/phlox-pro/css/fonts/fontastic/auxicon/auxin-front.woff) format("woff"),
         url(../../../themes/phlox-pro/css/fonts/fontastic/auxicon/auxin-front.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* ── Phlox scroll-reveal elements stuck invisible ───────────────────────────
   The theme ships `.aux-appear-watch-animation { opacity: 0 }` and
   `.aux-appear-watch { opacity: 0 }`, and relies on the Phlox front-end
   script to add `.aux-animation-off` / `.aux-appeared` once an element
   scrolls into view. That script does not run in this static mirror, so
   roughly a third of every page stayed at opacity 0 — blank bands with the
   content present but invisible. The `.elementor-invisible` rule above only
   covered Elementor's own equivalent class, not the theme's.
   Reveal them unconditionally; there is no scroll observer to do it. */
.aux-appear-watch-animation,
.aux-appear-watch,
.aux-appear-watch.aux-disappeared,
[class*="aux-fade-in"] {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

/* ── No working navigation: desktop menu hidden, burger inert ──────────────
   <body> keeps the class `aux-dom-unready`; the Phlox script that swaps it
   for `aux-dom-ready` never runs in this static mirror. The theme hides the
   whole menu while unready:
       .aux-dom-unready .aux-nav-menu-element .aux-master-menu{display:none!important}
   leaving only the burger — which opens its panel through that same missing
   script, so nothing in the header was clickable. Show the real menu and
   drop the dead burger. */
.aux-nav-menu-element .aux-master-menu,
.aux-dom-unready .aux-nav-menu-element .aux-master-menu {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}
.aux-nav-menu-element .aux-master-menu > .aux-menu-item,
.aux-nav-menu-element .aux-master-menu > .menu-item {
  width: auto !important;
  clear: none !important;
  float: none !important;
}
.aux-elementor-header-menu .aux-burger-box { display: none !important; }

/* ── Static hero (replaces the MasterSlider widget) ─────────────────────────
   MasterSlider's CSS and JS are not part of this static site, so the slider
   never initialised: its four slides stacked to ~5,600px of blank page and
   its images stayed on blank.gif (the plugin's JS does the data-src swap).
   The markup is now a plain two-column hero carrying slide 1's content.
   Type values are the theme's own presets: msp-preset-9 (eyebrow),
   msp-preset-5 (title, .highlight #00d9a6), msp-preset-4 (body),
   msp-preset-6/btn-127 (button), msp-preset-8 (social). */
.hdl-hero { width: 100%; overflow: hidden; background: #fff; }
.hdl-hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1920px;
  min-height: 600px;
  margin: 0 auto;
  padding: 80px 0 80px 152px;   /* 152px = the slider's own text offset */
}
.hdl-hero__content { flex: 0 1 680px; max-width: 680px; }
.hdl-hero__media   { flex: 1 1 500px; min-width: 0; }
.hdl-hero__media img { display: block; width: 100%; height: auto; }

.hdl-hero__eyebrow {
  margin: 0 0 18px;
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 8px; color: #242f68;
}
.hdl-hero .hdl-hero__title {   /* beats .entry-content h1 { font-size: 2.7em } */
  margin: 0;
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 81px; line-height: 1.14; letter-spacing: -3px; color: #202020;
}
.hdl-hero .hdl-hero__title .highlight { color: #00d9a6; }
.hdl-hero__rule { display: block; width: 61px; height: 5px; margin: 28px 0; }
.hdl-hero__text {
  max-width: 650px; margin: 0 0 36px;
  font-family: "Work Sans", sans-serif; font-weight: 300;
  font-size: 24px; line-height: 30px; color: #393939;
}
.hdl-hero__btn {
  display: inline-block; padding: 22px 45px;
  font-family: "Montserrat", sans-serif; font-weight: 500;
  font-size: 20px; line-height: 16px; color: #fff;
  background: #0c0c0c; text-decoration: none;
  transition: background 0.2s;
}
.hdl-hero__btn:hover, .hdl-hero__btn:focus { background: #333; color: #fff; }
.hdl-hero__social {
  margin: 32px 0 0;
  font-family: "Quicksand", sans-serif; font-weight: 700;
  font-size: 17px; line-height: 26px; color: #202020;
}
.hdl-hero__social a { color: #202020; text-decoration: none; }
.hdl-hero__social a:hover { color: #00d9a6; }
.hdl-hero__social span { margin: 0 8px; }

@media (max-width: 1400px) {
  .hdl-hero__inner { padding-left: 60px; gap: 32px; }
  .hdl-hero .hdl-hero__title { font-size: 60px; letter-spacing: -2px; }
}
@media (max-width: 1024px) {
  .hdl-hero__inner {
    flex-direction: column; align-items: flex-start;
    gap: 36px; min-height: 0; padding: 56px 24px;
  }
  .hdl-hero__content { flex: 1 1 auto; max-width: none; }
  .hdl-hero__media { flex: 1 1 auto; width: 100%; }
  .hdl-hero .hdl-hero__title { font-size: 44px; letter-spacing: -1px; }
  .hdl-hero__text { font-size: 19px; line-height: 27px; }
}
@media (max-width: 600px) {
  .hdl-hero__inner { padding: 40px 20px; }
  .hdl-hero .hdl-hero__title { font-size: 34px; }
  .hdl-hero__eyebrow { font-size: 14px; letter-spacing: 5px; }
  .hdl-hero__btn { display: block; padding: 18px 24px; font-size: 17px; text-align: center; }
}

/* The old slider carried `elementor-hidden-tablet`/`-phone`, so phones and
   tablets got no hero at all; those classes are gone from the markup now that
   the hero is an ordinary responsive block. */

/* Narrow screens: let the restored menu wrap instead of running off the edge. */
@media (max-width: 1100px) {
  /* must repeat the `.aux-dom-unready` prefix: the rule above uses it, and a
     media query adds no specificity of its own. */
  .aux-nav-menu-element .aux-master-menu,
  .aux-dom-unready .aux-nav-menu-element .aux-master-menu {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }
}