/*
  CSS responsive de escritorio para "alarmas".
  Mantiene intacto el diseño base (>=1920px) y permite ajustes por debajo.
  Agrega reglas SOLO dentro del breakpoint correspondiente para no afectar 1900/1920.
*/

/* Ultra-wide (opcional) */
@media (min-width: 2560px) {
  /* Añade ajustes específicos para 2560+ si hiciera falta */
}

/* Debajo de 1920: añadir overrides sin tocar el diseño base */
@media (max-width: 1919px) {
  /* Ejemplo: aquí puedes sobreescribir tamaños/posiciones para 1680/1600/1440... */
  html, body { overflow-x: hidden; }
  .element-web-application { min-width: 0; width: 100%; overflow-x: hidden; }
  
  /* REGLA GLOBAL: Header NO debe bloquear scroll en TODAS las resoluciones */
  .element-web-application .header {
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overscroll-behavior: none !important;
  }
  
  .element-web-application .bg-header {
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overscroll-behavior: none !important;
  }
  
  /* Asegurar que elementos interactivos del header sean clicables */
  .element-web-application .header > *,
  .element-web-application .header .logo-alarmas,
  .element-web-application .header .button-6 {
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* Secciones a ancho completo para evitar desbordes horizontales */
  .element-web-application .BG-hero,
  .element-web-application .mask-group,
  .element-web-application .bg-header,
  .element-web-application .header,
  .element-web-application .rectangle-6 {
    width: 100%;
    left: 0;
  }

  /* Imagen de hero a ancho completo */
  .element-web-application .una-pareja-joven,
  .element-web-application .rectangle-2 {
    width: 100%;
    left: 0;
  }

  /* Banner vigilancia: prevenir desplazamiento a la derecha */
  .element-web-application .banner-vigilancia .imax-banne { margin-right: 0; }

  /* Evitar márgenes negativos que generan scroll lateral */
  .element-web-application .banner-ahorro {
    margin-right: 0;
    margin-bottom: 0;
  }

  .element-web-application .frame,
  .element-web-application .banner-foto,
  .element-web-application .frame-11,
  .element-web-application .faqs,
  .element-web-application .banner-vigilancia {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* 1680px */
@media (max-width: 1680px) {
  /* Cabecera centrada a 1680 */
  .element-web-application .bg-header { 
    width: 100%; 
    left: 0; 
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overscroll-behavior: none !important;
  }
  .element-web-application .header { 
    width: 100%; 
    left: 0; 
    padding: 27px 140px;
    pointer-events: none !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    overscroll-behavior: none !important;
  }
  /* Asegurar que elementos interactivos del header sean clicables */
  .element-web-application .header > *,
  .element-web-application .header .logo-alarmas,
  .element-web-application .header .button-6 {
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* Contenedores principales */
  .element-web-application .faqs { width: 1280px; }
  .element-web-application .banner-foto { width: 1280px; }

  /* Banner vigilancia: lado a lado, sin solape, desplazado a la izquierda */
  .element-web-application .banner-vigilancia {
    display: flex;
    flex-direction: row; /* asegurar lado a lado */
    align-items: center;
    gap: 40px;
    width: 1280px; /* contenedor más estrecho para 1680 */
  }
  .element-web-application .banner-vigilancia .imax-banne {
    width: 600px;
    height: auto;
  }
  .element-web-application .banner-vigilancia .texto {
    position: static !important; /* anula absolute del base */
    top: auto !important;
    left: auto !important;
    width: calc(100% - 600px - 40px);
    height: auto;
    margin: 0;
  }
  .element-web-application .banner-vigilancia .texto-banner,
  .element-web-application .banner-vigilancia .titulo-y-subtitulo-wrapper,
  .element-web-application .banner-vigilancia .titulo-y-subtitulo {
    position: static !important;
  }
  .element-web-application .banner-vigilancia .text-wrapper-9 {
    font-size: 36px;
    line-height: 1.25;
  }
  .element-web-application .banner-vigilancia .text-wrapper-10 {
    font-size: 18px;
    line-height: 1.5;
  }
  .element-web-application .banner-vigilancia .button-7 {
    margin-top: 10px;
  }

  /* Empujar FAQs un poco hacia abajo para evitar solape con la imagen anterior */
  .element-web-application .faqs {
    transform: translate(-50%, 50px);
  }

  /* Evitar que el icono de FAQs tape el título en 1680 */
  .element-web-application .group-5 .uuid-d-a {
    left: -50px; /* mueve el icono más a la izquierda */
    width: 130px; /* ligeramente más pequeño */
    height: 117px;
  }
  .element-web-application .group-5 .pricing-plans-2 {
    left: 12.5%; /* corre el título un poco a la derecha */
  }

  /* ¿Por qué elegirnos? en una sola línea */
  .element-web-application .titulo-ventajas {
    width: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .element-web-application .titulo-ventajas .pricing-plans {
    white-space: nowrap;
    font-size: clamp(36px, 2.4vw, 48px);
  }
}

/* 1600px */
@media (max-width: 1600px) {
  /* Cabecera centrada a 1600 */
  .element-web-application .bg-header { 
    width: 100%; 
    left: 0; 
    height: 180px;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  .element-web-application .header { 
    width: 100%; 
    left: 0; 
    height: 180px; 
    padding: 20px 110px;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  /* Asegurar que elementos interactivos del header sean clicables */
  .element-web-application .header > *,
  .element-web-application .header .logo-alarmas,
  .element-web-application .header .button-6 {
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* Contenedores principales */
  .element-web-application .faqs { width: 1200px; }
  .element-web-application .banner-foto { width: 1200px; }

  /* Aumentar tamaño del logo en el header para 1600x900 */
  .element-web-application .logo-alarmas {
    width: 180px !important;
    height: 180px !important;
  }
  .element-web-application .logo-alarmas .vector-16 {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  /* Salvaguarda por si el selector del logo cambia a img genérico */
  .element-web-application .logo-alarmas img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Modal Click2Call más pequeño en 1600x900 */
  .formulario-modal .login-form {
    max-width: 520px;
    padding: 40px;
  }
  .formulario-modal .box-formulario {
    min-height: 560px;
    height: auto;
  }
  .formulario-modal .vector-formulario {
    top: 28px;
    left: 120px;
    width: 80px;
    height: 80px;
  }
  .formulario-modal .title-formulario {
    width: 380px;
    top: 130px;
    left: 18px;
  }
  .formulario-modal .element-para-ti-tu-formulario { font-size: 22px; }
  .formulario-modal .span-formulario,
  .formulario-modal .text-wrapper-2-formulario { font-size: 42px; }
  .formulario-modal .inputs-formulario { top: 280px; }
  .formulario-modal .input-nombre,
  .formulario-modal .input-telefono { width: 260px; }
  .formulario-modal .submit-wrapper-formulario { left: 50%; transform: translateX(-50%); }
}

/* 1536px (común en portátiles grandes) */
@media (max-width: 1536px) {
  /* Tus ajustes específicos para 1536 */
}

/* 1440px */
@media (max-width: 1440px) {
  /* Cabecera centrada a 1440 */
  .element-web-application .bg-header { 
    width: 100%; 
    left: 0;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  .element-web-application .header { 
    width: 100%; 
    left: 0; 
    padding: 20px 80px; 
    gap: 40px; 
    justify-content: space-between;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  /* Asegurar que elementos interactivos del header sean clicables */
  .element-web-application .header > *,
  .element-web-application .header .logo-alarmas,
  .element-web-application .header .button-6 {
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* Contenedores principales */
  .element-web-application .faqs { width: calc(100% - 160px); }
  .element-web-application .banner-foto { width: calc(100% - 160px); }
  .element-web-application .frame-11 { left: 50%; transform: translateX(-50%); width: calc(100% - 160px); gap: 140px; }
  .element-web-application .frame { left: 50%; transform: translateX(-50%); width: calc(100% - 160px); gap: 24px; }
  .element-web-application .banner-vigilancia { width: calc(100% - 160px); gap: 30px; }
  
  /* Separación extra para que el footer no quede solapado por FAQs */
  .element-web-application .faqs { margin-bottom: 220px; padding-bottom: 120px; }

  /* Título hero más pequeño para que se vea completo */
  .element-web-application .h { font-size: 44px; line-height: 52px; }
  .element-web-application .h-2 { font-size: 22px; line-height: 30px; }

  /* Reducir levemente tamaño de cards para encajar en el mismo ancho del header */
  .element-web-application .card,
  .element-web-application .card-2,
  .element-web-application .card-3 { width: 300px; }
  .element-web-application .frame-wrapper { width: 300px; padding: 26px; }
  /* Centrar botones "PROTÉGETE YA" dentro de las cards */
  .element-web-application .button-3,
  .element-web-application .button-4 { left: 50%; transform: translateX(-50%); }
  .element-web-application .card .button-2,
  .element-web-application .card-3 .button-2 { align-self: center; }
  /* Forzar centrado específico en card-3 */
  .element-web-application .card-3 .button-4 {
    position: absolute !important;
    left: 24px !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  .element-web-application .dental-care,
  .element-web-application .p,
  .element-web-application .dental-care-2 { font-size: calc(var(--enunciados-font-size) - 2px); }

  /* Ajuste fino banner imagen+texto */
  .element-web-application .banner-vigilancia .imax-banne { width: 560px; }
  .element-web-application .banner-vigilancia .texto { width: calc(100% - 560px - 30px); }

  /* Asegurar visibilidad del logo en 1440x900 */
  .element-web-application .bg-header { 
    height: 150px; 
    z-index: 998 !important;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  .element-web-application .header { 
    height: 150px; 
    z-index: 999 !important; 
    background-color: #ffffff;
    pointer-events: none !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }
  /* Asegurar que elementos interactivos del header sean clicables en 1440x900 */
  .element-web-application .header > *,
  .element-web-application .header .logo-alarmas,
  .element-web-application .header .button-6 {
    pointer-events: auto !important;
    touch-action: auto !important;
  }
  .element-web-application .logo-alarmas { width: 100px !important; height: 100px !important; z-index: 1003; display: block; position: relative; }
  .element-web-application .header .logo-alarmas { width: 100px !important; height: 100px !important; }
  .element-web-application .logo-alarmas .vector-16,
  .element-web-application .logo-alarmas img { width: 100% !important; height: 100% !important; }

  /* (Revertido) Sin overrides del hero para mantener el diseño original */
  .element-web-application .button-5 { padding: 12px 18px; }
  .element-web-application .large-2 { font-size: calc(var(--resaltar-caracteristicas-font-size) - 2px); }
  .element-web-application .mobile-CTA { width: 580px; height: 460px; }
  .element-web-application .frame-11 .mobile-CTA { margin-left: 130px; }
  .element-web-application .do-something { font-size: 24px; line-height: 34px; }
  .element-web-application .text-wrapper-3 { font-size: calc(var(--text-font-size) - 1px); }
  .element-web-application .titulo-ventajas .pricing-plans { font-size: clamp(34px, 2.2vw, 44px); }
  .element-web-application .logo-alarmas .vector-16,
  .element-web-application .logo-alarmas img { width: 100%; height: 100%; display: block; }

  /* Footer fijo al fondo y visible encima del contenido */
  .element-web-application .sections-footer-dark { top: auto; bottom: 0; }
  .element-web-application .element { top: auto; bottom: 64px; }
  .element-web-application .privacy-policy-terms span { cursor: pointer; }

  /* Centrar textos del footer y asegurar clic del botón del footer */
  .element-web-application .sections-footer-dark { position: absolute; width: 100%; }
  .element-web-application .sections-footer-dark .rectangle { position: relative; z-index: 0; }
  /* Footer alineado como en 1600: políticas a la izquierda; botón se mantiene con estilo base */
  .element-web-application .element { position: absolute; left: 80px; transform: none; width: auto; display: block; z-index: 2; }
  .element-web-application .privacy-policy-terms { position: relative; text-align: left; width: auto; white-space: nowrap; }
  /* Mantener diseño original del botón y solo moverlo a la izquierda */
  .element-web-application .button {
    position: absolute;
    top: calc(50% + 2112px);
    left: calc(50% + 220px);
    right: auto;
    bottom: auto;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
  }

  
}

/* Override dentro del rango ~1400px para ganar a la regla de 1440, sin condicionar por altura */
@media (min-width: 1390px) and (max-width: 1410px) {
  .element-web-application .frame-11 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 117px) !important;
    gap: 140px !important;
  }
}

/* 1400 x 1050 (tolerancia) - ampliar un poco el fondo del formulario principal */
@media (min-width: 1390px) and (max-width: 1410px) and (min-height: 1040px) and (max-height: 1060px) {
  .element-web-application .mobile-CTA {
    width: 613px !important;
    height: 460px !important; /* solicitado para 1400x1050 */
  }
  .element-web-application .frame-11 .mobile-CTA {
    margin-left: 130px; /* alineación similar a 1440 */
  }
  /* Ajuste de frame-11 para 1400 */
  .element-web-application .frame-11 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 117px) !important;
    gap: 140px !important;
  }
}

/* Refuerzo: si sigue aplicando la regla de 1440, sobreescribe para 1400 exacto */
@media (min-width: 1398px) and (max-width: 1402px) and (min-height: 1048px) and (max-height: 1052px) {
  .element-web-application .mobile-CTA,
  .element-web-application .frame-11 .mobile-CTA {
    width: 613px !important;
    height: 460px !important;
  }
}

/* 1366px (solo hasta 900px de alto para no interferir con 1280x1024) */
@media (max-width: 1366px) and (max-height: 900px) {
  /* Contenedores principales un poco más estrechos */
  .element-web-application .faqs,
  .element-web-application .banner-foto,
  .element-web-application .frame-11,
  .element-web-application .frame,
  .element-web-application .banner-vigilancia {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 68px);
  }

  /* Header más compacto */
  .element-web-application .bg-header { width: 100%; left: 0; height: 130px; }
  .element-web-application .header { width: 100%; left: 0; height: 130px; padding: 16px 60px; gap: 24px; }
  .element-web-application .logo-alarmas { width: 80px !important; height: 80px !important; visibility: visible !important; opacity: 1 !important; display: block !important; }
  .element-web-application .header .logo-alarmas { width: 80px !important; height: 80px !important; visibility: visible !important; opacity: 1 !important; display: block !important; }
  .element-web-application .logo-alarmas .vector-16,
  .element-web-application .logo-alarmas img { width: 100% !important; height: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; }
  .element-web-application .button-6 { padding: 12px 16px 12px 24px; gap: 10px; }
  .element-web-application .large-2 { font-size: calc(var(--resaltar-caracteristicas-font-size) - 4px); }

  /* Tipografías del hero más pequeñas */
  .element-web-application .h { font-size: 40px; line-height: 48px; }
  .element-web-application .h-2 { font-size: 20px; line-height: 28px; }
  /* Reposicionar bloque principal */
  .element-web-application .frame-11 { top: 200px; }

  /* Fondo (hero) - mantener altura completa y evitar rayas blancas */
  .element-web-application .BG-hero { 
    width: 100% !important; 
    left: 0 !important; 
    height: 770px !important; 
    overflow: hidden !important; 
  }
  .element-web-application .mask-group { 
    width: 100% !important; 
    height: 770px !important; 
    overflow: hidden !important; 
  }
  .element-web-application .BG { 
    width: 100% !important; 
    height: 770px !important; 
    object-fit: cover !important; 
  }
  .element-web-application .una-pareja-joven { 
    width: 100% !important; 
    left: 0 !important; 
    top: 0 !important; 
    height: 770px !important; 
    object-fit: cover !important; 
  }
  .element-web-application .rectangle-2 { 
    left: 0 !important; 
    width: 100% !important; 
    height: 770px !important; 
    object-fit: cover !important; 
  }

  /* Cards un poco más pequeñas */
  .element-web-application .card,
  .element-web-application .card-2,
  .element-web-application .card-3 { width: 280px; }
  .element-web-application .frame-wrapper { width: 280px; padding: 22px; }
  .element-web-application .dental-care,
  .element-web-application .p,
  .element-web-application .dental-care-2 { font-size: calc(var(--enunciados-font-size) - 3px); }
  .element-web-application .text-wrapper-3 { font-size: calc(var(--text-font-size) - 2px); }

  /* Botón CTA del hero ligeramente más compacto */
  .element-web-application .button-5 { padding: 12px 16px 12px 24px; }
  .element-web-application .large-2 { font-size: calc(var(--resaltar-caracteristicas-font-size) - 3px); }

  /* Banner vigilancia: imagen y texto más compactos */
  .element-web-application .banner-vigilancia { gap: 24px; }
  .element-web-application .banner-vigilancia .imax-banne { width: 520px; height: auto; }
  .element-web-application .banner-vigilancia .texto { width: calc(100% - 520px - 24px); }
  .element-web-application .banner-vigilancia .text-wrapper-9 { font-size: 32px; line-height: 1.25; }
  .element-web-application .banner-vigilancia .text-wrapper-10 { font-size: 18px; line-height: 1.4; }

  /* Formulario principal más bajo */
  .element-web-application .mobile-CTA { width: 520px; height: 420px; }
  /* Subir texto de condiciones */
  .element-web-application .text-wrapper-4 { top: 385px; }
  /* Elementos internos del formulario más pequeños */
  .element-web-application .text-wrapper-5 { font-size: calc(var(--titulo-cta-font-size) - 4px) !important; }
  .element-web-application .text-wrapper-3 { font-size: calc(var(--text-font-size) - 4px) !important; left: 16px !important; width: 300px !important; }
  .element-web-application .boton-cta { width: 320px !important; padding: 8px 14px !important; top: 335px !important; left: 30px !important; gap: 24px !important; }
  .element-web-application .do-something { font-size: 20px !important; line-height: 28px !important; }
  .element-web-application .telefon-o { top: 238px !important; left: 30px !important; width: 300px !important; height: 30px !important; }
  .element-web-application .telefono-input { width: 300px !important; height: 30px !important; font-size: calc(var(--text-font-size) - 2px) !important; }
  .element-web-application .frame-privacidad-banner { top: 285px !important; left: 30px !important; width: 300px !important; gap: 12px !important; }
  .element-web-application .checkbox-privacidad-banner { width: 20px !important; height: 20px !important; }
  .element-web-application .checkbox-privacidad-banner:checked::after { font-size: 14px !important; }
  .element-web-application .p-privacidad-banner { left: 40px !important; width: 250px !important; font-size: 12px !important; }
  /* No forzar margen en 1366h<=900 para no interferir con 1280x1024 */
  .element-web-application .frame-11 .mobile-CTA { margin-left: 0; }

  /* Footer: mantener separación y visibilidad */
  .element-web-application .sections-footer-dark { top: auto; bottom: 0; }
  .element-web-application .element { top: auto; bottom: 64px; }
}

/* 1280px */
@media (max-width: 1280px) {
  /* Tus ajustes específicos para 1280 */
}

/* 1280 x 1024 (tolerancia): ajuste del margen del formulario en el banner principal */
@media (min-width: 1270px) and (max-width: 1290px) and (min-height: 1000px) and (max-height: 1050px) {
  .element-web-application .frame-11 .mobile-CTA { margin-left: 33px !important; }
}

/* Refuerzo final 1280px exacto: máxima prioridad */
@media (min-width: 1279px) and (max-width: 1281px) {
  .element-web-application .frame-11 > .mobile-CTA { margin-left: 33px !important; }
  
  /* Chrome-specific: variables CSS */
  @supports (-webkit-appearance: none) {
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
      --enunciados-font-size: 15px !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
    --enunciados-font-size: 15px !important;
  }
}

/* 1200px (límite inferior de escritorio) */
@media (max-width: 1200px) {
  /* Tus ajustes específicos para 1200 */
}

/* Ajustes específicos para Chrome a 1920px */
@media (min-width: 1920px) {
  /* Chrome-specific: font-size para text-wrapper-6 */
  @supports (-webkit-appearance: none) {
    .element-web-application .text-wrapper-6 {
      font-size: 25px !important;
    }
    
    /* Chrome-specific: font-size para text-wrapper-5 */
    .element-web-application .text-wrapper-5 {
      font-size: 24px !important;
    }
  }
  
  /* Variable CSS resaltar-caracteristicas-font-size para todos los navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
  }
  
  /* Chrome-specific: reforzar variable CSS con mayor especificidad */
  @supports (-webkit-appearance: none) {
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
    }
    
    /* Aplicar directamente a los elementos que usan la variable en Chrome */
    .element-web-application .large-2,
    .element-web-application .medium,
    .element-web-application .text-wrapper-6,
    .element-web-application .text-wrapper-7,
    .element-web-application .text-wrapper-2 {
      font-size: 25px !important;
    }
  }
}

/* Ajustes específicos para 1920px con escala 125% (viewport efectivo ~1536px) */
@media (min-width: 1530px) and (max-width: 1540px) {
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
  }
  
  /* Chrome-specific: reforzar para viewport con escala */
  @supports (-webkit-appearance: none) {
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
    }
    
    .element-web-application .large-2,
    .element-web-application .medium,
    .element-web-application .text-wrapper-6,
    .element-web-application .text-wrapper-7,
    .element-web-application .text-wrapper-2 {
      font-size: 25px !important;
    }
  }
}

/* Ajustes específicos para Chrome a 1680px */
@media (min-width: 1675px) and (max-width: 1685px) {
  /* Chrome-specific: font-size para text-wrapper-6 */
  @supports (-webkit-appearance: none) {
    .element-web-application .text-wrapper-6 {
      font-size: 26px !important;
    }
    
    /* Chrome-specific: font-size para text-wrapper-5 */
    .element-web-application .text-wrapper-5 {
      font-size: 24px !important;
    }
  }
}

/* Ajustes específicos para Chrome en general (todas las resoluciones de escritorio) */
@media (min-width: 1200px) {
  /* Chrome-specific: font-size para text-wrapper-5 */
  @supports (-webkit-appearance: none) {
    .element-web-application .text-wrapper-5 {
      font-size: 24px !important;
    }
  }
}

/* Ajustes específicos para Chrome a 1400px */
@media (min-width: 1395px) and (max-width: 1405px) {
  /* Chrome-specific: variables CSS */
  @supports (-webkit-appearance: none) {
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
      --enunciados-font-size: 17px !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
    --enunciados-font-size: 17px !important;
  }
}

/* Ajustes específicos para Chrome a 1440px */
@media (min-width: 1435px) and (max-width: 1445px) {
  /* Chrome-specific: padding para botones de las cards */
  @supports (-webkit-appearance: none) {
    .element-web-application .button-2,
    .element-web-application .button-3,
    .element-web-application .button-4 {
      padding: 12px 15px !important;
    }
    
    /* Chrome-specific: variable CSS resaltar-caracteristicas-font-size */
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
  }
}

/* Ajustes específicos para Chrome a 1600px */
@media (min-width: 1595px) and (max-width: 1605px) {
  /* Chrome-specific: font-size para text-wrapper-6 */
  @supports (-webkit-appearance: none) {
    .element-web-application .text-wrapper-6 {
      font-size: 25px !important;
    }
    
    /* Chrome-specific: variable CSS resaltar-caracteristicas-font-size */
    .element-web-application {
      --resaltar-caracteristicas-font-size: 25px !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 25px !important;
  }
}

/* Ajustes específicos para Chrome a 1360px */
@media (min-width: 1355px) and (max-width: 1365px) {
  /* Chrome-specific: variables CSS */
  @supports (-webkit-appearance: none) {
    .element-web-application {
      --resaltar-caracteristicas-font-size: 24px !important;
      --enunciados-font-size: 15px !important;
    }
    
    /* Chrome-specific: tamaño del formulario mobile-CTA */
    .element-web-application .mobile-CTA {
      width: 447px !important;
      height: 420px !important;
    }
    
    /* Chrome-specific: centrar cards horizontalmente */
    .element-web-application .frame {
      left: 50% !important;
      transform: translateX(-50%) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: flex-start !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application {
    --resaltar-caracteristicas-font-size: 24px !important;
    --enunciados-font-size: 15px !important;
  }
  
  .element-web-application .mobile-CTA {
    width: 447px !important;
    height: 420px !important;
  }
  
  /* Centrar cards horizontalmente en Edge también */
  .element-web-application .frame {
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Ajustes específicos para Chrome a 1366px */
@media (min-width: 1361px) and (max-width: 1371px) and (max-height: 900px) {
  /* Chrome-specific: font-size para text-wrapper-6 */
  @supports (-webkit-appearance: none) {
    .element-web-application .text-wrapper-6 {
      font-size: 25px !important;
    }
    
    /* Chrome-specific: tamaño del formulario mobile-CTA */
    .element-web-application .mobile-CTA {
      width: 450px !important;
      height: 420px !important;
    }
    
    /* Chrome-specific: font-size para botones de las cards */
    .element-web-application .medium {
      font-size: 15px !important;
    }
  }
  
  /* Aplicar también en Edge y otros navegadores */
  .element-web-application .text-wrapper-6 {
    font-size: 25px !important;
  }
  
  .element-web-application .mobile-CTA {
    width: 450px !important;
    height: 420px !important;
  }
  
  .element-web-application .medium {
    font-size: 15px !important;
  }
  
  /* Chrome-specific: centrar cards horizontalmente */
  @supports (-webkit-appearance: none) {
    .element-web-application .frame {
      left: 50% !important;
      transform: translateX(-50%) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: flex-start !important;
      width: 100% !important;
      max-width: calc(100% - 68px) !important;
      margin: 0 auto !important;
    }
  }
  
  /* También para Edge y otros navegadores */
  .element-web-application .frame {
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: calc(100% - 68px) !important;
    margin: 0 auto !important;
  }
}