/* ============================================================
   front.css — estilos del sitio público del sistema
   Paleta base. primario y primario2 son solo el respaldo: el valor real lo
   inyecta el <head> desde config (BRAND_PRIMARY / BRAND_PRIMARY_DARK).
     primario  #2F5D8A
     primario2 #264C72
     acento    #B9CDE2
     tinta     #1F2933
     muted     #5F6B7A
     fondo     #F5F7FA
   ============================================================ */

:root {
    --site-primary: #2F5D8A;
    --site-primary-2: #264C72;
    --site-accent: #B9CDE2;
    --site-ink: #1F2933;
    --site-muted: #5F6B7A;
    --site-soft: #F5F7FA;
    --site-line: #D9E0E8;
}

body.site-public {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--site-ink);
    background: #ffffff;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--site-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 2000;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Header ── */
.site-header {
    background: var(--site-primary);
}
.site-header .navbar { padding-top: .75rem; padding-bottom: .75rem; }
.site-brand {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .02em;
}
.site-nav .nav-link {
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: #fff; }
.site-header .navbar-toggler { border-color: rgba(255,255,255,.4); }
.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Hero / secciones ── */
.page-hero {
    background: linear-gradient(160deg, var(--site-soft) 0%, #ffffff 70%);
    padding: 72px 0 56px;
    text-align: center;
}
.page-hero .eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--site-primary-2);
    margin-bottom: .75rem;
}
.page-hero h1 {
    font-weight: 700;
    color: var(--site-primary);
    margin-bottom: 1rem;
}
.page-hero p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--site-muted);
    font-size: 1.05rem;
}
.page-hero .btn-primary {
    background: var(--site-primary);
    border-color: var(--site-primary);
}
.page-hero .btn-primary:hover {
    background: var(--site-primary-2);
    border-color: var(--site-primary-2);
}

/* ── Footer ── */
.site-footer {
    background: var(--site-ink);
    color: rgba(255, 255, 255, .75);
    padding: 40px 0 24px;
    margin-top: 64px;
    font-size: .9rem;
}
.site-footer .footer-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}
.site-footer .footer-copy { color: rgba(255,255,255,.6); }
.site-footer .footer-link {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}
.site-footer .footer-link:hover { color: #fff; }
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 24px;
    padding-top: 16px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

/* ── Pie: contacto y redes (cada bloque existe solo si tiene datos) ── */
.site-footer .footer-title { color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; }
.site-footer .footer-list { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-list li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .35rem; overflow-wrap: anywhere; }
.site-footer .footer-list li i { opacity: .7; margin-top: .15rem; }
.site-footer .footer-redes { display: flex; gap: .9rem; font-size: 1.35rem; }
.site-footer .footer-redes a { color: rgba(255, 255, 255, .75); }
.site-footer .footer-redes a:hover { color: #fff; }

/* ── Formularios públicos ({formulario slug="..."}) ── */
.site-section { padding: 56px 0; }
.site-form { max-width: 640px; margin: 0 auto; scroll-margin-top: 24px; }
.site-form__titulo { font-weight: 700; color: var(--site-primary); margin-bottom: .5rem; }
.site-form__intro { color: var(--site-muted); margin-bottom: 1.5rem; }
.site-form__campo { margin-bottom: 1rem; }
.site-form__campo label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; color: var(--site-ink); }
.site-form__req { color: #c8463c; }
.site-form__opc { font-weight: 400; color: var(--site-muted); font-size: .85rem; }
.site-form .form-control:focus, .site-form .form-select:focus { border-color: var(--site-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--site-primary) 22%, transparent); }
.site-form__boton { background: var(--site-primary); border-color: var(--site-primary); padding: .6rem 1.5rem; font-weight: 600; margin-top: .5rem; }
.site-form__boton:hover, .site-form__boton:focus { background: var(--site-primary-2); border-color: var(--site-primary-2); }
.site-form__ok { display: flex; gap: .75rem; align-items: flex-start; background: #e6f7f1; color: #0b5d43; border-radius: 10px; padding: 1rem 1.1rem; font-size: 1.05rem; }
.site-form__ok i { font-size: 1.4rem; line-height: 1.3; }
.site-form__error { background: #fdecea; color: #a8443c; border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.site-form__legal { font-size: .75rem; color: var(--site-muted); margin: .9rem 0 0; }
.site-form__legal a { color: inherit; }
/* Campo trampa: fuera de la vista y del foco, pero presente para los bots. */
.site-form__trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-newsletter__campos { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 1rem; }
@media (max-width: 600px) { .site-newsletter__campos { grid-template-columns: 1fr; } }
.site-section--alt { background: var(--site-bg, #f6f7f9); }