/* ─────────────────────────────────────────────────────────────
   Landing — Tema claro índigo (SaaS)
   Se sirve después de app.css (Bootstrap 4 + Material Design Icons)
   ───────────────────────────────────────────────────────────── */

:root {
    --indigo-950: #1e1b4b;
    --indigo-900: #312e81;
    --indigo-700: #4338ca;
    --indigo-600: #4f46e5;
    --indigo-500: #6366f1;
    --indigo-100: #e0e7ff;
    --indigo-50:  #eef2ff;
    --sky-400:    #38bdf8;
    --sky-100:    #e0f2fe;
    --violet-500: #8b5cf6;
    --violet-100: #ede9fe;
    --emerald-500:#10b981;
    --emerald-100:#d1fae5;
    --amber-500:  #f59e0b;
    --amber-100:  #fef3c7;
    --rose-500:   #f43f5e;
    --rose-100:   #ffe4e6;
    --slate-900:  #0f172a;
    --slate-700:  #334155;
    --slate-600:  #475569;
    --slate-500:  #64748b;
    --slate-400:  #94a3b8;
    --slate-200:  #e2e8f0;
    --slate-100:  #f1f5f9;
    --bg:         #f7f8ff;
    --shadow-soft: 0 10px 30px -12px rgba(30, 27, 75, 0.12);
    --shadow-card: 0 18px 45px -18px rgba(79, 70, 229, 0.28);
    --shadow-glow: 0 12px 35px -12px rgba(79, 70, 229, 0.45);
    --radius: 1.1rem;
}

html { scroll-behavior: smooth; }

body {
    /* Poppins es la fuente global de la app (app.css la fuerza con !important). */
    font-family: 'Poppins', 'Inter', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--slate-900);
    -webkit-font-smoothing: antialiased;
}

.text-gradient {
    background: linear-gradient(92deg, var(--indigo-600) 0%, var(--violet-500) 55%, var(--sky-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Barra de prueba gratis ────────────────────────────────── */
.trial-bar {
    background: linear-gradient(92deg, var(--indigo-700) 0%, var(--indigo-500) 55%, var(--violet-500) 100%);
    color: #fff;
    font-size: 1rem;
    padding: 0.6rem 0;
    position: relative;
    z-index: 1031;
}
.trial-bar .mdi { font-size: 1.05rem; }
.trial-bar-sep { margin: 0 0.45rem; opacity: 0.55; }
.trial-bar-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.trial-bar-link:hover { color: #fff; opacity: 0.85; text-decoration: underline; }

/* ── Badge de prueba en el formulario ──────────────────────── */
.trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(92deg, var(--emerald-500), #059669);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.36rem 0.9rem;
    box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55);
    white-space: nowrap;
}

/* ── Plan de prueba gratis ─────────────────────────────────── */
.plan-trial {
    position: relative;
    border: 2px dashed var(--emerald-500);
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 45%);
    overflow: hidden;
}
.plan-trial:hover {
    border-color: var(--emerald-500);
    box-shadow: 0 18px 45px -18px rgba(16, 185, 129, 0.35);
}
.plan-trial-ribbon {
    display: inline-flex;
    align-items: center;
    align-self: center;
    background: linear-gradient(92deg, var(--emerald-500), #059669);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 0.32rem 0.95rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, 0.6);
}

/* ── Chip de prueba en el banner CTA ───────────────────────── */
.cta-trial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    margin-bottom: 1.2rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.landing-nav .navbar-brand {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--slate-900);
}
.landing-nav .nav-link {
    color: var(--slate-600);
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.15s ease;
}
.landing-nav .nav-link:hover { color: var(--indigo-600); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 6.5rem;
    background:
        radial-gradient(55rem 38rem at 112% -12%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(48rem 34rem at -12% 4%, rgba(56, 189, 248, 0.15), transparent 55%),
        radial-gradient(40rem 30rem at 50% 120%, rgba(79, 70, 229, 0.10), transparent 60%),
        linear-gradient(180deg, #fbfcff 0%, #f4f6ff 100%);
}
.hero::before { /* rejilla sutil */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
    pointer-events: none;
}
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    animation: blob-float 9s ease-in-out infinite;
}
.hero-blob-1 { width: 22rem; height: 22rem; top: -6rem; right: -5rem; background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 70%); }
.hero-blob-2 { width: 18rem; height: 18rem; bottom: -4rem; left: -6rem; background: radial-gradient(circle, rgba(56, 189, 248, 0.45), transparent 70%); animation-delay: -4.5s; }
@keyframes blob-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-22px) scale(1.05); }
}

.hero h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    font-size: 3.1rem;
}
@media (min-width: 992px) { .hero h1 { font-size: 3.7rem; } }

.hero-lead {
    color: var(--slate-600);
    font-size: 1.25rem;
    line-height: 1.65;
    max-width: 50rem;
}

.hero-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.6rem;
}
.hero-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--indigo-600);
    font-weight: 600;
    font-size: 1.05rem;
}
.hero-check .mdi { font-size: 1.25rem; }

/* ── Botones ────────────────────────────────────────────────── */
.btn-gradient {
    background: linear-gradient(92deg, var(--indigo-600), var(--violet-500));
    color: #fff;
    border: 0;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: var(--shadow-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-gradient:hover, .btn-gradient:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 42px -12px rgba(79, 70, 229, 0.55);
}
.btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--slate-200);
    color: var(--slate-700);
    font-weight: 600;
    font-size: 1.05rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover {
    color: var(--indigo-600);
    border-color: var(--indigo-500);
    transform: translateY(-2px);
}

/* ── Imagen del hero (camión) ──────────────────────────────── */
.hero-img-wrap {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-card);
}
.hero-img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Chips bajo la imagen del hero (lado izquierdo) */
.hero-side-chips .trust-chip {
    font-size: 0.92rem;
    padding: 0.5rem 0.9rem;
}
.hero-img-chip {
    position: absolute;
    bottom: 0.9rem;
    left: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 1.05rem;
}
.hero-img-chip .mdi { color: var(--sky-400); font-size: 1.2rem; }

/* ── Formulario (glass) ─────────────────────────────────────── */
.register-card {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.register-card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.register-card .form-control {
    border-radius: 0.65rem;
    border-color: var(--slate-200);
    padding: 0.68rem 0.95rem;
    font-size: 1.02rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.register-card .form-control:focus {
    border-color: var(--indigo-500);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15);
}
.register-card .input-group-text {
    background: var(--slate-100);
    border-color: var(--slate-200);
    color: var(--slate-500);
    border-radius: 0 0.65rem 0.65rem 0;
    font-size: 0.9rem;
}
.register-card .input-group > .form-control:not(:last-child) { border-radius: 0.65rem 0 0 0.65rem; }
.register-card .card-header h5 { font-size: 1.25rem; }
.register-card label { font-weight: 600; font-size: 0.95rem; color: var(--slate-700); }
.register-card small { font-size: 0.95rem; }

/* ── Captcha ────────────────────────────────────────────────── */
.captcha-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.captcha-question {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    color: var(--indigo-700);
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 0.65rem;
    padding: 0.6rem 1rem;
    width: fit-content;
}
.captcha-question::before {
    content: "\F04CE"; /* mdi-form-textbox */
    font-family: "Material Design Icons";
    color: var(--indigo-500);
}
.captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0.65rem 0.65rem 0;
    padding: 0 0.9rem;
}

/* ── Chips de confianza ─────────────────────────────────────── */
.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--slate-700);
    box-shadow: var(--shadow-soft);
}
.trust-chip .mdi { color: var(--indigo-500); font-size: 1.25rem; }

/* ── Secciones / tarjetas ───────────────────────────────────── */
.section-title {
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: 2.35rem;
}
.section-sub {
    color: var(--slate-500);
    font-size: 1.18rem;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    padding: 1.75rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
    border-color: transparent;
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.8rem;
    font-size: 1.55rem;
    margin-bottom: 1.1rem;
}
.feature-card h5 { font-weight: 700; letter-spacing: -0.01em; font-size: 1.15rem; }
.feature-card p { color: var(--slate-500); font-size: 1.02rem; line-height: 1.6; margin-bottom: 0; }

.icon-indigo   { background: var(--indigo-50);   color: var(--indigo-600); }
.icon-sky      { background: var(--sky-100);     color: #0284c7; }
.icon-violet   { background: var(--violet-100);  color: var(--violet-500); }
.icon-emerald  { background: var(--emerald-100); color: var(--emerald-500); }
.icon-amber    { background: var(--amber-100);   color: var(--amber-500); }
.icon-rose     { background: var(--rose-100);    color: var(--rose-500); }

/* ── Cómo funciona ──────────────────────────────────────────── */
.step {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo-600), var(--violet-500));
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: var(--shadow-glow);
    margin-bottom: 1.1rem;
}
.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.15rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-soft);
    color: var(--indigo-600);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}
.step h5 { font-weight: 700; font-size: 1.15rem; }
.step p { color: var(--slate-500); font-size: 1.02rem; line-height: 1.6; }
.steps-row { position: relative; }
.steps-line {
    position: absolute;
    top: 3.8rem;              /* centro vertical de .step-icon */
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--indigo-100) 8%, var(--indigo-200) 50%, var(--indigo-100) 92%, transparent);
    pointer-events: none;
    z-index: 0;
}
@media (min-width: 992px) {
    .steps-line { left: 10%; right: 10%; }
}
.step { position: relative; z-index: 1; }

/* ── Banner CTA ─────────────────────────────────────────────── */
.cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1.4rem;
    background: linear-gradient(115deg, var(--indigo-700) 0%, var(--indigo-500) 55%, var(--violet-500) 100%);
    color: #fff;
    box-shadow: var(--shadow-card);
}
.cta-banner::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -8%;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
    pointer-events: none;
}
.cta-banner h3 { font-weight: 800; letter-spacing: -0.02em; }
.cta-banner p { color: rgba(255, 255, 255, 0.85); }

/* ── Planes ─────────────────────────────────────────────────── */
.plan-highlighted {
    border: 2px solid var(--indigo-500);
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
}
.plan-highlighted:hover {
    transform: translateY(-8px);
}
.plan-feature {
    color: var(--slate-600);
    font-size: 1.02rem;
}
.plan-feature .mdi {
    font-size: 1.15rem;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-item {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-soft); }
.faq-item summary {
    cursor: pointer;
    padding: 1.2rem 1.4rem;
    font-weight: 600;
    color: var(--slate-900);
    font-size: 1.08rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "\F0140"; /* mdi-chevron-down */
    font-family: "Material Design Icons";
    color: var(--slate-400);
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); color: var(--indigo-600); }
.faq-item[open] summary { color: var(--indigo-700); }
.faq-item .faq-body { padding: 0 1.4rem 1.3rem; color: var(--slate-500); line-height: 1.65; font-size: 1.02rem; }

/* ── Sticky de WhatsApp ─────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.55);
    animation: whatsapp-pulse 2.6s infinite;
    transition: transform 0.15s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}
.whatsapp-float .mdi { font-size: 1.6rem; }
@keyframes whatsapp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 575.98px) {
    .whatsapp-float { padding: 0.9rem; }
    .whatsapp-float-label { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────── */
.landing-footer { background: #fff; border-top: 1px solid var(--slate-200); }
.landing-footer a { color: var(--slate-500); font-size: 1rem; transition: color 0.15s ease; }
.landing-footer .small { font-size: 0.95rem; }
.landing-footer a:hover { color: var(--indigo-600); text-decoration: none; }

/* ── Modal de configuración de la instancia ─────────────────── */
.modal-backdrop-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.instance-modal {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.45);
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 460px;
}
.modal-spinner {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid var(--indigo-100);
    border-top-color: var(--indigo-600);
    animation: modal-spin 0.9s linear infinite;
}
@keyframes modal-spin { to { transform: rotate(360deg); } }
.modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: var(--emerald-100);
    color: var(--emerald-600);
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
.modal-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
.credential-box {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 0.9rem;
    padding: 0.4rem 1.1rem;
    text-align: left;
}
.credential-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px dashed var(--slate-200);
}
.credential-row:last-child { border-bottom: 0; }
.credential-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-500);
    white-space: nowrap;
}
.credential-value {
    font-weight: 600;
    color: var(--slate-900);
    word-break: break-all;
    text-align: right;
}

/* ── Animaciones de entrada ─────────────────────────────────── */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate { opacity: 0; animation: fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.delay-1 { animation-delay: 0.10s; }
.delay-2 { animation-delay: 0.20s; }
.delay-3 { animation-delay: 0.30s; }
.delay-4 { animation-delay: 0.40s; }
.delay-5 { animation-delay: 0.50s; }