/* Correcciones finales para Chrome/Safari en iPhone. */
@media (max-width: 800px) and (display-mode: browser) {
  .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 76px !important;
    padding: 12px 16px 10px !important;
  }

  .site-header .brand {
    width: max-content !important;
    max-width: 100% !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .site-header nav,
  .role-admin .site-header nav,
  .role-editor .site-header nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 3px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .site-header nav::-webkit-scrollbar { display: none; }

  .site-header nav > a,
  .site-header nav > a:first-child,
  body.role-admin .site-header nav > a,
  body.role-editor .site-header nav > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border: 1px solid #dce3df;
    border-radius: 999px;
    background: #fff;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .site-header nav > .admin-shortcut {
    background: #d9ef8b !important;
    border-color: #d9ef8b !important;
  }

  .site-header nav > .nav-cta {
    background: #17352d !important;
    border-color: #17352d !important;
    color: #fff !important;
  }

  .detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 16px !important;
    overflow: hidden !important;
  }

  .detail > .cover-photo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    margin: 8px auto 26px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f5f1e8 !important;
    border-radius: 14px !important;
  }

  .detail .detail-grid {
    width: 100% !important;
    min-width: 0 !important;
    gap: 28px !important;
  }

  .detail .detail-grid > *,
  .detail aside,
  .detail aside dl,
  .detail aside dd {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .detail .weekly-hours {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }

  .detail .weekly-hours > span {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(23, 53, 45, .14) !important;
  }

  .detail .weekly-hours > span:last-child { border-bottom: 0 !important; }

  .detail .weekly-hours b,
  .detail .weekly-hours i {
    display: block !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .detail .weekly-hours i {
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    font-style: normal !important;
    color: #17352d !important;
  }
}

@media (max-width: 390px) and (display-mode: browser) {
  .site-header .brand { font-size: 19px !important; }
  .detail > .cover-photo {
    height: 215px !important;
    max-height: 215px !important;
  }
}