.elementor-26998 .elementor-element.elementor-element-d8c66d3{--display:flex;--min-height:0vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-26998 .elementor-element.elementor-element-d8c66d3:not(.elementor-motion-effects-element-type-background), .elementor-26998 .elementor-element.elementor-element-d8c66d3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-26998 .elementor-element.elementor-element-3056e7b{width:var( --container-widget-width, 105.837% );max-width:105.837%;--container-widget-width:105.837%;--container-widget-flex-grow:0;}.elementor-26998 .elementor-element.elementor-element-3056e7b.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-26998 .elementor-element.elementor-element-d8c66d3{--width:100%;}}@media(max-width:1024px){.elementor-26998 .elementor-element.elementor-element-d8c66d3{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}}@media(max-width:767px){.elementor-26998 .elementor-element.elementor-element-d8c66d3{--padding-top:15%;--padding-bottom:15%;--padding-left:4%;--padding-right:4%;}.elementor-26998 .elementor-element.elementor-element-3056e7b{width:var( --container-widget-width, 357.031px );max-width:357.031px;--container-widget-width:357.031px;--container-widget-flex-grow:0;}}/* Start custom CSS for html, class: .elementor-element-3056e7b *//* ===== Optimización móvil LACOSVI ===== */
@media (max-width: 768px){

  /* 1) Parallax suave en móvil (sin fixed) */
  .parallax-section{
    background-attachment: scroll !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* 2) Estructura y respiración general */
  section{ padding-top: 48px !important; padding-bottom: 48px !important; }
  .py-20{ padding-top: 48px !important; padding-bottom: 48px !important; } /* util de Tailwind */
  .container{ padding-left: 16px !important; padding-right: 16px !important; }

  /* 3) Tipografías más contenidas en pantallas pequeñas */
  h1{ font-size: 2.25rem !important; line-height: 1.15 !important; }   /* ~36px */
  h2{ font-size: 1.875rem !important; line-height: 1.2 !important; }   /* ~30px */
  h3{ font-size: 1.5rem !important; line-height: 1.25 !important; }    /* ~24px */
  .text-xl{ font-size: 1.0625rem !important; }                          /* ~17px */
  .text-2xl{ font-size: 1.25rem !important; }                           /* ~20px */

  /* 4) Hero: altura + CTA */
  .min-h-screen{ min-height: 88vh !important; } /* reduce un poco para Safari iOS */
  .overlay + .relative .reveal p{ max-width: 28rem !important; }        /* limita ancho de copia */
  .overlay + .relative a.inline-flex{
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }
  /* Icono scroll */
  .fa-chevron-down{ font-size: 1.5rem !important; }

  /* 5) Tarjetas / cards más compactas */
  .card-hover{ transition: transform .25s ease, box-shadow .25s ease; }
  /* Desactiva levantado en móvil para evitar “brincos” */
  @media (hover:none){
    .card-hover:hover{ transform:none !important; box-shadow:none !important; }
  }
  .card-hover, .rounded-2xl.p-8{ padding: 18px !important; border-radius: 16px !important; }

  /* 6) Estadísticas: rejilla y tamaños */
  .gradient-bg .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px !important; }
  .stat-number{ font-size: 2.25rem !important; } /* ya tenías 2.5rem; la afinamos un poco */

  /* 7) Filosofía / Valores: una columna en móviles */
  .max-w-6xl .grid,
  .max-w-7xl .grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 8) Imagen con texto: reduce altura para evitar scroll innecesario */
  .relative.h-96{ height: 56vh !important; }

  /* 9) Bloque “Diferencia”: tarjetas más fluidas */
  .backdrop-blur-lg{ backdrop-filter: blur(8px); }
  .max-w-5xl.mx-auto .space-y-6 > *{ padding: 16px !important; }

  /* 10) Galería: 2 columnas con alturas más bajas para mejor LCP */
  .grid.grid-cols-2.md\:grid-cols-4{ gap: 10px !important; }
  .grid.grid-cols-2.md\:grid-cols-4 img{
    height: 180px !important;
    object-fit: cover !important;
    transform: none !important;           /* evita zoom hover en táctil */
  }

  /* 11) CTA final: botones apilados y full-width */
  .gradient-bg .flex.flex-col.sm\:flex-row{
    flex-direction: column !important;
  }
  .gradient-bg .flex.flex-col a{
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  /* 12) Footer: una columna, iconos más grandes para tap */
  footer .grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
  footer .w-10.h-10{ width: 44px !important; height: 44px !important; }

  /* 13) Accesibilidad táctil */
  a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
  .inline-flex.items-center{ min-height: 44px; } /* objetivo táctil mínimo */

  /* 14) Ajustes de gradientes/texto para contraste en móvil */
  .text-gradient{ background-image: linear-gradient(135deg, #1e3a8a, #2563eb) !important; }

  /* 15) Pequeños refinados de espaciado */
  .mb-16{ margin-bottom: 28px !important; }
  .mb-12{ margin-bottom: 24px !important; }
  .mb-8{ margin-bottom: 18px !important; }
}

/* Extra fino para < 380px (iPhone SE, etc.) */
@media (max-width: 380px){
  h1{ font-size: 1.9rem !important; }
  .stat-number{ font-size: 2rem !important; }
  .grid.grid-cols-2.md\:grid-cols-4 img{ height: 160px !important; }
  .relative.h-96{ height: 52vh !important; }
}/* End custom CSS */