/* Capa final para telefonos y tabletas. Se carga despues del CSS exportado de Figma. */
@media (max-width: 1024px) {
  .desktop main > section {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* El carrusel no usa coordenadas del diseno de escritorio. */
  .desktop .filosofa .valores {
    position: relative !important;
    overflow: hidden !important;
  }
  .desktop .filosofa .valores > :not(.valores-carrusel),
  .desktop .filosofa .valores-carrusel * {
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
  .desktop .filosofa .valores-carrusel {
    display: flex !important;
    align-items: stretch !important;
    width: max-content !important;
    height: auto !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 0 14px !important;
    animation: cepron-mobile-values 30s linear infinite !important;
    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;
    min-width: 205px !important;
    height: 220px !important;
    min-height: 220px !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
    text-align: center !important;
  }
  .desktop .filosofa .valores .cono-2,
  .desktop .filosofa .valores .div-wrapper-3,
  .desktop .filosofa .valores .cuerpo-4 {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop .filosofa .valores .cono-2 img {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 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.16 !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;
  }

  /* El bloque Mi+Mi se obliga a ocupar su propio espacio en el flujo. */
  .desktop .servicios { padding-bottom: 72px !important; }
  .desktop .app-mi-mi {
    position: relative !important;
    inset: auto !important;
    clear: both !important;
    margin: 0 !important;
    padding-top: 64px !important;
    z-index: 2 !important;
  }
  .desktop .app-mi-mi > .hero-2,
  .desktop .app-mi-mi > .tarjetas-3,
  .desktop .app-mi-mi > .dashboard,
  .desktop .app-mi-mi .group-wrapper,
  .desktop .app-mi-mi .group,
  .desktop .app-mi-mi .texto-7,
  .desktop .app-mi-mi .frame-5,
  .desktop .app-mi-mi .tabletmi-mi-wrapper {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .desktop .app-mi-mi > .hero-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 26px !important;
  }
  .desktop .app-mi-mi .texto-7 { order: 1 !important; }
  .desktop .app-mi-mi .group-wrapper { order: 2 !important; text-align: center !important; }
  .desktop .app-mi-mi .group { background: none !important; }
  .desktop .app-mi-mi .texto-7 > *,
  .desktop .app-mi-mi .frame-5 > *,
  .desktop .app-mi-mi .checks,
  .desktop .app-mi-mi .tarjetas-3 .div-3 {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop .app-mi-mi .telefonosmi-MI,
  .desktop .app-mi-mi .tabletmi-mi {
    position: static !important;
    display: block !important;
    width: min(100%, 440px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* En tactil se muestran titulo y descripcion sin depender de hover. */
  .desktop .perfiles .div-2 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .desktop .perfiles .div-2 .div-wrapper-3,
  .desktop .perfiles .div-2 .div-wrapper-3:last-child {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #fff !important;
  }
  .desktop .perfiles .div-2 .div-wrapper-3:last-child { 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;
  }
}

/*
 * Algunos navegadores moviles conservan un viewport CSS de escritorio aun con
 * viewport meta. La clase se asigna desde <head> usando el ancho fisico de la
 * pantalla, para conservar el mismo flujo responsive en Android, iPhone e iPad.
 */
html.cepron-mobile,
html.cepron-mobile body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html.cepron-mobile .desktop {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.cepron-mobile .desktop::before { display: none !important; }
html.cepron-mobile .desktop main {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
}
html.cepron-mobile .desktop main > section,
html.cepron-mobile .desktop .footer {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Encabezado: logo + CTA y todas las secciones visibles sin scroll horizontal. */
html.cepron-mobile .desktop > .navbar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 1000 !important;
  display: grid !important;
  grid-template-columns: minmax(92px, 1fr) auto !important;
  grid-template-areas: "logo contact" "menu menu" !important;
  align-items: center !important;
  gap: 8px 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  border-bottom: 4px solid #f5863f !important;
}
html.cepron-mobile .desktop > .navbar > .logo {
  grid-area: logo !important;
  position: static !important;
  display: block !important;
  width: 100px !important;
  height: auto !important;
  margin: 0 !important;
}
html.cepron-mobile .desktop > .navbar > .logo .logo-link,
html.cepron-mobile .desktop > .navbar > .logo .LOGO-GCP {
  position: static !important;
  display: block !important;
  width: 100px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
html.cepron-mobile .desktop > .navbar > .pestaas {
  grid-area: menu !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(27px, auto) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 3px 2px !important;
  overflow: visible !important;
  white-space: normal !important;
}
html.cepron-mobile .desktop > .navbar > .pestaas > a.frame {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 27px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 1px !important;
  transform: none !important;
}
html.cepron-mobile .desktop > .navbar > .pestaas > a.frame > .text-wrapper-37 {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #2583c5 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  transform: none !important;
}
html.cepron-mobile .desktop > .navbar > .CTA-3 {
  grid-area: contact !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 108px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: #f5863f !important;
  transform: none !important;
}
html.cepron-mobile .desktop > .navbar > .CTA-3 .text-wrapper-38 {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html.cepron-mobile .desktop .hero { order: 1; height: 430px !important; padding: 28px 16px !important; }
html.cepron-mobile .desktop .stats { order: 2; }
html.cepron-mobile .desktop .filosofa { order: 3; }
html.cepron-mobile .desktop .clientes { order: 4; }
html.cepron-mobile .desktop .cobertura { order: 5; }
html.cepron-mobile .desktop .servicios { order: 6; }
html.cepron-mobile .desktop .app-mi-mi { order: 7; }
html.cepron-mobile .desktop .perfiles { order: 8; }
html.cepron-mobile .desktop .certificados { order: 9; }
html.cepron-mobile .desktop .contacto { order: 10; }
html.cepron-mobile .desktop .footer { order: 11; }
html.cepron-mobile .desktop .hero-video,
html.cepron-mobile .desktop .hero .opacidad { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
html.cepron-mobile .desktop .hero .content { position: relative !important; width: 100% !important; padding: 0 !important; gap: 14px !important; }
html.cepron-mobile .desktop .hero .header,
html.cepron-mobile .desktop .hero .text-wrapper { width: auto !important; font-size: 38px !important; line-height: 1.06 !important; }
html.cepron-mobile .desktop .hero .subheader { width: 100% !important; font-size: 16px !important; line-height: 1.34 !important; }
html.cepron-mobile .desktop .hero-div-line { display: none !important; }
html.cepron-mobile .desktop .stats { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; min-height: 112px !important; height: auto !important; padding: 14px 7px !important; }
html.cepron-mobile .desktop .stats .div-wrapper,
html.cepron-mobile .desktop .stats .p { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; }
html.cepron-mobile .desktop .stats .p { font-size: 36px !important; line-height: 1 !important; }
html.cepron-mobile .desktop .stats .text-wrapper-4 { display: block !important; font-size: 11px !important; line-height: 1.18 !important; }

html.cepron-mobile .desktop .filosofa,
html.cepron-mobile .desktop .clientes,
html.cepron-mobile .desktop .cobertura,
html.cepron-mobile .desktop .servicios,
html.cepron-mobile .desktop .app-mi-mi,
html.cepron-mobile .desktop .perfiles,
html.cepron-mobile .desktop .certificados,
html.cepron-mobile .desktop .contacto { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; padding: 36px 12px !important; }
html.cepron-mobile .desktop .filosofa { background: #2583c51a !important; }
html.cepron-mobile .desktop .texto,
html.cepron-mobile .desktop .texto-2,
html.cepron-mobile .desktop .texto-4 { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: center !important; }
html.cepron-mobile .desktop .text-2,
html.cepron-mobile .desktop .text-4 { font-size: 31px !important; line-height: 1.12 !important; }
html.cepron-mobile .desktop .text-3 { font-size: 15px !important; line-height: 1.4 !important; }
html.cepron-mobile .desktop .text-3 br,
html.cepron-mobile .desktop .text-7 br { display: none !important; }

html.cepron-mobile .desktop .filosofa .tarjetas-2,
html.cepron-mobile .desktop .filosofa .tarjetas-2 * { position: static !important; inset: auto !important; transform: none !important; min-width: 0 !important; }
html.cepron-mobile .desktop .filosofa .tarjetas-2 { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 14px !important; }
html.cepron-mobile .desktop .filosofa .mision-y-vision-10,
html.cepron-mobile .desktop .filosofa .valores,
html.cepron-mobile .desktop .filosofa .valores-2 { width: 100% !important; height: auto !important; min-height: 0 !important; padding: 18px !important; overflow: hidden !important; }
html.cepron-mobile .desktop .filosofa .mision-y-vision-10 { display: flex !important; flex-direction: column !important; gap: 18px !important; }
html.cepron-mobile .desktop .filosofa .mision-2,
html.cepron-mobile .desktop .filosofa .mision-3 { display: flex !important; align-items: flex-start !important; gap: 10px !important; }
html.cepron-mobile .desktop .filosofa .texto-5,
html.cepron-mobile .desktop .filosofa .texto-6,
html.cepron-mobile .desktop .filosofa .cuerpo-2,
html.cepron-mobile .desktop .filosofa .cuerpo-3 { flex: 1 !important; width: auto !important; overflow: visible !important; }
html.cepron-mobile .desktop .filosofa .text-wrapper-20,
html.cepron-mobile .desktop .filosofa .text-wrapper-21 { width: auto !important; font-size: 14px !important; line-height: 1.38 !important; }
html.cepron-mobile .desktop .filosofa .valores { display: flex !important; flex-direction: column !important; align-items: center !important; }
html.cepron-mobile .desktop .filosofa .valores-carrusel { position: relative !important; display: flex !important; align-items: stretch !important; width: max-content !important; height: auto !important; gap: 14px !important; margin: 0 !important; padding: 0 0 12px !important; animation: cepron-mobile-values 30s linear infinite !important; }
html.cepron-mobile .desktop .filosofa .valor,
html.cepron-mobile .desktop .filosofa .valor-2,
html.cepron-mobile .desktop .filosofa .valor-3,
html.cepron-mobile .desktop .filosofa .valor-4 { display: flex !important; flex: 0 0 min(78vw, 270px) !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: min(78vw, 270px) !important; min-width: min(78vw, 270px) !important; min-height: 210px !important; height: 210px !important; padding: 16px !important; margin: 0 !important; text-align: center !important; }
html.cepron-mobile .desktop .filosofa .organigrama-img { display: block !important; width: 100% !important; height: auto !important; }

html.cepron-mobile .desktop .clientes { padding-inline: 0 !important; }
html.cepron-mobile .desktop .clientes .texto { padding: 0 14px !important; }
html.cepron-mobile .desktop .logos-carousel { position: static !important; width: calc(100% - 24px) !important; }

html.cepron-mobile .desktop .cobertura .frame { position: static !important; display: flex !important; flex-direction: column !important; gap: 18px !important; width: 100% !important; height: auto !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-zona-wrapper,
html.cepron-mobile .desktop .cobertura .tarjeta-zona,
html.cepron-mobile .desktop .cobertura .coverage-cards { position: static !important; width: 100% !important; height: auto !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-zona { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; gap: 8px !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 58px !important; padding: 0 !important; overflow: hidden !important; text-align: left !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa > .zona { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 58px !important; padding: 7px 29px 7px 8px !important; gap: 8px !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .circulo { position: relative !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse,
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse-2,
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse-3,
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse-4,
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse-5,
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .ellipse-6 { position: absolute !important; inset: 0 !important; width: 42px !important; height: 42px !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .circulo > :last-child { position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; font-size: 18px !important; line-height: 1 !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .zona-estados { position: static !important; display: block !important; width: auto !important; margin: 0 !important; line-height: 1.05 !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .text-wrapper-11 { display: block !important; font-size: 16px !important; line-height: 1.08 !important; white-space: nowrap !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .text-wrapper-12 { display: block !important; margin-top: 2px !important; font-size: 12px !important; line-height: 1.08 !important; white-space: nowrap !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa > .arrow-caret-down-SM { position: absolute !important; top: 21px !important; right: 9px !important; width: 14px !important; height: 14px !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa .zone-states { position: static !important; display: none !important; width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 12px 10px 58px !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; font-size: 12px !important; line-height: 1.32 !important; }
html.cepron-mobile .desktop .cobertura .tarjeta-mapa.is-active .zone-states { display: block !important; }
html.cepron-mobile .desktop .cobertura .mexico { position: relative !important; width: min(100%, 470px) !important; height: auto !important; aspect-ratio: 1.55 !important; margin: 0 auto !important; }
html.cepron-mobile .desktop .cobertura .map-layer { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }
html.cepron-mobile .desktop .cobertura .map-zone-hotspot { display: none !important; }
html.cepron-mobile .desktop .cobertura .coverage-cards { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
html.cepron-mobile .desktop .cobertura .coverage-card { position: static !important; width: 100% !important; min-height: 0 !important; }

html.cepron-mobile .desktop .servicios .tarjteas,
html.cepron-mobile .desktop .servicios .tarejtas { position: static !important; display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; height: auto !important; gap: 12px !important; }
html.cepron-mobile .desktop .servicios .mision-y-vision,
html.cepron-mobile .desktop .servicios .mision-y-vision-2,
html.cepron-mobile .desktop .servicios .mision-y-vision-3,
html.cepron-mobile .desktop .servicios .mision-y-vision-4,
html.cepron-mobile .desktop .servicios .mision-y-vision-5,
html.cepron-mobile .desktop .servicios .mision-y-vision-6,
html.cepron-mobile .desktop .servicios .mision-y-vision-7,
html.cepron-mobile .desktop .servicios .mision-y-vision-8,
html.cepron-mobile .desktop .servicios .mision-y-vision-9,
html.cepron-mobile .desktop .servicios .mision-y-vision-legal { position: relative !important; width: 100% !important; height: 178px !important; padding: 18px !important; overflow: hidden !important; }
html.cepron-mobile .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,.86) 57%, rgba(37,131,197,.10) 100%) !important; }
html.cepron-mobile .desktop .servicios .mision,
html.cepron-mobile .desktop .servicios .texto-3,
html.cepron-mobile .desktop .servicios .cuerpo,
html.cepron-mobile .desktop .servicios .cuerpo-2 { position: relative !important; width: auto !important; height: auto !important; margin: 0 !important; z-index: 1 !important; }
html.cepron-mobile .desktop .servicios .cono { display: none !important; }
html.cepron-mobile .desktop .servicios .text-wrapper-7 { font-size: 22px !important; line-height: 1.14 !important; white-space: normal !important; }
html.cepron-mobile .desktop .servicios .text-wrapper-8,
html.cepron-mobile .desktop .servicios .text-wrapper-9 { width: auto !important; height: auto !important; font-size: 13px !important; line-height: 1.3 !important; }

html.cepron-mobile .desktop .app-mi-mi { clear: both !important; isolation: isolate !important; padding-top: 44px !important; }
html.cepron-mobile .desktop .app-mi-mi > .hero-2,
html.cepron-mobile .desktop .app-mi-mi > .tarjetas-3,
html.cepron-mobile .desktop .app-mi-mi > .dashboard { position: static !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; height: auto !important; margin: 0 !important; }
html.cepron-mobile .desktop .app-mi-mi > .hero-2 { gap: 22px !important; }
html.cepron-mobile .desktop .app-mi-mi .texto-7,
html.cepron-mobile .desktop .app-mi-mi .group-wrapper,
html.cepron-mobile .desktop .app-mi-mi .group,
html.cepron-mobile .desktop .app-mi-mi .tarjetas-3,
html.cepron-mobile .desktop .app-mi-mi .div-3,
html.cepron-mobile .desktop .app-mi-mi .frame-5,
html.cepron-mobile .desktop .app-mi-mi .tabletmi-mi-wrapper { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; }
html.cepron-mobile .desktop .app-mi-mi .texto-7 { order: 1 !important; }
html.cepron-mobile .desktop .app-mi-mi .group-wrapper { order: 2 !important; text-align: center !important; }
html.cepron-mobile .desktop .app-mi-mi .group { background: none !important; }
html.cepron-mobile .desktop .app-mi-mi .texto-7 > *,
html.cepron-mobile .desktop .app-mi-mi .frame-5 > *,
html.cepron-mobile .desktop .app-mi-mi .checks,
html.cepron-mobile .desktop .app-mi-mi .tarjetas-3 .div-3 { position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; }
html.cepron-mobile .desktop .app-mi-mi .telefonosmi-MI { position: static !important; display: block !important; width: min(78vw, 290px) !important; height: auto !important; margin: 0 auto !important; }
html.cepron-mobile .desktop .app-mi-mi .tabletmi-mi { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 auto !important; }
html.cepron-mobile .desktop .app-mi-mi .tarjetas-3 { gap: 14px !important; }
html.cepron-mobile .desktop .app-mi-mi .div-3 { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
html.cepron-mobile .desktop .app-mi-mi .dato { position: static !important; width: 100% !important; min-height: 0 !important; height: auto !important; }
html.cepron-mobile .desktop .app-mi-mi .dashboard { gap: 18px !important; padding: 18px !important; background: #2583c51a !important; }

html.cepron-mobile .desktop .perfiles .tarjetas { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; height: auto !important; gap: 12px !important; }
html.cepron-mobile .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; }
html.cepron-mobile .desktop .perfiles .imagen,
html.cepron-mobile .desktop .perfiles .imagen-2,
html.cepron-mobile .desktop .perfiles .imagen-3,
html.cepron-mobile .desktop .perfiles .imagen-4,
html.cepron-mobile .desktop .perfiles .imagen-5,
html.cepron-mobile .desktop .perfiles .imagen-6,
html.cepron-mobile .desktop .perfiles .imagen-7,
html.cepron-mobile .desktop .perfiles .imagen-8 { width: 100% !important; height: 125px !important; }
html.cepron-mobile .desktop .perfiles .div-2 .div-wrapper-3,
html.cepron-mobile .desktop .perfiles .div-2 .div-wrapper-3:last-child { position: static !important; display: flex !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 9px 8px !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: #fff !important; }
html.cepron-mobile .desktop .perfiles .div-2 .div-wrapper-3:last-child { border-top: 1px solid rgba(37, 131, 197, .14) !important; }
html.cepron-mobile .desktop .perfiles .div-2 .text-wrapper-14,
html.cepron-mobile .desktop .perfiles .div-2 .generan-inter-s-y,
html.cepron-mobile .desktop .perfiles .div-2 .impulsan-tus-ventas,
html.cepron-mobile .desktop .perfiles .div-2 .text-wrapper-15,
html.cepron-mobile .desktop .perfiles .div-2 .text-wrapper-16 { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; font-size: 12px !important; line-height: 1.28 !important; text-align: center !important; }
html.cepron-mobile .desktop .certificados .certificados-2 { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; height: auto !important; gap: 10px !important; }
html.cepron-mobile .desktop .certificados .certificados-2 img { position: static !important; display: block !important; width: 100% !important; height: auto !important; }
html.cepron-mobile .desktop .contacto .formulario,
html.cepron-mobile .desktop .contacto .contact-form { position: static !important; width: 100% !important; height: auto !important; }
html.cepron-mobile .desktop .contacto .form-grid { width: 100% !important; }
html.cepron-mobile .desktop .footer { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; padding: 30px 16px !important; gap: 22px !important; }
html.cepron-mobile .desktop .footer *,
html.cepron-mobile .desktop .footer .div-3,
html.cepron-mobile .desktop .footer .logo-contenido,
html.cepron-mobile .desktop .footer .nav,
html.cepron-mobile .desktop .footer .columna,
html.cepron-mobile .desktop .footer .copyright { position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; }
html.cepron-mobile .desktop .footer .div-3 { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; }
html.cepron-mobile .desktop .footer .logo-contenido { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; }
html.cepron-mobile .desktop .footer .logo-GCP-blanco { width: min(200px, 100%) !important; }
html.cepron-mobile .desktop .footer .redes { display: flex !important; width: auto !important; gap: 10px !important; }
html.cepron-mobile .desktop .footer .vector-11 { width: 40px !important; height: 40px !important; }
html.cepron-mobile .desktop .footer .nav { display: grid !important; grid-template-columns: 1fr !important; align-items: start !important; gap: 20px !important; width: 100% !important; }
html.cepron-mobile .desktop .footer .columna { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; }

@media (max-width: 640px) {
  /* Zonas compactas y desplegables dentro de la misma tarjeta. */
  .desktop .cobertura .tarjeta-zona {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .desktop .cobertura .tarjeta-mapa {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    margin: 0 !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;
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 7px 34px 7px 9px !important;
    gap: 9px !important;
  }
  .desktop .cobertura .tarjeta-mapa .circulo {
    position: relative !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !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: 46px !important;
    height: 46px !important;
  }
  .desktop .cobertura .tarjeta-mapa .circulo > :last-child {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    place-items: center !important;
    font-size: 19px !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; }
  .desktop .cobertura .tarjeta-mapa .text-wrapper-12 { display: block !important; margin-top: 3px !important; font-size: 13px !important; line-height: 1.1 !important; }
  .desktop .cobertura .tarjeta-mapa > .arrow-caret-down-SM { position: absolute !important; top: 23px !important; right: 12px !important; width: 16px !important; height: 16px !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 12px 64px !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 .app-mi-mi { padding-top: 58px !important; }
  .desktop .app-mi-mi .telefonosmi-MI { width: min(76vw, 290px) !important; }
}

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

@media (prefers-reduced-motion: reduce) {
  .desktop .filosofa .valores-carrusel { animation: none !important; }
}

/* Navegacion movil: una sola composicion, independiente de las coordenadas Figma. */
@media (max-width: 1024px) {
  .desktop > .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: minmax(96px, 1fr) auto !important;
    grid-template-areas: "logo contact" "menu menu" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    background: #fff !important;
    border-bottom: 4px solid #f5863f !important;
  }

  .desktop > .navbar > .logo {
    grid-area: logo !important;
    position: static !important;
    display: block !important;
    width: 112px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop > .navbar > .logo .logo-link,
  .desktop > .navbar > .logo .LOGO-GCP {
    position: static !important;
    display: block !important;
    width: 112px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .desktop > .navbar > .pestaas {
    grid-area: menu !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(28px, auto) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px 2px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .desktop > .navbar > .pestaas > a.frame {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 1px !important;
    overflow: visible !important;
    transform: none !important;
  }
  .desktop > .navbar > .pestaas > a.frame > .text-wrapper-37 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #2583c5 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    transform: none !important;
  }

  .desktop > .navbar > .CTA-3 {
    grid-area: contact !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 116px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    overflow: visible !important;
    border-radius: 999px !important;
    background: #f5863f !important;
    transform: none !important;
  }
  .desktop > .navbar > .CTA-3 .text-wrapper-38 {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .desktop > .navbar { grid-template-columns: 92px auto !important; padding-inline: 8px !important; }
  .desktop > .navbar > .logo,
  .desktop > .navbar > .logo .logo-link,
  .desktop > .navbar > .logo .LOGO-GCP { width: 96px !important; }
  .desktop > .navbar > .CTA-3 { min-width: 104px !important; height: 32px !important; padding-inline: 10px !important; }
  .desktop > .navbar > .CTA-3 .text-wrapper-38 { font-size: 12px !important; }
  .desktop > .navbar > .pestaas > a.frame > .text-wrapper-37 { font-size: 10px !important; }
}

/*
 * Salvaguarda para navegadores moviles que reportan un viewport CSS amplio.
 * Algunos WebView de Android e iOS no activan el corte de 640px aunque el
 * dispositivo sea angosto. Estas reglas conservan el flujo movil hasta 1024px.
 */
@media (max-width: 1024px) {
  .desktop .filosofa .tarjetas-2,
  .desktop .servicios .tarejtas,
  .desktop .perfiles .tarjetas {
    grid-template-columns: 1fr !important;
    width: min(100%, 480px) !important;
  }

  .desktop .app-mi-mi,
  .desktop .app-mi-mi > .hero-2,
  .desktop .app-mi-mi > .tarjetas-3,
  .desktop .app-mi-mi > .dashboard {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop .app-mi-mi { padding-top: 48px !important; }
  .desktop .app-mi-mi > .hero-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  .desktop .app-mi-mi .texto-7,
  .desktop .app-mi-mi .group-wrapper,
  .desktop .app-mi-mi .group,
  .desktop .app-mi-mi .tarjetas-3,
  .desktop .app-mi-mi .div-3,
  .desktop .app-mi-mi .dashboard,
  .desktop .app-mi-mi .frame-5,
  .desktop .app-mi-mi .tabletmi-mi-wrapper {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  .desktop .app-mi-mi .texto-7 { order: 1 !important; }
  .desktop .app-mi-mi .group-wrapper { order: 2 !important; text-align: center !important; }
  .desktop .app-mi-mi .telefonosmi-MI {
    position: static !important;
    display: block !important;
    width: min(76vw, 300px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .desktop .app-mi-mi .tabletmi-mi {
    position: static !important;
    display: block !important;
    width: min(100%, 480px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .desktop .app-mi-mi .div-3 { grid-template-columns: 1fr !important; }

  .desktop .perfiles .div-2 .div-wrapper-3,
  .desktop .perfiles .div-2 .div-wrapper-3:last-child {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    opacity: 1 !important;
    transform: none !important;
  }
}