/* ============================================================
   Midxela Paste — Páginas de contenido (contacto, privacidad)
   Requiere theme.css y landing.css cargados antes.
   ============================================================ */

.page-main {
    padding: calc(var(--nav-h) + var(--sp-7)) 0 var(--sp-9);
    min-height: 70vh;
}

.page-narrow { max-width: 760px; }

.page-head {
    margin-bottom: var(--sp-6);
    text-align: center;
}
.page-head h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--sp-3);
    text-wrap: balance;
}
.page-head p {
    color: var(--text-secondary);
    max-width: 56ch;
    margin-inline: auto;
    text-wrap: pretty;
}

/* --- Formulario apilado ------------------------------------- */
.stacked-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.stacked-form .primary-btn { align-self: flex-start; }

.error-banner {
    display: none;
    padding: .7rem .9rem;
    border-radius: var(--r-md);
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .85rem;
}
.error-banner.is-visible { display: block; }
.error-banner.is-success {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}

/* --- Texto legal --------------------------------------------- */
.prose { line-height: 1.75; color: var(--text-secondary); }
.prose h2 {
    font-size: 1.2rem;
    margin: var(--sp-6) 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: 1rem;
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--text-primary);
}
.prose p { margin-bottom: var(--sp-3); }
.prose ul {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}
.prose li {
    position: relative;
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-2);
}
.prose li::before {
    content: '';
    position: absolute;
    top: .68em; left: .35rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; }

@media (max-width: 560px) {
    .stacked-form .primary-btn { align-self: stretch; width: 100%; }
}