/* Layout exclusivo para telefonos y tabletas. Se carga despues del CSS exportado de Figma. */
@media (max-width: 1024px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  .desktop {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .desktop::before { display: none !important; }
  .desktop main { display: flex !important; flex-direction: column; width: 100%; min-width: 0; }

  .desktop .navbar {
    position: sticky !important;
    inset: 0 auto auto 0 !important;
    z-index: 1000;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 70px !important;
    padding: 0 12px !important;
    gap: 14px;
    background: #fff;
  }

  .desktop .navbar::after { height: 5px !important; }
  .desktop .navbar .logo { position: static !important; display: block; flex: 0 0 auto; }
  .desktop .navbar .LOGO-GCP { display: block !important; width: 120px !important; height: auto !important; }
  .desktop .navbar .pestaas {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .desktop .navbar .pestaas::-webkit-scrollbar { display: none; }
  .desktop .navbar .pestaas .frame { position: static !important; flex: 0 0 auto; }
  .desktop .navbar .pestaas .text-wrapper-37 { font-size: 15px !important; }
  .desktop .navbar .CTA-3 { display: none !important; }

  .desktop main > section,
  .desktop .footer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .desktop .hero { order: 1; height: 480px !important; padding: 36px 18px !important; }
  .desktop .stats { order: 2; }
  .desktop .filosofa { order: 3; }
  .desktop .clientes { order: 4; }
  .desktop .cobertura { order: 5; }
  .desktop .servicios { order: 6; }
  .desktop .app-mi-mi { order: 7; }
  .desktop .perfiles { order: 8; }
  .desktop .certificados { order: 9; }
  .desktop .contacto { order: 10; }
  .desktop .footer { order: 11; }

  .desktop .hero-video, .desktop .hero .opacidad { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .desktop .hero .content { position: relative !important; width: 100%; padding: 0 !important; gap: 16px; }
  .desktop .hero .header, .desktop .hero .text-wrapper { width: auto !important; font-size: clamp(38px, 9vw, 64px) !important; line-height: 1.06 !important; }
  .desktop .hero .subheader { width: min(100%, 560px) !important; font-size: clamp(16px, 2.7vw, 22px) !important; line-height: 1.35 !important; }
  .desktop .hero-div-line { display: none !important; }

  .desktop .stats {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100% !important;
    height: auto !important;
    min-height: 128px;
    padding: 15px 10px !important;
  }
  .desktop .stats .div-wrapper, .desktop .stats .p { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; }
  .desktop .stats .p { font-size: clamp(32px, 8vw, 64px) !important; line-height: 1 !important; }
  .desktop .stats .text-wrapper-4 { display: block; font-size: clamp(11px, 2vw, 17px) !important; line-height: 1.18 !important; }

  .desktop .filosofa,
  .desktop .clientes,
  .desktop .cobertura,
  .desktop .servicios,
  .desktop .app-mi-mi,
  .desktop .perfiles,
  .desktop .certificados,
  .desktop .contacto {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 26px !important;
    padding: 42px 16px !important;
  }

  .desktop .filosofa { background: #2583c51a; }
  .desktop .texto, .desktop .texto-2, .desktop .texto-4 { position: static !important; width: min(100%, 720px) !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: center; }
  .desktop .text-2, .desktop .text-4 { font-size: clamp(31px, 5vw, 48px) !important; line-height: 1.12 !important; }
  .desktop .text-3 { font-size: clamp(15px, 2.3vw, 18px) !important; line-height: 1.4 !important; }
  .desktop .text-3 br, .desktop .text-7 br { display: none; }

  /* Filosofia, valores y organigrama */
  .desktop .filosofa .tarjetas-2,
  .desktop .filosofa .tarjetas-2 * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    height: auto !important;
    min-width: 0;
  }
  .desktop .filosofa .tarjetas-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 900px) !important; gap: 18px !important; }
  .desktop .filosofa .mision-y-vision-10, .desktop .filosofa .valores, .desktop .filosofa .valores-2 { width: 100% !important; min-height: 0 !important; padding: 20px !important; overflow: hidden; }
  .desktop .filosofa .mision-y-vision-10 { display: flex !important; flex-direction: column; gap: 20px !important; }
  .desktop .filosofa .mision-2, .desktop .filosofa .mision-3 { display: flex !important; align-items: flex-start !important; gap: 12px; }
  .desktop .filosofa .texto-5, .desktop .filosofa .texto-6, .desktop .filosofa .cuerpo-2, .desktop .filosofa .cuerpo-3 { flex: 1; width: auto !important; overflow: visible !important; }
  .desktop .filosofa .text-wrapper-20, .desktop .filosofa .text-wrapper-21 { width: auto !important; font-size: 15px !important; line-height: 1.42 !important; }
  .desktop .filosofa .valores { display: flex !important; flex-direction: column; align-items: center; gap: 16px !important; }
  .desktop .filosofa .valores { position: relative !important; }
  .desktop .filosofa .valores * { position: static !important; inset: auto !important; transform: none !important; }
  .desktop .filosofa .valores-carrusel {
    display: flex !important;
    align-items: stretch !important;
    width: max-content !important;
    gap: 14px !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    animation: mobile-values-loop 32s linear infinite;
    will-change: transform;
  }
  .desktop .filosofa .valor, .desktop .filosofa .valor-2, .desktop .filosofa .valor-3, .desktop .filosofa .valor-4 {
    display: flex !important;
    flex: 0 0 205px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 205px !important;
    height: 220px !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 18px !important;
    text-align: center !important;
  }
  .desktop .filosofa .valores .cono-2 { display: grid !important; place-items: center !important; width: 64px !important; height: 64px !important; }
  .desktop .filosofa .valores .cono-2 img { width: 64px !important; height: 64px !important; }
  .desktop .filosofa .valores .div-wrapper-3, .desktop .filosofa .valores .cuerpo-4 { display: block !important; width: 100% !important; height: auto !important; }
  .desktop .filosofa .valores .text-wrapper-13 { display: block !important; width: 100% !important; margin: 10px 0 7px !important; font-size: 18px !important; line-height: 1.15 !important; }
  .desktop .filosofa .valores .text-wrapper-14 { display: block !important; width: 100% !important; margin: 0 !important; font-size: 14px !important; line-height: 1.35 !important; }
  .desktop .filosofa .organigrama-img { display: block; width: 100% !important; height: auto !important; }

  /* Clientes */
  .desktop .clientes { padding-left: 0 !important; padding-right: 0 !important; }
  .desktop .clientes .texto { padding: 0 16px !important; }
  .desktop .logos-carousel { position: static !important; width: calc(100% - 32px) !important; }

  /* Cobertura: se mantienen las capas del mapa; el resto entra en flujo normal. */
  .desktop .cobertura .frame { position: static !important; display: flex !important; flex-direction: column; gap: 20px; width: 100% !important; height: auto !important; }
  .desktop .cobertura .tarjeta-zona-wrapper, .desktop .cobertura .tarjeta-zona, .desktop .cobertura .coverage-cards { position: static !important; width: 100% !important; height: auto !important; }
  .desktop .cobertura .tarjeta-zona { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start !important; gap: 10px; }
  .desktop .cobertura .tarjeta-mapa { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 68px !important; padding: 0 !important; overflow: hidden !important; text-align: left !important; }
  .desktop .cobertura .tarjeta-mapa > .zona { position: relative !important; display: flex !important; align-items: center !important; min-height: 68px !important; width: 100% !important; padding: 8px 34px 8px 9px !important; gap: 9px !important; }
  .desktop .cobertura .tarjeta-mapa .circulo { position: relative !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; }
  .desktop .cobertura .tarjeta-mapa .ellipse, .desktop .cobertura .tarjeta-mapa .ellipse-2, .desktop .cobertura .tarjeta-mapa .ellipse-3, .desktop .cobertura .tarjeta-mapa .ellipse-4, .desktop .cobertura .tarjeta-mapa .ellipse-5, .desktop .cobertura .tarjeta-mapa .ellipse-6 { position: absolute !important; inset: 0 !important; width: 48px !important; height: 48px !important; }
  .desktop .cobertura .tarjeta-mapa .circulo > :last-child { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; width: 48px !important; height: 48px !important; margin: 0 !important; font-size: 20px !important; line-height: 1 !important; }
  .desktop .cobertura .tarjeta-mapa .zona-estados { position: static !important; display: block !important; width: auto !important; margin: 0 !important; line-height: 1.05 !important; }
  .desktop .cobertura .tarjeta-mapa .text-wrapper-11 { display: block !important; font-size: 17px !important; line-height: 1.1 !important; white-space: nowrap !important; }
  .desktop .cobertura .tarjeta-mapa .text-wrapper-12 { display: block !important; margin-top: 3px !important; font-size: 13px !important; line-height: 1.1 !important; white-space: nowrap !important; }
  .desktop .cobertura .tarjeta-mapa > .arrow-caret-down-SM { position: absolute !important; top: 26px !important; right: 11px !important; width: 15px !important; height: 15px !important; }
  .desktop .cobertura .tarjeta-mapa .zone-states { position: static !important; display: none !important; width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 14px 13px 66px !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; font-size: 13px !important; line-height: 1.35 !important; }
  .desktop .cobertura .tarjeta-mapa.is-active .zone-states { display: block !important; }
  .desktop .cobertura .mexico { position: relative !important; width: min(100%, 620px) !important; height: auto !important; aspect-ratio: 1.55; margin: 0 auto; }
  .desktop .cobertura .map-layer { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; }
  .desktop .cobertura .map-zone-hotspot { display: none !important; }
  .desktop .cobertura .coverage-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .desktop .cobertura .coverage-card { position: static !important; width: 100% !important; min-height: 104px; }

  /* Servicios */
  .desktop .servicios .tarjteas, .desktop .servicios .tarejtas { position: static !important; width: min(100%, 900px) !important; height: auto !important; }
  .desktop .servicios .tarejtas { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
  .desktop .servicios .mision-y-vision, .desktop .servicios .mision-y-vision-2, .desktop .servicios .mision-y-vision-3, .desktop .servicios .mision-y-vision-4, .desktop .servicios .mision-y-vision-5, .desktop .servicios .mision-y-vision-6, .desktop .servicios .mision-y-vision-7, .desktop .servicios .mision-y-vision-8, .desktop .servicios .mision-y-vision-9, .desktop .servicios .mision-y-vision-legal { position: relative !important; width: 100% !important; height: 205px !important; padding: 22px !important; overflow: hidden; }
  .desktop .servicios .opacidad-2 { position: absolute !important; inset: -6px !important; display: block !important; width: auto !important; height: auto !important; background: linear-gradient(90deg, #2583c5 0%, #2583c5 38%, rgba(37,131,197,.88) 54%, rgba(37,131,197,.12) 100%) !important; }
  .desktop .servicios .mision, .desktop .servicios .texto-3, .desktop .servicios .cuerpo, .desktop .servicios .cuerpo-2 { position: relative !important; width: auto !important; height: auto !important; margin: 0 !important; z-index: 1; }
  .desktop .servicios .cono { display: none !important; }
  .desktop .servicios .text-wrapper-7 { font-size: 24px !important; line-height: 1.15 !important; white-space: normal !important; }
  .desktop .servicios .text-wrapper-8, .desktop .servicios .text-wrapper-9 { width: auto !important; height: auto !important; font-size: 14px !important; line-height: 1.35 !important; }

  /* App Mi+Mi */
  .desktop .app-mi-mi .hero-2, .desktop .app-mi-mi .dashboard { position: static !important; display: flex !important; flex-direction: column; width: 100% !important; height: auto !important; padding: 0 !important; gap: 20px; }
  .desktop .app-mi-mi .group-wrapper, .desktop .app-mi-mi .group, .desktop .app-mi-mi .texto-7, .desktop .app-mi-mi .tarjetas-3, .desktop .app-mi-mi .div-3, .desktop .app-mi-mi .frame-5, .desktop .app-mi-mi .tabletmi-mi-wrapper { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; }
  .desktop .app-mi-mi .group { background: none !important; }
  .desktop .app-mi-mi .texto-7 { order: 1; padding: 0 !important; }
  .desktop .app-mi-mi .group-wrapper { order: 2; text-align: center; }
  .desktop .app-mi-mi .telefonosmi-MI, .desktop .app-mi-mi .tabletmi-mi { position: static !important; display: block; width: min(100%, 520px) !important; height: auto !important; margin: 0 auto !important; }
  .desktop .app-mi-mi .text-5, .desktop .app-mi-mi .text-6, .desktop .app-mi-mi .text-7, .desktop .app-mi-mi .text-wrapper-24, .desktop .app-mi-mi .datos-de-campo-que, .desktop .app-mi-mi .text-wrapper-28, .desktop .app-mi-mi .text-wrapper-29 { width: auto !important; height: auto !important; }
  .desktop .app-mi-mi .text-6 { font-size: clamp(30px, 5vw, 44px) !important; line-height: 1.15 !important; }
  .desktop .app-mi-mi .tarjetas-3 { display: flex !important; flex-direction: column; gap: 18px !important; }
  .desktop .app-mi-mi .div-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .desktop .app-mi-mi .dato { position: static !important; width: 100% !important; height: auto !important; min-height: 100px; }
  .desktop .app-mi-mi .dashboard { background: #2583c51a; padding: 22px !important; }
  .desktop .app-mi-mi .checks { position: static !important; width: 100% !important; height: auto !important; }

  /* Mantiene separado el cierre de servicios del inicio de Mi+Mi. */
  .desktop .servicios { padding-bottom: 64px !important; }
  .desktop .app-mi-mi {
    margin-top: 0 !important;
    padding-top: 64px !important;
    clear: both;
    isolation: isolate;
  }
  .desktop .app-mi-mi .hero-2 { margin-top: 0 !important; }
  .desktop .app-mi-mi > .hero-2 { position: relative !important; z-index: 1 !important; }
  .desktop .app-mi-mi > .tarjetas-3, .desktop .app-mi-mi > .dashboard { position: relative !important; z-index: 1 !important; }

  /* Perfiles, certificaciones, contacto y pie */
  .desktop .perfiles .tarjetas { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); width: min(100%, 820px) !important; height: auto !important; gap: 14px !important; }
  .desktop .perfiles .div-2 { position: static !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
  .desktop .perfiles .imagen, .desktop .perfiles .imagen-2, .desktop .perfiles .imagen-3, .desktop .perfiles .imagen-4, .desktop .perfiles .imagen-5, .desktop .perfiles .imagen-6, .desktop .perfiles .imagen-7, .desktop .perfiles .imagen-8 { width: 100% !important; height: 190px !important; }
  .desktop .perfiles .div-2 .div-wrapper-3 { position: static !important; display: flex !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: #fff !important; }
  .desktop .perfiles .div-2 .div-wrapper-3:nth-of-type(2) { justify-content: center !important; }
  .desktop .perfiles .div-2 .div-wrapper-3:last-child { justify-content: center !important; border-top: 1px solid rgba(37, 131, 197, .14) !important; }
  .desktop .perfiles .div-2 .text-wrapper-14, .desktop .perfiles .div-2 .generan-inter-s-y, .desktop .perfiles .div-2 .impulsan-tus-ventas, .desktop .perfiles .div-2 .text-wrapper-15, .desktop .perfiles .div-2 .text-wrapper-16 { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; font-size: 13px !important; line-height: 1.35 !important; text-align: center !important; }
  .desktop .certificados .certificados-2 { position: static !important; display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); width: min(100%, 820px) !important; height: auto !important; gap: 14px; }
  .desktop .certificados .certificados-2 img { position: static !important; display: block; width: 100% !important; height: auto !important; }
  .desktop .contacto .formulario, .desktop .contacto .contact-form { position: static !important; width: min(100%, 680px) !important; height: auto !important; }
  .desktop .contacto .form-grid { width: 100% !important; }
  .desktop .footer {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    padding: 38px 24px !important;
    gap: 28px !important;
  }
  .desktop .footer *,
  .desktop .footer .div-3,
  .desktop .footer .logo-contenido,
  .desktop .footer .nav,
  .desktop .footer .columna,
  .desktop .footer .copyright {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .desktop .footer .div-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
  }
  .desktop .footer .logo-contenido {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .desktop .footer .logo-GCP-blanco { width: min(225px, 100%) !important; }
  .desktop .footer .text-wrapper-31 { width: min(100%, 430px) !important; font-size: 15px !important; line-height: 1.45 !important; }
  .desktop .footer .redes { display: flex !important; width: auto !important; gap: 12px !important; }
  .desktop .footer .vector-11 { width: 44px !important; height: 44px !important; }
  .desktop .footer .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 26px 20px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .desktop .footer .columna {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
  }
  .desktop .footer .text-wrapper-32,
  .desktop .footer .text-wrapper-34 { font-size: 21px !important; line-height: 1.2 !important; white-space: normal !important; }
  .desktop .footer .text-wrapper-33,
  .desktop .footer .text-wrapper-35,
  .desktop .footer .yosemite-n-poles { font-size: 14px !important; line-height: 1.42 !important; white-space: normal !important; }
  .desktop .footer .div-4,
  .desktop .footer .div-5,
  .desktop .footer .servicios-2,
  .desktop .footer .servicios-3,
  .desktop .footer .contacto-2,
  .desktop .footer .nosotros,
  .desktop .footer .nosotros-2,
  .desktop .footer .bolsa-de-trabajo,
  .desktop .footer .div-6 { display: flex !important; align-items: flex-start !important; gap: 6px !important; max-width: 100% !important; }
  .desktop .footer .div-4 .img,
  .desktop .footer .div-5 .img,
  .desktop .footer .servicios-2 .img,
  .desktop .footer .servicios-3 .img,
  .desktop .footer .contacto-2 .img,
  .desktop .footer .nosotros .img,
  .desktop .footer .nosotros-2 .img,
  .desktop .footer .bolsa-de-trabajo .img,
  .desktop .footer .div-6 .img { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
  .desktop .footer .copyright { display: block !important; width: 100% !important; }
  .desktop .footer .text-wrapper-36 { display: block !important; font-size: 13px !important; line-height: 1.4 !important; white-space: normal !important; }
}

@keyframes mobile-values-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .desktop .navbar { height: auto !important; min-height: 108px !important; flex-wrap: wrap !important; align-content: center !important; padding: 8px 10px !important; gap: 5px !important; }
  .desktop .navbar .logo { display: none !important; }
  .desktop .navbar .pestaas { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; flex: 0 0 100% !important; width: 100% !important; gap: 5px 2px !important; overflow: visible !important; text-align: center !important; }
  .desktop .navbar .pestaas .frame { width: 100% !important; min-width: 0 !important; }
  .desktop .navbar .pestaas .text-wrapper-37 { display: block !important; font-size: 11px !important; line-height: 1.15 !important; white-space: normal !important; }
  .desktop .hero { height: 420px !important; }
  .desktop .hero .header, .desktop .hero .text-wrapper { font-size: 38px !important; }
  .desktop .hero .subheader { font-size: 16px !important; }
  .desktop .stats .p { font-size: 38px !important; }
  .desktop .stats .text-wrapper-4 { font-size: 11px !important; }
  .desktop .filosofa .tarjetas-2, .desktop .servicios .tarejtas, .desktop .perfiles .tarjetas { grid-template-columns: 1fr !important; }
  .desktop .filosofa .mision-y-vision-10, .desktop .filosofa .valores, .desktop .filosofa .valores-2 { width: min(100%, 430px) !important; }
  .desktop .cobertura .tarjeta-zona { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .desktop .cobertura .coverage-cards { grid-template-columns: 1fr !important; }
  .desktop .app-mi-mi .div-3 { grid-template-columns: 1fr !important; }
  .desktop .app-mi-mi { gap: 34px !important; padding-top: 48px !important; }
  .desktop .app-mi-mi > .hero-2 { gap: 24px !important; }
  .desktop .app-mi-mi .group-wrapper { order: 2 !important; }
  .desktop .app-mi-mi .texto-7 { order: 1 !important; }
  .desktop .app-mi-mi .telefonosmi-MI { width: min(78vw, 300px) !important; }
  .desktop .app-mi-mi .tabletmi-mi { width: min(100%, 430px) !important; }
  .desktop .certificados .certificados-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .desktop .footer { padding: 34px 18px !important; }
  .desktop .footer .nav { grid-template-columns: 1fr !important; gap: 24px !important; }
}