/* Universidad Barceló – estilos del tutorial SIGEDU (según guia-visual-barcelo.md) */

:root {
    /* Marca */
    --ub-navy: #06038D;  --ub-blue: #0061F0;  --ub-blue-light: #0D6EFD;
    --ub-cyan: #00D1FF;  --ub-gray: #888B8D;
    --ub-blue-dark: #0050C8;  --ub-blue-50: #E6F0FE;  --ub-blue-100: #CCE0FD;
    --ub-navy-50: #ECECF8;    --ub-cyan-50: #E5FAFF;

    /* Neutros */
    --text: #212529;  --text-muted: #595C5F;  --text-subtle: #6C757D;  --text-faint: #ADB5BD;
    --border: #DEE2E6;  --border-strong: #CED4DA;
    --bg: #F8F9FA;  --bg-muted: #E9ECEF;  --surface: #FFFFFF;

    /* Tipografía */
    --font-display: 'Montserrat', 'Segoe UI', sans-serif;
    --font: 'Source Sans 3', 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;

    /* Forma "hoja" (sup-izq sup-der inf-der inf-izq) */
    --radius-sm: 8px;
    --leaf-sm: 16px 4px 16px 4px;
    --leaf:    24px 6px 24px 6px;
    --leaf-lg: 40px 8px 40px 8px;

    /* Elevación */
    --shadow-sm: 0 1px 3px rgba(6,3,141,.04), 0 1px 2px rgba(6,3,141,.03);
    --shadow:    0 4px 18px rgba(6,3,141,.07);
    --shadow-lg: 0 14px 36px rgba(6,3,141,.12);
    --focus-ring: 0 0 0 3px rgba(0,97,240,.25);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a { color: var(--ub-blue-light); }

:focus-visible { outline: 2px solid var(--ub-blue); outline-offset: 2px; }

.container {
    width: 100%;
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Títulos y textos ---------- */

.ub-eyebrow {
    display: block;
    margin: 0 0 12px;
    color: var(--ub-blue);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ub-title {
    margin: 0 0 16px;
    color: var(--ub-navy);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.ub-title span { color: var(--ub-blue-light); }

.ub-lead {
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
}

.ub-lead strong { font-weight: 400; color: var(--text); }

/* ---------- Sección ---------- */

.section { padding: 64px 0; }

/* ---------- Tarjetas y paneles ---------- */

.ub-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--leaf);
    box-shadow: var(--shadow);
    padding: 28px 24px 22px;
    overflow: hidden;
}

.ub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ub-navy);
}

.ub-card--cyan::before { background: var(--ub-cyan); }
.ub-card--blue::before { background: var(--ub-blue); }

.ub-card__title {
    margin: 0 0 8px;
    color: var(--ub-navy);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ub-card__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: .9375rem;
    line-height: 1.55;
}

.ub-panel {
    background: var(--surface);
    border-radius: var(--leaf-lg);
    box-shadow: var(--shadow-sm);
    padding: 48px;
}

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--ub-blue); color: #fff; }
.btn--primary:hover { background: var(--ub-blue-dark); color: #fff; text-decoration: none; }

.btn--lg {
    padding: 12px 32px;
    font-family: var(--font-display);
    font-weight: 600;
}

.btn--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ub-blue-light);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
}

.btn--link:hover { text-decoration: underline; }

.btn svg, .btn--link svg { flex: none; }

/* ---------- Footer (franja de 4 tramos) ---------- */

.footer { flex-shrink: 0; background: var(--surface); }

.footer__stripe {
    height: 8px;
    background: linear-gradient(90deg,
        var(--ub-navy) 0 25%, #FFFFFF 25% 50%, var(--ub-cyan) 50% 75%, var(--ub-gray) 75% 100%);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.footer__links a { color: var(--text-muted); text-decoration: none; }
.footer__links a:hover { color: var(--ub-blue); text-decoration: underline; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .section { padding: 40px 0; }
    .ub-panel { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}