/* styles.css — CROWN ENGLISH ACADEMY */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --navy: #0D1B3E;
    --navy-lt: #1A2F6B;
    --red: #C8102E;
    --red-lt: #E8192E;
    --gold: #B8960C;
    --gold-lt: #D4AF37;
    --cream: #FAF8F3;
    --cream-dk: #EDE9DE;
    --white: #FFFFFF;
    --slate: #4A5568;
    --mid: #718096;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--cream);
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
}

.serif {
    font-family: 'Libre Baskerville', serif;
}

/* ── Botones ── */
.btn-navy {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.3s, transform 0.2s;
    display: inline-block;
}

.btn-navy:hover {
    background: var(--navy-lt);
    transform: translateY(-2px);
}

.btn-red {
    background: var(--red);
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.3s, transform 0.2s;
    display: inline-block;
}

.btn-red:hover {
    background: var(--red-lt);
    transform: translateY(-2px);
}

.btn-outline-navy {
    border: 2px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
    transition: background 0.3s, color 0.3s;
    display: inline-block;
}

.btn-outline-navy:hover {
    background: var(--navy);
    color: var(--white);
}

/* ── Cards curso ── */
.course-card {
    background: var(--white);
    border: 1px solid var(--cream-dk);
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 16px;
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(13, 27, 62, 0.12);
}

.course-card .top-bar {
    height: 5px;
}

/* ── Zoom ── */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 0.7s ease;
}

.img-zoom:hover img {
    transform: scale(1.05);
}

/* ── Label sección ── */
.sect-label {
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--red);
}

/* ── Union Jack decorativo ── */
.uj-bg {
    background:
        linear-gradient(transparent 45%, rgba(200, 16, 46, 0.06) 45%, rgba(200, 16, 46, 0.06) 55%, transparent 55%),
        linear-gradient(90deg, transparent 45%, rgba(200, 16, 46, 0.06) 45%, rgba(200, 16, 46, 0.06) 55%, transparent 55%);
}

/* ── Testimonial ── */
.testimonial-card {
    background: var(--white);
    border-left: 4px solid var(--gold-lt);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
}

/* ── Stat ── */
.stat-box {
    border-top: 3px solid var(--red);
    padding-top: 16px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--cream);
}

::-webkit-scrollbar-thumb {
    background: var(--navy);
    border-radius: 3px;
}