/* * Empresa Móvil — estilos de la capa propia (CTAs, formulario de leads, * banda por dispositivo). Paleta de marca: índigo #3d4881, texto #333c79, * acento #636bb0, gradiente #353181 → #614597. * * La visibilidad por dispositivo se resuelve acá: em-extras.js pone * em-android / em-ios / em-desktop en ; sin JS vale el ancho de * pantalla (los CTAs de escritorio desaparecen bajo 992px, como los * hidden-xs/sm de Bootstrap 3 que usa el ítem del menú). */ /* ---------- Botón de marca ---------- */ .em-btn, .em-lead-cf7 input[type="submit"] { display: inline-block; padding: 10px 22px; border: 0; border-radius: 4px; background: #3d4881; color: #fff !important; font-weight: 600; text-decoration: none !important; transition: background 0.2s; cursor: pointer; } .em-btn:hover, .em-btn:focus, .em-lead-cf7 input[type="submit"]:hover { background: #614597; color: #fff; } .em-btn-grande { padding: 14px 30px; font-size: 17px; } /* ---------- CTA del menú ---------- */ /* * Los enlaces del menú miden 70px de alto (line-height 18 + padding 26 del * theme); el botón mide 36 (18 + 9·2), así que 17px arriba lo dejan centrado * verticalmente con el resto. */ .sticky-navigation .main-navigation li.em-nav-cta > a { background: #3d4881; color: #fff !important; border-radius: 4px; margin: 17px 0 0 12px; padding: 9px 16px !important; } .sticky-navigation .main-navigation li.em-nav-cta > a:hover, .sticky-navigation .main-navigation li.em-nav-cta > a:focus { background: #614597; color: #fff !important; } /* ---------- WhatsApp ---------- */ .wa-cta { display: inline-block; background: #25d366; color: #fff !important; padding: 10px 18px; border-radius: 24px; font-weight: 600; text-decoration: none !important; line-height: 20px; white-space: nowrap; } .wa-cta:hover, .wa-cta:focus { background: #1ebe5b; color: #fff !important; } .wa-cta .em-wa-svg { vertical-align: -4px; margin-right: 8px; } .wa-float { position: fixed; right: 18px; bottom: 92px; /* la burbuja de Crisp vive en la esquina */ z-index: 99999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } @media (max-width: 767px) { .wa-float span { display: none; } .wa-float { padding: 13px 14px; border-radius: 50%; } .wa-float .em-wa-svg { width: 24px; height: 24px; margin: 0; vertical-align: middle; } } /* ---------- Sección de formulario de leads ---------- */ .em-lead-seccion { background: #f5f6fa; border-top: 4px solid #3d4881; padding: 50px 0; } .em-lead-seccion h2 { margin-top: 0; color: #333c79; } .em-lead-cf7 label { display: block; max-width: 460px; margin-bottom: 14px; font-weight: 600; color: #333c79; } .em-lead-cf7 input[type="text"], .em-lead-cf7 input[type="email"], .em-lead-cf7 input[type="tel"], .em-lead-cf7 select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #c8cbe0; border-radius: 4px; background: #fff; font-weight: 400; } .em-lead-cf7 .wpcf7-not-valid { border-color: #c0392b; } .em-lead-cf7 input[type="submit"] { margin-top: 6px; } .em-lead-wa { margin-top: 22px; } /* ---------- Banda de CTAs por dispositivo ---------- */ .em-cta-band { background: linear-gradient(160deg, #353181 0%, #614597 100%); color: #fff; padding: 50px 0; text-align: center; } .em-cta-band h2 { color: #fff; margin-top: 0; } .em-cta-band p { color: rgba(255, 255, 255, 0.85); } .em-cta-band .em-btn, .em-cta-band .em-lead-cf7 input[type="submit"] { background: #fff; color: #3d4881 !important; } .em-cta-band .em-btn:hover, .em-cta-band .em-btn:focus { background: #e8e9f5; } .em-cta-col { margin-bottom: 20px; } .em-qr { background: #fff; padding: 8px; border-radius: 6px; } /* Android: sólo el botón de Play; el resto, sólo pantallas grandes. */ .em-solo-android { display: none; } body.em-android .em-solo-android { display: block; } body.em-android .em-solo-desktop, body.em-ios .em-cta-band { display: none; } @media (max-width: 991px) { .em-cta-band { display: none; } body.em-android .em-cta-band { display: block; } .em-cta-band .em-solo-desktop { display: none; } } /* ---------- Páginas nuevas (gracias / logística) ---------- */ .em-pagina { padding: 40px 0 60px; } .em-pagina h1 { color: #333c79; } .em-hero { background: linear-gradient(160deg, #353181 0%, #614597 100%); color: #fff; padding: 70px 0 60px; text-align: center; } .em-hero h1 { color: #fff; margin: 0 0 14px; } .em-hero p { color: rgba(255, 255, 255, 0.85); font-size: 18px; margin: 0 auto; max-width: 720px; } .em-rasgos { padding: 40px 0 10px; } .em-rasgos h3 { color: #333c79; margin-top: 0; } .em-rasgos .em-rasgo { margin-bottom: 30px; }