@media (max-width: 640px) {
  html,
  body,
  #root {
    max-width: 100%;
    overflow-x: hidden;
  }

  main {
    scroll-margin-top: 96px;
  }

  .fixed:has(> button[aria-label="Contactar por WhatsApp"]) {
    right: 1rem !important;
    bottom: 4.75rem !important;
  }

  .fixed:has(> button[aria-label="Contactar por WhatsApp"]) > div {
    display: none !important;
  }

  button[aria-label="Contactar por WhatsApp"] {
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 8px 24px #25d36666 !important;
  }

  button[aria-label="Contactar por WhatsApp"] svg {
    width: 26px !important;
    height: 26px !important;
  }

  button[aria-label="Subir"],
  button[aria-label="Toggle theme"] {
    width: 42px !important;
    height: 42px !important;
    bottom: 1rem !important;
  }

  button[aria-label="Subir"] {
    right: 1rem !important;
  }

  button[aria-label="Toggle theme"] {
    left: 1rem !important;
  }

  .bottom-\[5\.5rem\] {
    bottom: 4.75rem !important;
  }

  .right-6,
  .right-8 {
    right: 1rem !important;
  }

  .left-6 {
    left: 1rem !important;
  }

  .rounded-\[40px\] {
    border-radius: 32px;
  }

  .py-24 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .px-6 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .w-\[85vw\] {
    width: calc(100vw - 2.5rem) !important;
  }

  .max-w-\[90rem\] {
    max-width: 100%;
  }

  iframe {
    max-width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  html,
  body,
  #root {
    max-width: 100%;
    overflow-x: hidden;
  }

  nav {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    background: #f8faf9e6 !important;
    backdrop-filter: blur(16px);
  }

  nav .hidden.lg\:flex,
  nav .hidden.md\:flex {
    display: none !important;
  }

  nav .lg\:hidden,
  nav .md\:hidden {
    display: flex !important;
    width: auto !important;
    height: auto !important;
  }

  nav button:has(img[alt="LABOCLINIC Logo"]) {
    display: flex !important;
    width: auto !important;
    height: auto !important;
  }

  nav img[alt="LABOCLINIC Logo"] {
    display: block !important;
    width: 48px !important;
    height: auto !important;
  }

  .fixed:has(> button[aria-label="Contactar por WhatsApp"]) {
    right: 1rem !important;
    bottom: 1rem !important;
  }

  .fixed:has(> button[aria-label="Contactar por WhatsApp"]) > div {
    display: none !important;
  }

  button[aria-label="Contactar por WhatsApp"] {
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 8px 24px #25d36666 !important;
  }

  button[aria-label="Contactar por WhatsApp"] svg {
    width: 24px !important;
    height: 24px !important;
  }

  button[aria-label="Subir"],
  button[aria-label="Toggle theme"] {
    width: 38px !important;
    height: 38px !important;
    bottom: 1rem !important;
  }

  button[aria-label="Subir"] {
    right: 4.75rem !important;
  }

  button[aria-label="Toggle theme"] {
    left: 1rem !important;
  }

  .bottom-\[5\.5rem\] {
    bottom: 1rem !important;
  }

  .right-6 {
    right: 1rem !important;
  }

  .right-8 {
    right: 4.75rem !important;
  }

  .left-6 {
    left: 1rem !important;
  }

  main {
    padding-top: 4.75rem !important;
  }

  .py-24 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .rounded-\[40px\] {
    border-radius: 28px;
  }
}