/* =========================================================
   SÍMBOLOS INSTITUCIONALES
   Usa las variables ya definidas en tu :root principal
   (--ink, --crest-red, --crest-red-deep, --crest-red-dark,
   --ember, --brass, --paper-2, --line, --radius, --radius-sm,
   --shadow-card, --shadow-card-sm, --font-display, --font-serif, --font-ui)
   No requiere variables nuevas.
   ========================================================= */

.simbolos-hero{
    position:relative;
    padding: clamp(3.2rem, 6vw, 4.5rem) 0 clamp(2.4rem, 5vw, 3.4rem);
    background: linear-gradient(159deg, var(--crest-red-deep) 0%, var(--crest-red-dark) 100%);
    color:#fff;
    overflow:hidden;
}
.simbolos-hero::before{
    content:"";
    position:absolute; inset:-10%;
    background: radial-gradient(circle at 85% 15%, rgba(245,158,11,.14), transparent 45%);
    pointer-events:none;
}
.simbolos-hero .wrap{ max-width:980px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.simbolos-hero .breadcrumb-line{
    font-family: var(--font-ui); font-size:.85rem; color:rgba(255,255,255,.72);
    display:flex; gap:.4rem; margin-bottom:.9rem;
}
.simbolos-hero .breadcrumb-line a{ color: var(--brass-light); font-weight:600; }
.simbolos-hero h1{
    font-family: var(--font-display);
    text-transform:uppercase;
    letter-spacing:.01em;
    font-weight:700;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    margin:0;
}

.simbolos-wrap{ max-width:980px; margin:0 auto; padding:0 24px; }

/* tabs (mismo lenguaje visual que los pill-tabs del sitio, en versión clara) */
.simbolos-tabs{
    display:flex; flex-wrap:wrap; gap:.5rem;
    background: var(--paper-2);
    border:1px solid var(--line);
    border-radius: 999px;
    padding:.4rem;
    margin-bottom:2rem;
    width:fit-content;
}
.simbolos-tabs button{
    all:unset;
    cursor:pointer;
    font-family: var(--font-display);
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:700;
    font-size:.78rem;
    color: var(--steel-2);
    padding:.8rem 1.2rem;
    border-radius:999px;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.simbolos-tabs button:hover{ color: var(--crest-red); }
.simbolos-tabs button.active{
    background: linear-gradient(135deg, var(--crest-red), var(--ember));
    color:#fff;
    box-shadow: 0 10px 22px -12px rgba(185,28,28,.55);
}

/* escudo */
.simbolos-escudo-grid{
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    align-items:center;
}
.simbolos-shield-frame{
    padding: 1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.simbolos-shield-frame img{
    max-width:210px;
    width:100%;
    filter: drop-shadow(0 14px 24px rgba(17,24,39,.18));
    transition: transform .3s ease;
}
.simbolos-shield-frame img:hover{ transform: scale(1.045); }

.simbolos-body p{
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height:1.85;
    color: var(--steel-2);
    margin:0 0 1.1rem;
}

/* himnos */
.himno-numeral{
    text-align:center;
    font-family: var(--font-display);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:.82rem;
    font-weight:600;
    color: var(--crest-red);
    margin: 2.2rem 0 .9rem;
}
.himno-numeral:first-child{ margin-top:0; }

.himno-verso{
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height:1.95;
    color: var(--steel-2);
    text-align:center;
    max-width:620px;
    margin: 0 auto 1.6rem;
}
.himno-verso strong{ color: var(--crest-red); }

.policy-card.himno-coro{
    max-width:640px; margin:0 auto 1.8rem;
    background:transparent;
    border:0;
    border-left: 2px solid var(--brass);
    box-shadow:none;
    border-radius:0;
    padding: 0.4rem 0 0.4rem 1.4rem;
}
.policy-card.himno-coro .quote-mark{ display:none; }
.policy-card.himno-coro .policy-text{ text-align:left; font-style:italic; font-weight:500; }

.tab-content {
    padding: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width:768px){
    .simbolos-escudo-grid{ grid-template-columns:1fr; }
    .content-panel{ padding:1.6rem; }
    .policy-card{ padding:1.8rem 1.4rem; }
}