/* Mobile menu, "blur navigation" style.
   Frosted glass card, numbered rows that fade in one after another,
   a menu button whose two bars turn into an X, and a blurred page behind.
   Inspired by Framer's Blur Navigation, rebuilt in plain CSS.
   Only applies up to 960px, where the mobile menu is used. */

.mobile-menu-backdrop { display: none; }

@media (max-width: 960px) {
  /* The language picker lives inside the menu on phones and tablets,
     so the top bar only shows logo, call and menu. */
  .mobile-header-lang,
  .header-actions > .lang-switch.mob-only { display: none !important; }

  /* ── Menu button: two bars that morph into an X ── */
  .mobile-btns .icon-btn { border-radius: 999px; }
  .mobile-menu-btn,
  .site-header .mobile-toggle { touch-action: manipulation; }
  .mobile-menu-btn {
    border-radius: 999px;
    transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), background-color .2s, border-color .2s;
  }
  .mobile-menu-btn[aria-expanded="true"] {
    transform: rotate(90deg);
    background: var(--charcoal);
    border-color: var(--charcoal);
  }
  .mobile-menu-btn[aria-expanded="true"],
  .mobile-menu-btn[aria-expanded="true"]:focus,
  .mobile-menu-btn[aria-expanded="true"]:active { color: #fff; }
  .mobile-menu-btn .menu-glyph {
    position: relative;
    display: block;
    width: 16px;
    height: 12px;
    font-size: 0;
  }
  .mobile-menu-btn .menu-glyph i {
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), top .3s ease, width .3s ease;
  }
  .mobile-menu-btn .menu-glyph i:first-child { top: 2px; width: 16px; }
  .mobile-menu-btn .menu-glyph i:last-child  { top: 8px; width: 10px; }
  .mobile-menu-btn[aria-expanded="true"] .menu-glyph i { top: 5px; width: 16px; }
  .mobile-menu-btn[aria-expanded="true"] .menu-glyph i:first-child { transform: rotate(45deg); }
  .mobile-menu-btn[aria-expanded="true"] .menu-glyph i:last-child  { transform: rotate(-45deg); }

  /* ── Blurred page behind the open menu ── */
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: var(--menu-top, var(--site-header-offset, 64px)) 0 0;
    z-index: -1;
    background: rgba(250, 246, 238, .28);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    will-change: opacity;
  }
  .site-header.menu-open .mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease;
  }
  html.menu-open { overflow: hidden; }
  /* The language list inside the menu always opens upwards, over the rows,
     so the glass card never cuts it off (some pages opened it downwards). */
  .mobile-menu-meta-top .lang-globe-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    transform-origin: bottom right !important;
  }

  /* keep the chat bubble out of the way while the menu is open */
  #ai-widget { transition: opacity .25s ease; }
  html.menu-open #ai-widget { opacity: 0; pointer-events: none; }

  /* ── Panel: stays in the layout so it can animate in and out ── */
  .mobile-menu-panel.mob-only {
    display: block !important;
    max-height: calc(100vh - var(--menu-top, var(--site-header-offset, 76px)) - 8px);
    left: 0;
    right: 0;
    padding: 0 10px 56px;  /* room for the card's soft shadow */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .4s;
  }
  .mobile-menu-panel.mob-only.open {
    visibility: visible;
    transition: none;
  }
  /* taps around the card fall through to the backdrop, which closes the menu */
  .mobile-menu-panel.mob-only.open .mobile-menu-card { pointer-events: auto; }

  /* ── The glass card ── */
  .mobile-menu-panel .mobile-menu-card {
    position: relative;
    overflow: hidden;
    padding: 8px 22px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    /* No second blur here: the card always sits on the already blurred
       backdrop, and blurring twice made phones slow to open the menu. */
    background: rgba(255, 255, 255, .84);
    box-shadow:
      0 10px 24px -14px rgba(17, 17, 17, .22),
      0 0 0 1px rgba(31, 36, 32, .05),
      inset 0 -1px 0 rgba(17, 17, 17, .06);
    opacity: 0;
    transform: translateY(-10px) scale(.97);
    transform-origin: top right;
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-menu-panel.open .mobile-menu-card {
    opacity: 1;
    transform: none;
  }
  /* thin light edge along the top, like a glass rim */
  .mobile-menu-panel .mobile-menu-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
  }

  /* ── Numbered rows ── */
  .mobile-menu-panel .mobile-menu-links {
    gap: 0;
    margin-bottom: 8px;
    counter-reset: nav-row;
  }
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link {
    counter-increment: nav-row;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 2px;
    border: 0;
    border-top: 1px solid rgba(31, 36, 32, .09);
    border-radius: 0;
    background: transparent;
    font-family: var(--head);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--charcoal);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .34s cubic-bezier(.33, 0, .67, 1),
      transform .34s cubic-bezier(.33, 0, .67, 1),
      filter .3s ease,
      color .2s;
  }
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link:first-child { border-top: 0; }
  .mobile-menu-panel .mobile-menu-links > a.mobile-nav-link { text-decoration: none; }
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link::before {
    content: counter(nav-row, decimal-leading-zero);
    min-width: 18px;
    font-family: var(--body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pebble);
  }
  .mobile-menu-panel .mobile-nav-link.with-arrow small,
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link:not(.with-arrow)::after {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(31, 36, 32, .1);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--stone);
    flex-shrink: 0;
  }
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link:not(.with-arrow)::after { content: "→"; }
  /* draw the chevron so it sits dead centre in its circle */
  .mobile-menu-panel .mobile-nav-link.with-arrow small { font-size: 0; }
  .mobile-menu-panel .mobile-nav-link.with-arrow small::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
  }
  .mobile-menu-panel .mobile-nav-link.with-arrow small {
    transition: transform .3s cubic-bezier(.34, 1.45, .64, 1), background-color .2s, color .2s;
  }
  .mobile-menu-panel .mobile-nav-link.with-arrow[aria-expanded="true"] small {
    background: var(--teal-l);
    border-color: transparent;
    color: var(--teal-d);
  }

  /* rows arrive one after another */
  .mobile-menu-panel.open .mobile-menu-links > .mobile-nav-link {
    opacity: 1;
    transform: none;
    transition-delay: calc(.06s + var(--row, 0) * .035s);
  }
  /* Focus effect, like the Framer demo: the row under your finger (or mouse, or the
     open one) stays sharp and the other rows fade and blur. The focus classes are set
     by the page script, because phones have no hover. */
  .mobile-menu-panel.open .mobile-menu-links.has-focus > .mobile-nav-link:not(.is-focus),
  .mobile-menu-panel.open .mobile-menu-links:not(.has-focus):has(> .mobile-nav-link[aria-expanded="true"]) > .mobile-nav-link:not([aria-expanded="true"]) {
    opacity: .35;
    filter: blur(2.5px);
    transition-delay: 0s;
  }

  .mobile-menu-panel .mobile-services-panel { padding: 0 0 14px; }

  /* ── Footer: live status, phone, language, booking ── */
  .mobile-menu-panel .mobile-menu-meta {
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(31, 36, 32, .09);
    opacity: 0;
    transition: opacity .34s cubic-bezier(.33, 0, .67, 1);
  }
  .mobile-menu-panel.open .mobile-menu-meta {
    opacity: 1;
    transition-delay: .24s;
  }
  .mobile-menu-status {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(31, 36, 32, .55);
  }
  .mobile-menu-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    --dot-ring: 5px;
  }
  .mobile-menu-status-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--charcoal);
  }
  .mobile-menu-panel .mobile-menu-meta > .btn-primary {
    height: 50px;
    border-radius: 999px;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .mobile-menu-btn,
  .mobile-menu-btn .menu-glyph i,
  .mobile-menu-backdrop,
  .mobile-menu-panel .mobile-menu-card,
  .mobile-menu-panel .mobile-menu-links > .mobile-nav-link,
  .mobile-menu-panel .mobile-menu-meta { transition: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   Same menu on the other pages (services, regions, guide, about, legal).
   Those pages use .mobile-toggle / .mobile-menu. Like the homepage, they now
   use this menu up to 960px (tablets included), because five header links
   no longer fit on one line below that. assets/blur-nav.js adds the extra
   pieces (X lines, backdrop, status line, finger focus).
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .site-header .desk-nav,
  .site-header .header-cta { display: none !important; }
  .site-header .mobile-toggle { display: inline-flex !important; }

  .site-header .mobile-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--charcoal, #1F2420);
    -webkit-tap-highlight-color: transparent;
    transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), background-color .2s, border-color .2s;
  }
  .site-header .mobile-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
    background: var(--charcoal, #1F2420);
    border-color: var(--charcoal, #1F2420);
    color: #fff;
  }
  .site-header .mobile-toggle .menu-glyph {
    position: relative;
    display: block;
    width: 16px;
    height: 12px;
    font-size: 0;
  }
  .site-header .mobile-toggle .menu-glyph i {
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), top .3s ease, width .3s ease;
  }
  .site-header .mobile-toggle .menu-glyph i:first-child { top: 2px; width: 16px; }
  .site-header .mobile-toggle .menu-glyph i:last-child  { top: 8px; width: 10px; }
  .site-header .mobile-toggle[aria-expanded="true"] .menu-glyph i { top: 5px; width: 16px; }
  .site-header .mobile-toggle[aria-expanded="true"] .menu-glyph i:first-child { transform: rotate(45deg); }
  .site-header .mobile-toggle[aria-expanded="true"] .menu-glyph i:last-child  { transform: rotate(-45deg); }

  .site-header .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: var(--menu-top, var(--site-header-offset, 64px)) 0 0;
    z-index: -1;
    background: rgba(250, 246, 238, .28);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    will-change: opacity;
  }

  .site-header .mobile-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    padding: 0 10px 56px;
    max-height: calc(100vh - var(--menu-top, var(--site-header-offset, 64px)) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .4s;
  }
  .site-header .mobile-menu.open {
    visibility: visible;
    transition: none;
  }
  .site-header .mobile-menu.open .mobile-menu-card { pointer-events: auto; }

  .site-header .mobile-menu .mobile-menu-card {
    position: relative;
    overflow: hidden;
    padding: 8px 22px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 28px;
    /* No second blur here: the card always sits on the already blurred
       backdrop, and blurring twice made phones slow to open the menu. */
    background: rgba(255, 255, 255, .84);
    box-shadow:
      0 10px 24px -14px rgba(17, 17, 17, .22),
      0 0 0 1px rgba(31, 36, 32, .05),
      inset 0 -1px 0 rgba(17, 17, 17, .06);
    opacity: 0;
    transform: translateY(-10px) scale(.97);
    transform-origin: top right;
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .site-header .mobile-menu.open .mobile-menu-card { opacity: 1; transform: none; }
  .site-header .mobile-menu .mobile-menu-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
  }

  .site-header .mobile-menu .mobile-menu-links {
    display: grid;
    gap: 0;
    margin-bottom: 8px;
    counter-reset: nav-row;
  }
  .site-header .mobile-menu .mobile-menu-links > a {
    counter-increment: nav-row;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 2px;
    border: 0;
    border-top: 1px solid rgba(31, 36, 32, .09);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--head, 'Nunito', system-ui, sans-serif);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--charcoal, #1F2420);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .34s cubic-bezier(.33, 0, .67, 1),
      transform .34s cubic-bezier(.33, 0, .67, 1),
      filter .3s ease,
      color .2s;
  }
  .site-header .mobile-menu .mobile-menu-links > a:first-child { border-top: 0; }
  .site-header .mobile-menu .mobile-menu-links > a::before {
    content: counter(nav-row, decimal-leading-zero);
    min-width: 18px;
    font-family: var(--body, 'Inter', system-ui, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--pebble, #9BAD9E);
  }
  .site-header .mobile-menu .mobile-menu-links > a::after {
    content: "→";
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(31, 36, 32, .1);
    font-family: var(--body, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--stone, #6B7B6E);
    flex-shrink: 0;
  }
  /* the page you are on */
  .site-header .mobile-menu .mobile-menu-links > a.active { color: var(--teal-d, #239040); background: transparent; }
  .site-header .mobile-menu .mobile-menu-links > a.active::before { color: var(--teal, #2DB84B); }
  .site-header .mobile-menu .mobile-menu-links > a.active::after {
    background: var(--teal-l, #D4F5DC);
    border-color: transparent;
    color: var(--teal-d, #239040);
  }

  .site-header .mobile-menu.open .mobile-menu-links > a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.06s + var(--row, 0) * .035s);
  }
  .site-header .mobile-menu.open .mobile-menu-links.has-focus > a:not(.is-focus) {
    opacity: .35;
    filter: blur(2.5px);
    transition-delay: 0s;
  }

  .site-header .mobile-menu .mobile-menu-meta {
    display: grid;
    gap: 12px;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(31, 36, 32, .09);
    opacity: 0;
    transition: opacity .34s cubic-bezier(.33, 0, .67, 1);
  }
  .site-header .mobile-menu.open .mobile-menu-meta { opacity: 1; transition-delay: .24s; }
  .site-header .mobile-menu .mobile-menu-meta > a[href*="#book-home-visit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--teal, #2DB84B);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .site-header .mobile-toggle,
  .site-header .mobile-toggle .menu-glyph i,
  .site-header .mobile-menu-backdrop,
  .site-header .mobile-menu .mobile-menu-card,
  .site-header .mobile-menu .mobile-menu-links > a,
  .site-header .mobile-menu .mobile-menu-meta { transition: none !important; }
}

/* ── Desktop header with the extra "Prices" link: tighter spacing on
      smaller laptops and tablets so all five items fit on one line. ── */
@media (min-width: 961px) {
  nav.desk-nav a,
  .site-header .desk-nav a,
  .header-phone,
  .btn-book-header { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1360px) {
  nav.desk-nav,
  .site-header .desk-nav { gap: 16px; }
  /* homepage: phone icon only, the number itself is in the menu and footer */
  .header-phone { font-size: 0; gap: 0; }
  .header-phone svg { width: 18px; height: 18px; }
}

/* Tablets: the menu card keeps a phone-like width, tucked under the X. */
@media (min-width: 600px) and (max-width: 960px) {
  .mobile-menu-panel.mob-only,
  .site-header .mobile-menu {
    left: auto !important;
    right: 0;
    width: 460px;
  }
}

/* Smallest laptops: a little tighter still, so even the longer Spanish
   labels ("Sobre nosotros", "Reservar visita a domicilio") fit. */
@media (min-width: 961px) and (max-width: 1100px) {
  .site-header .header-row { gap: 8px; }
  nav.desk-nav { gap: 12px; }
  nav.desk-nav a { font-size: 13px; }
  .header-actions { gap: 8px; }
  .btn-book-header { padding: 0 14px; font-size: 13px; }
}

/* Large screens: the header is capped at 1100px wide, so trim spacing a touch
   to make room for "Precios" next to the full phone number. */
@media (min-width: 1361px) {
  nav.desk-nav { gap: 20px; }
  .header-actions { gap: 14px; }
}

/* Desktop header: globe and its little arrow sit closer together,
   which also gives the header a few more pixels. */
@media (min-width: 961px) {
  .header-actions .lang-globe-btn,
  .site-header .header-cta .lang-globe-btn { gap: 3px; padding-inline: 3px; }
}

/* Menu button hover, inspired by Framer's Growing Navigation:
   closed, the top line is long and the bottom one short; pointing at the
   button (or pressing it) swaps them, then a click folds both into the X. */
@media (max-width: 960px) {
  .mobile-menu-btn .menu-glyph i,
  .site-header .mobile-toggle .menu-glyph i {
    transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), top .3s ease, width .45s cubic-bezier(.34, 1.45, .64, 1);
  }
  .mobile-menu-btn:not([aria-expanded="true"]):active .menu-glyph i:first-child,
  .site-header .mobile-toggle:not([aria-expanded="true"]):active .menu-glyph i:first-child { width: 10px; }
  .mobile-menu-btn:not([aria-expanded="true"]):active .menu-glyph i:last-child,
  .site-header .mobile-toggle:not([aria-expanded="true"]):active .menu-glyph i:last-child { width: 16px; }
}
@media (max-width: 960px) and (hover: hover) {
  .mobile-menu-btn:not([aria-expanded="true"]):hover .menu-glyph i:first-child,
  .site-header .mobile-toggle:not([aria-expanded="true"]):hover .menu-glyph i:first-child { width: 10px; }
  .mobile-menu-btn:not([aria-expanded="true"]):hover .menu-glyph i:last-child,
  .site-header .mobile-toggle:not([aria-expanded="true"]):hover .menu-glyph i:last-child { width: 16px; }
}