/* ============================================================
   INNATE Saltillo — Landing corta (una sola pantalla)
   Paleta tomada del material promocional:
   verde #069F71 · verde oscuro #05815C · negro #111111
   ============================================================ */

:root {
    --verde: #069F71;
    --verde-oscuro: #05815C;
    --verde-fondo: #F2F9F6;
    --negro: #111111;
    --texto: #2B3140;
    --texto-suave: #6A7280;
    --whatsapp: #1FAF57;
    --whatsapp-hover: #178F47;
    --borde: #E5EBE8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--texto);
    background: linear-gradient(180deg, var(--verde-fondo) 0%, #FFFFFF 40%);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Espacio para que la barra flotante no tape el contenido final */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Contenedor central: la landing nunca se estira de más ---------- */
.lp {
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 14px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Imagen promocional (completa, sin recortes) ---------- */
.promo {
    width: 100%;
    margin: 0 0 14px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px -16px rgba(17, 17, 17, 0.35);
}

.promo img {
    width: 100%;
    height: auto;          /* conserva la proporción original 1131 × 1600 */
    object-fit: contain;   /* nunca recorta ni deforma el diseño */
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- Botón principal de WhatsApp ----------
   En celular se oculta: ahí manda la barra flotante fija, que siempre
   está a la vista. Así se evita mostrar dos botones idénticos juntos. */
.btn-whatsapp {
    display: none;
    align-items: center;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 56px;
    background: var(--whatsapp);
    color: #fff;
    font-weight: 700;
    font-size: clamp(1rem, 4.2vw, 1.1rem);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.9rem 1.2rem;
    border-radius: 14px;
    box-shadow: 0 10px 24px -10px rgba(31, 175, 87, 0.6);
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn-whatsapp:hover { background: var(--whatsapp-hover); transform: translateY(-2px); }
.btn-whatsapp:active { transform: scale(0.98); }
.btn-whatsapp:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 3px; }

.icono-wa { width: 24px; height: 24px; flex-shrink: 0; }

/* ---------- Nota breve ---------- */
.lp__nota {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--verde-oscuro);
    margin-top: 0.7rem;
}

/* ---------- Cierre ---------- */
.lp__footer {
    max-width: 520px;
    margin: 0 auto;
    padding: 1rem 18px 0.5rem;
    text-align: center;
}

.lp__legal {
    color: var(--texto-suave);
    font-size: 0.72rem;
    max-width: 26rem;
    margin: 0 auto 0.35rem;
}

.lp__copy { color: #9AA3B2; font-size: 0.7rem; }

/* ============================================================
   Botón flotante de WhatsApp
   Móvil: barra fija de ancho completo (máxima visibilidad).
   Escritorio: pastilla flotante en la esquina inferior derecha.
   ============================================================ */
.wa-flotante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 38%, #FFFFFF 100%);
    display: flex;
    justify-content: center;
    pointer-events: none; /* solo el botón recibe los toques */
}

.wa-flotante__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    max-width: 492px;
    min-height: 58px;
    background: var(--whatsapp);
    color: #fff;
    font-weight: 800;
    font-size: clamp(1rem, 4.2vw, 1.1rem);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.9rem 1.4rem;
    border-radius: 999px;
    box-shadow: 0 10px 26px -8px rgba(31, 175, 87, 0.65), 0 2px 6px rgba(17, 17, 17, 0.12);
    animation: wa-latido 2.6s ease-in-out 1.5s infinite;
    transition: transform 0.2s ease, background 0.2s ease;
}

.wa-flotante__btn:hover { background: var(--whatsapp-hover); animation: none; }
.wa-flotante__btn:active { transform: scale(0.97); animation: none; }
.wa-flotante__btn:focus-visible { outline: 3px solid var(--verde-oscuro); outline-offset: 3px; }

@keyframes wa-latido {
    0%, 88%, 100% { transform: scale(1); }
    92%           { transform: scale(1.035); }
    96%           { transform: scale(1); }
}

/* ---------- Pantallas medianas y grandes ---------- */
@media (min-width: 640px) {
    body { padding-bottom: 2rem; }

    .lp { padding-top: 26px; }

    .btn-whatsapp { display: inline-flex; width: auto; min-width: 340px; }

    .wa-flotante {
        left: auto;
        right: 22px;
        bottom: 22px;
        padding: 0;
        background: none;
        justify-content: flex-end;
    }

    .wa-flotante__btn { width: auto; max-width: none; }
}

/* ---------- Accesibilidad: respeta la preferencia de menos animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
    .btn-whatsapp,
    .wa-flotante__btn { transition: none; animation: none; }
}