/* ===== RENTAPACK — Landing pages SEO (congruente con el sistema navy/teal) =====
   Fuente única de estilos para las páginas pilar de categoría
   (software-administracion-inmobiliaria.html, facturacion-cfdi-masiva.html, …).
   Construido SOLO sobre los tokens de styles.css. Prefijo .lp- para no colisionar. */

.lp-crumbs { font-size: .8125rem; color: var(--ink-muted); padding: 6.5rem 0 0; }
.lp-crumbs .container { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lp-crumbs a { color: var(--ink-muted); }
.lp-crumbs a:hover { color: var(--accent); }

/* ===== Hero ===== */
.lp-hero { padding: 2.5rem 0 4rem; background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-tint); padding: .35rem .8rem; border-radius: var(--radius-full); margin-bottom: 1.25rem; }
.lp-hero h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); color: var(--ink); margin-bottom: 1rem; }
.lp-hero h1 em { color: var(--accent); font-style: normal; }
.lp-hero__sub { font-size: 1.0625rem; color: var(--ink-soft); max-width: 44ch; margin-bottom: 1.75rem; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.lp-notes { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.lp-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--ink-muted); }
.lp-note .icon { color: var(--accent); width: 1rem; height: 1rem; }
.lp-hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--rule); aspect-ratio: 16 / 10; background: var(--paper-3); }
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Secciones ===== */
.lp-sec { padding: var(--spacing-20) 0; }
.lp-sec--alt { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lp-sec__head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.lp-sec__head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ink); margin-bottom: .75rem; }
.lp-sec__head p { color: var(--ink-soft); font-size: 1.0625rem; }

/* ===== Grid de tarjetas ===== */
.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin: 0 auto; }
.lp-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.5rem; transition: var(--transition); }
.lp-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-card__ic { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent-dark); margin-bottom: 1rem; }
.lp-card__ic .icon { width: 1.35rem; height: 1.35rem; }
.lp-card h3 { font-size: 1.0625rem; color: var(--ink); margin-bottom: .4rem; }
.lp-card p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ===== Proceso en pasos (flujo "masivo") ===== */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 960px; margin: 0 auto; }
.lp-step { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 2.25rem 1.5rem 1.5rem; transition: var(--transition); }
.lp-step:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-step__num { position: absolute; top: -1.1rem; left: 1.5rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--accent); color: var(--paper); font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-sm); }
.lp-step h3 { font-size: 1.0625rem; color: var(--ink); margin: .5rem 0 .4rem; }
.lp-step p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ===== Split (texto + imagen) ===== */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lp-split h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; color: var(--ink); }
.lp-split > div > p { color: var(--ink-soft); margin-bottom: 1.25rem; }
.lp-check { list-style: none; display: grid; gap: .75rem; margin: 0; }
.lp-check li { position: relative; padding-left: 1.9rem; color: var(--ink); font-size: .95rem; }
.lp-check li .icon { position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem; color: var(--accent); }
.lp-split__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; background: var(--paper-3); }
.lp-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Chips (tipos / etiquetas) ===== */
.lp-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 840px; margin: 0 auto 1.5rem; }
.lp-chip { font-size: .875rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-full); padding: .45rem 1rem; }
.lp-note-center { text-align: center; color: var(--ink-muted); font-size: .9rem; }

/* ===== Comparación antes / después ===== */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 920px; margin: 0 auto; }
.lp-compare__col { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.5rem; background: var(--paper); }
.lp-compare__col--bad { background: var(--paper-2); }
.lp-compare__col h3 { font-size: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.lp-compare__col--bad h3 { color: var(--ink-soft); }
.lp-compare__col--good h3 { color: var(--accent-dark); }
.lp-compare ul { list-style: none; display: grid; gap: .7rem; margin: 0; }
.lp-compare li { position: relative; padding-left: 1.75rem; font-size: .9rem; color: var(--ink-soft); }
.lp-compare li .icon { position: absolute; left: 0; top: .1rem; width: 1.1rem; height: 1.1rem; }
.lp-compare__col--bad li .icon { color: var(--ink-muted); }
.lp-compare__col--good li { color: var(--ink); }
.lp-compare__col--good li .icon { color: var(--accent); }

/* ===== FAQ ===== */
.lp-faq { max-width: 760px; margin: 0 auto; }
.lp-faq__item { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.lp-faq__item h3 { font-size: 1.0625rem; color: var(--ink); margin-bottom: .5rem; }
.lp-faq__item p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ===== CTA band (navy) ===== */
.lp-ctaband { background: var(--ink); color: var(--paper); padding: var(--spacing-20) 0; text-align: center; }
.lp-ctaband h2 { color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .75rem; }
.lp-ctaband p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 0 auto 1.75rem; font-size: 1.0625rem; }
.lp-ctaband .btn--outline { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .4); }
.lp-ctaband .btn--outline:hover { background: rgba(255, 255, 255, .08); border-color: var(--paper); color: var(--paper); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .lp-hero__grid, .lp-split { grid-template-columns: 1fr; gap: 2rem; }
    .lp-hero__media, .lp-split__media { order: -1; }
    .lp-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .lp-compare { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .lp-steps { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 560px) {
    .lp-grid, .lp-grid--3 { grid-template-columns: 1fr; }
    .lp-crumbs { padding-top: 5.5rem; }
}