/* =========================================================
   QUICKPLATE — styles.css
   Landing page para restaurantes (versión 2.0 — alineada al deck oficial)
   Stack: Bootstrap 5.3 + CSS3 custom
   Mobile-first, alto contraste, foco en conversión
   ========================================================= */

/* ---------- 1. VARIABLES CSS / DESIGN TOKENS ---------- */
:root {
    /* Paleta corporativa */
    --qp-primary:        #F1912E;
    --qp-primary-700:    #d97c1c;
    --qp-primary-300:    #f9b76a;
    --qp-success:        #79B443;
    --qp-success-700:    #5e9132;
    --qp-success-300:    #9dc973;
    --qp-alert:          #E33E2B;
    --qp-alert-700:      #b62e1f;
    --qp-alert-300:      #ed7768;

    /* Neutros */
    --qp-white:          #FFFFFF;
    --qp-bg:             #FFFFFF;
    --qp-bg-soft:        #FAF5EC;   /* crema deck (alterna secciones) */
    --qp-bg-warm:        #F8F2E8;
    --qp-dark:           #2D2D2D;
    --qp-dark-2:         #1F1F1F;
    --qp-dark-3:         #3a3a3a;
    --qp-text:           #1B1B1B;
    --qp-text-muted:     #6b6b6b;
    --qp-border:         #E9E1D2;

    /* Tipografía */
    --qp-font-display:   'Outfit', system-ui, sans-serif;
    --qp-font-body:      'Manrope', system-ui, sans-serif;

    /* Sombras */
    --qp-shadow-sm:      0 2px 8px rgba(45, 45, 45, 0.06);
    --qp-shadow-md:      0 8px 24px rgba(45, 45, 45, 0.10);
    --qp-shadow-lg:      0 20px 50px rgba(45, 45, 45, 0.14);
    --qp-shadow-orange:  0 14px 40px rgba(241, 145, 46, 0.35);
    --qp-shadow-green:   0 14px 40px rgba(121, 180, 67, 0.40);
    --qp-shadow-red:     0 14px 40px rgba(227, 62, 43, 0.35);

    /* Radios */
    --qp-radius-sm:      8px;
    --qp-radius-md:      14px;
    --qp-radius-lg:      22px;
    --qp-radius-pill:    999px;

    /* Transiciones */
    --qp-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --qp-fast:           150ms var(--qp-ease);
    --qp-base:           250ms var(--qp-ease);
}

/* ---------- 2. RESET / BASE ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--qp-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--qp-text);
    background: var(--qp-bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--qp-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--qp-text);
}

p { margin-bottom: 0; }
a { color: var(--qp-primary); text-decoration: none; transition: color var(--qp-fast); }
a:hover { color: var(--qp-primary-700); }
img { max-width: 100%; height: auto; }

::selection { background: var(--qp-primary); color: var(--qp-white); }

/* ---------- 3. UTILIDADES DE TEXTO Y COLOR ---------- */
.qp-text-primary { color: var(--qp-primary) !important; }
.qp-text-success { color: var(--qp-success) !important; }
.qp-text-alert   { color: var(--qp-alert) !important; }
.qp-text-left    { text-align: left !important; }

.qp-gradient-text {
    background: linear-gradient(135deg, var(--qp-primary) 0%, #ffb155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 4. BOTONES (override Bootstrap) ---------- */
.btn {
    font-family: var(--qp-font-body);
    font-weight: 700;
    border-radius: var(--qp-radius-pill);
    padding: 0.85rem 1.6rem;
    border: 2px solid transparent;
    transition: transform var(--qp-fast), box-shadow var(--qp-base), background var(--qp-base);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn:focus-visible {
    outline: 3px solid var(--qp-primary-300);
    outline-offset: 2px;
    box-shadow: none;
}

.qp-btn-sm  { padding: 0.55rem 1.1rem; font-size: 0.92rem; }
.qp-btn-lg  { padding: 1rem 1.9rem; font-size: 1.05rem; }

.qp-btn-primary {
    background: var(--qp-primary);
    color: var(--qp-white);
    box-shadow: var(--qp-shadow-orange);
}
.qp-btn-primary:hover, .qp-btn-primary:focus {
    background: var(--qp-primary-700);
    color: var(--qp-white);
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(241, 145, 46, 0.45);
}
.qp-btn-primary:active { transform: translateY(0); }

.qp-btn-whatsapp {
    background: var(--qp-success);
    color: var(--qp-white);
    box-shadow: var(--qp-shadow-green);
    font-size: 1rem;
    padding: 0.95rem 1.4rem;
}
.qp-btn-whatsapp:hover, .qp-btn-whatsapp:focus {
    background: var(--qp-success-700);
    color: var(--qp-white);
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(121, 180, 67, 0.5);
}

.qp-btn-alert {
    background: var(--qp-alert);
    color: var(--qp-white);
    box-shadow: var(--qp-shadow-red);
}
.qp-btn-alert:hover, .qp-btn-alert:focus {
    background: var(--qp-alert-700);
    color: var(--qp-white);
    transform: translateY(-2px);
    box-shadow: 0 18px 50px rgba(227, 62, 43, 0.45);
}

.qp-btn-ghost {
    background: transparent;
    color: var(--qp-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.qp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--qp-white);
    transform: translateY(-2px);
}

/* ---------- 5. NAVBAR ---------- */
.qp-navbar {
    background: rgba(45, 45, 45, 0);
    backdrop-filter: blur(0);
    transition: background var(--qp-base), backdrop-filter var(--qp-base), padding var(--qp-base), box-shadow var(--qp-base);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.qp-navbar.is-scrolled {
    background: rgba(45, 45, 45, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.18);
}

.qp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--qp-font-display);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--qp-white) !important;
    letter-spacing: -0.02em;
}
.qp-logo-img {
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    background: var(--qp-bg-warm);
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600;
    padding: 0.5rem 0.95rem !important;
    transition: color var(--qp-fast);
}
.navbar-nav .nav-link:hover { color: var(--qp-white) !important; }

.navbar-toggler { color: var(--qp-white); }
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
    .qp-navbar { background: rgba(45,45,45,0.92); backdrop-filter: blur(14px); }
    .navbar-collapse { padding: 1rem 0; }
}

/* ---------- 6. HERO ---------- */
.qp-hero {
    position: relative;
    background: var(--qp-dark);
    color: var(--qp-white);
    padding: 9rem 0 6rem;
    overflow: hidden;
    isolation: isolate;
}
.qp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.qp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.qp-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.45;
    pointer-events: none;
}
.qp-hero-glow--1 { width: 520px; height: 520px; background: var(--qp-primary); top: -180px; right: -120px; }
.qp-hero-glow--2 { width: 420px; height: 420px; background: var(--qp-success); bottom: -160px; left: -80px; opacity: 0.30; }

.qp-hero-inner { position: relative; z-index: 1; }

.qp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    padding: 0.5rem 1rem;
    border-radius: var(--qp-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    backdrop-filter: blur(8px);
}
.qp-eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--qp-success);
    box-shadow: 0 0 0 4px rgba(121, 180, 67, 0.25);
    animation: qp-dot-pulse 2s ease-in-out infinite;
}
@keyframes qp-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(121, 180, 67, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(121, 180, 67, 0.10); }
}

.qp-hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    font-weight: 900;
    color: var(--qp-white);
    margin-bottom: 1.4rem;
    letter-spacing: -0.035em;
}

.qp-hero-sub {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: rgba(255,255,255,0.78);
    max-width: 560px;
    margin-bottom: 2.2rem;
    line-height: 1.55;
}
.qp-hero-sub strong { color: var(--qp-primary-300); font-weight: 700; }

.qp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.5rem; }

.qp-hero-trust { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; margin: 0; }
.qp-hero-trust li {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.7); font-size: 0.92rem; font-weight: 500;
}
.qp-hero-trust i { color: var(--qp-success); font-size: 1.05rem; }

/* Hero mockup */
.qp-hero-mock { position: relative; perspective: 1500px; margin-top: 1.5rem; }
.qp-mock-card {
    background: linear-gradient(145deg, #353535, #252525);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--qp-radius-lg);
    padding: 1.4rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    color: var(--qp-white);
}
.qp-mock-card--main { transform: rotate(-2deg); animation: qp-float 6s ease-in-out infinite; }
@keyframes qp-float {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-10px); }
}
.qp-mock-head {
    display: flex; align-items: center; gap: 0.4rem;
    padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.1rem;
}
.qp-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.qp-mock-dot:nth-child(1) { background: var(--qp-alert); }
.qp-mock-dot:nth-child(2) { background: var(--qp-primary); }
.qp-mock-dot:nth-child(3) { background: var(--qp-success); }
.qp-mock-title { margin-left: auto; font-size: 0.78rem; color: rgba(255,255,255,0.5); font-weight: 600; }

.qp-mock-stat {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 0.4rem 1rem; margin-bottom: 1.2rem;
}
.qp-mock-stat-label { grid-column: 1; color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.qp-mock-stat-value { grid-column: 1; font-size: 2.6rem; font-weight: 900; font-family: var(--qp-font-display); line-height: 1; }
.qp-mock-stat-trend {
    grid-column: 2; grid-row: 1 / span 2; align-self: end;
    background: rgba(121, 180, 67, 0.15); color: var(--qp-success-300);
    padding: 0.3rem 0.7rem; border-radius: var(--qp-radius-pill);
    font-size: 0.85rem; font-weight: 700;
}

.qp-mock-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 75px; margin-bottom: 1.2rem; }
.qp-mock-bars span {
    flex: 1; height: var(--h);
    background: linear-gradient(to top, var(--qp-primary), var(--qp-primary-300));
    border-radius: 6px 6px 2px 2px; opacity: 0.85;
    animation: qp-bar-grow 1.4s var(--qp-ease) backwards;
}
.qp-mock-bars span:nth-child(1) { animation-delay: 0.1s; }
.qp-mock-bars span:nth-child(2) { animation-delay: 0.2s; }
.qp-mock-bars span:nth-child(3) { animation-delay: 0.3s; }
.qp-mock-bars span:nth-child(4) { animation-delay: 0.4s; }
.qp-mock-bars span:nth-child(5) { animation-delay: 0.5s; }
.qp-mock-bars span:nth-child(6) { animation-delay: 0.6s; }
.qp-mock-bars span:nth-child(7) { animation-delay: 0.7s; }
@keyframes qp-bar-grow {
    from { height: 0; opacity: 0; }
    to   { height: var(--h); opacity: 0.85; }
}

.qp-mock-orders { display: flex; flex-direction: column; gap: 0.4rem; }
.qp-mock-order {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.55rem 0.85rem;
    border-radius: var(--qp-radius-md);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    display: flex; align-items: center; gap: 0.6rem;
}
.qp-mock-order-id { color: var(--qp-primary-300); font-weight: 700; font-family: var(--qp-font-display); }

.qp-mock-card--chat {
    position: absolute; bottom: -28px; right: -10px;
    background: var(--qp-success); border: none; color: var(--qp-white);
    padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.8rem;
    border-radius: var(--qp-radius-md);
    box-shadow: 0 18px 40px rgba(121, 180, 67, 0.45);
    font-size: 0.9rem; transform: rotate(3deg);
    animation: qp-float-chat 5s ease-in-out infinite;
}
.qp-mock-card--chat i { font-size: 1.6rem; }
.qp-mock-card--chat strong { display: block; font-weight: 700; }
.qp-mock-card--chat small { font-size: 0.78rem; opacity: 0.9; }
@keyframes qp-float-chat {
    0%, 100% { transform: rotate(3deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-8px); }
}

/* ---------- 7. SECCIONES GENERALES ---------- */
.qp-section { padding: 6rem 0; background: var(--qp-bg); position: relative; }
.qp-section--soft { background: var(--qp-bg-soft); }
.qp-section--dark { background: var(--qp-dark); color: var(--qp-white); }
.qp-section--dark h1, .qp-section--dark h2, .qp-section--dark h3 { color: var(--qp-white); }

.qp-section-head { max-width: 760px; margin: 0 auto 3rem; }
.qp-section-title { font-size: clamp(2rem, 3.8vw, 3.2rem); margin-bottom: 1rem; }
.qp-section-sub { font-size: 1.1rem; color: var(--qp-text-muted); line-height: 1.6; }
.qp-section--dark .qp-section-sub { color: rgba(255,255,255,0.72); }

.qp-tag {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    border-radius: var(--qp-radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.qp-tag--primary { background: rgba(241, 145, 46, 0.12); color: var(--qp-primary); }
.qp-tag--success { background: rgba(121, 180, 67, 0.14); color: var(--qp-success-700); }
.qp-tag--alert   { background: rgba(227, 62, 43, 0.14); color: var(--qp-alert); }
.qp-tag--ghost   {
    background: rgba(255,255,255,0.08); color: var(--qp-white);
    border: 1px solid rgba(255,255,255,0.18);
}

/* ---------- 8. GRÁFICA DE CRECIMIENTO ---------- */
.qp-chart-wrap {
    background: var(--qp-white);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-lg);
    padding: 1.5rem 1rem;
    box-shadow: var(--qp-shadow-md);
    overflow: hidden;
}
.qp-chart { width: 100%; height: auto; display: block; }
.qp-chart-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.qp-chart.is-visible .qp-chart-line--success { animation: qp-draw-line 2.2s var(--qp-ease) 0.2s forwards; }
.qp-chart.is-visible .qp-chart-line--alert   { animation: qp-draw-line 2.2s var(--qp-ease) 0.6s forwards; }
.qp-chart.is-visible .qp-chart-label         { animation: qp-fade-up 0.6s var(--qp-ease) backwards; }
.qp-chart.is-visible .qp-chart-label:nth-of-type(1) { animation-delay: 1.6s; }
.qp-chart.is-visible .qp-chart-label:nth-of-type(2) { animation-delay: 1.9s; }
.qp-chart.is-visible .qp-chart-label:nth-of-type(3) { animation-delay: 2.2s; }

@keyframes qp-draw-line { to { stroke-dashoffset: 0; } }
@keyframes qp-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 9. PROBLEMA — CARDS ---------- */
.qp-problem-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--qp-radius-lg);
    padding: 2rem 1.8rem;
    height: 100%;
    transition: transform var(--qp-base), border-color var(--qp-base), background var(--qp-base);
    position: relative; overflow: hidden;
}
.qp-problem-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--qp-alert), transparent);
    opacity: 0; transition: opacity var(--qp-base);
}
.qp-problem-card:hover {
    transform: translateY(-6px);
    border-color: rgba(227, 62, 43, 0.4);
    background: rgba(255,255,255,0.06);
}
.qp-problem-card:hover::before { opacity: 1; }

.qp-problem-icon {
    width: 56px; height: 56px;
    border-radius: var(--qp-radius-md);
    background: rgba(227, 62, 43, 0.15);
    color: var(--qp-alert);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 1.3rem;
}
.qp-problem-card h3 { font-size: 1.45rem; margin-bottom: 0.7rem; color: var(--qp-white); }
.qp-problem-card p { color: rgba(255,255,255,0.72); margin-bottom: 1.4rem; line-height: 1.55; }
.qp-problem-metric {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.1rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.qp-metric-value {
    font-family: var(--qp-font-display);
    font-size: 1.7rem; font-weight: 900;
    color: var(--qp-alert-300); line-height: 1;
}
.qp-metric-label { font-size: 0.85rem; color: rgba(255,255,255,0.55); }

/* ---------- 10. ECOSISTEMA QUICKPLATE ---------- */
.qp-eco-lead {
    font-size: 1.15rem;
    color: var(--qp-text-muted);
    margin: 1.3rem 0 1.5rem;
    line-height: 1.55;
}
.qp-eco-promise {
    background: linear-gradient(135deg, var(--qp-success), var(--qp-success-700));
    color: var(--qp-white);
    padding: 1.3rem 1.5rem;
    border-radius: var(--qp-radius-md);
    display: flex; align-items: flex-start; gap: 0.9rem;
    box-shadow: var(--qp-shadow-green);
    margin-bottom: 1.6rem;
}
.qp-eco-promise i { font-size: 1.8rem; flex-shrink: 0; }
.qp-eco-promise p { margin: 0; line-height: 1.5; }
.qp-eco-promise strong { font-size: 1.1rem; font-weight: 800; font-family: var(--qp-font-display); }

.qp-eco-bullets li {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0;
    color: var(--qp-text); font-weight: 600;
}
.qp-eco-bullets i { color: var(--qp-primary); font-size: 1.4rem; }

/* Gráfico orbital del ecosistema */
.qp-eco-graphic {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
}
.qp-eco-rings {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    animation: qp-rotate 60s linear infinite;
}
@keyframes qp-rotate {
    to { transform: rotate(360deg); }
}
.qp-eco-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38%; height: 38%;
    background: var(--qp-bg-warm);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px rgba(241, 145, 46, 0.25);
    z-index: 2;
    border: 4px solid var(--qp-white);
}
.qp-eco-center img {
    width: 70%; height: 88%; object-fit: contain;
}
.qp-eco-node {
    position: absolute;
    width: 22%;
    aspect-ratio: 1 / 1;
    background: var(--qp-white);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    border: 2px solid var(--qp-border);
    text-align: center;
    transition: transform var(--qp-base), box-shadow var(--qp-base);
    z-index: 3;
}
.qp-eco-node i { font-size: 1.6rem; }
.qp-eco-node span {
    font-family: var(--qp-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--qp-text);
    padding: 0 0.3rem;
}
.qp-eco-node:hover { transform: scale(1.08); box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
.qp-eco-node--whatsapp { top: 8%; right: 12%; animation: qp-orbit-1 5s ease-in-out infinite; }
.qp-eco-node--whatsapp i { color: var(--qp-success); }
.qp-eco-node--customer { top: 42%; right: -2%; animation: qp-orbit-2 5s ease-in-out infinite; }
.qp-eco-node--customer i { color: var(--qp-primary); }
.qp-eco-node--delivery { bottom: 6%; right: 18%; animation: qp-orbit-3 5s ease-in-out infinite; }
.qp-eco-node--delivery i { color: var(--qp-alert); }

@keyframes qp-orbit-1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes qp-orbit-2 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}
@keyframes qp-orbit-3 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- 11. PILARES ---------- */
.qp-pillar-card {
    background: var(--qp-white);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-lg);
    padding: 2.2rem 1.8rem;
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform var(--qp-base), box-shadow var(--qp-base);
    box-shadow: var(--qp-shadow-sm);
}
.qp-pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--qp-shadow-lg);
}

.qp-pillar-stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    border-radius: var(--qp-radius-lg) var(--qp-radius-lg) 0 0;
}
.qp-pillar-card--alert   .qp-pillar-stripe { background: var(--qp-alert); }
.qp-pillar-card--success .qp-pillar-stripe { background: var(--qp-success); }
.qp-pillar-card--primary .qp-pillar-stripe { background: var(--qp-primary); }

.qp-pillar-icon {
    width: 70px; height: 70px;
    margin: 1rem auto 1.4rem;
    border-radius: var(--qp-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--qp-white);
}
.qp-pillar-card--alert   .qp-pillar-icon { background: linear-gradient(135deg, var(--qp-alert), var(--qp-alert-700)); box-shadow: var(--qp-shadow-red); }
.qp-pillar-card--success .qp-pillar-icon { background: linear-gradient(135deg, var(--qp-success), var(--qp-success-700)); box-shadow: var(--qp-shadow-green); }
.qp-pillar-card--primary .qp-pillar-icon { background: linear-gradient(135deg, var(--qp-primary), var(--qp-primary-700)); box-shadow: var(--qp-shadow-orange); }

.qp-pillar-card h3 {
    font-size: 1.7rem;
    margin-bottom: 0.8rem;
    position: relative; padding-bottom: 0.7rem;
}
.qp-pillar-card h3::after {
    content: ''; position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 40px; height: 2px;
}
.qp-pillar-card--alert   h3::after { background: var(--qp-alert); }
.qp-pillar-card--success h3::after { background: var(--qp-success); }
.qp-pillar-card--primary h3::after { background: var(--qp-primary); }

.qp-pillar-card p { color: var(--qp-text-muted); line-height: 1.55; }

/* ---------- 12. ESCALERA DE EVOLUCIÓN ---------- */
.qp-stairs {
    margin: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    min-height: 340px;
}
.qp-stair {
    flex: 1;
    border-radius: var(--qp-radius-md) var(--qp-radius-md) 0 0;
    padding: 1.2rem 0.8rem 1.4rem;
    color: var(--qp-white);
    text-align: center;
    position: relative;
    transition: transform var(--qp-base), box-shadow var(--qp-base);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
}
.qp-stair::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
}
.qp-stair:hover { transform: translateY(-6px); box-shadow: var(--qp-shadow-lg); }
.qp-stair--1 { background: var(--qp-dark);    height: 35%; }
.qp-stair--2 { background: var(--qp-primary); height: 55%; }
.qp-stair--3 { background: var(--qp-success); height: 78%; }
.qp-stair--4 { background: var(--qp-primary-700); height: 100%;
    background: linear-gradient(135deg, var(--qp-primary), var(--qp-primary-700));
}
.qp-stair-num {
    font-family: var(--qp-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.7;
    z-index: 1;
}
.qp-stair-label {
    font-family: var(--qp-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    z-index: 1;
}

@media (max-width: 575.98px) {
    .qp-stairs { min-height: 260px; gap: 0.4rem; }
    .qp-stair-label { font-size: 0.85rem; }
    .qp-stair-num { font-size: 0.7rem; }
}

/* ---------- 13. PRECIOS — CARDS ---------- */
.qp-price-card {
    background: var(--qp-white);
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-lg);
    padding: 2rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--qp-base), box-shadow var(--qp-base);
}
.qp-price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--qp-shadow-lg);
}

.qp-price-card--featured {
    background: var(--qp-dark);
    color: var(--qp-white);
    border-color: var(--qp-primary);
    box-shadow: 0 25px 60px rgba(45,45,45,0.25);
    transform: translateY(-12px);
}
.qp-price-card--featured:hover {
    transform: translateY(-18px);
    box-shadow: 0 35px 80px rgba(45,45,45,0.35);
}
.qp-price-card--featured .qp-price-name,
.qp-price-card--featured .qp-price-tagline,
.qp-price-card--featured .qp-price-features li,
.qp-price-card--featured .qp-price-value,
.qp-price-card--featured .qp-price-period { color: var(--qp-white); }
.qp-price-card--featured .qp-price-tagline { color: rgba(255,255,255,0.75); }
.qp-price-card--featured .qp-price-period { color: rgba(255,255,255,0.6); }
.qp-price-card--featured .qp-price-usd { color: rgba(255,255,255,0.55); }

.qp-price-badge-top {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--qp-primary);
    color: var(--qp-white);
    padding: 0.4rem 1rem;
    border-radius: var(--qp-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--qp-shadow-orange);
    white-space: nowrap;
    z-index: 2;
}

.qp-price-head {
    margin-bottom: 1.2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--qp-border);
}
.qp-price-card--featured .qp-price-head { border-bottom-color: rgba(255,255,255,0.1); }

.qp-price-name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.qp-price-pill {
    display: inline-block;
    background: var(--qp-dark);
    color: var(--qp-white);
    padding: 0.35rem 0.8rem;
    border-radius: var(--qp-radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
}
.qp-price-card--featured .qp-price-pill {
    background: var(--qp-primary);
    color: var(--qp-white);
}

.qp-price-tagline {
    color: var(--qp-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.qp-price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem 0;
    flex-grow: 1;
}
.qp-price-features li {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.45rem 0;
    font-size: 0.9rem;
    color: var(--qp-text);
    line-height: 1.45;
}
.qp-price-features i {
    color: var(--qp-success);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.qp-price-card--featured .qp-price-features i { color: var(--qp-success-300); }

.qp-price-amount {
    background: var(--qp-bg-soft);
    border-radius: var(--qp-radius-md);
    padding: 0.95rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.qp-price-card--featured .qp-price-amount {
    background: rgba(255,255,255,0.05);
}
.qp-price-cop {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    flex-wrap: wrap;
}
.qp-price-currency {
    font-family: var(--qp-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--qp-primary);
}
.qp-price-value {
    font-family: var(--qp-font-display);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}
.qp-price-period {
    font-size: 0.78rem;
    color: var(--qp-text-muted);
    margin-left: 0.3rem;
    font-weight: 600;
}
.qp-price-usd {
    font-size: 0.8rem;
    color: var(--qp-text-muted);
    margin-top: 0.3rem;
    font-weight: 500;
}

.qp-price-foot { color: var(--qp-text-muted); font-size: 0.95rem; }

/* ---------- 14. PLAN ENTERPRISE ---------- */
.qp-enterprise {
    position: relative;
    background: linear-gradient(135deg, var(--qp-dark) 0%, var(--qp-dark-2) 100%);
    border-radius: var(--qp-radius-lg);
    padding: 3rem 2.5rem;
    color: var(--qp-white);
    overflow: hidden;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.qp-enterprise-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 20%, rgba(241, 145, 46, 0.25), transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(121, 180, 67, 0.18), transparent 40%);
    pointer-events: none;
}
.qp-enterprise-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.qp-enterprise-icon {
    flex-shrink: 0;
    width: 96px; height: 96px;
    border-radius: var(--qp-radius-lg);
    background: linear-gradient(135deg, var(--qp-primary), var(--qp-primary-700));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--qp-white);
    box-shadow: var(--qp-shadow-orange);
}
.qp-enterprise-copy { flex: 1; min-width: 280px; }
.qp-enterprise-copy h3 {
    color: var(--qp-white);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    margin: 0.6rem 0 0.7rem;
}
.qp-enterprise-copy p {
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    margin-bottom: 0.7rem;
}
.qp-enterprise-copy p:last-child { margin-bottom: 0; }
.qp-enterprise-copy strong { color: var(--qp-primary-300); font-weight: 700; }
.qp-enterprise-note {
    font-size: 0.92rem !important;
    color: rgba(255,255,255,0.6) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.05);
    padding: 0.55rem 0.9rem;
    border-radius: var(--qp-radius-md);
    border: 1px solid rgba(255,255,255,0.08);
}
.qp-enterprise-note i { color: var(--qp-primary-300); }
.qp-enterprise-cta { flex-shrink: 0; }

/* ---------- 15. TABLA COMPARATIVA ---------- */
.qp-compare-wrap {
    border-radius: var(--qp-radius-lg);
    overflow: hidden;
    box-shadow: var(--qp-shadow-md);
    background: var(--qp-white);
    border: 1px solid var(--qp-border);
}
.qp-compare {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--qp-font-body);
    background: var(--qp-white);
}
.qp-compare thead th {
    background: var(--qp-dark);
    color: var(--qp-white);
    font-family: var(--qp-font-display);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 1.1rem 0.8rem;
    text-align: center;
    letter-spacing: 0.01em;
}
.qp-compare thead th.qp-compare-feature { text-align: left; padding-left: 1.4rem; }
.qp-compare thead th.qp-compare-featured {
    background: var(--qp-primary);
    color: var(--qp-white);
    position: relative;
}
.qp-compare thead th.qp-compare-featured::before {
    content: '★ MÁS ELEGIDO';
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    opacity: 0.85;
}
.qp-compare tbody td {
    padding: 1rem 0.8rem;
    text-align: center;
    border-bottom: 1px solid var(--qp-border);
    font-size: 0.95rem;
    vertical-align: middle;
}
.qp-compare tbody td:first-child {
    text-align: left;
    padding-left: 1.4rem;
    font-weight: 600;
    color: var(--qp-text);
}
.qp-compare tbody tr:last-child td { border-bottom: none; }
.qp-compare tbody tr:nth-child(even) { background: var(--qp-bg-soft); }
.qp-compare tbody tr:hover { background: rgba(241, 145, 46, 0.05); }
.qp-yes { color: var(--qp-success); font-size: 1.5rem; }
.qp-no  { color: var(--qp-border); font-weight: 700; font-size: 1.2rem; }

/* ---------- 16. CTA FINAL ---------- */
.qp-cta-final { padding: 5rem 0; background: var(--qp-bg); }
.qp-cta-card {
    background: linear-gradient(135deg, var(--qp-dark) 0%, var(--qp-dark-2) 100%);
    border-radius: var(--qp-radius-lg);
    padding: 3rem 2.5rem;
    color: var(--qp-white);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}
.qp-cta-card::before {
    content: '';
    position: absolute;
    top: -100px; right: -80px;
    width: 320px; height: 320px;
    background: var(--qp-primary);
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    pointer-events: none;
}
.qp-cta-content { position: relative; z-index: 1; max-width: 580px; }
.qp-cta-content h2 {
    color: var(--qp-white);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    margin: 0.6rem 0;
}
.qp-cta-content p { color: rgba(255,255,255,0.75); font-size: 1.05rem; margin-bottom: 1.5rem; }

.qp-cta-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.2rem;
}
.qp-cta-contact-item {
    flex: 1;
    min-width: 220px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.85rem 1rem;
    border-radius: var(--qp-radius-md);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.qp-cta-contact-item i {
    font-size: 1.6rem;
    color: var(--qp-success-300);
}
.qp-cta-contact-item small {
    display: block;
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}
.qp-cta-contact-item strong {
    display: block;
    color: var(--qp-white);
    font-size: 1rem;
    font-weight: 700;
}

.qp-cta-card .btn { position: relative; z-index: 1; }

/* ---------- 17. FOOTER ---------- */
.qp-footer {
    background: var(--qp-dark-2);
    color: rgba(255,255,255,0.6);
    padding: 2.5rem 0;
}
.qp-brand--footer { color: var(--qp-white) !important; font-size: 1.2rem; }
.qp-footer-tag { color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-top: 0.5rem; }
.qp-footer-legal { color: rgba(255,255,255,0.55); font-size: 0.88rem; margin: 0; }
.qp-footer-legal small { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.qp-footer-links {
    margin: 0.7rem 0 0.5rem 0;
    font-size: 0.82rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    justify-content: flex-end;
}
@media (max-width: 767.98px) { .qp-footer-links { justify-content: flex-start; } }
.qp-footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.2);
    text-underline-offset: 3px;
    transition: color var(--qp-fast);
}
.qp-footer-links a:hover { color: var(--qp-primary-300); }
.qp-footer-links span { color: rgba(255,255,255,0.3); }
.qp-footer-tracking {
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
    margin: 0.6rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.qp-footer-tracking i { color: var(--qp-success-300); font-size: 0.9rem; }

/* ---------- 18. BOTÓN FLOTANTE WHATSAPP ---------- */
.qp-float-wa {
    position: fixed;
    bottom: 22px; right: 22px;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--qp-success);
    color: var(--qp-white) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    box-shadow: 0 10px 30px rgba(121, 180, 67, 0.5);
    z-index: 1050;
    transition: transform var(--qp-base), box-shadow var(--qp-base);
    text-decoration: none !important;
}
.qp-float-wa:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 40px rgba(121, 180, 67, 0.6);
    color: var(--qp-white) !important;
}
.qp-float-wa:focus-visible { outline: 3px solid var(--qp-white); outline-offset: 3px; }

.qp-float-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--qp-success);
    opacity: 0.55;
    animation: qp-pulse 1.8s var(--qp-ease) infinite;
    z-index: -1;
}
@keyframes qp-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(1.7); opacity: 0; }
}

.qp-float-tooltip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--qp-dark);
    color: var(--qp-white);
    padding: 0.55rem 0.9rem;
    border-radius: var(--qp-radius-md);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--qp-base), transform var(--qp-base);
    box-shadow: var(--qp-shadow-md);
}
.qp-float-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--qp-dark);
}
.qp-float-wa:hover .qp-float-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 575.98px) {
    .qp-float-tooltip { display: none; }
    .qp-float-wa { width: 56px; height: 56px; font-size: 1.7rem; bottom: 18px; right: 18px; }
}

/* ---------- 19. ANIMACIONES DE ENTRADA ---------- */
.qp-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--qp-ease), transform 0.7s var(--qp-ease);
}
.qp-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 20. ACCESIBILIDAD: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .qp-fade-in { opacity: 1; transform: none; }
    .qp-chart-line { stroke-dashoffset: 0 !important; }
}

/* ---------- 21. RESPONSIVE FINE-TUNING ---------- */
@media (max-width: 991.98px) {
    .qp-hero { padding: 7rem 0 4rem; }
    .qp-hero-mock { margin-top: 3rem; }
    .qp-section { padding: 4.5rem 0; }
    .qp-section-head { margin-bottom: 2.2rem; }
    .qp-price-card--featured { transform: none; }
    .qp-price-card--featured:hover { transform: translateY(-6px); }
    .qp-cta-card { padding: 2.2rem 1.6rem; text-align: center; justify-content: center; }
    .qp-enterprise { padding: 2.2rem 1.6rem; }
    .qp-enterprise-inner { flex-direction: column; text-align: center; gap: 1.5rem; }
    .qp-enterprise-cta { width: 100%; }
    .qp-enterprise-cta .btn { width: 100%; }
    .qp-eco-graphic { max-width: 380px; }
}
@media (max-width: 767.98px) {
    .qp-compare thead th { font-size: 0.85rem; padding: 0.85rem 0.4rem; }
    .qp-compare thead th.qp-compare-featured::before { font-size: 0.5rem; }
    .qp-compare tbody td { font-size: 0.82rem; padding: 0.75rem 0.4rem; }
    .qp-compare tbody td:first-child { padding-left: 0.8rem; }
    .qp-yes { font-size: 1.2rem; }
    .qp-chart-wrap { padding: 0.8rem 0.4rem; }
}
@media (max-width: 575.98px) {
    .qp-hero { padding: 6rem 0 3rem; }
    .qp-hero-cta .btn { width: 100%; }
    .qp-section { padding: 3.5rem 0; }
    .qp-mock-card--chat { right: 0; }
    .qp-cta-contact-item { min-width: 100%; }
}