/* ============================================================
   declar.ar — /planes/estudios/ (planes para estudios contables)
   Extiende planes.css: mismas tarjetas, pero el precio se cuenta
   por CUIT gestionado y no hay toggle de periodicidad.
   Cargar DESPUÉS de styles.min.css, landing.css y planes.css.
   ============================================================ */

.es-hero .lp-lead { max-width: 720px; margin-inline: auto; }
.es-hero-actions { justify-content: center; margin-top: 36px; }
.es-promo { margin-top: 28px; }

/* ---- Tarjeta de plan ---- */
.es-cuits {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 5px 10px;
    border: 1px solid var(--dc-border);
    background: var(--dc-muted);
    font-family: var(--dc-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dc-fg);
}
.es-cuits .lp-i { width: 14px; height: 14px; color: var(--dc-primary); }

.lp-page .es-desc { margin-top: 14px; min-height: 4.4em; }
/* Alto fijo para que los CTA de las cuatro tarjetas queden en la misma línea
   aunque la nota por CUIT ocupe una o dos líneas. */
.es-price { min-height: 106px; margin-top: 26px; }
.lp-page .es-price .pl-bill {
    margin-top: 10px;
    font-family: var(--dc-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--dc-muted-fg);
}

/* ---- Nota de CUIT adicional ---- */
.es-note { padding-block: clamp(36px, 4vw, 52px); }
.lp-page .es-note p { max-width: 74ch; font-size: 15px; color: var(--dc-body); }
.lp-page .es-note strong { color: var(--dc-fg); font-weight: 600; }
.lp-page .es-note-fine { margin-top: 12px; font-size: 13px; color: var(--dc-subtle); }

/* ---- Cruce con los planes por empresa ---- */
.es-cross {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-block: clamp(40px, 4.5vw, 56px);
}
.lp-page .es-cross h2 { margin-top: 10px; }
.lp-page .es-cross p { margin-top: 8px; font-size: 15px; color: var(--dc-muted-fg); }
.es-cross .lp-btn { flex: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .lp-page .es-desc { min-height: 0; }
}
@media (max-width: 560px) {
    .es-cross { align-items: flex-start; }
    .es-cross .lp-btn { width: 100%; justify-content: center; }
}