/* =========================================================
   POLÍTICA DE PRIVACIDAD - RADIOS MERO MERO
   Archivo independiente del panel administrativo.
   ========================================================= */

:root {
    color-scheme: light dark;

    --page-bg: #f4f6f8;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --text-muted: #5f6b7a;
    --border: #d7dee8;
    --brand: #8b1e2d;
    --brand-strong: #64141f;
    --brand-soft: #f7e8eb;
    --focus: #0b57d0;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    line-height: 1.65;
    background:
        var(--page-bg);
    color:
        var(--text);
}


img {
    max-width: 100%;
}


a {
    color:
        var(--brand-strong);
}


a:hover {
    text-decoration-thickness: 2px;
}


a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline:
        3px solid var(--focus);
    outline-offset:
        4px;
}


.skip-link {
    position: absolute;
    top: -6rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.8rem 1rem;
    border-radius:
        var(--radius-sm);
    background:
        var(--surface);
    color:
        var(--text);
    border:
        2px solid var(--text);
    font-weight: 700;
    text-decoration: none;
}


.skip-link:focus {
    top: 1rem;
}


.site-header {
    padding:
        2rem 1rem 1rem;
}


.brand-card {
    width:
        min(
            960px,
            100%
        );
    margin:
        0 auto;
    padding:
        1.5rem;
    display:
        grid;
    grid-template-columns:
        minmax(140px, 220px)
        1fr;
    gap:
        1.5rem;
    align-items:
        center;
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            var(--surface),
            var(--brand-soft)
        );
    box-shadow:
        var(--shadow);
}


.brand-logo {
    display:
        block;
    width:
        100%;
    max-width:
        220px;
    height:
        auto;
    margin:
        0 auto;
    border-radius:
        20px;
}


.brand-copy h1 {
    margin:
        0.2rem 0 0.6rem;
    line-height:
        1.2;
    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );
}


.eyebrow {
    margin:
        0;
    color:
        var(--brand);
    font-weight:
        800;
    text-transform:
        uppercase;
    letter-spacing:
        0.08em;
    font-size:
        0.85rem;
}


.tagline {
    margin:
        0 0 0.6rem;
    font-size:
        1.1rem;
    font-weight:
        700;
}


.updated {
    margin:
        0;
    color:
        var(--text-muted);
    font-weight:
        700;
}


.page-shell {
    width:
        min(
            960px,
            calc(
                100% - 2rem
            )
        );
    margin:
        0 auto;
}


.intro-card,
.policy-card,
.contact-card {
    margin:
        1.2rem 0;
    padding:
        1.5rem;
    border:
        1px solid var(--border);
    border-radius:
        var(--radius-md);
    background:
        var(--surface);
    box-shadow:
        var(--shadow);
}


.intro-card {
    border-left:
        6px solid var(--brand);
}


.policy-card h2,
.contact-card h2,
.intro-card h2 {
    margin:
        0 0 0.8rem;
    color:
        var(--brand-strong);
    line-height:
        1.25;
}


.policy-card p,
.contact-card p,
.intro-card p {
    margin:
        0.75rem 0;
}


.contact-card {
    background:
        var(--brand-soft);
}


.contact-link-wrap {
    margin-top:
        1rem;
}


.contact-link {
    display:
        inline-block;
    padding:
        0.8rem 1rem;
    border:
        2px solid var(--brand);
    border-radius:
        var(--radius-sm);
    background:
        var(--surface);
    color:
        var(--brand-strong);
    font-weight:
        800;
    text-decoration:
        none;
    overflow-wrap:
        anywhere;
}


.contact-link:hover {
    background:
        var(--surface-soft);
}


.site-footer {
    margin-top:
        2rem;
    border-top:
        1px solid var(--border);
    background:
        var(--surface);
}


.footer-inner {
    padding:
        1.5rem 0 2rem;
    color:
        var(--text-muted);
}


.footer-inner p {
    margin:
        0.3rem 0;
}


@media (max-width: 48rem) {

    .site-header {
        padding-top:
            1rem;
    }


    .brand-card {
        grid-template-columns:
            1fr;
        text-align:
            left;
        padding:
            1.2rem;
    }


    .brand-logo {
        max-width:
            180px;
        margin-left:
            0;
        margin-right:
            0;
    }


    .intro-card,
    .policy-card,
    .contact-card {
        padding:
            1.2rem;
    }
}


@media (prefers-color-scheme: dark) {

    :root {
        --page-bg: #101318;
        --surface: #171b22;
        --surface-soft: #202631;
        --text: #f4f7fb;
        --text-muted: #c3cad4;
        --border: #353d49;
        --brand: #ff91a1;
        --brand-strong: #ffc2cb;
        --brand-soft: #2a171c;
        --focus: #8ab4f8;
        --shadow: none;
    }


    .brand-card {
        background:
            linear-gradient(
                135deg,
                var(--surface),
                var(--brand-soft)
            );
    }
}