/*
  Adaptación móvil del Instituto de Imágenes Médicas.
  IMPORTANTE: no modifica la composición de escritorio. Todas las reglas
  visuales están limitadas a pantallas de 900 px o menos.
*/
.navigation-mobile-actions,
.mobile-quick-actions { display: none; }

:focus-visible {
  outline: 3px solid rgba(4, 174, 188, .42);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body { padding-bottom: 76px; }
  body.menu-open { overflow: hidden; }

  .site-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .header-layout {
    min-height: 70px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-content: stretch;
    column-gap: 8px;
  }

  .brand { min-width: 0; gap: 8px; }
  .brand-logo { width: 44px; height: 44px; border-radius: 10px; }
  .brand-text { min-width: 0; }
  .brand-text strong { font-size: 11.5px; line-height: 1.02; }
  .brand-text small { display: none; }

  .header-results {
    order: 2;
    width: auto;
    min-height: 44px;
    padding: 0 11px;
    border-radius: 11px;
    white-space: nowrap;
  }
  .header-results svg { width: 19px; height: 19px; }
  .header-results span { display: inline; font-size: 0; }
  .header-results span::after { content: 'Resultados'; font-size: 11px; }

  .menu-button {
    order: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
  }

  .navigation {
    top: 65px;
    right: 12px;
    left: 12px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 17px;
  }
  .navigation a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    font-size: 14px;
  }

  .navigation-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .navigation-mobile-actions a {
    justify-content: center;
    min-height: 47px;
    padding: 9px;
    border-radius: 11px;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
  }
  .navigation-mobile-actions .mobile-nav-results { background: var(--blue-800); }
  .navigation-mobile-actions .mobile-nav-whatsapp { background: var(--green-600); }

  .mobile-quick-actions {
    position: fixed;
    z-index: 1400;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-top: 1px solid rgba(225,233,242,.96);
    background: rgba(255,255,255,.98);
    box-shadow: 0 -9px 28px rgba(5,55,112,.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .mobile-quick-actions a {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
  }
  .mobile-quick-actions svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .mobile-action-results { background: var(--blue-800); }
  .mobile-action-whatsapp { background: var(--green-600); }
  .floating-whatsapp { display: none; }

  /* Home: conserva las tarjetas, proporciones y estética de escritorio. */
  .home-hero-copy { padding: 30px 0 22px; }
  .home-hero h1 { margin: 8px 0 15px; font-size: 40px; line-height: 1.04; }
  .home-hero-copy > p { margin-bottom: 19px; font-size: 15.5px; line-height: 1.52; }
  .home-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-hero-actions .button { width: 100%; min-height: 52px; padding-inline: 11px; font-size: 12px; }

  /* Elimina únicamente los min-height móviles que hacían ver las imágenes alargadas. */
  .home-hero-visual {
    min-height: 0 !important;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 22px 22px 48px 22px;
  }
  .home-hero-visual img {
    min-height: 0 !important;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .home-trust { margin-top: 18px; }
  .home-trust-grid article { padding: 19px; }
  .section { padding: 52px 0; }
  .section-heading { margin-bottom: 26px; }
  .section-heading h2 { font-size: 30px; }

  /* Las páginas internas mantienen sus proporciones originales y solo se apilan. */
  :is(.rm-hero,.tc-hero,.us-hero,.rx-hero,.dx-hero,.mg-hero,.cd-hero,.ng-hero,.msk-hero,.lp-hero) { padding: 24px 0 18px; }
  :is(.rm-hero-grid,.tc-hero-grid,.us-hero-grid,.rx-hero-grid,.dx-hero-grid,.mg-hero-grid,.cd-hero-grid,.ng-hero-grid,.msk-hero-grid,.lp-hero-grid) { gap: 20px; }
  :is(.rm-hero-copy h1,.tc-hero-copy h1,.us-hero-copy h1,.rx-hero-copy h1,.dx-hero-copy h1,.mg-hero-copy h1,.cd-hero-copy h1,.ng-hero-copy h1,.msk-hero h1,.lp-hero-copy h1) { font-size: 39px; }
  :is(.rm-highlight,.tc-highlight,.us-highlight,.rx-highlight,.dx-highlight,.mg-highlight,.cd-highlight,.ng-highlight,.msk-highlight,.lp-highlight) { margin-bottom: 14px; font-size: 21px; }
  :is(.rm-intro,.tc-intro,.us-intro,.rx-intro,.dx-intro,.mg-intro,.cd-intro,.ng-intro,.msk-intro,.lp-intro) { margin-bottom: 18px; font-size: 15.5px; line-height: 1.56; }
  :is(.rm-hero-actions,.tc-hero-actions,.us-hero-actions,.rx-hero-actions,.dx-hero-actions,.mg-hero-actions,.cd-hero-actions,.ng-hero-actions,.msk-hero-actions,.lp-hero-actions) { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  :is(.rm-hero-actions,.tc-hero-actions,.us-hero-actions,.rx-hero-actions,.dx-hero-actions,.mg-hero-actions,.cd-hero-actions,.ng-hero-actions,.msk-hero-actions,.lp-hero-actions) .button { width: 100%; min-height: 50px; padding-inline: 10px; font-size: 12px; }

  /* Mantiene 16:10 o 16:9 según la definición original; no fuerza alturas nuevas. */
  :is(.rm-hero-visual,.tc-hero-visual,.us-hero-visual,.rx-hero-visual,.dx-hero-visual,.mg-hero-visual,.cd-hero-visual,.ng-hero-visual,.msk-hero-visual,.lp-hero-visual) { min-height: 0 !important; height: auto; border-radius: 20px; }
  :is(.rm-hero-visual,.tc-hero-visual,.us-hero-visual,.rx-hero-visual,.dx-hero-visual,.mg-hero-visual,.cd-hero-visual,.ng-hero-visual,.msk-hero-visual,.lp-hero-visual) img { min-height: 0 !important; height: auto; object-fit: cover; }

  .footer-grid { padding-bottom: 28px; }
  .footer-bottom { padding-bottom: 88px; }
}

@media (max-width: 680px) {
  .container { width: min(var(--container), calc(100% - 24px)); }
  .brand-logo { width: 42px; height: 42px; }
  .brand-text strong { font-size: 10.5px; }
  .header-results { padding-inline: 9px; }

  .home-hero h1 { font-size: 35px; }
  .home-hero-copy > p { font-size: 14.5px; }
  .home-services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .home-service-card > div { padding: 15px 13px 17px; }
  .home-service-card h3 { font-size: 16px; }
  .home-service-card p { font-size: 12px; }
  .home-specialties-track { grid-auto-columns: 88%; }
  .home-specialty-slide > div { padding: 18px; }
  .home-locations-grid article > div { padding: 19px; }

  .footer-grid { grid-template-columns: 1fr; gap: 25px; padding-top: 38px; }
  .footer-brand, .footer-contact { grid-column: auto; }
}

@media (max-width: 430px) {
  .home-hero h1 { font-size: 32px; }
  .home-services-grid { grid-template-columns: 1fr; }
  .home-specialties-track { grid-auto-columns: 94%; }
  :is(.rm-hero-copy h1,.tc-hero-copy h1,.us-hero-copy h1,.rx-hero-copy h1,.dx-hero-copy h1,.mg-hero-copy h1,.cd-hero-copy h1,.ng-hero-copy h1,.msk-hero h1,.lp-hero-copy h1) { font-size: 33px; }
  :is(.rm-highlight,.tc-highlight,.us-highlight,.rx-highlight,.dx-highlight,.mg-highlight,.cd-highlight,.ng-highlight,.msk-highlight,.lp-highlight) { font-size: 19px; }
}

@media (max-width: 380px) {
  .brand-text { display: none; }
  .home-hero-actions,
  :is(.rm-hero-actions,.tc-hero-actions,.us-hero-actions,.rx-hero-actions,.dx-hero-actions,.mg-hero-actions,.cd-hero-actions,.ng-hero-actions,.msk-hero-actions,.lp-hero-actions) { grid-template-columns: 1fr; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .navigation { max-height: calc(100vh - 76px); }
}