/* ==================================================
   BRIGADA SOS
   CSS PRINCIPAL
================================================== */


/* VARIABLES
================================================== */

:root {

    --red: #e30613;
    --red-dark: #ad0009;

    --black: #111111;
    --black-soft: #1b1b1b;

    --white: #ffffff;

    --gray-light: #f5f5f5;
    --gray: #777777;

    --container: 1200px;

    --shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);

}


/* RESET
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--black);

    background:
        var(--gray-light);

    line-height: 1.5;

}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


/* ACCESIBILIDAD
================================================== */

.sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* CONTENEDOR
================================================== */

.container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;

}


/* ==================================================
   MENÚ
================================================== */

.main-nav {

    width: 100%;

    height: 72px;

    background:
        rgba(10, 10, 10, 0.98);

    position: relative;

    z-index: 1000;

}

.nav-container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}

.nav-logo img {

    width: 115px;

    max-height: 58px;

    object-fit: contain;

}

.nav-menu {

    display: flex;

    align-items: center;

    height: 100%;

    gap: 5px;

}

.nav-menu a {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

    padding: 0 13px;

    color: white;

    font-size: 14px;

    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}

.nav-menu a:hover {

    color:
        var(--red);

}

.nav-menu a.active {

    color:
        var(--red);

}

.nav-menu a.active::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 0;

    height: 4px;

    background:
        var(--red);

}


/* MOBILE BUTTON
================================================== */

.mobile-menu-button {

    display: none;

    width: 42px;
    height: 42px;

    border: 0;

    background:
        transparent;

    cursor: pointer;

}

.mobile-menu-button span {

    display: block;

    width: 27px;
    height: 3px;

    margin: 5px auto;

    background:
        white;

    border-radius: 10px;

}


/* ==================================================
   HERO
================================================== */

.hero {

    position: relative;

    width: 100%;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-image:
        url("../img/banner-inicio.png");

    background-size: cover;

    background-position: center;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.28);

}




/* ==================================================
   SECCIONES
================================================== */

.section {

    padding:
        70px 0;

}

.section-heading {

    margin-bottom: 30px;

}

.section-heading h2 {

    font-size:
        clamp(
            26px,
            4vw,
            38px
        );

    text-transform:
        uppercase;

}

.section-subtitle {

    display: block;

    margin-bottom: 3px;

    color:
        var(--red);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform:
        uppercase;

}


/* ==================================================
   NOVEDADES
================================================== */

.novedades-section {

    background:
        white;

}

.cork-heading {

    margin-bottom: 15px;

}

.cork-board {

    position: relative;

    padding:
        60px 45px;

    border:
        12px solid
        #7a461f;

    border-radius:
        4px;

    box-shadow:
        inset
        0 0 35px
        rgba(0,0,0,.25),
        var(--shadow);

    background-color:
        #b9783f;

    background-image:

        radial-gradient(
            rgba(70,35,10,.15) 1px,
            transparent 1px
        );

    background-size:
        6px 6px;

}

.posters {

    display: flex;

    align-items:
        flex-start;

    justify-content:
        center;

    gap: 55px;

}

.poster {

    position: relative;

    width:
        min(
            260px,
            28%
        );

    padding: 9px;

    background:
        #f8f5ed;

    box-shadow:
        4px 8px 16px
        rgba(0,0,0,.35);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.poster-1 {
    transform:
        rotate(-2deg);
}

.poster-2 {
    transform:
        rotate(1deg);
}

.poster-3 {
    transform:
        rotate(-1deg);
}

.poster:hover {

    transform:
        rotate(0)
        translateY(-7px)
        scale(1.02);

    box-shadow:
        6px 14px 25px
        rgba(0,0,0,.4);

}

.poster img {

    width: 100%;

    aspect-ratio:
        2 / 3;

    object-fit: cover;

}

.pin {

    position: absolute;

    top: -13px;
    left: 50%;

    z-index: 10;

    width: 25px;
    height: 25px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--red);

    box-shadow:

        inset
        -4px -4px 6px
        rgba(0,0,0,.25),

        2px 4px 5px
        rgba(0,0,0,.35);

}


/* ==================================================
   INSTAGRAM
================================================== */

.instagram-section {

    background:
        var(--gray-light);

}

.instagram-carousel {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

}

.instagram-viewport {

    width: 100%;

    overflow: hidden;

}

.instagram-track {

    display: flex;

    gap: 15px;

    transition:
        transform .4s ease;

}

.instagram-item {

    position: relative;

    flex:
        0 0
        calc(
            25% - 12px
        );

    overflow: hidden;

    border-radius: 5px;

    background: black;

    aspect-ratio:
        1 / 1;

}

.instagram-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;

}

.instagram-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,.65);

    color: white;

    font-size: 13px;

    font-weight: bold;

    opacity: 0;

    transition:
        opacity .3s ease;

}

.instagram-item:hover
.instagram-overlay {

    opacity: 1;

}

.instagram-item:hover img {

    transform:
        scale(1.08);

}


/* CAROUSEL BUTTONS
================================================== */

.carousel-button {

    flex:
        0 0
        45px;

    width: 45px;
    height: 45px;

    border: none;

    border-radius:
        50%;

    background:
        var(--black);

    color: white;

    cursor: pointer;

    font-size: 22px;

    transition:
        background .2s ease,
        transform .2s ease;

}

.carousel-button:hover {

    background:
        var(--red);

    transform:
        scale(1.08);

}


/* ==================================================
   REDES SOCIALES
================================================== */

.social-section {

    padding:
        55px 0
        70px;

    background:
        white;

}

.social-title {

    max-width:
        650px;

    margin:
        0 auto
        35px;

    text-align:
        center;

}

.social-title > span {

    color:
        var(--red);

    font-size:
        13px;

    font-weight:
        bold;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

}

.social-title h2 {

    margin:
        7px 0;

    font-size:
        clamp(
            25px,
            4vw,
            36px
        );

    text-transform:
        uppercase;

}

.social-title p {

    color:
        #666;

}

.social-networks {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    max-width:
        850px;

    margin:
        0 auto;

}

.social-card {

    min-height:
        90px;

    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        20px;

    border-radius:
        6px;

    color: white;

    box-shadow:
        var(--shadow);

    transition:
        transform .25s ease;

}

.social-card:hover {

    transform:
        translateY(-5px);

}

.social-card.instagram {

    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );

}

.social-card.tiktok {

    background:
        #111;

}

.social-card.youtube {

    background:
        #e00000;

}

.social-icon {

    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.16);

    font-weight:
        bold;

}

.social-card strong {

    display: block;

    font-size: 17px;

}

.social-card span {

    display: block;

    margin-top: 2px;

    font-size: 12px;

    opacity: .8;

}


/* ==================================================
   FOOTER
================================================== */

.site-footer {

    position: relative;

    background:
        #0b0b0b;

    color: white;

    border-top:
        4px solid
        var(--red);

}

.footer-container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: auto;

    min-height:
        150px;

    display: grid;

    grid-template-columns:
        200px 1fr 150px;

    gap: 30px;

    align-items: center;

}

.footer-brand img {

    width:
        120px;

}

.footer-brand p {

    margin-top:
        8px;

    color:
        #aaa;

    font-size:
        12px;

}

.footer-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content:
        center;

    gap:
        8px 18px;

}

.footer-menu a {

    color:
        #ccc;

    font-size:
        12px;

}

.footer-menu a:hover {

    color:
        var(--red);

}

.footer-social {

    display: flex;

    justify-content:
        flex-end;

    gap: 8px;

}

.footer-social a {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        var(--red);

    font-size:
        11px;

    font-weight:
        bold;

}

.footer-bottom {

    padding:
        14px 20px;

    border-top:
        1px solid #252525;

    color:
        #777;

    text-align:
        center;

    font-size:
        11px;

}


/* ==================================================
   RESPONSIVE
================================================== */

@media
(max-width: 950px) {

    .mobile-menu-button {
        display: block;
    }

    .nav-menu {

        position: absolute;

        top: 72px;
        left: 0;

        width: 100%;

        height: auto;

        display: none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap: 0;

        background:
            #111;

        border-top:
            1px solid
            #333;

    }

    .nav-menu.open {
        display: flex;
    }

    .nav-menu a {

        height: auto;

        padding:
            17px 25px;

        border-bottom:
            1px solid
            #222;

    }

    .nav-menu a.active::after {

        left: 0;
        right: auto;
        top: 0;
        bottom: 0;

        width: 4px;
        height: auto;

    }


    .posters {

        gap: 30px;

    }

    .poster {

        width:
            min(
                250px,
                30%
            );

    }


    .instagram-item {

        flex:
            0 0
            calc(
                33.333% - 10px
            );

    }


    .footer-container {

        grid-template-columns:
            1fr;

        padding:
            40px 0;

        text-align:
            center;

    }

    .footer-brand img {

        margin:
            auto;

    }

    .footer-social {

        justify-content:
            center;

    }

}


@media
(max-width: 700px) {

    .hero {

        height:
            300px;

    }

    .hero-content p {

        padding:
            0 20px;

        font-size:
            15px;

        letter-spacing:
            2px;

    }

    .hero-tags {

        padding:
            0 20px;

    }


    .section {

        padding:
            50px 0;

    }


    .cork-board {

        padding:
            50px 25px;

    }

    .posters {

        flex-wrap:
            wrap;

    }

    .poster {

        width:
            min(
                230px,
                70%
            );

    }


    .instagram-item {

        flex:
            0 0
            calc(
                50% - 8px
            );

    }


    .social-networks {

        grid-template-columns:
            1fr;

    }

}


@media
(max-width: 450px) {

    .container {

        width:
            calc(
                100% - 25px
            );

    }

    .hero-logo {

        width:
            240px;

    }

    .hero-tags span {

        font-size:
            10px;

    }


    .cork-board {

        border-width:
            8px;

        padding:
            45px 15px;

    }

    .poster {

        width:
            85%;

    }


    .instagram-item {

        flex:
            0 0
            100%;

    }

}

/* ==================================================
   PÁGINAS INTERIORES
================================================== */

.page-hero {

    position: relative;

    height: 350px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;

    background-size: cover;

    background-position: center;

}

.page-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.60) 45%,
            rgba(0,0,0,.25) 100%
        );

}

.page-hero-content {

    position: relative;

    z-index: 2;

}

.page-hero-label {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--red);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

}

.page-hero h1 {

    font-size:
        clamp(
            38px,
            6vw,
            64px
        );

    line-height: 1;

    text-transform: uppercase;

}

.page-hero p {

    margin-top: 12px;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* ==================================================
   CABECERA CONÓCENOS
================================================== */

.conocenos-hero {

    background-image:
        url("../img/cabezera.png");

}


/* ==================================================
   QUIÉNES SOMOS
================================================== */

.about-section {

    background: white;

}

.about-grid {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: center;

}

.about-content h2 {

    margin-top: 3px;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    text-transform: uppercase;

}

.title-line {

    width: 65px;
    height: 5px;

    margin:
        16px 0 25px;

    border-radius: 5px;

    background:
        var(--red);

}

.about-content p {

    margin-bottom: 17px;

    color: #555;

    font-size: 15px;

    line-height: 1.8;

}

.about-content .about-intro {

    color: #222;

    font-size: 18px;

    font-weight: 600;

}


/* BOTÓN GENERAL
================================================== */

.button-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 12px;

    padding:
        13px 24px;

    border:
        2px solid
        var(--red);

    border-radius: 4px;

    background:
        var(--red);

    color: white;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.button-primary:hover {

    background:
        var(--red-dark);

    border-color:
        var(--red-dark);

    transform:
        translateY(-2px);

}


/* MASCOTA
================================================== */

.about-image {

    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.about-image-decoration {

    position: absolute;

    width: 350px;
    height: 350px;

    max-width: 90%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(227,6,19,.12) 0%,
            rgba(227,6,19,.06) 45%,
            transparent 70%
        );

}

.about-image-decoration::before {

    content: "";

    position: absolute;

    inset: 35px;

    border:
        2px solid
        rgba(227,6,19,.15);

    border-radius: 50%;

}

.about-image img {

    position: relative;

    z-index: 2;

    width: 390px;

    max-height: 430px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 18px
            rgba(0,0,0,.15)
        );

}


/* ==================================================
   QUÉ HACEMOS
================================================== */

.what-we-do-section {

    padding:
        70px 0 80px;

    background:
        #f4f4f4;

}

.centered-heading {

    max-width: 700px;

    margin:
        0 auto 40px;

    text-align: center;

}

.centered-heading p {

    margin-top: 10px;

    color: #777;

    line-height: 1.7;

}

.what-we-do-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}

.what-card {

    position: relative;

    padding:
        35px 25px 30px;

    overflow: hidden;

    border-bottom:
        4px solid transparent;

    border-radius: 6px;

    background:
        white;

    text-align: center;

    box-shadow:
        0 7px 25px
        rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.what-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--red);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.12);

}

.what-icon {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        rgba(227,6,19,.08);

    font-size: 30px;

}

.what-card h3 {

    margin-bottom: 12px;

    font-size: 17px;

    text-transform: uppercase;

}

.what-card p {

    min-height: 105px;

    color: #666;

    font-size: 13px;

    line-height: 1.7;

}

.what-card a {

    display: inline-block;

    margin-top: 18px;

    color:
        var(--red);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

}

.what-card a::after {

    content: " →";

}

.what-card a:hover {

    color:
        var(--red-dark);

}


/* ==================================================
   HISTORIA
================================================== */

.history-section {

    background: white;

}

.history-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

}

.history-image {

    position: relative;

}

.history-image > img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 5px;

    box-shadow:
        var(--shadow);

}

.history-image::before {

    content: "";

    position: absolute;

    z-index: -1;

    left: -18px;
    bottom: -18px;

    width: 70%;
    height: 70%;

    background:
        var(--red);

    border-radius: 4px;

}

.history-year {

    position: absolute;

    right: -20px;
    bottom: 25px;

    width: 240px;

    padding:
        20px 22px;

    background:
        var(--black);

    color: white;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.25);

}

.history-year strong {

    display: block;

    color:
        var(--red);

    font-size: 19px;

    text-transform: uppercase;

}

.history-year span {

    display: block;

    margin-top: 3px;

    color: #ddd;

    font-size: 12px;

}

.history-content h2 {

    margin-top: 4px;

    font-size:
        clamp(
            27px,
            4vw,
            40px
        );

    line-height: 1.15;

    text-transform: uppercase;

}

.history-content p {

    margin-bottom: 16px;

    color: #555;

    line-height: 1.8;

}


/* ==================================================
   VALORES
================================================== */

.values-section {

    background:
        #f3f3f3;

}

.values-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 18px;

}

.value-card {

    padding:
        30px 18px;

    border-radius:
        5px;

    background:
        white;

    text-align:
        center;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.value-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.1);

}

.value-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 17px;

    border-radius:
        50%;

    background:
        var(--red);

    color: white;

    font-size: 25px;

    font-weight: bold;

}

.value-card h3 {

    margin-bottom: 10px;

    font-size: 14px;

    text-transform: uppercase;

}

.value-card p {

    color:
        #777;

    font-size:
        12px;

    line-height:
        1.65;

}


/* ==================================================
   CTA COMUNIDAD
================================================== */

.community-cta {

    position: relative;

    min-height: 350px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-image:
        url("../img/conocenos/comunidad.jpg");

    background-size:
        cover;

    background-position:
        center;

}

.community-cta-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.70)
        );

}

.community-cta-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: white;

}

.community-cta-content > span {

    display: block;

    color:
        var(--red);

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.community-cta h2 {

    margin:
        8px 0 12px;

    font-size:
        clamp(
            30px,
            5vw,
            48px
        );

    text-transform:
        uppercase;

}

.community-cta p {

    max-width: 650px;

    margin:
        0 auto;

    color:
        #ddd;

    line-height:
        1.7;

}

.community-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

}

.button-large {

    margin-top: 0;

    padding:
        14px 30px;

}

.button-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        14px 30px;

    border:
        2px solid white;

    border-radius: 4px;

    color: white;

    font-size: 13px;

    font-weight: bold;

    text-transform: uppercase;

    transition:
        background .2s ease,
        color .2s ease;

}

.button-secondary:hover {

    background:
        white;

    color:
        var(--black);

}


/* ==================================================
   RESPONSIVE - CONÓCENOS
================================================== */

@media
(max-width: 1050px) {

    .what-we-do-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .values-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


@media
(max-width: 850px) {

    .page-hero {

        height: 220px;

    }

    .about-grid {

        grid-template-columns:
            1fr;

        gap: 30px;

    }

    .about-image {

        min-height: 350px;

    }

    .about-image img {

        max-height: 350px;

    }


    .history-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }

    .history-image {

        max-width: 650px;

    }

}


@media
(max-width: 650px) {

    .page-hero {

        height: 200px;

    }

    .page-hero p {

        font-size: 13px;

    }


    .what-we-do-grid {

        grid-template-columns:
            1fr;

    }

    .what-card p {

        min-height: auto;

    }


    .values-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .history-image > img {

        height: 330px;

    }

    .history-year {

        right: 10px;
        bottom: -25px;

        width:
            calc(100% - 20px);

    }


    .community-buttons {

        flex-direction:
            column;

        align-items: center;

    }

    .community-buttons a {

        width:
            min(
                100%,
                300px
            );

    }

}


@media
(max-width: 420px) {

    .values-grid {

        grid-template-columns:
            1fr;

    }

    .about-image {

        min-height: 300px;

    }

    .about-image img {

        max-height: 300px;

    }

}

/* ==================================================
   ACTIVIDADES
================================================== */


/* CABECERA
================================================== */

.actividades-hero {

    background-image:
        url("../img/cabezera.png");

}


/* ==================================================
   CABECERA SECCIÓN CALENDARIO
================================================== */

.activities-calendar-section {

    background:
        #f5f5f5;

}

.activities-section-header {

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap: 30px;

    margin-bottom:
        35px;

}

.activities-section-header h2 {

    margin:
        3px 0 8px;

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    text-transform:
        uppercase;

}

.activities-section-header p {

    max-width:
        650px;

    color:
        #666;

    line-height:
        1.7;

}


/* ==================================================
   SELECTOR VISTA
================================================== */

.calendar-view-selector {

    display: flex;

    padding: 4px;

    border-radius:
        5px;

    background:
        #e5e5e5;

}

.calendar-view-button {

    padding:
        11px 20px;

    border: 0;

    border-radius:
        4px;

    background:
        transparent;

    color:
        #555;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        background .2s ease,
        color .2s ease;

}

.calendar-view-button.active {

    background:
        var(--red);

    color:
        white;

}


/* ==================================================
   VISTAS
================================================== */

.calendar-view {

    display: none;

}

.calendar-view.active {

    display: block;

}


/* ==================================================
   CALENDARIO
================================================== */

.calendar-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, .6fr);

    gap: 25px;

    align-items:
        stretch;

}

.calendar {

    padding:
        25px;

    border-radius:
        7px;

    background:
        white;

    box-shadow:
        0 7px 30px
        rgba(0,0,0,.08);

}

.calendar-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}

.calendar-header h3 {

    font-size:
        22px;

    text-transform:
        capitalize;

}

.calendar-nav-button {

    width: 40px;
    height: 40px;

    border: 0;

    border-radius:
        50%;

    background:
        #f1f1f1;

    color:
        #333;

    cursor: pointer;

    font-size:
        17px;

    transition:
        background .2s ease,
        color .2s ease;

}

.calendar-nav-button:hover {

    background:
        var(--red);

    color:
        white;

}


/* DÍAS SEMANA
================================================== */

.calendar-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    border-bottom:
        1px solid
        #eee;

}

.calendar-weekdays span {

    padding:
        10px;

    color:
        #777;

    text-align:
        center;

    font-size:
        12px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}


/* DÍAS
================================================== */

.calendar-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

}

.calendar-day {

    position: relative;

    min-height:
        85px;

    padding:
        10px;

    border: 0;

    border-right:
        1px solid
        #eee;

    border-bottom:
        1px solid
        #eee;

    background:
        white;

    color:
        #333;

    cursor:
        default;

    text-align:
        left;

}

.calendar-day:nth-child(7n) {

    border-right: 0;

}

.calendar-day.empty {

    background:
        #fafafa;

}

.calendar-day-number {

    font-size:
        13px;

    font-weight:
        600;

}

.calendar-day.has-activity {

    cursor: pointer;

    background:
        rgba(227,6,19,.035);

    transition:
        background .2s ease;

}

.calendar-day.has-activity:hover {

    background:
        rgba(227,6,19,.10);

}

.calendar-day.has-activity
.calendar-day-number {

    color:
        var(--red);

    font-weight:
        800;

}

.calendar-activity-marker {

    position: absolute;

    right: 9px;
    bottom: 9px;

    min-width:
        25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        var(--red);

    color:
        white;

    font-size:
        12px;

    font-weight:
        bold;

}


/* ==================================================
   PANEL EVENTOS DEL MES
================================================== */

.calendar-events-panel {

    padding:
        25px;

    border-radius:
        7px;

    background:
        var(--black);

    color:
        white;

    box-shadow:
        0 7px 30px
        rgba(0,0,0,.12);

}

.calendar-events-header {

    margin-bottom:
        20px;

}

.calendar-events-header span {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.calendar-events-header h3 {

    margin-top:
        4px;

    font-size:
        21px;

    text-transform:
        uppercase;

}


/* MINI ACTIVIDAD
================================================== */

.calendar-mini-event {

    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 14px;

    align-items: center;

    padding:
        15px 0;

    border-bottom:
        1px solid
        #333;

    cursor: pointer;

}

.calendar-mini-event:last-child {

    border-bottom: 0;

}

.mini-event-date {

    width: 52px;
    height: 58px;

    display: flex;

    flex-direction:
        column;

    align-items: center;

    justify-content: center;

    border-radius:
        4px;

    background:
        var(--red);

}

.mini-event-date strong {

    font-size:
        21px;

    line-height: 1;

}

.mini-event-date span {

    margin-top:
        3px;

    font-size:
        10px;

    text-transform:
        uppercase;

}

.mini-event-category {

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}

.mini-event-content h4 {

    margin:
        3px 0;

    font-size:
        14px;

}

.mini-event-content p {

    color:
        #aaa;

    font-size:
        11px;

}


/* SIN ACTIVIDADES
================================================== */

.no-activities {

    padding:
        40px 15px;

    text-align:
        center;

    color:
        #aaa;

}

.no-activities span {

    display: block;

    margin-bottom:
        10px;

    font-size:
        35px;

}


/* VARIAS ACTIVIDADES DÍA
================================================== */

.day-activities-title {

    margin-bottom:
        10px;

}

.day-activities-title button {

    margin-bottom:
        10px;

    border: 0;

    background:
        transparent;

    color:
        var(--red);

    cursor: pointer;

    font-weight:
        bold;

}


/* ==================================================
   VISTA LISTA
================================================== */

.activities-list {

    display: flex;

    flex-direction:
        column;

    gap: 15px;

}

.activity-list-card {

    display: grid;

    grid-template-columns:
        180px 1fr auto;

    gap: 25px;

    align-items: center;

    padding:
        15px;

    border-radius:
        6px;

    background:
        white;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.06);

}

.activity-list-image {

    height:
        130px;

    overflow: hidden;

    border-radius:
        4px;

}

.activity-list-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.activity-category-label {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}

.activity-list-content h3 {

    margin:
        3px 0 8px;

    font-size:
        20px;

}

.activity-list-content > p {

    color:
        #666;

    font-size:
        13px;

}

.activity-list-info {

    display: flex;

    flex-wrap: wrap;

    gap:
        8px 18px;

    margin-top:
        13px;

}

.activity-list-info span {

    color:
        #777;

    font-size:
        11px;

}


/* ==================================================
   CATEGORÍAS
================================================== */

.categories-section {

    background:
        white;

}

.activity-tabs {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    max-width:
        900px;

    margin:
        0 auto 35px;

    border-bottom:
        3px solid
        #eee;

}

.activity-tab {

    position: relative;

    padding:
        16px 15px;

    border: 0;

    background:
        transparent;

    color:
        #555;

    cursor: pointer;

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

}

.activity-tab::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -3px;

    height: 3px;

    background:
        transparent;

}

.activity-tab.active {

    color:
        var(--red);

}

.activity-tab.active::after {

    background:
        var(--red);

}


/* ==================================================
   TARJETAS ACTIVIDADES
================================================== */

.category-activities-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

}

.activity-card {

    overflow: hidden;

    border-radius:
        6px;

    background:
        #f7f7f7;

    box-shadow:
        0 6px 22px
        rgba(0,0,0,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.activity-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.12);

}

.activity-card-image {

    position: relative;

    height:
        210px;

    overflow: hidden;

}

.activity-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;

}

.activity-card:hover
.activity-card-image img {

    transform:
        scale(1.05);

}

.activity-card-image span {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        6px 11px;

    border-radius:
        3px;

    background:
        var(--red);

    color:
        white;

    font-size:
        10px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}

.activity-card-content {

    padding:
        22px;

}

.activity-card-content h3 {

    margin-bottom:
        10px;

    font-size:
        19px;

}

.activity-card-description {

    min-height:
        65px;

    color:
        #666;

    font-size:
        13px;

    line-height:
        1.65;

}

.activity-card-info {

    display: flex;

    flex-direction:
        column;

    gap: 7px;

    margin:
        17px 0;

    padding:
        15px 0;

    border-top:
        1px solid
        #ddd;

    border-bottom:
        1px solid
        #ddd;

}

.activity-card-info span {

    color:
        #666;

    font-size:
        11px;

}


/* BOTÓN DETALLES
================================================== */

.activity-details-button {

    padding:
        11px 20px;

    border:
        2px solid
        var(--red);

    border-radius:
        4px;

    background:
        var(--red);

    color:
        white;

    cursor: pointer;

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;

    transition:
        background .2s ease;

}

.activity-details-button:hover {

    background:
        var(--red-dark);

}


/* CATEGORÍA VACÍA
================================================== */

.category-empty {

    grid-column:
        1 / -1;

    padding:
        60px 20px;

    text-align:
        center;

}

.category-empty span {

    font-size:
        45px;

}

.category-empty h3 {

    margin:
        10px 0 5px;

    font-size:
        25px;

    text-transform:
        uppercase;

}

.category-empty p {

    color:
        #777;

}


/* ==================================================
   CTA ACTIVIDADES
================================================== */

.activities-cta {

    padding:
        55px 0;

    background:
        var(--black);

    color:
        white;

    border-top:
        4px solid
        var(--red);

}

.activities-cta-content {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

}

.activities-cta-content > div {

    max-width:
        750px;

}

.activities-cta-content span {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.activities-cta-content h2 {

    margin:
        5px 0 7px;

    font-size:
        clamp(
            23px,
            4vw,
            32px
        );

    text-transform:
        uppercase;

}

.activities-cta-content p {

    color:
        #bbb;

    font-size:
        13px;

}


/* ==================================================
   MODAL ACTIVIDAD
================================================== */

body.modal-open {

    overflow: hidden;

}

.activity-modal {

    position: fixed;

    inset: 0;

    z-index:
        5000;

    display: none;

    align-items: center;

    justify-content: center;

    padding:
        20px;

}

.activity-modal.open {

    display: flex;

}

.activity-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(4px);

}

.activity-modal-dialog {

    position: relative;

    z-index: 2;

    width:
        min(
            850px,
            100%
        );

    max-height:
        calc(
            100vh - 40px
        );

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        330px 1fr;

    border-radius:
        8px;

    background:
        white;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.4);

}

.activity-modal-close {

    position: absolute;

    z-index: 10;

    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.75);

    color:
        white;

    cursor: pointer;

    font-size:
        25px;

    line-height: 1;

}

.activity-modal-close:hover {

    background:
        var(--red);

}


/* IMAGEN MODAL
================================================== */

.activity-modal-image {

    position: relative;

    min-height:
        500px;

    background:
        #111;

}

.activity-modal-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.activity-modal-category {

    position: absolute;

    left: 20px;
    bottom: 20px;

    padding:
        7px 12px;

    border-radius:
        3px;

    background:
        var(--red);

    color:
        white;

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}


/* CONTENIDO MODAL
================================================== */

.activity-modal-content {

    padding:
        40px;

}

.activity-modal-content h2 {

    padding-right:
        30px;

    font-size:
        30px;

    text-transform:
        uppercase;

}

.activity-modal-info {

    display: flex;

    flex-direction:
        column;

    gap: 10px;

    margin:
        25px 0;

}

.activity-modal-info > div {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px;

    border-radius:
        4px;

    background:
        #f5f5f5;

}

.modal-info-icon {

    width: 35px;

    text-align:
        center;

    font-size:
        20px;

}

.activity-modal-info small {

    display: block;

    color:
        #888;

    font-size:
        9px;

    text-transform:
        uppercase;

}

.activity-modal-info strong {

    display: block;

    margin-top:
        2px;

    font-size:
        12px;

}

.activity-modal-description {

    margin-top:
        25px;

}

.activity-modal-description h3 {

    margin-bottom:
        8px;

    font-size:
        15px;

    text-transform:
        uppercase;

}

.activity-modal-description p {

    color:
        #666;

    font-size:
        13px;

    line-height:
        1.7;

}


/* INSCRIPCIÓN
================================================== */

.activity-registration {

    margin-top:
        25px;

}

.registration-required,
.registration-free {

    padding:
        18px;

    border-left:
        4px solid
        var(--red);

    background:
        #f5f5f5;

}

.registration-required strong,
.registration-free strong {

    display: block;

    font-size:
        13px;

}

.registration-required p,
.registration-free p {

    margin-top:
        4px;

    color:
        #777;

    font-size:
        11px;

}

.registration-required
.button-primary {

    margin-top:
        15px;

    padding:
        10px 18px;

    font-size:
        10px;

}


/* ==================================================
   RESPONSIVE ACTIVIDADES
================================================== */

@media
(max-width: 950px) {

    .calendar-layout {

        grid-template-columns:
            1fr;

    }

    .calendar-events-panel {

        min-height:
            auto;

    }


    .category-activities-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .activity-list-card {

        grid-template-columns:
            150px 1fr;

    }

    .activity-list-card
    .activity-details-button {

        grid-column:
            2;

        justify-self:
            start;

    }

}


@media
(max-width: 750px) {

    .activities-section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

    .calendar-view-selector {

        width: 100%;

    }

    .calendar-view-button {

        flex: 1;

    }


    .calendar {

        padding:
            15px;

    }

    .calendar-day {

        min-height:
            65px;

        padding:
            7px;

    }


    .activities-cta-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .activity-modal-dialog {

        grid-template-columns:
            1fr;

    }

    .activity-modal-image {

        min-height:
            260px;

        height:
            260px;

    }

}


@media
(max-width: 600px) {

    .calendar-weekdays span {

        padding:
            7px 2px;

    }

    .calendar-day {

        min-height:
            55px;

        padding:
            5px;

    }

    .calendar-day-number {

        font-size:
            11px;

    }

    .calendar-activity-marker {

        right: 4px;
        bottom: 4px;

        min-width:
            18px;

        height: 18px;

        font-size:
            9px;

    }


    .activity-tabs {

        grid-template-columns:
            repeat(2, 1fr);

        border-bottom: 0;

        gap: 5px;

    }

    .activity-tab {

        background:
            #f1f1f1;

    }

    .activity-tab.active {

        background:
            var(--red);

        color:
            white;

    }

    .activity-tab::after {

        display: none;

    }


    .category-activities-grid {

        grid-template-columns:
            1fr;

    }


    .activity-list-card {

        grid-template-columns:
            1fr;

    }

    .activity-list-image {

        height:
            200px;

    }

    .activity-list-card
    .activity-details-button {

        grid-column:
            auto;

    }


    .activity-modal-content {

        padding:
            30px 20px;

    }

    .activity-modal-content h2 {

        font-size:
            24px;

    }

}

/* ==================================================
   EVENTOS
================================================== */

.eventos-hero {

    background-image:
        url("../img/cabezera.png");

}


/* ==================================================
   INTRO EVENTOS
================================================== */

.events-intro {

    padding:
        55px 0 20px;

    background:
        white;

}

.events-intro-content {

    max-width:
        750px;

}

.events-intro h2 {

    margin:
        4px 0 12px;

    font-size:
        clamp(
            29px,
            4vw,
            42px
        );

    text-transform:
        uppercase;

}

.events-intro p {

    color:
        #666;

    font-size:
        15px;

    line-height:
        1.8;

}


/* ==================================================
   CABECERAS EVENTOS
================================================== */

.events-section-heading {

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        35px;

}

.events-section-heading > div {

    max-width:
        750px;

}

.events-section-heading h2 {

    margin:
        3px 0 8px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

    text-transform:
        uppercase;

}

.events-section-heading p {

    color:
        #666;

    font-size:
        14px;

    line-height:
        1.7;

}

.events-counter {

    flex-shrink: 0;

    padding:
        8px 14px;

    border-radius:
        30px;

    background:
        #eee;

    color:
        #555;

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;

}


/* ==================================================
   EVENTOS PROPIOS
================================================== */

.own-events-section {

    padding-top:
        40px;

    background:
        white;

}

.own-events-gallery {

    display: flex;

    flex-wrap: wrap;

    justify-content:
        center;

    gap: 35px;

}


/* ==================================================
   CARTEL EVENTO
================================================== */

.event-poster {

    width:
        min(
            270px,
            100%
        );

    display: block;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius:
        5px;

    background:
        white;

    color:
        var(--black);

    cursor: pointer;

    text-align: left;

    box-shadow:
        0 7px 25px
        rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.event-poster:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.16);

}

.event-poster-image {

    position: relative;

    overflow: hidden;

    aspect-ratio:
        2 / 3;

    background:
        #ddd;

}

.event-poster-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;

}

.event-poster:hover
.event-poster-image img {

    transform:
        scale(1.04);

}

.event-poster-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        20px;

    background:
        rgba(0,0,0,.72);

    opacity: 0;

    transition:
        opacity .25s ease;

}

.event-poster:hover
.event-poster-overlay {

    opacity: 1;

}

.event-poster-overlay span {

    padding:
        9px 15px;

    border:
        2px solid white;

    color:
        white;

    font-size:
        11px;

    font-weight:
        bold;

    text-align:
        center;

    text-transform:
        uppercase;

}

.event-poster-info {

    padding:
        17px;

    border-bottom:
        4px solid
        transparent;

}

.event-poster-info h3 {

    margin-bottom:
        5px;

    font-size:
        16px;

    text-transform:
        uppercase;

}

.event-poster-info time,
.event-poster-info > span {

    color:
        #777;

    font-size:
        11px;

}


/* ==================================================
   COLABORACIONES
================================================== */

.collaborative-events-section {

    background:
        #f3f3f3;

}

.collaborative-events-gallery {

    display: flex;

    flex-wrap: wrap;

    justify-content:
        center;

    gap:
        30px;

}

.collaborative-event-poster.active {

    transform:
        translateY(-7px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.18);

}

.collaborative-event-poster.active
.event-poster-info {

    border-bottom-color:
        var(--red);

}

.collaborative-event-poster.active
.event-poster-info > span {

    color:
        var(--red);

    font-weight:
        bold;

}


/* ==================================================
   SIN EVENTOS
================================================== */

.events-empty {

    padding:
        60px 20px;

    border:
        2px dashed
        #ddd;

    text-align:
        center;

}

.events-empty h3 {

    font-size:
        24px;

    text-transform:
        uppercase;

}

.events-empty p {

    margin-top:
        5px;

    color:
        #777;

}


/* ==================================================
   DETALLE EVENTO
================================================== */

.event-detail-section {

    display: none;

    padding:
        70px 0;

    scroll-margin-top:
        30px;

    background:
        white;

    border-top:
        5px solid
        var(--red);

}

.event-detail-section.visible {

    display: block;

}

.event-detail-container {

    animation:
        eventDetailAppear
        .4s ease;

}

@keyframes eventDetailAppear {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==================================================
   CABECERA DETALLE
================================================== */

.event-detail-header {

    display: grid;

    grid-template-columns:
        180px 1fr;

    gap: 35px;

    align-items: center;

    padding-bottom:
        40px;

    border-bottom:
        1px solid
        #ddd;

}

.event-detail-logo {

    width: 180px;
    height: 180px;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        6px;

    background:
        #f5f5f5;

}

.event-detail-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}

.event-detail-label {

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.event-detail-heading h2 {

    margin:
        3px 0 10px;

    font-size:
        clamp(
            32px,
            5vw,
            48px
        );

    line-height: 1;

    text-transform:
        uppercase;

}

.event-detail-meta {

    display: flex;

    flex-wrap: wrap;

    gap:
        10px 25px;

    margin-bottom:
        15px;

}

.event-detail-meta span {

    color:
        #555;

    font-size:
        12px;

    font-weight:
        600;

}

.event-detail-heading > p {

    max-width:
        750px;

    color:
        #666;

    font-size:
        14px;

    line-height:
        1.7;

}


/* ==================================================
   GRID INFORMACIÓN
================================================== */

.event-detail-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, .5fr);

    gap: 45px;

    padding:
        45px 0;

}


/* ==================================================
   CABECERA BLOQUES
================================================== */

.event-block-heading {

    margin-bottom:
        25px;

}

.event-block-heading > span {

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.event-block-heading h3 {

    margin-top:
        3px;

    font-size:
        24px;

    text-transform:
        uppercase;

}

.event-block-heading p {

    margin-top:
        5px;

    color:
        #777;

    font-size:
        12px;

}


/* ==================================================
   PROGRAMA
================================================== */

.event-program-day {

    margin-bottom:
        30px;

}

.event-program-day > h4 {

    padding:
        10px 15px;

    background:
        var(--black);

    color:
        white;

    font-size:
        13px;

    text-transform:
        uppercase;

}

.event-program-list {

    border:
        1px solid
        #e4e4e4;

    border-top: 0;

}

.event-program-activity {

    display: grid;

    grid-template-columns:
        90px 1fr;

    align-items: center;

    border-bottom:
        1px solid
        #eee;

}

.event-program-activity:last-child {

    border-bottom: 0;

}

.program-time {

    height: 100%;

    min-height:
        85px;

    display: flex;

    flex-direction:
        column;

    align-items: center;

    justify-content: center;

    background:
        #f3f3f3;

}

.program-time strong {

    color:
        var(--red);

    font-size:
        16px;

}

.program-time span {

    color:
        #888;

    font-size:
        10px;

}

.program-information {

    padding:
        15px 20px;

}

.program-information h5 {

    margin-bottom:
        5px;

    font-size:
        15px;

}

.program-information span {

    color:
        #777;

    font-size:
        10px;

}


/* ==================================================
   UBICACIÓN
================================================== */

.event-location-column {

    display: flex;

    flex-direction:
        column;

    gap: 25px;

}

.event-location-card {

    padding:
        28px;

    border-radius:
        5px;

    background:
        var(--black);

    color:
        white;

}

.event-side-icon {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        17px;

    border-radius:
        50%;

    background:
        var(--red);

    font-size:
        19px;

}

.event-location-card h3 {

    margin-bottom:
        13px;

    font-size:
        20px;

    text-transform:
        uppercase;

}

.event-location-card strong {

    display: block;

    font-size:
        13px;

}

.event-location-card p {

    margin-top:
        5px;

    color:
        #aaa;

    font-size:
        11px;

}


/* ==================================================
   TRANSPORTE
================================================== */

.event-transport-card {

    padding:
        25px;

    border:
        1px solid
        #ddd;

    border-radius:
        5px;

}

.transport-options {

    display: flex;

    flex-direction:
        column;

    gap: 12px;

}

.transport-option {

    display: grid;

    grid-template-columns:
        40px 1fr;

    gap: 12px;

    align-items: center;

    padding:
        10px 0;

    border-bottom:
        1px solid
        #eee;

}

.transport-option:last-child {

    border-bottom: 0;

}

.transport-icon {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        4px;

    background:
        var(--red);

    color:
        white;

    font-weight:
        bold;

}

.transport-option strong,
.transport-option span,
.transport-option small {

    display: block;

}

.transport-option strong {

    font-size:
        12px;

}

.transport-option span {

    margin-top:
        2px;

    color:
        #555;

    font-size:
        10px;

}

.transport-option small {

    margin-top:
        2px;

    color:
        #999;

    font-size:
        9px;

}


/* ==================================================
   HISTORIAL EVENTO
================================================== */

.event-history-section {

    padding-top:
        45px;

    border-top:
        1px solid
        #ddd;

}

.event-history-year {

    margin-top:
        30px;

}

.event-history-year > h4 {

    display: inline-block;

    margin-bottom:
        15px;

    padding:
        7px 14px;

    background:
        var(--red);

    color:
        white;

    font-size:
        13px;

}

.event-history-gallery {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

}

.history-photo {

    position: relative;

    height:
        180px;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius:
        4px;

    background:
        #ddd;

    cursor: pointer;

}

.history-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease;

}

.history-photo span {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,.65);

    color:
        white;

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;

    opacity: 0;

    transition:
        opacity .25s ease;

}

.history-photo:hover img {

    transform:
        scale(1.07);

}

.history-photo:hover span {

    opacity: 1;

}


/* ==================================================
   CTA EVENTOS
================================================== */

.events-collaboration-cta {

    padding:
        55px 0;

    background:
        var(--black);

    color:
        white;

    border-top:
        4px solid
        var(--red);

}

.events-collaboration-content {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 40px;

}

.events-collaboration-content > div {

    max-width:
        750px;

}

.events-collaboration-content span {

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}

.events-collaboration-content h2 {

    margin:
        5px 0 8px;

    font-size:
        clamp(
            23px,
            4vw,
            32px
        );

    text-transform:
        uppercase;

}

.events-collaboration-content p {

    color:
        #bbb;

    font-size:
        13px;

    line-height:
        1.6;

}


/* ==================================================
   VISOR FOTOGRAFÍAS
================================================== */

.event-gallery-modal {

    position: fixed;

    inset: 0;

    z-index:
        6000;

    display: none;

    align-items: center;

    justify-content: center;

    padding:
        30px;

}

.event-gallery-modal.open {

    display: flex;

}

.event-gallery-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.90);

    backdrop-filter:
        blur(4px);

}

.event-gallery-dialog {

    position: relative;

    z-index: 2;

    max-width:
        1100px;

    max-height:
        calc(100vh - 60px);

}

.event-gallery-dialog img {

    max-width: 100%;

    max-height:
        calc(100vh - 60px);

    object-fit: contain;

    box-shadow:
        0 15px 60px
        rgba(0,0,0,.6);

}

.event-gallery-close {

    position: absolute;

    z-index: 5;

    top: 10px;
    right: 10px;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius:
        50%;

    background:
        rgba(0,0,0,.8);

    color:
        white;

    cursor: pointer;

    font-size:
        26px;

}

.event-gallery-close:hover {

    background:
        var(--red);

}


/* ==================================================
   RESPONSIVE EVENTOS
================================================== */

@media
(max-width: 950px) {

    .event-detail-grid {

        grid-template-columns:
            1fr;

    }

    .event-location-column {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }

    .event-history-gallery {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


@media
(max-width: 750px) {

    .events-section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .event-detail-header {

        grid-template-columns:
            130px 1fr;

        gap: 20px;

    }

    .event-detail-logo {

        width: 130px;
        height: 130px;

    }


    .event-history-gallery {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .events-collaboration-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media
(max-width: 600px) {

    .own-events-gallery,
    .collaborative-events-gallery {

        gap: 20px;

    }

    .event-poster {

        width:
            min(
                240px,
                100%
            );

    }


    .event-detail-header {

        grid-template-columns:
            1fr;

    }

    .event-detail-logo {

        width: 120px;
        height: 120px;

    }


    .event-detail-grid {

        gap: 30px;

    }


    .event-location-column {

        grid-template-columns:
            1fr;

    }


    .event-history-gallery {

        grid-template-columns:
            1fr 1fr;

        gap: 8px;

    }

    .history-photo {

        height: 130px;

    }


    .event-program-activity {

        grid-template-columns:
            70px 1fr;

    }


    .program-information {

        padding:
            12px;

    }

}


@media
(max-width: 400px) {

    .event-history-gallery {

        grid-template-columns:
            1fr;

    }

    .history-photo {

        height: 190px;

    }

}

/* ==================================================
   SOCIOS / HAZTE SOCIO
================================================== */

.socios-hero {
    background-image:
        url("../img/cabezera.png");
}


/* ==================================================
   INTRODUCCIÓN SOCIOS
================================================== */

.membership-intro {
    background: white;
}

.membership-intro-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;
}

.membership-intro-content h2 {

    margin-top: 4px;

    font-size:
        clamp(
            30px,
            4vw,
            43px
        );

    line-height: 1.1;

    text-transform: uppercase;
}

.membership-intro-content p {

    margin-bottom: 16px;

    color: #5f5f5f;

    line-height: 1.8;
}

.membership-intro-content
.membership-lead {

    color: #222;

    font-size: 18px;

    font-weight: 600;
}


/* IMAGEN
================================================== */

.membership-intro-image {

    position: relative;
}

.membership-intro-image > img {

    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 6px;

    box-shadow:
        var(--shadow);
}

.membership-intro-image::before {

    content: "";

    position: absolute;

    z-index: -1;

    top: -17px;
    right: -17px;

    width: 70%;
    height: 70%;

    border-radius: 4px;

    background:
        var(--red);
}

.membership-image-message {

    position: absolute;

    left: -25px;
    bottom: 25px;

    padding:
        20px 25px;

    background:
        var(--black);

    color: white;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);
}

.membership-image-message strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--red);

    font-size: 17px;

    text-transform: uppercase;
}

.membership-image-message span {

    color: #ddd;

    font-size: 12px;

    line-height: 1.5;
}


/* ==================================================
   BENEFICIOS
================================================== */

.membership-benefits {

    background:
        #f3f3f3;
}

.benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

.benefit-card {

    position: relative;

    min-height: 250px;

    padding:
        35px 28px;

    overflow: hidden;

    border-radius: 6px;

    background:
        white;

    box-shadow:
        0 5px 22px
        rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.benefit-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.11);
}

.benefit-number {

    position: absolute;

    top: 10px;
    right: 17px;

    color:
        #f0f0f0;

    font-size: 55px;

    font-weight: 900;

    line-height: 1;
}

.benefit-icon {

    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        var(--red);

    color: white;

    font-size: 23px;

    font-weight: bold;
}

.benefit-card h3 {

    margin-bottom: 10px;

    font-size: 17px;

    text-transform: uppercase;
}

.benefit-card p {

    color: #777;

    font-size: 13px;

    line-height: 1.7;
}


/* ==================================================
   QUÉ IMPLICA / REQUISITOS
================================================== */

.membership-commitment {

    background:
        white;
}

.membership-two-columns {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 55px;

    align-items: stretch;
}


/* TARJETA NEGRA
================================================== */

.membership-dark-card {

    padding:
        45px;

    border-radius: 6px;

    background:
        var(--black);

    color: white;

    border-top:
        5px solid
        var(--red);
}

.membership-dark-card h2 {

    margin:
        5px 0 17px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

    text-transform: uppercase;
}

.membership-dark-card > p {

    margin-bottom: 25px;

    color: #bbb;

    font-size: 14px;

    line-height: 1.75;
}

.membership-check-list {

    list-style: none;
}

.membership-check-list li {

    position: relative;

    padding:
        14px 0
        14px 38px;

    border-bottom:
        1px solid #303030;

    color: #ddd;

    font-size: 13px;

    line-height: 1.5;
}

.membership-check-list li:last-child {
    border-bottom: 0;
}

.membership-check-list li::before {

    content: "✓";

    position: absolute;

    top: 12px;
    left: 0;

    width: 24px;
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--red);

    color: white;

    font-size: 11px;

    font-weight: bold;
}


/* REQUISITOS
================================================== */

.membership-requirements {

    padding:
        25px 0;
}

.membership-requirements > h2 {

    margin-top: 4px;

    font-size:
        clamp(
            27px,
            4vw,
            38px
        );

    text-transform: uppercase;
}

.requirement-item {

    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 17px;

    padding:
        17px 0;

    border-bottom:
        1px solid #e5e5e5;
}

.requirement-item:last-child {
    border-bottom: 0;
}

.requirement-number {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #f3f3f3;

    color:
        var(--red);

    font-size: 16px;

    font-weight: 900;
}

.requirement-item h3 {

    margin-bottom: 4px;

    font-size: 14px;

    text-transform: uppercase;
}

.requirement-item p {

    color: #777;

    font-size: 12px;

    line-height: 1.6;
}


/* ==================================================
   PROCESO
================================================== */

.membership-process {

    background:
        #f3f3f3;
}

.membership-steps {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    max-width: 1050px;

    margin: 50px auto 0;
}

.membership-step {

    width: 190px;

    text-align: center;
}

.step-circle {

    position: relative;

    z-index: 2;

    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 18px;

    border:
        4px solid
        var(--red);

    border-radius: 50%;

    background:
        white;

    color:
        var(--red);

    font-size: 21px;

    font-weight: 900;
}

.membership-step:last-child
.step-circle {

    background:
        var(--red);

    color: white;
}

.membership-step h3 {

    margin-bottom: 7px;

    font-size: 14px;

    text-transform: uppercase;
}

.membership-step p {

    color: #777;

    font-size: 11px;

    line-height: 1.6;
}

.step-connector {

    width: 100px;

    height: 3px;

    margin-top: 33px;

    background:
        #ddd;
}


/* ==================================================
   FORMULARIO SOCIOS
================================================== */

.membership-form-section {

    scroll-margin-top:
        30px;

    background:
        white;
}

.membership-form-layout {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 60px;

    align-items: start;
}


/* INFORMACIÓN FORMULARIO
================================================== */

.membership-form-info {

    position: sticky;

    top: 30px;
}

.membership-form-info h2 {

    margin-top: 4px;

    font-size:
        clamp(
            28px,
            4vw,
            39px
        );

    line-height: 1.1;

    text-transform: uppercase;
}

.membership-form-info > p {

    color: #666;

    line-height: 1.75;
}

.membership-form-notice {

    display: grid;

    grid-template-columns:
        40px 1fr;

    gap: 15px;

    margin-top: 30px;

    padding:
        20px;

    border-left:
        4px solid
        var(--red);

    background:
        #f3f3f3;
}

.notice-icon {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--red);

    color: white;

    font-weight: 900;
}

.membership-form-notice strong {

    font-size: 13px;

    text-transform: uppercase;
}

.membership-form-notice p {

    margin-top: 4px;

    color: #777;

    font-size: 11px;

    line-height: 1.6;
}

.membership-contact-help {

    margin-top: 30px;

    padding-top: 25px;

    border-top:
        1px solid #ddd;
}

.membership-contact-help span {

    display: block;

    color:
        var(--red);

    font-size: 10px;

    font-weight: bold;

    text-transform: uppercase;
}

.membership-contact-help strong {

    display: block;

    margin:
        5px 0 10px;

    font-size: 13px;
}

.membership-contact-help a {

    color:
        var(--red);

    font-size: 12px;

    font-weight: bold;
}


/* CONTENEDOR FORMULARIO
================================================== */

.membership-form-wrapper {

    padding:
        35px;

    border-radius: 7px;

    background:
        #f5f5f5;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.07);
}

.membership-form {

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.form-group label,
.membership-interests legend {

    color: #333;

    font-size: 12px;

    font-weight: 700;
}

.form-group label span {

    color:
        var(--red);
}

.form-group input,
.form-group textarea {

    width: 100%;

    padding:
        13px 14px;

    border:
        1px solid #d7d7d7;

    border-radius:
        4px;

    outline: none;

    background:
        white;

    color: #222;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.form-group textarea {

    resize: vertical;

    min-height: 130px;
}

.form-group input:focus,
.form-group textarea:focus {

    border-color:
        var(--red);

    box-shadow:
        0 0 0 3px
        rgba(227,6,19,.08);
}


/* ==================================================
   INTERESES
================================================== */

.membership-interests {

    padding:
        20px;

    border:
        1px solid #ddd;

    border-radius:
        5px;
}

.membership-interests legend {

    padding:
        0 7px;
}

.membership-interests > p {

    margin-bottom: 15px;

    color: #888;

    font-size: 10px;
}

.interests-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}

.interest-option {

    position: relative;

    cursor: pointer;
}

.interest-option input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.interest-option span {

    display: block;

    padding:
        11px 13px;

    border:
        1px solid #ddd;

    border-radius:
        4px;

    background:
        white;

    color: #555;

    font-size: 11px;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.interest-option span::before {

    content: "+";

    display: inline-flex;

    width: 18px;
    height: 18px;

    align-items: center;

    justify-content: center;

    margin-right: 7px;

    border-radius: 50%;

    background:
        #eee;

    color: #555;

    font-weight: bold;
}

.interest-option
input:checked + span {

    border-color:
        var(--red);

    background:
        rgba(227,6,19,.06);

    color:
        var(--red);

    font-weight: 700;
}

.interest-option
input:checked + span::before {

    content: "✓";

    background:
        var(--red);

    color: white;
}


/* ==================================================
   PRIVACIDAD
================================================== */

.privacy-checkbox {

    display: grid;

    grid-template-columns:
        18px 1fr;

    gap: 10px;

    align-items: start;

    cursor: pointer;
}

.privacy-checkbox input {

    margin-top: 3px;

    accent-color:
        var(--red);
}

.privacy-checkbox span {

    color: #666;

    font-size: 10px;

    line-height: 1.6;
}

.privacy-checkbox a {

    color:
        var(--red);

    text-decoration: underline;
}

.privacy-checkbox strong {

    color:
        var(--red);
}

.required-fields {

    color: #999;

    font-size: 9px;
}


/* ==================================================
   BOTÓN FORMULARIO
================================================== */

.membership-submit {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        15px 20px;

    border: 0;

    border-radius:
        4px;

    background:
        var(--red);

    color: white;

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    transition:
        background .2s ease;
}

.membership-submit span {

    font-size: 20px;
}

.membership-submit:hover {

    background:
        var(--red-dark);
}


/* ==================================================
   MENSAJES FORMULARIO
================================================== */

.form-message {

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 15px;

    margin-bottom: 25px;

    padding:
        18px;

    border-radius:
        4px;
}

.form-message-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    font-weight: bold;
}

.form-message h3 {

    margin-bottom: 3px;

    font-size: 13px;

    text-transform: uppercase;
}

.form-message p {

    font-size: 11px;

    line-height: 1.5;
}

.form-success {

    border:
        1px solid #b9dfc5;

    background:
        #edf9f0;
}

.form-success
.form-message-icon {

    background:
        #239447;
}

.form-error {

    border:
        1px solid #efbaba;

    background:
        #fff0f0;
}

.form-error
.form-message-icon {

    background:
        var(--red);
}


/* ==================================================
   RESPONSIVE SOCIOS
================================================== */

@media
(max-width: 950px) {

    .membership-intro-grid {

        gap: 40px;
    }


    .benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .membership-two-columns {

        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .membership-form-layout {

        grid-template-columns:
            1fr;

        gap: 40px;
    }

    .membership-form-info {

        position: static;
    }

}


@media
(max-width: 750px) {

    .membership-intro-grid {

        grid-template-columns:
            1fr;
    }

    .membership-intro-image {

        max-width: 600px;
    }

    .membership-image-message {

        left: 15px;
    }


    .membership-steps {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 35px;
    }

    .membership-step {

        width: auto;
    }

    .step-connector {

        display: none;
    }

}


@media
(max-width: 600px) {

    .benefits-grid {

        grid-template-columns:
            1fr;
    }

    .benefit-card {

        min-height: auto;
    }


    .membership-dark-card {

        padding:
            30px 22px;
    }


    .membership-intro-image > img {

        height: 330px;
    }


    .form-row {

        grid-template-columns:
            1fr;
    }

    .interests-grid {

        grid-template-columns:
            1fr;
    }

    .membership-form-wrapper {

        padding:
            25px 18px;
    }

}


@media
(max-width: 420px) {

    .membership-steps {

        grid-template-columns:
            1fr;
    }

    .membership-image-message {

        right: 15px;
        left: 15px;

        bottom: 15px;
    }

}

/* ==================================================
   COLABORA
================================================== */

.colabora-hero {
    background-image:
        url("../img/cabezera.png");
}


/* ==================================================
   INTRO
================================================== */

.collaboration-intro {
    background: white;
}

.collaboration-intro-grid {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 70px;

    align-items: center;
}

.collaboration-intro-title h2 {

    margin-top: 4px;

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );

    line-height: 1;

    text-transform: uppercase;
}

.collaboration-intro-text p {

    margin-bottom: 15px;

    color: #666;

    font-size: 14px;

    line-height: 1.8;
}

.collaboration-intro-text
.collaboration-lead {

    color: #222;

    font-size: 18px;

    font-weight: 600;
}


/* ==================================================
   TIPOS DE COLABORACIÓN
================================================== */

.collaboration-types-section {
    background: #f3f3f3;
}

.collaboration-types-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}

.collaboration-type-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 35px 30px;

    overflow: hidden;

    border-top:
        4px solid transparent;

    border-radius: 6px;

    background: white;

    box-shadow:
        0 6px 25px
        rgba(0,0,0,.07);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.collaboration-type-card:hover {

    transform:
        translateY(-7px);

    border-top-color:
        var(--red);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.12);
}

.collaboration-card-number {

    position: absolute;

    top: 15px;
    right: 20px;

    color: #f1f1f1;

    font-size: 60px;

    font-weight: 900;

    line-height: 1;
}

.collaboration-type-icon {

    position: relative;

    z-index: 2;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        var(--red);

    color: white;

    font-size: 25px;
}

.collaboration-type-label {

    color:
        var(--red);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.collaboration-type-card h3 {

    margin:
        4px 0 12px;

    font-size: 22px;

    text-transform: uppercase;
}

.collaboration-type-card > p {

    min-height: 90px;

    color: #666;

    font-size: 13px;

    line-height: 1.7;
}

.collaboration-type-card ul {

    margin:
        20px 0 25px;

    padding-top: 15px;

    border-top:
        1px solid #eee;

    list-style: none;
}

.collaboration-type-card li {

    position: relative;

    padding:
        6px 0
        6px 22px;

    color: #666;

    font-size: 11px;
}

.collaboration-type-card li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color:
        var(--red);

    font-weight: bold;
}

.collaboration-select {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    margin-top: auto;

    padding:
        13px 15px;

    border:
        2px solid
        var(--black);

    background:
        transparent;

    color:
        var(--black);

    cursor: pointer;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.collaboration-select span {
    font-size: 17px;
}

.collaboration-select:hover {

    border-color:
        var(--red);

    background:
        var(--red);

    color: white;
}


/* ==================================================
   BRIGADA SOS EN TU EVENTO
================================================== */

.collaboration-events-section {

    padding:
        80px 0;

    overflow: hidden;

    background:
        var(--black);

    color: white;
}

.collaboration-events-grid {

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: center;
}

.collaboration-events-content h2 {

    max-width: 700px;

    margin:
        5px 0 18px;

    font-size:
        clamp(
            30px,
            5vw,
            45px
        );

    line-height: 1.1;

    text-transform: uppercase;
}

.collaboration-events-content > p {

    max-width: 650px;

    margin-bottom: 13px;

    color: #bbb;

    font-size: 13px;

    line-height: 1.7;
}

.collaboration-event-features {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin:
        30px 0 20px;
}

.collaboration-event-features > div {

    padding:
        17px;

    border:
        1px solid #333;

    background:
        #181818;
}

.collaboration-event-features strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--red);

    font-size: 11px;

    text-transform: uppercase;
}

.collaboration-event-features span {

    color: #aaa;

    font-size: 9px;

    line-height: 1.4;
}


/* VISUAL
================================================== */

.collaboration-events-visual {

    position: relative;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.collaboration-visual-main {

    position: relative;

    z-index: 2;

    width: 330px;
    height: 330px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 40px;

    border:
        1px solid #333;

    background:
        #181818;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.4);

    transform:
        rotate(-4deg);
}

.collaboration-visual-main > span {

    margin-bottom: 10px;

    color:
        var(--red);

    font-size: 25px;
}

.collaboration-visual-main strong {

    font-size: 52px;

    line-height: .9;

    text-transform: uppercase;
}

.collaboration-visual-main small {

    margin-top: 20px;

    color: #777;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.collaboration-visual-red {

    position: absolute;

    z-index: 3;

    right: 0;
    bottom: 20px;

    width: 180px;
    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px;

    background:
        var(--red);

    color: white;

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.3);

    transform:
        rotate(5deg);
}

.collaboration-visual-red span {

    font-size: 12px;
}

.collaboration-visual-red strong {

    font-size: 25px;
}


/* ==================================================
   PROCESO
================================================== */

.collaboration-process-section {
    background: white;
}

.collaboration-process {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    margin-top: 45px;
}

.collaboration-process-step {

    width: 210px;

    text-align: center;
}

.process-step-number {

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 17px;

    border-radius: 50%;

    background:
        var(--black);

    color:
        var(--red);

    font-size: 17px;

    font-weight: 900;
}

.collaboration-process-step:last-child
.process-step-number {

    background:
        var(--red);

    color: white;
}

.collaboration-process-step h3 {

    margin-bottom: 7px;

    font-size: 13px;

    text-transform: uppercase;
}

.collaboration-process-step p {

    color: #777;

    font-size: 10px;

    line-height: 1.6;
}

.process-arrow {

    margin:
        22px 20px 0;

    color: #ccc;

    font-size: 22px;
}


/* ==================================================
   FORMULARIO COLABORACIÓN
================================================== */

.collaboration-form-section {

    scroll-margin-top: 30px;

    background:
        #f3f3f3;
}

.collaboration-form-layout {

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 60px;

    align-items: start;
}

.collaboration-form-info {

    position: sticky;

    top: 30px;
}

.collaboration-form-info h2 {

    margin-top: 4px;

    font-size:
        clamp(
            29px,
            4vw,
            40px
        );

    line-height: 1.1;

    text-transform: uppercase;
}

.collaboration-form-info > p {

    color: #666;

    font-size: 13px;

    line-height: 1.75;
}


/* AYUDA
================================================== */

.collaboration-contact-box {

    margin-top: 30px;

    padding: 22px;

    border-left:
        4px solid
        var(--red);

    background: white;
}

.collaboration-contact-box > strong {

    display: block;

    margin-bottom: 12px;

    font-size: 12px;

    text-transform: uppercase;
}

.collaboration-contact-box ul {

    list-style: none;
}

.collaboration-contact-box li {

    position: relative;

    padding:
        5px 0
        5px 20px;

    color: #777;

    font-size: 10px;
}

.collaboration-contact-box li::before {

    content: "•";

    position: absolute;

    left: 3px;

    color:
        var(--red);

    font-size: 17px;
}

.collaboration-form-message {

    margin-top: 25px;

    padding:
        20px;

    background:
        var(--black);

    color: white;
}

.collaboration-form-message span {

    display: block;

    color:
        var(--red);

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.collaboration-form-message strong {

    display: block;

    margin-top: 5px;

    font-size: 13px;

    line-height: 1.5;
}


/* FORMULARIO
================================================== */

.collaboration-form-wrapper {

    padding: 35px;

    border-radius: 7px;

    background: white;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.07);
}

.collaboration-form {

    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* SELECTOR TIPO
================================================== */

.collaboration-form-types {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;

    margin-top: 5px;
}

.collaboration-form-types label {

    position: relative;

    cursor: pointer;
}

.collaboration-form-types input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.collaboration-form-types label > span {

    min-height: 75px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 10px;

    border:
        1px solid #ddd;

    border-radius: 4px;

    background:
        #f7f7f7;

    color: #555;

    font-size: 9px;

    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.collaboration-form-types
label > span strong {

    font-size: 20px;
}

.collaboration-form-types
input:checked + span {

    border-color:
        var(--red);

    background:
        var(--red);

    color: white;
}


/* BOTÓN
================================================== */

.collaboration-submit {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    padding:
        15px 20px;

    border: 0;

    border-radius: 4px;

    background:
        var(--red);

    color: white;

    cursor: pointer;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    transition:
        background .2s ease;
}

.collaboration-submit span {
    font-size: 20px;
}

.collaboration-submit:hover {
    background:
        var(--red-dark);
}


/* ==================================================
   RESPONSIVE COLABORA
================================================== */

@media
(max-width: 950px) {

    .collaboration-types-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .collaboration-type-card:last-child {

        grid-column:
            1 / -1;

        max-width: 500px;

        justify-self: center;
    }


    .collaboration-events-grid {

        grid-template-columns:
            1fr;
    }

    .collaboration-events-visual {

        min-height: 380px;
    }


    .collaboration-form-layout {

        grid-template-columns:
            1fr;
    }

    .collaboration-form-info {

        position: static;
    }

}


@media
(max-width: 750px) {

    .collaboration-intro-grid {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .collaboration-process {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 35px;
    }

    .collaboration-process-step {

        width: auto;
    }

    .process-arrow {
        display: none;
    }


    .collaboration-event-features {

        grid-template-columns:
            1fr;
    }

}


@media
(max-width: 600px) {

    .collaboration-types-grid {

        grid-template-columns:
            1fr;
    }

    .collaboration-type-card:last-child {

        grid-column: auto;

        max-width: none;
    }


    .collaboration-form-types {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .collaboration-form-wrapper {

        padding:
            25px 18px;
    }


    .collaboration-visual-main {

        width: 270px;
        height: 270px;
    }

    .collaboration-visual-main strong {

        font-size: 42px;
    }

}


@media
(max-width: 430px) {

    .collaboration-process {

        grid-template-columns:
            1fr;
    }


    .collaboration-events-visual {

        min-height: 330px;
    }

    .collaboration-visual-main {

        width: 230px;
        height: 230px;

        padding: 25px;
    }

    .collaboration-visual-red {

        right: 10px;

        width: 145px;
        height: 100px;
    }

}


/* ==========================================
   CONTACTO
========================================== */

.contacto-hero {
    background-image: url("../img/cabezera.png");
}

/* INTRODUCCIÓN */

.contact-intro-section {
    background: #fff;
}

.contact-intro-heading {
    max-width: 740px;
    margin: 0 auto 40px;
    text-align: center;
}

.contact-intro-heading h2,
.contact-location-heading h2 {
    margin: 6px 0 12px;
    font-size: clamp(28px, 4vw, 42px);
    text-transform: uppercase;
}

.contact-intro-heading p,
.contact-location-heading p {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}

/* TARJETAS DE CORREO */

.contact-departments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.contact-department-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 26px;
    border: 1px solid #e8e8e8;
    border-top: 4px solid var(--red);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
    min-width: 0;
}

.contact-department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

.contact-department-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 25px;
    font-weight: 800;
}

.contact-department-tag {
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.contact-department-card h3 {
    margin: 5px 0 12px;
    font-size: 22px;
    text-transform: uppercase;
}

.contact-department-card p {
    flex: 1;
    margin-bottom: 22px;
    color: #666;
    font-size: 13px;
    line-height: 1.7;
}

.contact-department-card > a {
    margin-bottom: 20px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contact-department-select {
    width: 100%;
    padding: 13px 12px;
    border: 2px solid var(--black);
    border-radius: 3px;
    background: transparent;
    color: var(--black);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    transition: .2s ease;
}

.contact-department-select:hover {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

/* SECCIÓN FORMULARIO */

.contact-form-section {
    background: #f3f3f3;
    scroll-margin-top: 30px;
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 55px;
}

.contact-form-sidebar h2 {
    margin: 6px 0 16px;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    text-transform: uppercase;
}

.contact-form-sidebar > p {
    color: #666;
    font-size: 14px;
    line-height: 1.75;
}

.contact-form-help {
    margin-top: 28px;
    padding: 24px;
    border-left: 4px solid var(--red);
    background: #fff;
}

.contact-form-help h3 {
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
}

.contact-form-help p {
    color: #777;
    font-size: 12px;
    line-height: 1.7;
}

.contact-form-help-dark {
    background: var(--black);
    color: #fff;
}

.contact-form-help-dark p {
    color: #bbb;
}

/* PANEL */

.contact-form-panel {
    min-width: 0;
    padding: 38px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0,0,0,.07);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.contact-form-group label {
    color: #333;
    font-size: 12px;
    font-weight: 800;
}

.contact-form-group label span {
    color: var(--red);
}

.contact-form-group label small {
    color: #999;
    font-weight: 400;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    outline: none;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form-group textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.7;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(227,6,19,.10);
}

.contact-form-group select:disabled {
    background: #eee;
    color: #999;
    cursor: not-allowed;
}

.contact-recipient {
    padding: 10px 13px;
    border-radius: 4px;
    background: #f4f4f4;
    color: #777;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.contact-recipient.selected {
    background: #fff0f1;
    color: #b5000b;
    font-weight: 700;
}

.contact-message-counter {
    color: #999;
    font-size: 10px;
    text-align: right;
}

/* PRIVACIDAD */

.contact-privacy {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

.contact-privacy input {
    margin-top: 3px;
    accent-color: var(--red);
}

.contact-privacy span {
    color: #666;
    font-size: 11px;
    line-height: 1.6;
}

.contact-privacy a {
    color: var(--red);
    text-decoration: underline;
}

/* BOTONES */

.contact-form-actions {
    display: flex;
    gap: 14px;
}

.contact-clear-button,
.contact-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    transition: .2s ease;
}

.contact-clear-button {
    flex: 0 0 auto;
    border: 2px solid #ccc;
    background: transparent;
    color: #555;
}

.contact-clear-button:hover {
    border-color: #111;
    background: #eee;
}

.contact-submit-button {
    flex: 1;
    justify-content: space-between;
    gap: 15px;
    border: 2px solid var(--red);
    background: var(--red);
    color: #fff;
}

.contact-submit-button:hover {
    border-color: var(--red-dark);
    background: var(--red-dark);
}

.contact-submit-button span {
    font-size: 20px;
}

.contact-required-note {
    color: #999;
    font-size: 10px;
}

/* MENSAJES */

.contact-feedback {
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 4px;
}

.contact-feedback strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.contact-feedback p,
.contact-feedback li {
    font-size: 12px;
    line-height: 1.6;
}

.contact-feedback ul {
    padding-left: 18px;
}

.contact-feedback-success {
    border: 1px solid #b6dfc0;
    background: #ecf8ef;
    color: #246b38;
}

.contact-feedback-error {
    border: 1px solid #f0b6b6;
    background: #fff0f0;
    color: #a0000a;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* OCULTAR OTRO ASUNTO */

#otroAsuntoGroup[hidden] {
    display: none;
}

/* SEDE */

.contact-location-section {
    background: #fff;
}

.contact-location-heading {
    margin-bottom: 35px;
}

.contact-location-layout {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 35px;
    align-items: stretch;
}

.contact-location-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 35px;
    border-radius: 6px;
    background: var(--black);
    color: #fff;
}

.contact-location-item {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.contact-location-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 22px;
}

.contact-location-item h3 {
    margin-bottom: 7px;
    font-size: 15px;
    text-transform: uppercase;
}

.contact-location-item p,
.contact-location-item a {
    color: #ccc;
    font-size: 13px;
    line-height: 1.7;
}

.contact-schedule-note {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--red);
    background: #252525;
    color: #ddd;
    font-size: 11px;
    line-height: 1.5;
}

.contact-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    padding: 14px 20px;
    border-radius: 4px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.contact-map-button:hover {
    background: var(--red-dark);
}

.contact-map-container {
    min-height: 400px;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
}

.contact-map-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

/* ACCESIBILIDAD */

.contact-department-select:focus-visible,
.contact-clear-button:focus-visible,
.contact-submit-button:focus-visible,
.contact-map-button:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .contact-departments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form-layout,
    .contact-location-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .contact-departments {
        grid-template-columns: 1fr;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-panel,
    .contact-location-details {
        padding: 25px 20px;
    }

    .contact-form-actions {
        flex-direction: column;
    }

    .contact-clear-button,
    .contact-submit-button {
        width: 100%;
    }
}



.socios-area {
  padding: 50px 0 90px;
  background: #f5f5f5;
  min-height: 65vh;
  color: #111;
}
.socios-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.socios-nav {
  background: #111;
  border-radius: 9px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.socios-nav strong {
  color: #e30613;
  margin-bottom: 12px;
}
.socios-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 5px;
  font-size: 13px;
}
.socios-nav a:hover,
.socios-nav a:focus {
  background: #e30613;
}
.socios-content {
  min-width: 600px;
  background: #fff;
  border-radius: 9px;
  padding: 30px;
  box-shadow: 0 5px 24px #0001;
}
.socios-content h1 {
  font-size: clamp(26px, 4vw, 40px);
  text-transform: uppercase;
  margin: 0 0 15px;
}
.socios-content h2 {
  font-size: 20px;
  margin: 28px 0 16px;
}
.socios-stats,
.socios-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 25px 0;
}
.socios-stats article,
.socios-cards article {
  padding: 22px;
  border: 1px solid #ddd;
  border-top: 3px solid #e30613;
  border-radius: 6px;
}
.socios-stats span {
  display: block;
  color: #666;
  font-size: 13px;
}
.socios-stats strong {
  display: block;
  font-size: 24px;
  margin-top: 8px;
}
.socios-form {
  display: grid;
  gap: 16px;
  max-width: 530px;
  margin: 20px 0;
}
.socios-form label {
  font-size: 13px;
  font-weight: 700;
  display: grid;
  gap: 7px;
}
.socios-form input {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}
.socios-area button {
  border: 0;
  border-radius: 4px;
  background: #e30613;
  color: #fff;
  font-weight: 700;
  padding: 13px 18px;
  cursor: pointer;
}
.socios-area button:disabled {
  background: #aaa;
  cursor: not-allowed;
}
.socios-details {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
}
.socios-details dt {
  font-weight: 700;
}
.socios-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.socios-table-wrap {
  overflow-x: auto;
}
.socios-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.socios-table th,
.socios-table td {
  padding: 13px;
  border-bottom: 1px solid #e4e4e4;
}
.socios-table th {
  background: #111;
  color: #fff;
}
.socios-table small {
  display: block;
  color: #777;
}
.socios-error,
.socios-ok {
  padding: 14px;
  border-radius: 4px;
}
.socios-error {
  background: #ffe7e7;
  color: #900;
}
.socios-ok {
  background: #e4f7e8;
  color: #17612b;
}
.socios-points {
  font-size: 20px;
}
.socios-points strong {
  color: #e30613;
}
@media (max-width: 800px) {
  .socios-shell {
    grid-template-columns: 1fr;
  }
  .socios-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .socios-nav strong {
    width: 100%;
  }
  .socios-content {
    padding: 20px;
  }
}
@media (max-width: 560px) {
  .socios-stats,
  .socios-cards {
    grid-template-columns: 1fr;
  }
  .socios-details {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .socios-details dd {
    margin-bottom: 10px;
  }
}

/* ==========================================
   BRIGADA SOS - LOGIN DE SOCIOS
========================================== */

body:has(.socios-login) {
    background: #f4f4f4;
}

/* Contenedor principal */

.socios-login {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: calc(100vh - 150px);

    padding: 70px 20px;
    box-sizing: border-box;
}

/* Tarjeta del formulario */

.socios-login .socios-login-card {
    width: 100%;
    max-width: 480px;

    margin: 0 auto;
    padding: 45px;

    background: #ffffff;
    border-radius: 12px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);

    box-sizing: border-box;
}

/* Título */

.socios-login .socios-login-card h1,
.socios-login .socios-login-card h2 {
    margin: 0 0 15px;

    color: #111111;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;

    text-transform: uppercase;
}

/* Descripción */

.socios-login .socios-login-card > p {
    margin-bottom: 28px;

    color: #666666;
    font-size: 14px;
    line-height: 1.7;
}

/* Formulario */

.socios-login form {
    display: flex;
    flex-direction: column;
    gap: 18px;

    width: 100%;
}

/* Etiquetas */

.socios-login form label {
    display: block;

    margin-bottom: 7px;

    color: #222222;
    font-size: 13px;
    font-weight: 700;
}

/* Campos */

.socios-login form input[type="text"],
.socios-login form input[type="email"],
.socios-login form input[type="password"] {
    display: block;

    width: 100%;
    height: 48px;

    padding: 12px 15px;

    border: 1px solid #d5d5d5;
    border-radius: 5px;

    background: #ffffff;
    color: #111111;

    font-size: 14px;

    box-sizing: border-box;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Campo seleccionado */

.socios-login form input:focus {
    outline: none;

    border-color: #e30613;

    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.10);
}

/* Botón entrar */

.socios-login form button[type="submit"] {
    display: block;

    width: 100%;
    min-height: 50px;

    margin-top: 8px;
    padding: 14px 20px;

    border: none;
    border-radius: 5px;

    background: #e30613;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    transition: background 0.2s ease,
                transform 0.2s ease;
}

.socios-login form button[type="submit"]:hover {
    background: #b9000b;
    transform: translateY(-2px);
}

/* Textos inferiores */

.socios-login .socios-login-card a {
    color: #e30613;
    overflow-wrap: anywhere;
}

.socios-login .socios-login-card a:hover {
    text-decoration: underline;
}

/* Responsive */

@media (max-width: 600px) {

    .socios-login {
        min-height: auto;
        padding: 45px 15px;
    }

    .socios-login .socios-login-card {
        max-width: 100%;
        padding: 30px 22px;
    }

    .socios-login .socios-login-card h1,
    .socios-login .socios-login-card h2 {
        font-size: 26px;
    }
}

/* ==================================================
   SOCIOS - ACCESO AL ÁREA PRIVADA
================================================== */
/* ==========================================
   ACCESO SOCIOS - BARRA COMPACTA
========================================== */

.membership-private-access {
    padding: 25px 0;
    background: #f5f5f5;
}

.membership-private-access-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    width: 100%;
    height: 100px;
    padding: 0 35px;
    box-sizing: border-box;

    background: #111;
    border-left: 5px solid #e30613;
    border-radius: 8px;
}

.membership-private-access-content {
    flex: 1;
    min-width: 0;
}

.membership-private-access-content h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.membership-private-access-content p {
    margin: 0;
    color: #bbb;
    font-size: 13px;
}

.membership-private-access-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-shrink: 0;

    padding: 14px 22px;
    border-radius: 5px;

    background: #e30613;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s ease;
}

.membership-private-access-button:hover {
    background: #b9000b;
    color: #fff;
}

.membership-private-access-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* RESPONSIVE */

@media (max-width: 650px) {
    .membership-private-access-card {
        height: auto;
        min-height: 100px;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 14px;
        padding: 20px;
    }

    .membership-private-access-content h2 {
        font-size: 17px;
    }

    .membership-private-access-button {
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }
}