/* ==========================================================================
   ALCO Inmobiliaria - Corporate Brand Identity & Palette
   Derived from official "alco logo.jpeg"
   ========================================================================== */

:root {
  /* ALCO Corporate Colors */
  --alco-blue: #0070BA;           /* Main corporate blue from ALCO logo */
  --alco-blue-dark: #072235;      /* Dark derived ALCO blue for backgrounds */
  --alco-blue-deep: #051A29;      /* Deepest midnight ALCO navy */
  --alco-lime: #82BD1F;           /* ALCO lime green for accents, active states & CTAs */
  --alco-lime-hover: #72a818;
  --alco-white: #FFFFFF;

  /* Theme System Overrides */
  --theme-color1: #82BD1F;        /* ALCO Lime Green */
  --theme-color1-rgb: 130, 189, 31;
  --theme-color1-text-color: #072235; /* Crisp dark navy text on lime for WCAG AAA contrast */

  --theme-color2: #072235;        /* Dark derived ALCO Blue */
  --theme-color2-rgb: 7, 34, 53;
  --theme-color2-text-color: #FFFFFF;

  --theme-color3: #0070BA;        /* ALCO Corporate Blue (replaces terracotta) */
  --theme-color3-rgb: 0, 112, 186;
  --theme-color3-text-color: #FFFFFF;

  --theme-color-dark: #051A29;
  --theme-light-background: #0B2D46;
  --body-bg: #072235;

  --link-color: var(--alco-lime);
  --link-hover-color: var(--alco-lime);
}

/* ALCO Preloader: its CSS is inline in each page <head> so it paints before
   the template stylesheets load (see the "ALCO preloader" <style> block). */

/* ==========================================================================
   ALCO Logo Integration & Sizing
   Preserves original aspect ratio and high resolution without distortion
   ========================================================================== */
.main-header .logo-box .logo img {
  height: 70px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.main-header .sticky-header .logo img {
  height: 58px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}

.mobile-menu .nav-logo img {
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

@media (max-width: 991.98px) {
  .main-header .logo-box .logo img {
    height: 58px;
    max-width: 210px;
  }
}

@media (max-width: 767.98px) {
  .main-header .logo-box .logo img,
  .main-header .sticky-header .logo img,
  .mobile-menu .nav-logo img {
    height: 50px;
    max-width: 180px;
  }
}

/* ==========================================================================
   Header & Navigation Refinements
   ========================================================================== */
.main-header.header-style-one {
  background: transparent;
}

.main-header .sticky-header.fixed-header {
  background-color: rgba(7, 34, 53, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
  color: var(--alco-lime) !important;
}

.main-header .header-phone_box:hover .info {
  color: var(--alco-lime) !important;
}

.main-header .header-phone_box .icon img {
  filter: brightness(0) invert(1);
}

/* Header & Hero Buttons */
.btn-style-one {
  background-color: var(--alco-lime) !important;
  color: var(--alco-blue-dark) !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-style-one:hover {
  background-color: var(--alco-blue) !important;
  color: #FFFFFF !important;
}

.btn-style-one .btn-arrow-right {
  color: var(--alco-blue-dark);
}

.btn-style-one:hover .btn-arrow-right {
  color: #FFFFFF;
}

.btn-style-two {
  background-color: var(--alco-blue) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-style-two:hover {
  background-color: var(--alco-lime) !important;
  color: var(--alco-blue-dark) !important;
  border-color: var(--alco-lime) !important;
}

/* ==========================================================================
   Hero Section Brand Polish
   ========================================================================== */
.banner-section-h1 .banner-slide-h1 .hero-eyebrow {
  display: inline-block;
  color: var(--alco-lime);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  pointer-events: auto;
}

.banner-section-h1 .banner-slide-h1 .banner-content .inner-content .title {
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.banner-section-h1 .hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.banner-section-h1 .play-now-one {
  background-color: var(--alco-lime) !important;
}

.banner-section-h1 .play-now-one i {
  color: var(--alco-blue-dark) !important;
}

.banner-section-h1 .play-now-one .ripple,
.banner-section-h1 .play-now-one .ripple:before,
.banner-section-h1 .play-now-one .ripple:after {
  box-shadow: 0 0 0 0 rgba(130, 189, 31, 0.6) !important;
}

/* ==========================================================================
   Hero Lower-Right Feature Card Fix (Non-Clipped & Fully Visible)
   ========================================================================== */

/* 1. Ensure the hero background container has sufficient height for content.
   Originally set on .banner-block-h1 .inner-box (the old template's hidden
   hover-swap background slider). That whole mechanism has been removed
   (see "Hero Background Video" below), so this same min-height, at the
   exact same breakpoints/values, now lives directly on .outer-box — the
   element that actually establishes the hero's visible height — so the
   hero's overall dimensions are unchanged. */
.banner-section-h1 .outer-box {
  min-height: 920px;
}

@media (max-width: 1199.98px) {
  .banner-section-h1 .outer-box {
    min-height: 880px;
  }
}

@media (max-width: 991.98px) {
  .banner-section-h1 .outer-box {
    min-height: 980px;
  }
}

@media (max-width: 575.98px) {
  .banner-section-h1 .outer-box {
    min-height: 1120px;
  }
}

/* 2. Optimize slide padding: eliminate excessive Homeify padding (was 247.5px top, 267px bottom) */
.banner-section-h1 .inner-container .banner-slide-h1 {
  padding-top: 175px !important;
  padding-bottom: 50px !important;
}

@media (max-width: 1599.98px) {
  .banner-section-h1 .inner-container .banner-slide-h1 {
    padding-top: 175px !important;
    padding-bottom: 50px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 991.98px) {
  .banner-section-h1 .inner-container .banner-slide-h1 {
    padding-top: 120px !important;
    padding-bottom: 360px !important;
  }
}

@media (max-width: 575.98px) {
  .banner-section-h1 .inner-container .banner-slide-h1 {
    padding-top: 110px !important;
    padding-bottom: 480px !important;
  }
}

/* 3. Position the card cleanly at the bottom right of the hero */
.banner-section-h1 .banner-info {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  display: flex !important;
  background-color: var(--alco-blue-dark) !important;
  border-left: 3px solid var(--alco-lime) !important;
  z-index: 10 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
}

@media (max-width: 1599.98px) {
  .banner-section-h1 .banner-info {
    right: 20px !important;
  }
}

@media (max-width: 575.98px) {
  .banner-section-h1 .banner-info {
    flex-direction: column !important;
    right: 15px !important;
    left: 15px !important;
    width: calc(100% - 30px) !important;
  }
}

/* 4. Internal spacing & typography of the card: all content (number, title, desc, icon) fits comfortably */
.banner-section-h1 .banner-info .content-box {
  padding: 28px 32px 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 240px !important;
}

.banner-section-h1 .banner-info .content-box .number {
  font-size: 28px !important;
  line-height: 1 !important;
  color: var(--alco-lime) !important;
  margin-bottom: 12px !important;
  font-weight: 700 !important;
}

.banner-section-h1 .banner-info .content-box .title {
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
  max-width: 220px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.banner-section-h1 .banner-info .content-box .card-desc {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  max-width: 220px !important;
}

.banner-section-h1 .banner-info .content-box .icon {
  margin-top: auto !important;
  line-height: 1 !important;
}

.banner-section-h1 .banner-info .content-box .icon img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  transition: transform 300ms ease !important;
}

.banner-section-h1 .banner-info:hover .content-box .icon img {
  transform: translateX(5px) !important;
}

.banner-section-h1 .banner-info .image {
  display: flex !important;
  align-items: stretch !important;
}

.banner-section-h1 .banner-info .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* The base theme's footer logo had no height rule, relying on the small
   Homeify wordmark's own natural size. The ALCO emblem is a much taller/
   squarer mark, so without a cap it would render far larger than the
   original logo footprint. This mirrors the same height treatment already
   used for the header logo (see .main-header .logo-box .logo img above). */
.main-footer .footer-widget .logo img {
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* The base theme's footer contact list was built for exactly 2 rows and
   only added spacing after the first one. It now holds 4 rows (WhatsApp,
   Teléfono, Correo electrónico, Guanajuato), so this applies that same
   existing spacing value after every row but the last, keeping them evenly
   spaced instead of the later rows crowding together. */
.footer-style-one .contact-list .inner .list-info:not(:last-child) {
  margin-bottom: 26px;
}

/* ==========================================================================
   Featured Properties Carousel
   ========================================================================== */
/* The base theme applies object-fit: cover inside a fixed-height crop box
   (.properties-block .inner-block .image { height: 440px }), which crops
   whichever part of each photo doesn't match the card's landscape shape.
   Per instruction, these 6 real ALCO property photos must display in full,
   uncropped and unzoomed, so this switches to object-fit: contain instead.
   The card's fixed height/width and the carousel layout are unchanged —
   only how the image fits inside that box changes. Because these source
   photos are square/portrait and the card is landscape, contain leaves
   empty space on the sides (or top/bottom); that space is filled with the
   same dark navy already used by this card's own content panel just below
   it (#051A25), so it reads as intentional rather than a blank gap. */
.properties-section-h1 .properties-block .inner-block .image {
  background-color: #051A25;
}
.properties-section-h1 .properties-block .inner-block .image img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
/* The active-slide zoom effect (transform: scale(1.2)) was designed for a
   cropped "cover" image, where zooming just reveals more of the already-
   cropped fill. With "contain", the whole image is already visible at its
   largest non-cropped size, so scaling it up would push its edges outside
   the box and crop it again — which the "do not zoom" instruction rules
   out. This cancels that transform for this carousel only. */
.properties-section-h1 .properties-block.swiper-slide-active .inner-block .image img {
  -webkit-transform: none;
          transform: none;
}
/* The carousel shows the marketing flyers, which are retouched (and, for
   Acámbaro, include a restoration mock-up). This label states that on the
   image so they are not read as photos of the current condition. */
.properties-section-h1 .properties-block .inner-block .image {
  position: relative;
}
.properties-section-h1 .properties-block .alco-flyer-note {
  background-color: rgba(5, 26, 37, 0.88);
  border-left: 3px solid var(--alco-lime);
  border-radius: 4px;
  bottom: 12px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  left: 12px;
  line-height: 1.35;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* ==========================================================================
   Strategic Locations (5 cards)
   Bootstrap row-cols on the row: 5 per row from 1200px, 3 + 2 below that,
   2 + 2 + 1 on tablets, 1 per row on phones; incomplete rows are centred.
   ========================================================================== */
.alco-locations > .feature-block-h1 {
  margin-bottom: 30px;
}
@media (min-width: 1200px) {
  .alco-locations > .feature-block-h1 {
    margin-bottom: 0;
  }
}
/* Long names ("SAN MIGUEL DE ALLENDE") wrap onto two balanced lines in the
   narrow 5-column layout instead of overflowing or being cut. */
.alco-locations .feature-block-h1 .inner-block .content-box .title {
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* Footer "Créditos de imágenes": discreet disclosure with the attribution
   required by third-party image licences (no JavaScript, keyboard accessible). */
.main-footer .alco-credits {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.5;
  padding: 0 0 18px;
  text-align: center;
}
.main-footer .alco-credits summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.main-footer .alco-credits summary::-webkit-details-marker {
  display: none;
}
.main-footer .alco-credits summary:hover,
.main-footer .alco-credits summary:focus-visible {
  color: var(--alco-lime);
}
.main-footer .alco-credits p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.6;
  margin: 8px auto 0;
  max-width: 640px;
}
.main-footer .alco-credits a {
  color: inherit;
  text-decoration: underline;
}
.main-footer .alco-credits a:hover {
  color: var(--alco-lime);
}

/* ==========================================================================
   Photo Gallery (6-image strip)
   ========================================================================== */
/* The base theme uses object-fit: cover here. The 6 real ALCO photos were
   each pre-sized to match their own slot's exact dimensions, so cover and
   contain look identical for these specific files in practice — but this
   switches to contain anyway per instruction, so the full photo is always
   guaranteed to stay visible even if an image is swapped later for one with
   a different aspect ratio. Any resulting empty space is filled with the
   site's dark navy so it reads as intentional. */
.gellary-section-h1 .outer-box .inner-box .image {
  background-color: #051A25;
}
.gellary-section-h1 .outer-box .inner-box .image img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
/* The base theme's hover zoom (transform: scale(1.1)) would enlarge the
   image past its box and crop it — disabled here per the "do not zoom"
   instruction. */
.gellary-section-h1 .outer-box .inner-box .image:hover img {
  -webkit-transform: none;
          transform: none;
}

/* ==========================================================================
   Contact/Form Section — fix overlap after moving it to the end of the page
   ========================================================================== */
/* The base theme sets .contact-section-h1 { margin-top: -250px; } so this
   card visually floats up and overlaps the section above it. That was
   calibrated for its original position right after the testimonials
   section, which has enough trailing empty space to absorb the pull-up.
   Now that this section sits at the end of the page, right after the
   statistics/funfact section, that same -250px would pull it up over the
   stat counters instead. This cancels the negative margin (immediately
   after .funfact-section-layout1, this section's new previous sibling now
   that the Featured Properties section between them has been removed) and
   replaces it with a positive gap instead, so the two photo sections read
   as visually separate blocks rather than two images stacked flush against
   each other — the gap is transparent, so the page's own navy
   (--body-bg) shows through it. The section's own existing
   padding-bottom (120px, unchanged, set in style.css) already provides
   equivalent navy breathing room before the footer below. */
.funfact-section-layout1 + .contact-section-h1 {
  margin-top: 90px;
}

/* Turn the contact card itself into a contained, editorial "card" (capped
   width, centered, subtly rounded) instead of a full-bleed photo strip, so
   it doesn't read as a second full-width banner glued under the stats
   section's photo. object-fit: cover (set in style.css) still fills this
   smaller box without stretching; overflow: hidden just clips the photo's
   corners to match the new border-radius. */
.contact-block-h1 .inner-block {
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  overflow: hidden;
}

/* More vertical breathing room inside the card around the text/form
   content (base theme used a flat 20px on all sides). Kept to the
   original tighter 20px below 576px so the card doesn't eat the whole
   screen on small phones. */
@media (min-width: 576px) {
  .contact-block-h1 .inner-block {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Requested navy-tinted overlay on the photo, replacing the base theme's
   diagonal black gradient with a left-to-right ALCO-navy one — the photo
   stays visible but reads as integrated with the site's palette rather
   than a plain stock photo. */
.contact-block-h1 .inner-block .bg-image:before {
  background: linear-gradient(90deg, rgba(4, 25, 38, 0.88) 0%, rgba(4, 25, 38, 0.65) 45%, rgba(4, 25, 38, 0.35) 100%);
}

/* A more solid, less blurred form panel so it reads as a deliberate card
   over the photo rather than a faint tint (was rgba(5,26,37,0.4) with a
   heavy 20px blur). */
.contact-block-h1 .inner-block .form-column .inner-column {
  background: rgba(8, 40, 58, 0.82);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* ==========================================================================
   ALCO Video Modal (local corporate video, triggered from the existing
   circular play button in the video-section-layout1 section). The trigger
   button, rotating text, headline and section layout are untouched — this
   only styles the overlay/dialog that the button now opens.
   ========================================================================== */
.alco-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.alco-video-modal.is-open {
  display: flex;
}

.alco-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 26, 37, 0.92);
}

.alco-video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  z-index: 1;
}

.alco-video-modal__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.alco-video-modal__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

.alco-video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--alco-lime);
  color: var(--alco-blue-dark);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.alco-video-modal__close:hover {
  background-color: var(--alco-blue);
  color: #FFFFFF;
  transform: scale(1.08);
}

body.alco-video-modal-open {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .alco-video-modal {
    padding: 12px;
  }

  .alco-video-modal__close {
    top: -42px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Video Section Background Photo (alberca alco.jpg)
   ========================================================================== */
/* The section's background photo sits in an <img> inside the existing
   .bg-image.bg container (this is the base theme's own mechanism for a
   full-bleed cover background: .bg already gives it position:absolute,
   100%/100% sizing and background-size:cover-equivalent framing, and
   .video-section-layout1 .bg-image img already applies object-fit: cover,
   so the real pool photo fills the section edge-to-edge without stretching,
   exactly like the placeholder it replaced. This same <img> is also what
   js/custom-gsap.js's tm-gsap-img-parallax scroll effect animates, so
   keeping it (rather than switching to a plain CSS background-image)
   preserves that existing parallax animation. This block only adds a
   readability tint on top of the new, brighter photo — the placeholder it
   replaced was flat gray and needed no tint, but white headline/nav text
   needs extra contrast over a bright sky/pool/lawn photo. */
.video-section-layout1 .bg-image.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 26, 37, 0.78) 0%, rgba(5, 26, 37, 0.55) 45%, rgba(5, 26, 37, 0.72) 100%);
  pointer-events: none;
}

/* ==========================================================================
   Hero Feature Card Photos (01/02/03 — real ALCO photos replacing the
   generic 300x270 placeholders)
   ========================================================================== */
/* Card 01 (Terrenos en Villagrán) and card 03 (Ubicación estratégica) are
   landscape-ish source photos whose aspect ratio already closely matches
   the card's own box, so the existing cover + default center/center
   positioning (set above under "Hero Lower-Right Feature Card Fix") frames
   them correctly with no important content cropped.
   Card 02 (Opciones de financiamiento) uses a tall portrait photo (couple
   + house sketch, mostly empty sky above them). Covering the landscape
   card box with a plain center crop would cut evenly off the top AND
   bottom, risking clipping the couple's feet. Anchoring to the bottom
   instead takes all of the necessary crop out of the empty sky at the top,
   keeping the couple and house sketch fully visible. */
.banner-section-h1 .banner-info .image img.hero-img-planes {
  object-position: center bottom !important;
}

/* The card's image box had no explicit desktop width/height in the base
   theme — it was only ever sized by the placeholder file's own intrinsic
   300x270 pixel dimensions. The real ALCO photos are much higher
   resolution, so without this rule the box balloons to their native size
   instead of staying at the original card's 300x270 footprint. This
   restores that exact original size (desktop/tablet only — the existing
   @media (max-width: 575.98px) rule in style.css already makes the image
   full-width on mobile and continues to take precedence there unchanged). */
@media (min-width: 576px) {
  .banner-section-h1 .banner-info .image {
    width: 300px;
    height: 270px;
  }
}

/* ==========================================================================
   Statistics / Funfact Section Fixes
   ========================================================================== */
/* Bug 1 — oversized transparent watermark. The base theme renders the
   section's own "Propiedad Única" heading (.funfact-titl-box .title) as a
   giant (clamp 120px-220px), 7%-opacity, absolutely-positioned decorative
   background heading (see style.css: font-size: clamp(120px, 13.75vw,
   220px); opacity: 0.07; position: absolute; z-index: -1). It isn't part
   of the alconumeros photo — it's this real heading element, which barely
   showed against the old flat-gray placeholder but reads as a visible
   watermark against the new photo. Hiding only this element (scoped to
   this exact section) removes it without touching the photo or adding any
   overlay. */
.funfact-section-layout1 .funfact-titl-box {
  display: none;
}

/* Bug 2 — the "+" wrapping onto its own line for 3-digit values (500+,
   200+). The number and "+" are two separate inline boxes
   (<span class="count-text">...</span>+) with no white-space rule, so at
   this heading's 80px font-size plus this column's side padding, the
   browser can break the line between them once the value gets wider than
   2 digits. Scoped to this section only, so other pages reusing the same
   .funfact-block-h1 component elsewhere are unaffected. */
.funfact-section-layout1 .funfact-block-h1 .inner-block .count-box .title {
  white-space: nowrap;
}

/* ==========================================================================
   Hero Background Video (shared across all 3 slides)
   ========================================================================== */
/* Replaces the old template's hidden hover-swap background mechanism: five
   invisible .banner-block-h1 slides inside a .service-two-slider swiper
   that did nothing visible on their own — they only ever changed
   .outer-box's CSS background-image on mouseenter (see script.js), so in
   practice visitors just saw one static photo the whole time. That entire
   block has been removed from index.html; .outer-box now holds a single
   <video class="hero-video-bg"> instead, shared behind all three text
   slides rather than swapped per slide.
   .outer-box already provides position:relative + overflow:hidden (set in
   style.css), so the video only needs to fill that box. Its existing
   .outer-box:before dark gradient (also untouched, still in style.css)
   already paints on top of normal in-flow content like this video, so the
   same legibility overlay that covered the old photo now covers the video
   automatically — no new overlay rule needed. pointer-events: none is a
   defensive, explicit guarantee that the video is purely visual (it's not
   clickable in practice anyway, since the content slider above it is
   always the topmost hit-tested layer). */
.banner-section-h1 .outer-box .hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background-color: var(--alco-blue-dark);
}

/* Fix to the note above: because the video is position:absolute, it paints
   ABOVE the base theme's .outer-box:before overlay (positioned elements
   paint in DOM order, and :before comes first), so the video was showing
   undarkened and the white headline lost contrast. isolation:isolate gives
   .outer-box its own stacking context so the overlay can safely sit at
   z-index:1 above the video (z-index:0) without competing with the content
   slider, which still paints on top (it comes later in the DOM). The navy
   background-color fills the box if a frame isn't painted yet, instead of
   showing white. */
.banner-section-h1 .outer-box {
  isolation: isolate;
  background-color: var(--alco-blue-dark);
}
.banner-section-h1 .outer-box .hero-video-bg {
  z-index: 0;
}
.banner-section-h1 .outer-box:before {
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   Scroll-to-top button, moved away from the GoHighLevel chat widget
   ========================================================================== */
/* The GHL chat widget owns the bottom-right corner: a 58px launcher 20px from
   the right and bottom edges, plus a greeting box (a transparent 301x246px
   element that captures clicks over its whole area, not just the visible
   bubble) while the welcome message is open. The base theme put this button
   at right:50px / bottom:50px, directly on top of the launcher; placing it
   merely beside the launcher still falls inside the greeting box, where it
   cannot be clicked. So it moves to the bottom-left corner, 20px from the
   left edge, with its centre level with the launcher's centre
   (bottom = 20px + 29px - 22px = 27px). The base show/hide fade and slide
   animation is unchanged. */
.back-to-top-wrapper {
  right: auto;
  left: 20px;
}
.back-to-top-wrapper.back-to-top-btn-show {
  bottom: 27px;
}
/* On phones narrower than 390px the 301px-wide greeting box reaches past the
   left-corner button (e.g. box starts at x=39 on a 360px screen, button ends
   at x=64), so part of the button would not receive clicks while the greeting
   is open. There the button sits just above the greeting box (box top is
   266px from the bottom edge) instead; hidden/shown positions keep the same
   50px slide as the base theme. */
@media (max-width: 389.98px) {
  .back-to-top-wrapper {
    bottom: 240px;
  }
  .back-to-top-wrapper.back-to-top-btn-show {
    bottom: 290px;
  }
}

/* ==========================================================================
   Nuestro equipo (index.html #equipo)
   Homeify's original team component (.mountain-team / .mountain-team-block
   from page-team.html, styles in style.css) on ALCO navy, with the template's
   animated architectural drawing (index-2.html .anim-icon.bounce-y).
   Kept from the original: portrait proportion 377:470, the blur/stretch photo
   swap and the pill button that drops in on hover, AOS fade-up entrances.
   Adapted: name/role always visible under the photo (the original only shows
   the name on hover, invisible on touch screens), button reachable by
   keyboard and shown on touch devices, Pedro wider and higher (editorial
   stagger), Pedro first on phones, reduced-motion support.
   ========================================================================== */
/* Sits between the video block and the FAQ (which brings its own 120px top
   padding), so the bottom padding stays small to keep the spacing even. */
.alco-team {
  background-color: var(--alco-blue-dark);
  overflow: hidden;
  padding: 120px 0 10px;
  position: relative;
}
.alco-team .anim-icon {
  bottom: 0;
  left: 0;
  opacity: 0.16;
  pointer-events: none;
  position: absolute;
}
.alco-team .anim-icon--right {
  left: auto;
  right: 0;
}
.alco-team .anim-icon--right img {
  transform: scaleX(-1);
}
.alco-team .team-wrapper .sec-title {
  margin-bottom: 64px;
}
.alco-team__eyebrow {
  color: var(--alco-lime);
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.alco-team .sec-title .title {
  color: #FFFFFF;
}
.alco-team .sec-title .text {
  color: rgba(255, 255, 255, 0.78);
  margin: 18px auto 0;
  max-width: 560px;
}

/* Photo frame: same 377:470 proportion as the original team portraits */
.alco-team .alco-team__photo {
  aspect-ratio: 377 / 470;
  background-color: var(--alco-blue-deep);
  margin-top: 0;
}
.alco-team .alco-team__photo img {
  display: block;
  object-fit: cover;
  object-position: center top;
}
/* Navy fade so the drop-in button always reads over the photo */
.alco-team .alco-team__photo::after {
  background: linear-gradient(180deg, rgba(5, 26, 41, 0) 50%, rgba(5, 26, 41, 0.8) 100%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.4s ease;
  z-index: 1;
}
.alco-team .alco-team__photo:hover::after,
.alco-team .alco-team__photo:focus-within::after {
  opacity: 1;
}
/* The original hides the button with visibility:hidden, which also removes it
   from the keyboard tab order. Here it stays visible-but-transparent, parked
   above the clipped photo (top:-100px), so Tab can reach it and reveal it. */
.alco-team .mountain-team-block .theme-btn-main {
  visibility: visible;
  white-space: nowrap;
  z-index: 2;
}
.alco-team .mountain-team-block .theme-btn-main .icon,
.alco-team .mountain-team-block .theme-btn-main .text {
  background-color: var(--alco-lime);
  color: var(--alco-blue-dark);
}
.alco-team .mountain-team-block .theme-btn-main:hover .icon,
.alco-team .mountain-team-block .theme-btn-main:hover .text {
  background-color: #FFFFFF;
  color: var(--alco-blue-dark);
}
/* Keyboard users get the same reveal as the hover state */
.alco-team .mountain-team-block:focus-within .theme-btn-main {
  opacity: 1;
  top: 50%;
  visibility: visible;
}
.alco-team .mountain-team-block .theme-btn-main:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
}
/* Touch screens cannot hover: keep the button visible at the bottom of the photo */
@media (hover: none) {
  .alco-team .mountain-team-block .theme-btn-main {
    bottom: 22px;
    opacity: 1;
    top: auto;
    transform: translateX(-50%);
    visibility: visible;
  }
  .alco-team .alco-team__photo::after {
    opacity: 1;
  }
}

/* Discreet placeholder for portraits not received yet (not a fictitious person) */
.alco-team__pending {
  align-items: center;
  background: repeating-linear-gradient(135deg, #0B2D46 0 14px, #0D3350 14px 28px);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 12px;
  inset: 0;
  justify-content: center;
  letter-spacing: 2px;
  position: absolute;
  text-transform: uppercase;
}
.alco-team__pending::before {
  background: rgba(255, 255, 255, 0.35);
  content: "";
  height: 1px;
  width: 54px;
}

/* Always-visible caption */
.alco-team__caption {
  margin-top: 22px;
  text-align: center;
}
.alco-team__caption::after {
  background: var(--alco-lime);
  content: "";
  display: block;
  height: 2px;
  margin: 14px auto 0;
  width: 56px;
}
.alco-team .alco-team__name {
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
}
.alco-team__member--lead .alco-team__name {
  font-size: 34px;
}
.alco-team__role {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  margin-top: 6px;
}

/* Desktop: Pedro wider and higher, advisers lower (editorial stagger) */
.alco-team__row {
  --bs-gutter-x: 40px;
  align-items: flex-start;
}
.alco-team__member {
  margin-bottom: 40px;
}
.alco-team__member--side {
  margin-top: 130px;
}
@media (max-width: 1199.98px) {
  .alco-team__member--side {
    margin-top: 90px;
  }
}
/* Tablet and phone: Pedro first, advisers below */
@media (max-width: 991.98px) {
  .alco-team {
    padding: 80px 0 0;
  }
  .alco-team__member--lead {
    order: -1;
  }
  .alco-team__member--side {
    margin-top: 0;
  }
  .alco-team .anim-icon {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .alco-team__member--lead .alco-team__name {
    font-size: 30px;
  }
}

/* Reduced motion: no entrance animation, no photo swap, no floating drawing */
@media (prefers-reduced-motion: reduce) {
  .alco-team [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .alco-team .anim-icon {
    animation: none;
  }
  .alco-team .mountain-team-block img,
  .alco-team .mountain-team-block .theme-btn-main,
  .alco-team .alco-team__photo::after {
    transition: none;
  }
  .alco-team .mountain-team-block:hover img:nth-child(1) {
    filter: none;
    opacity: 0;
    transform: none;
  }
  .alco-team .mountain-team-block:hover img:nth-child(2) {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

/* Contact info boxes: the whole box (icon + label) is the link target. */
.contact-block-h1 .info-box .alco-info-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.contact-block-h1 .info-box .alco-info-link:focus-visible {
  outline: none;
}
.contact-block-h1 .info-box:has(.alco-info-link:focus-visible) {
  outline: 2px solid var(--theme-color1);
  outline-offset: 6px;
  border-radius: 10px;
}

/* Footer contact rows: the whole row (icon + label) is the link target. */
.footer-style-one .contact-list .inner .list-info {
  position: relative;
}
.footer-style-one .contact-list .list-info .alco-info-link {
  color: inherit;
}
.footer-style-one .contact-list .list-info .alco-info-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.footer-style-one .contact-list .list-info:hover .icon {
  border-color: var(--theme-color-white);
}
.footer-style-one .contact-list .list-info:hover .alco-info-link,
.footer-style-one .contact-list .list-info .alco-info-link:focus-visible {
  color: var(--theme-color-white);
}

/* Footer column dividers. The template drew them as ::before lines offset a
   fixed distance from each widget (-84px / -75px), so with ALCO's longer
   labels they landed inside the previous column and crossed its text. Each
   divider now sits exactly on the boundary between columns (same as the
   template: desktop only, full height of the widgets area). */
.footer-style-one .links-widget:before,
.footer-style-one .info-widget:before {
  display: none;
}
@media (min-width: 1200px) {
  .footer-style-one .widgets-section .footer-column {
    position: relative;
  }
  .footer-style-one .widgets-section .footer-column + .footer-column::before {
    content: "";
    position: absolute;
    left: 0;
    top: -200px;
    bottom: -400px;
    width: 1px;
    background-color: rgba(var(--theme-color-white-rgb), 0.1);
    pointer-events: none;
  }
  /* Same indent as the Explora column (ms-xl-4 = 24px) so the contact icons
     do not sit against the divider. */
  .footer-style-one .widgets-section .info-widget.style-three {
    margin-left: 24px;
  }
  /* Keep the first column's paragraph clear of the first divider. */
  .footer-style-one .widgets-section .footer-column:first-child .widget-content .text {
    padding-right: 28px;
  }
}

/* Contact form: privacy consent notice right above the submit button. */
.contact-block-h1 .form-column .alco-lead-consent {
  margin: 4px 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.contact-block-h1 .form-column .alco-lead-consent a {
  color: var(--alco-lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-block-h1 .form-column .alco-lead-consent a:hover,
.contact-block-h1 .form-column .alco-lead-consent a:focus-visible {
  color: #FFFFFF;
}