/* ──────────────────────────────────────────────────────────────────────────
   Landing pública de Zofi.
   Todo vive bajo .zofi-lp para no chocar con el tema del dashboard (zofi.css).
   ────────────────────────────────────────────────────────────────────────── */

.zofi-lp {
    --lp-teal:        #0a6b7c;
    --lp-teal-deep:   #0d3f49;
    --lp-mint:        #2fa89b;
    --lp-mint-light:  #5fd4c4;
    --lp-ink:         #10333c;
    --lp-text:        #4a636b;
    --lp-text-soft:   #5a727a;
    --lp-page:        #eef1f2;
    --lp-surface:     #f7fafb;
    --lp-border:      #eaf0f1;
    --lp-border-soft: #d7e3e5;

    background: var(--lp-page);
    color: var(--lp-ink);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding: 40px 40px 56px;
}

.zofi-lp h1,
.zofi-lp h2,
.zofi-lp h3,
.zofi-lp h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}

.zofi-lp p { margin: 0; }
.zofi-lp a { color: inherit; text-decoration: none; }
.zofi-lp img { max-width: 100%; }

/* Tarjeta contenedora: es la identidad visual del diseño. */
.lp-shell {
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(16, 51, 60, .18);
}

.lp-pad      { padding: 0 56px; }
.lp-section  { padding: 76px 56px; }

/* ── Tipografía de sección ───────────────────────────────────────────────── */
.lp-eyebrow {
    font-weight: 700;
    color: var(--lp-mint);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.lp-h2       { font-size: 38px; }
.lp-lead     { font-size: 17px; color: var(--lp-text); line-height: 1.55; }
.lp-head     { text-align: center; margin-bottom: 48px; }
.lp-head p   { max-width: 620px; margin: 12px auto 0; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.lp-btn {
    display: inline-block;
    font-weight: 700;
    border-radius: 10px;
    padding: 11px 20px;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); }

/* El color va prefijado con .zofi-lp para ganarle en especificidad al reset
   `.zofi-lp a { color: inherit }`; si no, los botones-enlace heredan el color
   del texto de alrededor (teal oscuro en el hero, blanco invisible en el CTA). */
.zofi-lp .lp-btn-primary  { background: var(--lp-teal); color: #fff; }
.zofi-lp .lp-btn-primary:hover  { background: #085768; color: #fff; }

.zofi-lp .lp-btn-outline  { background: #fff; color: var(--lp-ink); border: 1.5px solid var(--lp-border-soft); }
.zofi-lp .lp-btn-outline:hover  { border-color: var(--lp-teal); color: var(--lp-teal); }

.zofi-lp .lp-btn-mint     { background: var(--lp-mint); color: #062226; }
.zofi-lp .lp-btn-mint:hover     { background: var(--lp-mint-light); color: #062226; }

.zofi-lp .lp-btn-white    { background: #fff; color: var(--lp-teal); }
.zofi-lp .lp-btn-white:hover    { background: #eaf5f6; color: var(--lp-teal); }

.lp-btn-lg { font-size: 17px; padding: 15px 28px; border-radius: 12px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.lp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 56px;
    border-bottom: 1px solid var(--lp-border);
}
.lp-brand { display: flex; align-items: center; gap: 12px; }
.lp-brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.lp-brand span {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--lp-teal);
    letter-spacing: -.01em;
}
.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    font-weight: 600;
    font-size: 15px;
    color: #3f5860;
}
.lp-nav-links a:hover { color: var(--lp-teal); }
.lp-nav-actions { display: flex; align-items: center; gap: 14px; }
.lp-nav-login { font-weight: 600; font-size: 15px; color: #3f5860; }
.lp-nav-login:hover { color: var(--lp-teal); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding: 72px 56px 64px;
}
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e7f4f1;
    color: var(--lp-teal);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.lp-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-mint); }
/* Prefijadas con .zofi-lp para ganarle en especificidad a los resets
   `.zofi-lp h1 { margin:0 }` y `.zofi-lp p { margin:0 }`; si no, el hero
   pierde su margin-bottom y el H1 / subtítulo / botones quedan pegados. */
.zofi-lp .lp-h1 { font-size: 52px; line-height: 1.05; margin-bottom: 22px; }
.lp-h1 .accent { color: var(--lp-teal); }
.zofi-lp .lp-hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--lp-text);
    margin-bottom: 32px;
    max-width: 520px;
}
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.lp-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    color: var(--lp-text-soft);
    font-size: 14px;
    font-weight: 600;
}

/* Mockup de WhatsApp */
.lp-chat-frame {
    background: linear-gradient(160deg, var(--lp-teal), var(--lp-teal-deep));
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 30px 60px rgba(10, 63, 73, .35);
}
.lp-chat { border-radius: 16px; overflow: hidden; background: #eef3f2; }
.lp-chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: #075e54;
    color: #fff;
}
.lp-chat-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--lp-teal);
}
.lp-chat-name   { font-weight: 700; font-size: 15px; }
.lp-chat-status { font-size: 12px; opacity: .8; }
.lp-chat-body {
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #e5ddd5;
    min-height: 300px;
}
.lp-bubble { padding: 10px 13px; font-size: 14px; line-height: 1.45; }
.lp-bubble-user {
    align-self: flex-end;
    background: #dcf8c6;
    border-radius: 12px 12px 2px 12px;
    max-width: 78%;
}
.lp-bubble-bot {
    align-self: flex-start;
    background: #fff;
    border-radius: 12px 12px 12px 2px;
    max-width: 82%;
}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.lp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--lp-border);
    border-bottom: 1px solid var(--lp-border);
    background: var(--lp-surface);
}
.lp-stat { padding: 26px 32px; border-right: 1px solid var(--lp-border); }
.lp-stat:last-child { border-right: 0; }
.lp-stat-n {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: var(--lp-teal);
}
.lp-stat-l { font-size: 14px; color: var(--lp-text-soft); font-weight: 600; margin-top: 4px; }

/* ── Pasos ───────────────────────────────────────────────────────────────── */
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.lp-step-n {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--lp-teal);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.lp-step h3 { font-size: 20px; font-weight: 600; margin-bottom: 9px; }
.lp-step p  { font-size: 15px; color: var(--lp-text); line-height: 1.5; }

/* ── Diferencial Meta ────────────────────────────────────────────────────── */
.lp-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(135deg, #e7f4f1, #eef4f5);
    border: 1px solid #d7e8e5;
    border-radius: 22px;
    padding: 44px;
}
.lp-meta h2 { font-size: 36px; margin-bottom: 16px; }
.lp-meta-cards { display: flex; flex-direction: column; gap: 14px; }
.lp-meta-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e3eeec;
    border-radius: 12px;
    padding: 16px;
    font-size: 15px;
    color: #28454d;
    line-height: 1.45;
}
.lp-meta-card .ico { font-size: 22px; line-height: 1; }

/* ── Funcionalidades ─────────────────────────────────────────────────────── */
.lp-feature {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 28px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.lp-feature:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 51, 60, .08); }
.lp-feature-ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #e7f4f1;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}
.lp-feature h3 { font-size: 19px; font-weight: 600; margin-bottom: 9px; }
.lp-feature p  { font-size: 15px; color: var(--lp-text); line-height: 1.5; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.lp-panel {
    background: linear-gradient(160deg, #eef4f5, #dcebec);
    border-radius: 22px;
    padding: 42px 42px 0;
    text-align: center;
}
.lp-panel h2 { font-size: 30px; margin-bottom: 10px; }
.lp-panel p  { font-size: 16px; color: var(--lp-text); margin-bottom: 30px; }
.lp-panel img {
    width: 100%;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 40px rgba(16, 51, 60, .18);
    display: block;
}

/* ── Casos de uso ────────────────────────────────────────────────────────── */
.lp-case {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 24px;
}
.lp-case .ico { font-size: 28px; line-height: 1; }
.lp-case h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.lp-case p  { font-size: 15px; color: var(--lp-text); line-height: 1.5; }

/* ── Banda custom ────────────────────────────────────────────────────────── */
.lp-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--lp-ink);
    color: #fff;
    border-radius: 18px;
    padding: 28px 34px;
}
.lp-band h3 { font-size: 22px; margin-bottom: 6px; }
.lp-band p  { font-size: 15px; color: #b9cdd1; line-height: 1.5; }
.lp-band .lp-btn { flex-shrink: 0; padding: 13px 24px; font-size: 15px; }

/* ── Precios ─────────────────────────────────────────────────────────────── */
.lp-pricing { background: var(--lp-surface); padding: 76px 56px; }
.lp-pricing-note {
    max-width: 820px;
    margin: 0 auto 44px;
    background: #e7f4f1;
    border-radius: 14px;
    padding: 22px 26px;
    text-align: center;
    font-size: 14px;
    color: #3f5860;
    line-height: 1.6;
}
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.lp-plan {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--lp-border);
    border-radius: 18px;
    padding: 30px;
    position: relative;
}
.lp-plan-featured { background: var(--lp-teal); border-color: var(--lp-teal); color: #fff; }
.lp-plan-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--lp-mint);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.lp-plan-name  { font-weight: 700; font-size: 15px; opacity: .7; margin-bottom: 10px; }
.lp-plan-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 2px;
}
.lp-plan-old {
    font-size: 22px;
    opacity: .5;
    text-decoration: line-through;
    margin-right: 10px;
    font-weight: 600;
}
.lp-plan-note  { font-size: 13px; opacity: .65; margin-bottom: 22px; }
.lp-plan-items { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.lp-plan-item  { display: flex; gap: 9px; font-size: 14px; line-height: 1.4; }
.lp-plan-item .check { color: var(--lp-mint); font-weight: 700; }
.lp-plan-featured .lp-plan-item .check { color: var(--lp-mint-light); }
.lp-plan .lp-btn { margin-top: auto; text-align: center; padding: 12px; font-size: 15px; }
.zofi-lp .lp-btn-plan { background: #f0f5f6; color: var(--lp-teal); }
.zofi-lp .lp-btn-plan:hover { background: #e2ecee; color: var(--lp-teal); }

/* ── Testimonios ─────────────────────────────────────────────────────────── */
.lp-quote {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 26px;
}
.lp-quote p { font-size: 15px; line-height: 1.55; color: #28454d; margin-bottom: 20px; }
.lp-quote-author { display: flex; align-items: center; gap: 12px; }
.lp-quote-initial {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lp-teal);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}
.lp-quote-name { font-weight: 700; font-size: 14px; }
.lp-quote-role { font-size: 13px; color: var(--lp-text-soft); }

/* ── FAQ (details/summary, sin JS) ───────────────────────────────────────── */
.lp-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    padding: 22px 24px;
}
.lp-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
    content: '+';
    color: var(--lp-teal);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .18s ease;
}
.lp-faq-item[open] summary::after { transform: rotate(45deg); }
.lp-faq-item p { font-size: 15px; color: var(--lp-text); line-height: 1.55; margin-top: 10px; }

/* ── CTA final ───────────────────────────────────────────────────────────── */
.lp-cta {
    background: linear-gradient(135deg, var(--lp-teal), var(--lp-teal-deep));
    border-radius: 24px;
    padding: 60px;
    text-align: center;
    color: #fff;
}
.lp-cta h2 { font-size: 40px; margin-bottom: 14px; }
.lp-cta p  { font-size: 18px; opacity: .85; margin-bottom: 30px; }
.lp-cta .lp-btn { font-size: 18px; padding: 16px 34px; border-radius: 12px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 56px;
    border-top: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 14px;
}
.lp-footer-brand { display: flex; align-items: center; gap: 10px; }
.lp-footer-brand img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.lp-footer-brand .name {
    font-weight: 700;
    color: var(--lp-teal);
    font-family: 'Space Grotesk', sans-serif;
}
.lp-footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.lp-footer-links a:hover { color: var(--lp-teal); }
.lp-footer-copy { font-size: 13px; opacity: .75; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .zofi-lp { padding: 0; }
    .lp-shell { border-radius: 0; box-shadow: none; }
    .lp-pad, .lp-nav, .lp-footer { padding-left: 28px; padding-right: 28px; }
    .lp-section, .lp-pricing { padding: 56px 28px; }
    .lp-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 28px; }
    .lp-h1 { font-size: 38px; }
    .lp-hero-sub { font-size: 17px; }
    .lp-h2, .lp-meta h2 { font-size: 30px; }
    .lp-nav-links { display: none; }
    .lp-stats { grid-template-columns: repeat(2, 1fr); }
    .lp-stat:nth-child(2) { border-right: 0; }
    .lp-grid-3, .lp-grid-2, .lp-plans, .lp-meta { grid-template-columns: 1fr; }
    .lp-meta { padding: 32px; gap: 28px; }
    .lp-band { flex-direction: column; align-items: flex-start; }
    .lp-panel { padding: 32px 24px 0; }
    .lp-cta { padding: 44px 28px; }
    .lp-cta h2 { font-size: 30px; }
}

@media (max-width: 575px) {
    .lp-pad, .lp-nav, .lp-footer { padding-left: 20px; padding-right: 20px; }
    .lp-section, .lp-pricing { padding: 44px 20px; }
    .lp-hero { padding: 36px 20px; }
    .lp-h1 { font-size: 32px; }
    .lp-nav-login { display: none; }
    .lp-hero-ctas .lp-btn { width: 100%; text-align: center; }
    .lp-hero-chips { gap: 10px; flex-direction: column; align-items: flex-start; }
    .lp-chat-frame { padding: 16px; }
    .lp-stats { grid-template-columns: 1fr; }
    .lp-stat { border-right: 0; border-bottom: 1px solid var(--lp-border); }
    .lp-footer { justify-content: center; text-align: center; }
}