<style>
/* =========================
MOBILE FIRST – OPTIMIZACIÓN EXTRA
Pega esto al FINAL del <style>
========================= */
/* Evita zoom raro en iOS y mejora legibilidad */
.lo-emprende input, .lo-emprende button, .lo-emprende a { -webkit-tap-highlight-color: transparent; }
.lo-emprende { -webkit-text-size-adjust: 100%; }
/* Ajustes generales para pantallas chicas */
@media (max-width: 640px){
.lo-wrap{ padding: 18px 12px 96px; } /* más aire abajo por sticky */
.lo-hero-card{ padding: 16px; border-radius: 18px; }
.lo-section{ padding: 16px; border-radius: 18px; }
.lo-h1{ font-size: 28px; }
.lo-sub{ font-size: 14px; }
.lo-note{ font-size: 12px; }
/* Botones grandes tipo mobile */
.lo-btn{
width: 100%;
padding: 16px 18px;
font-size: 15px;
border-radius: 16px;
}
/* Checks más cómodos */
.lo-check{
padding: 12px 12px;
font-size: 13.5px;
}
/* Slider más compacto y usable */
.lo-slider{ min-height: 280px; border-radius: 18px; }
.lo-slider-overlay{ font-size: 12.5px; padding: 12px 12px 14px; }
.lo-dots{ top: 10px; right: 10px; padding: 6px 8px; }
/* Cards y boxes full width */
.lo-grid{ gap: 10px; }
.lo-box{ padding: 12px; border-radius: 16px; min-height: auto; }
.lo-box p{ font-size: 13px; }
/* Planes */
.lo-plan{ padding: 14px; border-radius: 16px; }
.lo-plan h3{ font-size: 17px; }
.lo-price{ font-size: 13px; }
.lo-plan ul{ font-size: 13.5px; }
}
/* Ultra pequeño (teléfonos muy compactos) */
@media (max-width: 380px){
.lo-h1{ font-size: 24px; }
.lo-logo{ width: 36px; height: 36px; border-radius: 10px; }
.lo-slider{ min-height: 240px; }
.lo-sticky-inner{ padding: 10px; }
}
/* Sticky CTA: mejor lectura y espacio en móvil */
@media (max-width: 640px){
.lo-sticky{
bottom: 10px;
}
.lo-sticky-inner{
gap: 8px;
padding: 10px;
}
.lo-sticky-text{
font-size: 13px;
line-height: 1.2;
width: 100%;
text-align: center;
}
.lo-sticky-text small{
font-size: 12px;
}
}
</style>