/* Final mobile/readability polish loaded last */
:root {
  --crudo-accent: #FF2A0E;
}

/* Front hero: keep text readable from the first image frame */
.front-reference .front-hero,
body:not(.experimental-page) .front-hero {
  color: #fff;
}

.front-reference .hero-reel::before,
body:not(.experimental-page) .hero-reel::before {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 72% 46%, rgba(0,0,0,.06), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.08) 42%, rgba(0,0,0,.66) 100%),
    linear-gradient(0deg, rgba(0,0,0,.60), rgba(0,0,0,.18) 44%, rgba(0,0,0,.28)) !important;
}

.front-reference .hero-reel img,
body:not(.experimental-page) .hero-reel img {
  filter: brightness(.62) saturate(.92) contrast(1.04) !important;
  transition: opacity 1.35s cubic-bezier(.16, 1, .3, 1), transform 12s ease, filter 1.35s cubic-bezier(.16, 1, .3, 1) !important;
}

.front-reference .front-hero .kicker,
.front-reference .front-hero .eyebrow,
.front-reference .front-hero p,
body:not(.experimental-page) .front-hero .kicker,
body:not(.experimental-page) .front-hero .eyebrow,
body:not(.experimental-page) .front-hero p {
  color: rgba(255,255,255,.84) !important;
  text-shadow: 0 12px 34px rgba(0,0,0,.46) !important;
}

.front-reference .front-hero h1,
body:not(.experimental-page) .front-hero h1 {
  color: #fff !important;
  text-shadow: 0 18px 48px rgba(0,0,0,.42) !important;
}

/* Map should stay as location image/frame, with caption below */
.about-map iframe {
  pointer-events: none !important;
}

.about-map i {
  display: none !important;
}

.about-map figcaption {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 14px) !important;
  z-index: 2 !important;
  color: #151516 !important;
  text-shadow: none !important;
}

.about-map {
  margin-bottom: clamp(72px, 9vw, 118px) !important;
}

/* Mobile nav: visible like desktop, no washed-out logo */
@media (max-width: 850px) {
  body:not(.experimental-page) .site-header,
  body:not(.experimental-page) .site-nav,
  body.front-reference .site-header,
  body.front-reference .site-nav {
    background: rgba(248,248,249,.92) !important;
    border-bottom: 1px solid rgba(21,21,22,.12) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  body:not(.experimental-page) .brand img,
  body:not(.experimental-page) .nav-brand img,
  body:not(.experimental-page) .site-logo img,
  body.front-reference .brand img,
  body.front-reference .nav-brand img,
  body.front-reference .site-logo img {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  body:not(.experimental-page) .site-nav a,
  body.front-reference .site-nav a {
    color: #151516 !important;
  }

  body:not(.experimental-page) .menu-toggle,
  body.front-reference .menu-toggle {
    color: #151516 !important;
    border-color: rgba(21,21,22,.18) !important;
  }

  body:not(.experimental-page) .menu-toggle span,
  body.front-reference .menu-toggle span,
  body:not(.experimental-page) .hamburger span,
  body.front-reference .hamburger span {
    background: #151516 !important;
  }
}

/* Mobile CRUDO track: compact, centered, logo-letter only */
@media (max-width: 850px) {
  .study-visual,
  .method-visual,
  .brand-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .brand-letters {
    --mobile-track-pad: 6px;
    --mobile-dot: clamp(54px, 16vw, 64px);
    width: 100% !important;
    max-width: calc(100vw - 38px) !important;
    min-width: 0 !important;
    height: clamp(72px, 22vw, 84px) !important;
    min-height: clamp(72px, 22vw, 84px) !important;
    padding: var(--mobile-track-pad) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(21,21,22,.13) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 24px 56px rgba(21,21,22,.08) !important;
    overflow: hidden !important;
  }

  .brand-letters::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: calc(var(--mobile-track-pad) + ((100% - (var(--mobile-track-pad) * 2)) / 5) * var(--selected-index, 0) + ((100% - (var(--mobile-track-pad) * 2)) / 10)) !important;
    width: var(--mobile-dot) !important;
    height: var(--mobile-dot) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    background: #151516 !important;
    box-shadow: 0 18px 40px rgba(21,21,22,.20) !important;
    transition: left .64s cubic-bezier(.22, 1, .36, 1), transform .64s cubic-bezier(.22, 1, .36, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .brand-letter {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(var(--mobile-dot) + 2px) !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
    transition: transform .64s cubic-bezier(.22, 1, .36, 1) !important;
  }

  .brand-letter:hover,
  .brand-letter:focus-visible {
    transform: translateY(-1px) !important;
  }

  .brand-letter span,
  .brand-letter small,
  .brand-letter-mark {
    display: none !important;
  }

  .brand-letter::after {
    content: '' !important;
    display: block !important;
    width: clamp(34px, 10.8vw, 44px) !important;
    height: clamp(34px, 10.8vw, 44px) !important;
    background: #34363a !important;
    opacity: .98 !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transition: background .5s cubic-bezier(.22, 1, .36, 1), transform .64s cubic-bezier(.22, 1, .36, 1), opacity .5s ease !important;
  }

  .brand-letter:nth-child(1)::after { -webkit-mask-image: url('assets/brand-letters/crudo-letter-c.png') !important; mask-image: url('assets/brand-letters/crudo-letter-c.png') !important; }
  .brand-letter:nth-child(2)::after { -webkit-mask-image: url('assets/brand-letters/crudo-letter-r.png') !important; mask-image: url('assets/brand-letters/crudo-letter-r.png') !important; }
  .brand-letter:nth-child(3)::after { -webkit-mask-image: url('assets/brand-letters/crudo-letter-u.png') !important; mask-image: url('assets/brand-letters/crudo-letter-u.png') !important; }
  .brand-letter:nth-child(4)::after { -webkit-mask-image: url('assets/brand-letters/crudo-letter-d.png') !important; mask-image: url('assets/brand-letters/crudo-letter-d.png') !important; }
  .brand-letter:nth-child(5)::after { -webkit-mask-image: url('assets/brand-letters/crudo-letter-o.png') !important; mask-image: url('assets/brand-letters/crudo-letter-o.png') !important; }

  .brand-letter.is-selected::after,
  .brand-letter[aria-selected='true']::after {
    background: #fff !important;
    transform: scale(.92) !important;
    opacity: 1 !important;
  }

  .brand-letter.is-selected,
  .brand-letter[aria-selected='true'] {
    background: transparent !important;
    color: inherit !important;
  }

  .study-section,
  .method-section,
  section[id='estudio'] {
    overflow-x: hidden !important;
  }
}

@media (max-width: 430px) {
  .brand-letters {
    max-width: calc(100vw - 32px) !important;
    height: 70px !important;
    min-height: 70px !important;
  }

  .brand-letter::after {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Nosotros map fillets */
.about-map,
.about-map iframe {
  border-radius: clamp(22px, 2.4vw, 34px) !important;
}

.about-map {
  overflow: hidden !important;
  border: 1px solid rgba(21,21,22,.13) !important;
  box-shadow: 0 30px 90px rgba(21,21,22,.10) !important;
}

@media (max-width: 850px) {
  .about-map,
  .about-map iframe {
    border-radius: 22px !important;
  }
}