/* ═══════════════════════════════════════════════════
   LANDING PAGE — AgendApp
   Agregar al final de public/css/app.css
   ═══════════════════════════════════════════════════ */

/* ── Contenedor y utilidades generales ── */
.lp-container   { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.lp-section     { padding: 5rem 0; }
.lp-section-alt { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.lp-accent      { color: var(--blue); }
.lp-section-center { text-align: center; margin-bottom: 2.5rem; }
.lp-section-label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; display: block; }
.lp-section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; color: var(--gray-800); margin-bottom: .75rem; }
.lp-section-desc  { color: var(--gray-400); font-size: 1.05rem; line-height: 1.7; max-width: 560px; }
.lp-btn-lg { padding: .75rem 1.75rem; font-size: 1rem; }
/* ── HERO ── */
.lp-hero {
    background: linear-gradient(160deg, #3b216d 0%, #3b216d 55%, #4a1d9e 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    text-align: center;
}
.lp-badge {
    display: inline-block;
    padding: .3rem .9rem;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .05em;
    color: #fff;
    margin-bottom: 1.5rem;
}
.lp-hero-title {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
    letter-spacing: -.02em;
}
.lp-hero-title .lp-accent { color: #93c5fd; }
.lp-hero-desc {
    max-width: 520px;
    margin: 0 auto 2rem;
    color: rgba(255,255,255,.8);
    font-size: 1.1rem;
    line-height: 1.7;
}
.lp-cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.lp-hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.lp-hero .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.lp-stats {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.2);
}
.lp-stat { text-align: center; }
.lp-stat-num { display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.lp-stat-lbl { font-size: .75rem; color: rgba(255,255,255,.65); letter-spacing: .05em; text-transform: uppercase; margin-top: .25rem; display: block; }

/* ── DOS COLUMNAS ── */
.lp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lp-two-col-text .lp-section-title { margin-top: .5rem; }

/* ── LISTA CON CHECKS ── */
.lp-check-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.lp-check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .93rem; color: var(--gray-600); }
.lp-check-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: .05rem; }

/* ── MOCKUP CALENDARIO ── */
.lp-mockup {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.lp-mock-header { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 1rem; color: var(--gray-800); font-size: .95rem; }
.lp-mock-days-head { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; margin-bottom: .4rem; }
.lp-mock-days-head span { font-size: .7rem; color: var(--gray-400); font-weight: 600; padding: 3px 0; }
.lp-mock-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; text-align: center; margin-bottom: 1.25rem; }
.lp-day { padding: 5px 2px; border-radius: 6px; font-size: .78rem; color: var(--gray-400); cursor: default; position: relative; }
.lp-day.has-appt::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--blue); }
.lp-day.active { background: var(--blue); color:#fff; font-weight:700; }
.lp-day.active::after { background:#93c5fd; }
.lp-mock-events { display: flex; flex-direction: column; gap: .6rem; }
.lp-mock-event { display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; border-radius:8px; background:var(--gray-50); border:1px solid var(--gray-100); font-size:.82rem; }
.lp-dot { width:8px; height:8px; border-radius:50%; background:var(--dot); flex-shrink:0; }
.lp-mock-event div { flex:1; }
.lp-mock-event strong { display:block; color:var(--gray-800); font-weight:600; }
.lp-mock-event small  { color:var(--gray-400); font-size:.72rem; }
.lp-badge-ev { padding:.15rem .5rem; border-radius:100px; font-size:.68rem; font-weight:600; white-space:nowrap; }
.lp-badge-blue   { background:#eff6ff; color:var(--blue); }
.lp-badge-green  { background:#f0fdf4; color:var(--green); }
.lp-badge-purple { background:#faf5ff; color:#7c3aed; }

/* ── FEATURES GRID ── */
.lp-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2rem; }
.lp-feat-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 1.5rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-feat-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(37,99,235,.08); }
.lp-feat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.lp-feat-card h3 { font-size:.97rem; font-weight:700; color:var(--gray-800); margin-bottom:.4rem; }
.lp-feat-card p  { font-size:.86rem; line-height:1.65; color:var(--gray-400); }

/* ── PARA QUIÉN ── */
.lp-who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; margin-top: 2.5rem; }
.lp-who-card {
    background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:1.4rem;
    transition: border-color .2s, transform .2s;
}
.lp-who-card:hover { border-color:var(--blue); transform:translateY(-3px); }
.lp-who-icon { font-size:1.8rem; margin-bottom:.75rem; }
.lp-who-card h3 { font-size:.93rem; font-weight:700; color:var(--gray-800); margin-bottom:.35rem; }
.lp-who-card p  { font-size:.83rem; color:var(--gray-400); line-height:1.6; }

/* ── TABLA COMPARATIVA ── */
.lp-two-col-why { align-items: start; gap: 2.5rem; }
.lp-compare { border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; font-size:.86rem; }
.lp-compare-row { display:grid; grid-template-columns:2fr 1fr 1fr; }
.lp-compare-row + .lp-compare-row { border-top:1px solid var(--gray-100); }
.lp-compare-row span { padding:.7rem 1rem; color:var(--gray-600); }
.lp-compare-head span { background:var(--gray-50); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); }
.lp-col-ours { background:rgba(37,99,235,.04) !important; text-align:center; }
.lp-compare-head .lp-col-ours { color:var(--blue) !important; }
.lp-yes { color:var(--green); font-weight:700; font-size:1rem; text-align:center; }
.lp-no  { color:var(--gray-200); text-align:center; }

/* ── POR QUÉ POINTS ── */
.lp-why-points { display:flex; flex-direction:column; gap:1rem; }
.lp-why-point { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem; background:#fff; border:1px solid var(--gray-200); border-radius:12px; }
.lp-why-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.lp-why-point h4 { font-size:.93rem; font-weight:700; color:var(--gray-800); margin-bottom:.25rem; }
.lp-why-point p  { font-size:.83rem; color:var(--gray-400); line-height:1.6; }

/* ── CTA FINAL ── */
.lp-cta-section { padding:5rem 1.5rem; text-align:center; background:linear-gradient(160deg,#3b216d,#3b216d); }
.lp-cta-card { max-width:640px; margin:0 auto; color:#fff; }
.lp-cta-card h2 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; line-height:1.2; margin-bottom:1rem; letter-spacing:-.02em; }
.lp-cta-card p  { color:rgba(255,255,255,.75); margin-bottom:2rem; font-size:1.05rem; line-height:1.7; }
.lp-cta-section .lp-cta-group { justify-content:center; }
.lp-cta-section .btn-primary { background:#fff; color:var(--blue); }
.lp-cta-section .btn-primary:hover { background:var(--gray-100); }
.lp-cta-section .btn-outline { border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }
.lp-cta-section .btn-outline:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .lp-two-col, .lp-feat-grid { grid-template-columns: 1fr; }
    .lp-stats { gap: 1.5rem; }
    .lp-section { padding: 3.5rem 0; }
}
@media (max-width: 480px) {
    .lp-who-grid { grid-template-columns: 1fr 1fr; }
}