/* MGS v24 — experiencia móvil integral */

@media (max-width: 900px) {
  :root {
    --mobile-gutter: 18px;
    --mobile-radius: 18px;
  }

  html {
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    overflow-x: hidden;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  a,
  button,
  summary,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .42);
    outline-offset: 3px;
  }

  .container {
    width: min(100% - 36px, 1120px);
  }

  .topbar {
    font-size: .82rem;
  }

  .topbar .container {
    min-height: 36px;
    padding: 5px 0;
    line-height: 1.35;
  }

  .site-header {
    top: 0;
  }

  .navbar {
    min-height: 72px !important;
    padding: 8px 0 !important;
  }

  .brand {
    max-width: calc(100% - 94px) !important;
  }

  .brand img {
    width: min(176px, 48vw) !important;
    max-height: 52px !important;
  }

  .mobile-menu-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 10px 13px;
    border-radius: 14px;
  }

  .nav-links {
    width: min(88vw, 370px) !important;
    height: var(--mgs-mobile-vh, 100dvh) !important;
    max-height: var(--mgs-mobile-vh, 100dvh) !important;
    padding: calc(96px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links > a,
  .nav-dropdown summary {
    min-height: 50px;
    font-size: 1rem;
  }

  .nav-submenu a {
    min-height: 46px;
    align-items: center;
  }

  .section {
    padding: 56px 0;
  }

  .section-title {
    max-width: 680px;
    margin-bottom: 28px;
  }

  .section-title h2,
  .content h2 {
    overflow-wrap: anywhere;
  }

  .section-title p,
  .content p,
  .card p,
  .panel p {
    line-height: 1.68;
  }

  .hero-content {
    min-height: auto;
    padding: 58px 0;
    gap: 26px;
  }

  .hero h1,
  .page-hero h1,
  .home-premium .hero-premium .hero-heading-sm {
    font-size: clamp(2rem, 7.8vw, 3rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }

  .hero p,
  .page-hero p {
    font-size: 1.04rem;
    line-height: 1.62;
  }

  .home-premium .hero.hero-premium::before {
    background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.91) 52%, rgba(255,255,255,.68) 100%);
  }

  .home-premium .hero-premium .hero-bg {
    object-position: 62% center;
  }

  .home-premium .hero-premium-grid {
    grid-template-columns: 1fr;
  }

  .home-premium .hero-panel-premium,
  .hero-panel {
    width: 100%;
    max-width: none;
    padding: 24px;
    border-radius: 22px;
  }

  .hero-actions,
  .cta-actions,
  .cta-band-actions {
    gap: 10px;
  }

  .btn {
    min-height: 48px;
    padding: 12px 18px;
    text-align: center;
    line-height: 1.25;
  }

  .stats-row {
    gap: 10px;
    margin-top: 26px;
  }

  .stat {
    padding: 15px 16px;
  }

  .page-hero .container {
    min-height: 300px;
    padding: 52px 0;
  }

  .page-hero img {
    object-position: center;
  }

  .media-block,
  .contact-wrap,
  .footer-grid {
    gap: 28px;
  }

  .media-block > img,
  .media-block > picture img {
    width: 100%;
    min-height: 0 !important;
    max-height: 380px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .card,
  .panel,
  .contact-card,
  .form-card {
    padding: 24px;
    border-radius: var(--mobile-radius);
  }

  .service-card {
    min-height: 0;
  }

  .service-card .icon {
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
  }

  .feature-list li {
    padding-left: 26px;
    margin: 10px 0;
  }

  .highlight-box {
    padding: 22px;
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .logo-item {
    min-height: 82px;
    padding: 14px;
  }

  .cta-band {
    align-items: stretch;
    flex-direction: column;
    padding: 30px;
    border-radius: 22px;
  }

  .cta-band-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .contact-wrap {
    grid-template-columns: 1fr;
  }

  .form-field input,
  .form-field textarea,
  .form-field select {
    min-height: 48px;
    font-size: 16px;
  }

  .form-field textarea {
    min-height: 140px;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .site-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .footer-links a,
  .site-footer p a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
  }

  .floating-whatsapp {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 18px;
  }

  .floating-whatsapp .wa-text {
    display: none;
  }

  .floating-whatsapp .wa-img {
    width: 25px;
    height: 25px;
  }

  .home-premium .company-home-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px;
    border-radius: 22px;
  }

  .home-premium .company-home-visual img {
    min-height: 0;
    max-height: 360px;
    aspect-ratio: 16 / 10;
  }

  .home-premium .company-home-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-premium .metric-card {
    padding: 16px;
    border-radius: 16px;
  }

  .home-coverage-note {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
  }

  .home-coverage-note .btn {
    width: 100%;
  }

  .camera-tech-card,
  .camera-tech-card-reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .camera-tech-card-reverse .camera-tech-media {
    order: 0;
  }

  .camera-tech-media img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .camera-tech-content {
    padding: 30px 26px;
  }

  .guardias-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guarda-photo-card,
  .guardia-photo-card {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  :root {
    --mobile-gutter: 14px;
  }

  .container {
    width: min(100% - 28px, 1120px);
  }

  .topbar .container > span:first-child {
    display: none;
  }

  .topbar .container > span:last-child {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .navbar {
    min-height: 68px !important;
  }

  .brand img {
    width: min(158px, 45vw) !important;
    max-height: 48px !important;
  }

  .mobile-menu-toggle {
    padding: 10px 12px;
  }

  .mobile-menu-toggle .menu-label {
    display: none;
  }

  .nav-links {
    width: min(92vw, 350px) !important;
    padding-top: calc(86px + env(safe-area-inset-top)) !important;
  }

  .section {
    padding: 46px 0;
  }

  .section-title {
    margin-bottom: 24px;
  }

  .section-title h2,
  .content h2 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .hero-content {
    padding: 44px 0 48px;
  }

  .hero h1,
  .page-hero h1,
  .home-premium .hero-premium .hero-heading-sm {
    font-size: clamp(1.86rem, 9.4vw, 2.5rem);
  }

  .home-premium .hero-premium .hero-bg {
    object-position: 68% center;
    opacity: .76;
  }

  .hero-actions,
  .cta-actions,
  .cta-band-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-actions .btn,
  .cta-band-actions .btn,
  .form-card .btn,
  .contact-card .btn {
    width: 100%;
  }

  .home-premium .hero-trust {
    gap: 8px;
  }

  .home-premium .hero-pill {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    text-align: center;
  }

  .home-premium .hero-panel-premium,
  .hero-panel {
    padding: 21px 19px;
  }

  .page-hero .container {
    min-height: 250px;
    padding: 42px 0;
  }

  .page-hero::before {
    background: linear-gradient(90deg, rgba(2, 6, 23, .91), rgba(2, 6, 23, .66));
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .guardias-gallery,
  .footer-grid,
  .home-premium .company-home-metrics {
    grid-template-columns: 1fr;
  }

  .grid {
    gap: 14px;
  }

  .card,
  .panel,
  .contact-card,
  .form-card {
    padding: 21px;
  }

  .media-block {
    gap: 24px;
  }

  .media-block > img,
  .media-block > picture img {
    max-height: 300px;
    aspect-ratio: 4 / 3;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-item {
    min-height: 76px;
    padding: 12px;
  }

  .cta-band {
    padding: 24px 20px;
  }

  .home-premium .company-home-grid {
    padding: 14px;
  }

  .home-premium .company-home-content {
    padding: 4px;
  }

  .home-coverage-card {
    border-radius: 18px;
  }

  .home-coverage-note {
    padding: 21px 19px;
  }

  .camera-tech-content {
    padding: 25px 20px 28px;
  }

  .camera-tech-content h3 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .camera-tech-badge {
    left: 14px;
    bottom: 14px;
  }

  .site-footer {
    padding-top: 38px;
  }

  .footer-grid {
    gap: 18px;
  }

  .footer-bottom {
    margin-top: 8px;
  }
}

@media (max-width: 380px) {
  .container {
    width: min(100% - 22px, 1120px);
  }

  .brand img {
    width: min(142px, 44vw) !important;
  }

  .mobile-menu-toggle {
    min-width: 46px;
    width: 46px;
    min-height: 46px;
    padding: 9px;
  }

  .topbar {
    font-size: .76rem;
  }

  .hero h1,
  .page-hero h1,
  .home-premium .hero-premium .hero-heading-sm {
    font-size: 1.78rem;
  }

  .card,
  .panel,
  .contact-card,
  .form-card {
    padding: 18px;
  }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .nav-links {
    padding-top: 74px !important;
  }

  .nav-links > a,
  .nav-dropdown summary {
    min-height: 44px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .logo-item:hover,
  .panel:hover,
  .camera-tech-card:hover .camera-tech-media img,
  .home-premium .service-card:hover,
  .home-premium .premium-card:hover,
  .home-premium .company-home-section .metric-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}