/* Páginas públicas interiores (características, planes, blog, modo inversión, comparativas…):
   mismo lenguaje visual y movimiento que la portada. Se carga desde includes/marketing_nav.php y
   el script de aparición vive en includes/marketing_footer.php. Todo el movimiento se desactiva
   con «reducir movimiento». */
:root { --mk-curva: cubic-bezier(.2, 1.1, .3, 1); }

/* ── Cabecera de cada página: titular grande como en la portada y entrada escalonada ── */
.pd-hero { padding-top: 56px; padding-bottom: 44px; }
.pd-hero h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; max-width: 24ch; margin: 0 auto 16px; }
.pd-hero p { font-size: 16px; line-height: 1.6; max-width: 58ch; }
.pd-hero .pd-price strong { font-size: clamp(30px, 3.6vw, 40px); }
.pd-badge { animation: mk-entra .6s var(--mk-curva) both; }
.pd-hero h1 { animation: mk-entra .7s var(--mk-curva) .06s both; }
.pd-hero > p, .pd-hero .pd-price { animation: mk-entra .7s var(--mk-curva) .14s both; }
.pd-hero .lp-btn, .pd-hero .pd-trust-row, .pd-hero .pd-plans-switch { animation: mk-entra .7s var(--mk-curva) .22s both; }
@keyframes mk-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Títulos de sección más presentes ── */
.lp-section > h2, .lp-section h2:first-child { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.025em; line-height: 1.12; }

/* ── Botones con movimiento ── */
.lp-btn, .pd-plans-switch a, .feat-tab { transition: transform .25s var(--mk-curva), box-shadow .25s ease, border-color .2s, background-color .2s, filter .2s; }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.lp-btn:active, .pd-plans-switch a:active, .feat-tab:active { transform: scale(.96); }
.pd-plans-switch a:hover, .feat-tab:hover { transform: translateY(-2px); }

/* ── Tarjetas que reaccionan al pasar el ratón ── */
.feat-card, .blog-card, .pd-feature-row, .faq-item, .feat-zigzag-example, .lp-mock { transition: transform .3s var(--mk-curva), box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.feat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--accent) 40%, var(--divider)); }
.feat-card .icon-chip, .pd-feature-row .pd-icon, .feat-zigzag-icon, .blog-card-icon { transition: transform .35s var(--mk-curva); }
.feat-card:hover .icon-chip, .pd-feature-row:hover .pd-icon, .blog-card:hover .blog-card-icon { transform: translateY(-2px) scale(1.08) rotate(-4deg); }
.pd-feature-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.blog-card .blog-card-arrow { transition: transform .3s var(--mk-curva), color .2s; }
.blog-card:hover .blog-card-arrow { transform: translateX(5px); color: var(--accent-300); }
[dir="rtl"] .blog-card:hover .blog-card-arrow { transform: translateX(-5px); }
.feat-zigzag-example:hover { transform: translateY(-4px) rotate(-.4deg); }

/* ── «Y también…»: 8 tarjetas sin hueco al final (2 o 4 columnas, nunca 3) ── */
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .feat-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Blog: el artículo más reciente destacado y el resto en dos columnas ── */
@media (min-width: 900px) {
  .blog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .blog-list > .blog-card:first-child { grid-column: 1 / -1; padding-top: 28px; padding-bottom: 28px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 60%); border-color: color-mix(in srgb, var(--accent) 35%, var(--divider)); }
  .blog-list > .blog-card:first-child h3 { font-size: 22px; }
}

/* ── Aparición al hacer scroll (la activa marketing_footer.php; sin JS todo se ve igual) ── */
.mk-oculto { opacity: 0; transform: translateY(24px); }
.mk-visible { opacity: 1; transform: none; transition: opacity .8s var(--mk-curva), transform .8s var(--mk-curva); transition-delay: var(--mk-retraso, 0s); }

@media (prefers-reduced-motion: reduce) {
  .pd-badge, .pd-hero h1, .pd-hero > p, .pd-hero .pd-price, .pd-hero .lp-btn, .pd-hero .pd-trust-row, .pd-hero .pd-plans-switch { animation: none !important; }
  .lp-btn, .pd-plans-switch a, .feat-tab, .feat-card, .blog-card, .pd-feature-row, .faq-item, .feat-zigzag-example, .lp-mock,
  .feat-card .icon-chip, .pd-feature-row .pd-icon, .feat-zigzag-icon, .blog-card-icon, .blog-card .blog-card-arrow { transition: none !important; transform: none !important; }
  .mk-oculto { opacity: 1; transform: none; }
}

/* ── Lista completa de funciones (includes/funciones_incluidas.php) ── */
.cf-grupo { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-300); margin: 40px 0 14px; display: flex; align-items: center; gap: 12px; }
.cf-grupo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent); }
[dir="rtl"] .cf-grupo::after { background: linear-gradient(-90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent); }
.cf-grupo:first-of-type { margin-top: 24px; }
@media (min-width: 1000px) { .feat-grid.cf-grid { grid-template-columns: repeat(3, 1fr); } }
.cf-enlace { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--accent-300); text-decoration: none; }
.cf-enlace:hover { text-decoration: underline; }
/* Versión compacta en las páginas de los planes: 4 columnas (una por grupo) */
.cf-compacto { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
@media (min-width: 640px) { .cf-compacto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cf-compacto { grid-template-columns: repeat(4, 1fr); } }
.cf-compacto-grupo { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-lg, 16px); padding: 18px 18px 8px; transition: transform .3s var(--mk-curva), border-color .3s; }
.cf-compacto-grupo:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--divider)); }
.cf-compacto-titulo { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-300); margin-bottom: 12px; }
.cf-compacto ul { list-style: none; margin: 0; padding: 0; }
.cf-compacto li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--divider); }
.cf-compacto li:first-child { border-top: none; }
.cf-compacto li > span { font-size: 17px; line-height: 1.2; flex-shrink: 0; }
.cf-compacto strong { display: block; font-size: 13.5px; font-weight: 500; }
.cf-compacto small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .cf-compacto-grupo { transition: none !important; transform: none !important; } }