:root {
    --azul: #1E3A8A;
    --negro: #000000;
    --amarillo: #F2C400;
    --azul-header: #1b1c53;
    ;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ================= HEADER ================= */

header {
    background: var(--azul);
    padding: 15px 40px;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.navbar {
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 35px;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}

nav a.active {
    background: var(--amarillo);
    color: #000000;
    padding: 6px 12px;
    border-radius: 4px;
}

.cta-socio {
    border: 2px solid var(--amarillo);
    color: var(--amarillo);
    padding: 6px 16px;
    border-radius: 25px;
    font-weight: 600;
}

/* ================= HERO ================= */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;

    background:
        linear-gradient(rgba(27, 28, 83, 0.75), rgba(27, 28, 83, 0.75)),
        url("/img/hero-club2.jpg") center/cover no-repeat;

}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

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

.hero-logo {
    width: 160px;
    margin-bottom: 20px;
    margin: 0 auto 25px auto;
    display: block;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
}

.hero-logo img {
    width: 100%;
    height: auto;
    display: block;
}

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

.hero-text {
    color: #fff;
    text-align: center;
}

.hero-text h1 {
    font-size: 64px;
    font-weight: 300;
    line-height: 1.1;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.hero-text h1 span {
    font-weight: 800;
}

.hero-text p {
    color: var(--amarillo);
    margin: 20px 0 35px 0;
    font-size: 18px;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.hero-text .btn {
    display: inline-block;
    border: 2px solid #fff;
    padding: 14px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    animation: heroFadeUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

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

.hero-image {
    align-self: flex-end;
}

.hero-image img {
    max-height: 480px;
    display: block;
}

/* ================= SECCIÓN GENERAL ================= */

.section {
    background: #ffffff;
    padding: 80px 0;
}

.section h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
}

/* ================= NEWS ================= */

.news-section {
    background: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.news-section::before {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -20%;
    width: 140%;
    height: 900px;
    background: url("/img/ondas.png") center no-repeat;
    background-size: 1400px;
    opacity: 0.18;
    pointer-events: none;
}

.news-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
}

.news-container h2 {
    text-align: center;
    font-size: 40px;
    margin-bottom: 50px;
    font-weight: 700;
}

.news-card {
    min-width: 350px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    scroll-snap-align: start;
}

.news-card:hover {
    transform: translateY(-8px);
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.news-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.news-content a {
    text-decoration: none;
    font-weight: 600;
    color: #000;
}

/* ===== BOTÓN VER MÁS NOTICIAS ===== */

.news-more {
    text-align: center;
    margin-top: 50px;
}

.btn-news-more {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 30px;
    background: var(--amarillo);
    color: #000000;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-news-more:hover {
    background: var(--azul);
    color: white;
    transform: translateY(-3px);
}

/* ================= PATROCINADORES ================= */

/* ===== SECCIÓN BASE ===== */

.sponsors {
    position: relative;
    background: linear-gradient(var(--azul), #ffd000c4),
        url('bg-sponsors.jpg') center/cover no-repeat;
    padding: 50px 0 90px 0;
}

.sponsors-inner {
    max-width: 1400px;
    margin: auto;
    padding: 0 60px;
    text-align: center;
}

/* ===== TÍTULO ===== */

.sponsors-title {
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 80px;
    position: relative;
}

.sponsors-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: var(--amarillo);
    display: block;
    margin: 18px auto 0 auto;
}

/* ===== PRINCIPALES ===== */

.sponsors-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 120px;
    margin-bottom: 80px;
}

.sponsors-main img {
    max-height: 120px;
    /* mucho más grandes */
    transition: 0.3s ease;
}

/* ===== SECUNDARIOS ===== */

.sponsors-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 80px;
}

.sponsors-secondary img {
    max-height: 90px;
    opacity: 0.85;
    transition: 0.3s ease;
}

/* ===== HOVER ===== */

.sponsors-main img:hover,
.sponsors-secondary img:hover {
    transform: scale(1.08);
    opacity: 1;
}

/* Contenedor interno (nuevo) */
.sponsors-inner {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
    text-align: center;
}

/* ===== TÍTULO ===== */

.sponsors-title {
    color: #ffffff;
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 70px;
    letter-spacing: 1px;
    position: relative;
}

.sponsors-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: var(--amarillo);
    display: block;
    margin: 18px auto 0 auto;
    border-radius: 3px;
}

/* ===== LOGOS ===== */

.sponsors-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 80px;
}

.sponsors-container img {
    max-height: 60px;
    opacity: 0.85;
    transition: all 0.3s ease;
}

.sponsors-container img:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* ===== ANIMACIÓN BASE ===== */

.sponsors-main img,
.sponsors-secondary img {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Estado visible */

.sponsors-main img.visible,
.sponsors-secondary img.visible {
    opacity: 1;
    transform: translateY(0);
}

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

.footer {
    background: #eeeeee;
    padding-top: 60px;
}

.footer-top {
    text-align: center;
    padding-bottom: 50px;
}

.footer-top img {
    width: 80px;
    margin-bottom: 20px;
}

.footer-top h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s ease;
}

.social-icons a:hover {
    background: var(--amarillo);
    transform: translateY(-3px);
}

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

.footer-bottom {
    border-top: 1px solid #ddd;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
}

.footer-bottom .legal {
    display: flex;
    gap: 20px;
}

.footer-bottom a {
    color: #666;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #000;
}

/* ===== WRAPPER ===== */

.news-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 60px;
    /* espacio para las flechas */
}

/* ===== OCULTAR SCROLLBAR ===== */

.news-carousel {
    display: flex;
    gap: 30px;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

/* ===== FLECHAS ===== */

.news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--azul);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.news-arrow:hover {
    background: var(--amarillo);
    color: #000;
    transform: translateY(-50%) scale(1.08);
}

.news-arrow.prev {
    left: 10px;
    /* dentro del wrapper */
}

.news-arrow.next {
    right: 10px;
    /* dentro del wrapper */
}

/* ================= RESULTADO================= */

.results-section {
    background: #f7f7f7;
    padding: 100px 0;
}

.results-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 60px;
}

.results-container h2 {
    text-align: center;
    font-size: 40px;
    margin-bottom: 70px;
    font-weight: 700;
}

.results-grid {
    display: flex;
    gap: 30px;
}

.result-card {
    flex: 1;
    /* todas ocupan el mismo espacio */
    min-width: 0;
    /* evita desbordamientos */
    background: #f9f9f9;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.result-card:hover {
    transform: translateY(-8px);
}

.result-league {
    font-size: 13px;
    font-weight: 700;
    color: var(--azul);
    text-transform: uppercase;
    margin-bottom: 25px;
}

.result-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.team span {
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

.team img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}

.score {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    font-weight: 700;
}

.score strong {
    font-size: 40px;
}

.vs {
    font-weight: 800;
    font-size: 24px;
    color: var(--amarillo);
}

.result-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    font-size: 14px;
    color: #666;
}

.badge {
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
}

/* ESTADOS */
.result-card.victoria .badge {
    background: #d4edda;
    color: #1e7e34;
}

.result-card.derrota .badge {
    background: #f8d7da;
    color: #a71d2a;
}

.result-card.empate .badge {
    background: #ffe8cc;
    color: #cc7000;
}

.next-match {
    border: 2px solid var(--amarillo);
}

.upcoming-badge {
    background: var(--amarillo);
    color: #000;
}

/* ===== BOTÓN VER MÁS RESULTADOS ===== */

.results-more {
    text-align: center;
    margin-top: 60px;
}

.btn-results-more {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 30px;
    background: var(--amarillo);
    color: #000000;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-results-more:hover {
    background: var(--azul);
    color: #ffffff;
    transform: translateY(-3px);
}


/* !================= Pagina Noticias================= */

/* ===== HERO INTERNO ===== */
.page-hero {
    color: #fff;
    padding: 100px 0 80px 0;
    text-align: center;
    background:
        linear-gradient(rgba(27, 28, 83, 0.75), rgba(27, 28, 83, 0.75)),
        url("/img/hero-club2.jpg") center/cover no-repeat;
}

.page-hero-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;
}

.page-hero h1 {
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 15px;
}

.page-hero p {
    font-size: 18px;
    color: var(--amarillo);
    opacity: 0.85;
}

.news-page {
    background: #f7f7f7;
    padding: 100px 0;
}

.news-page-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 60px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.news-category {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== COLORES POR CATEGORÍA ===== */

.news-category.club {
    background: var(--amarillo);
    color: #000000;
}

.news-category.cantera {
    background: rgb(190, 19, 19);
    color: white;
}

.news-category.masculino {
    background: #273e5f;
    color: #fff;
}

.news-category.femenino {
    background: #ec4899;
    color: #fff;
}


/* ?===== El Club ===== */
.institutional-hero {
    position: relative;
    background: #1b1c53;
    color: #fff;
    padding: 120px 0 80px 0;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

/* Logo difuminado */

.institutional-hero::before {
    content: "";
    position: absolute;
    background: url('/img/logoUrola.png') no-repeat center;
    background-size: 420px;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.08;
    filter: blur(3px);
    pointer-events: none;
    z-index: 0;
}

.institutional-hero-container {
    max-width: 1000px;
    margin: auto;
    padding: 0 40px;
}

.institutional-hero h1 {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 15px;
}

.club-sections {
    padding: 80px 20px;
    background: #f4f6f9;
}

.club-sections-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
}

.section-card {
    background: white;
    padding: 40px 25px;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.8s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

.section-card:nth-child(1) {
    animation-delay: 0.2s;
}

.section-card:nth-child(2) {
    animation-delay: 0.4s;
}

.section-card:nth-child(3) {
    animation-delay: 0.6s;
}

.section-card:nth-child(4) {
    animation-delay: 0.8s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-card i {
    font-size: 40px;
    margin-bottom: 20px;
    color: var(--azul);
    /* color corporativo */
}

.section-card h3 {
    margin-bottom: 15px;
}

.section-card p {
    font-size: 14px;
    margin-bottom: 25px;
    color: #666;
}

.section-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.card-btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--amarillo);
    color: #000000;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.card-btn:hover {
    color: white;
    background: var(--azul);
}

.club-stats {
    background: var(--amarillo);
    color: var(--azul);
    padding: 70px 20px;
    text-align: center;
}

.stats-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.stat-item h3 {
    font-size: 42px;
    margin-bottom: 10px;
}

.stat-item p {
    font-weight: 500;
    opacity: 0.9;
}

/* ================= pagina Junta Directiva ================= */

/* HERO */
.board-hero {
    color: #fff;
    padding: 120px 0 80px 0;
    text-align: center;
    background:
        linear-gradient(rgba(27, 28, 83, 0.75), rgba(27, 28, 83, 0.75)),
        url("/img/hero-club2.jpg") center/cover no-repeat;
}

.board-hero-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 40px;
}

.board-hero h1 {
    font-size: 48px;
    font-weight: 800;
}


/* SECCIÓN PRINCIPAL */

.board-section {
    padding: 120px 0;
    background: #f7f7f7;
    position: relative;
    overflow: hidden;
}

.board-section::before {
    content: "";
    position: absolute;
    top: -1300px;
    left: -50%;
    width: 200%;
    height: 3500px;

    background: url("/img/ondas.png") center no-repeat;
    background-size: 1400px;

    opacity: 0.10;

    pointer-events: none;
    z-index: 0;
}

.board-section::after {
    content: "";
    position: absolute;
    bottom: -605px;
    right: -26.3%;
    width: 150%;
    height: 900px;

    background: url("/img/ondas2.png") center no-repeat;
    background-size: 1400px;

    opacity: 0.10;

    /* invierte verticalmente para que suba */
    transform: scaleY(-1);

    pointer-events: none;
    z-index: 0;
}

/* TÍTULO SECCIÓN (FUERA DEL GRID) */

.board-title {

    text-align: center;
    font-size: 32px;
    margin-bottom: 100px;
    position: relative;
}

.board-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: var(--amarillo);
    margin: 20px auto 0 auto;
    border-radius: 2px;
}


/* LAYOUT PRINCIPAL */

.board-layout {
    width: 92%;
    max-width: 1700px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    position: relative;
    z-index: 1;
}


/* ===== ASIDE PRESIDENTE ESTILO UNIFICADO ===== */

.board-aside {
    background: #fff;
    padding: 70px 60px;
    border-radius: 20px;
    border-top: 5px solid var(--azul);
    position: sticky;
    top: 140px;
    transition: 0.3s ease;
}

/* Línea amarilla inferior */

.board-aside::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--amarillo);
    border-radius: 0 0 20px 20px;
}

.board-aside img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 25px;
    display: block;
}

.board-aside h3 {
    margin-bottom: 25px;
    font-size: 22px;
}

.board-aside p {
    font-size: 17px;
    line-height: 1.9;
}


/* ===== JUNTA ===== */


/* GRID TARJETAS */

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    align-items: stretch;
    overflow-x: hidden;
}


/* CARDS */

.board-card {
    width: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border-top: 4px solid var(--azul);
    position: relative;
    transition: 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.board-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--amarillo);
    border-radius: 0 0 20px 20px;
}

.board-card:hover {
    transform: translateY(-8px);
}

.board-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 18px;
}

.board-card h4 {
    font-size: 17px;
    margin-bottom: 8px;
}

.board-card span {
    font-size: 14px;
    font-weight: 600;
    color: var(--azul);
}

.board-roles {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.board-roles span {
    font-size: 13px;
    font-weight: 600;
    color: var(--azul);
}

/* INFO PRESIDENTE*/

.president-info {
    margin-bottom: 25px;
}

.president-info h4 {
    font-size: 18px;
    margin-bottom: 6px;
}

.president-info span {
    font-size: 14px;
    font-weight: 600;
    color: var(--azul);
}

/* ===============================
        SECCIÓN HISTORIA
================================ */

.history-section {
    padding: 80px 20px;
}

.history-layout {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 70px;
}


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

.history-content {
    font-size: 17px;
    line-height: 1.9;
}

/* párrafos más separados */

.history-content p {
    margin-bottom: 22px;
}

/* título logros */

.history-content h3 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 22px;
}

/* lista logros */

.history-content ul {
    padding-left: 20px;
}

.history-content li {
    margin-bottom: 12px;
}


/* ===============================
        JUGADORES DESTACADOS
================================ */

.history-players {
    padding: 40px 30px;
    max-width: 360px;
    margin: auto;
}


/* ===== TÍTULO ===== */

.history-players h3 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 40px;
    position: relative;
}

.history-players h3::after {
    content: "";
    width: 60px;
    height: 3px;
    background: var(--amarillo);
    display: block;
    margin: 14px auto 0 auto;
    border-radius: 3px;
}


/* ===== GRID ===== */

.players-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* ===============================
        FICHA JUGADOR
================================ */

.player-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    background: #ffffff;
    padding: 14px 16px;

    border-radius: 8px;
    border: 1px solid #ececec;
}


/* nombre */

.player-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}


/* ===============================
            TAGS
================================ */

.player-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* estado */

.player-status {
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
}

.player-status.activo {
    background: #d4edda;
    color: #1e7e34;
}

.player-status.formador {
    background: #e6f0ff;
    color: #1a4fb5;
}

.player-status.retirado {
    background: #e9ecef;
    color: #555;
}


/* equipo */

.player-team {
    background: #e07b15;
    color: white;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11px;
}


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

@media (max-width:900px) {

    .history-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

}

/* ===== EQUIPO ===== */

.player-team {
    background: #da6f0a;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
}

/* ?=================================
                Valores
======================================= */
/* HERO */

.values-hero {
    color: #fff;
    padding: 120px 0 80px;
    text-align: center;
    background:
        linear-gradient(rgba(27, 28, 83, 0.75), rgba(27, 28, 83, 0.75)),
        url("/img/hero-club2.jpg") center/cover no-repeat;
}

.values-hero-container {
    max-width: 900px;
    margin: auto;
    padding: 0 40px;
}

.values-hero h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
}

.values-hero p {
    font-size: 18px;
    opacity: 0.9;
}


/* CONTENEDOR GENERAL */

.values-container {
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}


/* INTRO */

.values-intro {
    padding: 80px 0;
    background: #f7f7f7;
    ;
    text-align: center;
}

.values-intro::before {
    content: "";
    position: absolute;

    bottom: -190px;
    right: -58.3%;

    width: 140%;
    height: 800px;

    background: url("/img/ondas2.png") no-repeat;
    background-size: 1400px;

    opacity: 0.10;

    /* CLAVE */
    transform: scaleY(-1);

    pointer-events: none;
    z-index: 0;
}

.values-intro p {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
    line-height: 1.7;
    color: #444;
}


/* GRID VALORES */

.values-section {
    padding: 100px 0;
    background: #f7f7f7;
    position: relative;
    overflow: hidden;
}

.values-section::before {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -16%;
    width: 140%;
    height: 900px;

    background: url("/img/ondas.png") center no-repeat;
    background-size: 1400px;

    opacity: 0.10;
    pointer-events: none;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}


/* CARDS */

.value-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border-top: 4px solid var(--azul);
    position: relative;
    transition: 0.3s ease;

}

.value-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--amarillo);
    border-radius: 0 0 20px 20px;
}

.value-card:hover {
    transform: translateY(-8px);
}

.value-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.value-icon img {
    font-size: 40px;
    height: 70px;
    width: 70;
}

.value-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.value-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}


/* FRASE */

.values-quote {
    padding: 100px 0;
    background: #1b1c53;
    color: #fff;
    text-align: center;
}

.values-quote blockquote {
    font-size: 28px;
    font-style: italic;
    max-width: 800px;
    margin: auto;
}


/* CTA */

.values-cta {
    padding: 100px 0;
    background: #ffffff;
    text-align: center;
}

.values-cta h2 {
    margin-bottom: 30px;
}

.btn-join {
    display: inline-block;
    padding: 16px 50px;
    background: var(--amarillo);
    border-radius: 30px;
    text-decoration: none;
    color: black;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-join:hover {
    background: var(--azul);
    color: white;
}

/* ?===================== Patrocinadores y Colaboradores ==================== */

.partners-section {
    padding: 120px 0;
    background: #f7f7f7;
    position: relative;
    overflow: hidden;
}

/* ondas fondo */

.partners-section::before {
    content: "";
    position: absolute;
    top: -770px;
    left: -20%;
    width: 145%;
    height: 2500px;

    background: url("/img/ondas.png") center no-repeat;
    background-size: 1400px;

    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.partners-section::after {
    content: "";
    position: absolute;
    bottom: -760px;
    right: -24%;
    width: 145%;
    height: 2500px;

    background: url("/img/ondas2.png") center no-repeat;
    background-size: 1400px;

    opacity: 0.18;
    transform: scaleX(-1);
    /* invierte las ondas */

    pointer-events: none;
    z-index: 0;
}

.partners-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
    z-index: 1;
}


/* TITULO */

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 80px;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: var(--amarillo);
    margin: 18px auto 0;
    border-radius: 2px;
}


/* GRID PATROCINADORES */

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 120px;
    align-items: center;
    justify-items: center;
    margin-bottom: 140px;
}


/* GRID COLABORADORES */

.collaborators-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 60px 80px;
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 1;
}


/* CONTENEDOR LOGO */

.partner-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 120px;
    transition: 0.3s ease;
    overflow: hidden;
}


/* LOGO */

.partner-card img {
    max-width: 180px;
    max-height: 90px;
    object-fit: contain;
    transition: 0.25s ease;
    opacity: 0.75;
}


/* HOVER LOGO */

.partner-card:hover img {
    opacity: 1;
    transform: scale(1.05);
}


/* INFO DEL PATROCINADOR */

.partner-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: var(--amarillo);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 10px;

    color: black;
    font-size: 13px;

    opacity: 0;
    transition: 0.3s ease;
    transform: translateY(100%);
}


/* APARECE AL HOVER */

.partner-card:hover .partner-info {
    transform: translateY(0);
    opacity: 1;
}


/* COLABORADORES (más pequeños) */

.collaborator img {
    max-width: 120px;
    max-height: 70px;
}

/* RESPONSIVE */

@media(max-width:900px) {

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

}

@media(max-width:600px) {

    .values-grid {
        grid-template-columns: 1fr;
    }

}

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

@media (max-width: 1200px) {

    .board-layout {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .board-aside {
        position: relative;
        top: auto;
    }

}

@media (max-width: 900px) {

    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

}

@media (max-width: 600px) {

    .board-grid {
        grid-template-columns: 1fr;
    }

}

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

@media (max-width: 1200px) {

    .board-layout {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .board-aside {
        position: relative;
        top: auto;
    }

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

@media (max-width: 700px) {

    .board-grid {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 1200px) {

    .board-layout {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .board-aside {
        position: relative;
        top: auto;
    }

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

@media (max-width: 700px) {

    .board-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 1100px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1300px) {
    .results-grid {
        flex-wrap: wrap;
    }

    .result-card {
        flex: 1 1 calc(50% - 40px);
    }
}

@media (max-width: 700px) {
    .result-card {
        flex: 1 1 100%;
    }
}

@media (max-width: 1100px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 220px;
    }

    .hero-logo {
        left: 50%;
        transform: translateX(-50%);
    }

    .hero-text h1 {
        font-size: 48px;
    }

    .hero-image {
        margin-top: 50px;
    }

    nav ul {
        gap: 20px;
    }
}
/* --- RESTAURADO: CABECERA, DROPDOWN Y BOTONES --- */
.cta-directo {
    background-color: #e53935 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 20px;
    font-weight: bold !important;
    text-transform: uppercase;
    transition: background 0.3s;
}
.cta-directo:hover {
    background-color: #d32f2f !important;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--azul);
    min-width: 260px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    z-index: 100;
    border-radius: 4px;
    overflow: hidden;
    padding: 10px 0;
}
.dropdown-content a {
    color: white !important;
    padding: 10px 20px !important;
    text-decoration: none;
    display: block;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.2s;
}
.dropdown-content a:hover, .dropdown-content a.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--amarillo) !important;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown > a::after {
    content: " \f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    margin-left: 5px;
}
.dropdown:hover > a::after {
    content: " \f106";
}

/* --- RESTAURADO: ETIQUETAS DE NOTICIAS --- */
.cat-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    margin-right: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.cat-cantera { background-color: #d32f2f; }
.cat-club { background-color: #fbc02d; color: black; }
.cat-masculino { background-color: #1976d2; }
.cat-femenino { background-color: #8e24aa; }
.cat-default { background-color: var(--azul); }

/* --- RESTAURADO: LAYOUT DE EQUIPOS --- */
.equipo-hero {
    background: var(--azul);
    color: white;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 40px;
}
.equipo-hero h1 { font-size: 40px; margin-bottom: 10px; }
.equipo-hero p { color: var(--amarillo); font-size: 18px; }

.equipo-layout {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px 80px 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .equipo-layout {
        grid-template-columns: 1fr;
    }
}
.equipo-sidebar {
    position: sticky;
    top: 20px;
}
.equipo-sponsor-block {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.equipo-sponsor-block img {
    max-width: 80px;
    max-height: 80px;
}
.equipo-sidebar h3 {
    font-size: 16px;
    color: var(--azul);
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: bold;
}
.equipo-staff-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.equipo-staff-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--amarillo);
}
.staff-info h4 { margin: 0 0 4px 0; font-size: 15px; }
.staff-info p { margin: 0 0 2px 0; font-size: 13px; color: #666; }
.staff-info a { color: #d62976; font-size: 12px; text-decoration: none; }

.jugadores-header-card {
    background: var(--azul);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jugadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.jugador-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-top: 5px solid var(--azul);
    border-bottom: 5px solid var(--amarillo);
    position: relative;
    text-align: center;
    padding-bottom: 15px;
}
.jugador-dorsal {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: var(--amarillo);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
}
.jugador-foto {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #f4f4f4;
}
.jugador-info h4 {
    margin: 15px 0 5px 0;
    font-size: 14px;
    padding: 0 10px;
}
.jugador-info p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* --- FIXED: LAYOUT DE EQUIPOS CON CLASES DE EQUIPO.JS --- */
.eq-layout {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px 80px 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .eq-layout {
        grid-template-columns: 1fr;
    }
}
.eq-sidebar {
    position: sticky;
    top: 20px;
}
.eq-team-name-block {
    margin-bottom: 20px;
}
.eq-team-name {
    font-size: 32px;
    color: var(--azul);
    line-height: 1.2;
}
.eq-team-sponsor-badge {
    max-height: 60px;
    margin-top: 10px;
}
.eq-sponsor-block {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.eq-sponsor-logo {
    max-width: 80px;
    max-height: 80px;
}
.eq-sponsor-label {
    display: block;
    font-size: 12px;
    color: #999;
}
.eq-sponsor-name {
    font-size: 16px;
    font-weight: bold;
}
.eq-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.eq-section-title {
    font-size: 16px;
    color: var(--azul);
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
}
.eq-staff-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.eq-staff-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--amarillo);
}
.eq-staff-info strong { display: block; font-size: 15px; margin-bottom: 2px; }
.eq-staff-cargo { display: block; font-size: 13px; color: #666; margin-bottom: 2px; }
.eq-staff-ig { color: #d62976; font-size: 12px; text-decoration: none; }

.eq-jugadores-header {
    background: var(--azul);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.player-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-top: 5px solid var(--azul);
    border-bottom: 5px solid var(--amarillo);
    position: relative;
    text-align: center;
    padding-bottom: 15px;
}
.player-img {
    position: relative;
}
.player-dorsal {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: var(--amarillo);
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
}
.player-img img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #f4f4f4;
}
.player-info h3 {
    margin: 15px 0 5px 0;
    font-size: 14px;
    padding: 0 10px;
}
.player-juvenil {
    display: block;
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* ============================================================
   MOBILE RESPONSIVENESS & HAMBURGER MENU 
   ============================================================ */

/* Hamburger menu button */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 999999;
}
.nav-hamburger span {
    width: 30px;
    height: 3px;
    background-color: var(--amarillo);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}
.nav-hamburger.is-open span:first-child {
    transform: rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}
.nav-hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .nav-hamburger {
        display: flex;
        margin-left: auto;
    }

    header nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 350px;
        height: 100vh;
        background: rgba(27, 28, 83, 0.98);
        backdrop-filter: blur(10px);
        padding-top: 80px;
        transition: right 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }
    header nav.is-open {
        right: 0;
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 30px;
    }

    header nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    header nav ul li a {
        display: block;
        padding: 15px 0;
        font-size: 18px;
    }

    header nav ul li.dropdown .dropdown-content {
        position: static;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
        padding: 0 15px;
        background: rgba(0,0,0,0.15);
    }
    header nav ul li.dropdown.active .dropdown-content {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: 10px 15px;
    }

    header {
        padding: 15px 20px;
    }
    .navbar {
        align-items: center;
    }
    .logo img {
        height: 40px;
    }
    
    .hero h1 {
        font-size: 36px;
    }
    .hero p {
        font-size: 16px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    .footer-top, .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }
}

/* ---- Player cards inside equipo layout: compact grid ---- */
.eq-players-area .player-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.eq-players-area .player-card {
    max-width: 100%;
}
.eq-players-area .player-img {
    height: 190px;
}
.eq-players-area .player-info h3 {
    font-size: 13px;
    line-height: 1.3;
}
.eq-players-area .player-dorsal {
    width: 34px;
    height: 34px;
    font-size: 15px;
    top: 10px;
    left: 10px;
}
.eq-players-area .player-juvenil {
    font-size: 11px;
}
@media (max-width: 900px) {
    .eq-players-area .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* Ensure anchor news cards do not have link formatting */
.news-card {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}


/* === Category pills: always inline in a row === */
.news-content .cat-pill,
.post-hero-container .cat-pill {
    display: inline-block;
}

/* Wrap container so pills sit in a row */
.news-card .news-content,
a.news-card .news-content {
    /* already flex column — add a pills row wrapper via JS or force inline on pills */
}

/* Force pills row in all contexts */
.cat-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

/* ==========================================================
   CAROUSEL FIX — arrows spaced, cards with rich style
   ========================================================== */

.news-section {
    padding: 80px 0;
    background: var(--fondo, #f5f5f8);
}

/* ==========================================================
   MOBILE DEVICES (max-width: 768px)
   ========================================================== */

@media (max-width: 768px) {
    /* ==== HERO ==== */
    .hero {
        min-height: 50vh;
    }
    .hero-container {
        padding: 60px 20px 40px 20px;
    }
    .hero-text h1 {
        font-size: 32px !important;
    }
    .hero-text p {
        font-size: 15px !important;
        margin: 15px 0 25px 0;
    }
    .hero-logo {
        width: 100px;
    }
    .hero-image img {
        max-height: 250px;
    }
    .page-hero h1 {
        font-size: 36px;
    }
    .board-hero h1,
    .values-hero h1,
    .equipo-hero h1 {
        font-size: 32px;
    }

    /* ==== RESULTS GRID ==== */
    .results-grid {
        flex-direction: column;
        gap: 20px;
    }
    .result-card {
        padding: 20px;
        box-sizing: border-box;
    }
    .result-match {
        gap: 10px;
    }
    .team {
        width: 92px;
    }
    .team img {
        width: 50px;
        height: 50px;
    }
    .team span {
        font-size: 12px;
    }
    .score strong {
        font-size: 28px;
    }
    .score {
        font-size: 20px;
    }

    /* ==== SECTIONS COMMON ==== */
    .section, .news-section, .sponsors, .results-section, .footer, .history-section, .partners-section {
        padding: 50px 0;
    }
    .sponsors-main, .sponsors-secondary {
        gap: 30px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .sponsors-grid, .collaborators-grid {
        gap: 30px;
    }
    .sponsors-grid {
        grid-template-columns: 1fr;
    }
    .collaborators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-wrapper {
        padding: 0 30px;
    }
    .news-card {
        min-width: 280px;
    }

    /* ==== CLUB & VALUES ==== */
    .club-sections-container {
        grid-template-columns: 1fr;
    }
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* ==== BOARD ==== */
    .board-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .board-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ==== NEWS GRID ==== */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* ==== HEADER / NAV MENU FIXES ==== */
    header nav {
        width: 100%;
        max-width: none;
        z-index: 99999 !important;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100vw;
        left: auto;
    }
    header nav.is-open {
        right: 0 !important;
    }
    header nav ul {
        padding: 0 20px;
    }
    .cta-socio, .cta-directo {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .dropdown-content {
        min-width: 100%;
    }
}

.news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-container h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
}

.news-wrapper {
    position: relative;
    overflow: hidden;
    /* Add space on both sides so arrows don't overlap cards */
    padding: 0 70px;
}

.news-carousel {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Cards inside carousel - fixed width so they look consistent */
.news-carousel .news-card {
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 3px solid var(--amarillo, #f5c518);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-carousel .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.13);
}
.news-carousel .news-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.news-carousel .news-card .news-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
}
.news-carousel .news-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 4px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-carousel .news-card p {
    font-size: 13px;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-carousel .news-card .read-more {
    display: inline-block;
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--azul, #1b1c53);
}
.news-carousel .news-card:hover .read-more {
    color: var(--amarillo, #f5c518);
}

/* Arrows — well spaced outside the cards */
.news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: var(--azul, #1b1c53);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.news-arrow:hover {
    background: var(--amarillo, #f5c518);
    color: #000;
    transform: translateY(-50%) scale(1.1);
}
.news-arrow.prev { left: 8px; }
.news-arrow.next { right: 8px; }

.news-more {
    text-align: center;
    margin-top: 36px;
}

/* ==========================================================
   FULL MOBILE OPTIMIZATION — All pages
   ========================================================== */

@media (max-width: 900px) {
    /* === Global === */
    .news-wrapper {
        padding: 0 52px;
    }
    .news-carousel .news-card {
        min-width: 260px;
        max-width: 260px;
    }

    /* === Hero === */
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 15px; }
    .hero-container { flex-direction: column; gap: 20px; }
    .hero-text { text-align: center; }

    /* === Nav === */
    header .navbar { flex-wrap: wrap; }

    /* === Board === */
    .board-layout { grid-template-columns: 1fr; }
    .board-grid { grid-template-columns: repeat(2, 1fr); }

    /* === Values === */
    .values-grid { grid-template-columns: repeat(2, 1fr); }

    /* === News Section === */
    .news-container h2 { font-size: 28px; }

    /* === Results === */
    .results-grid { grid-template-columns: repeat(2, 1fr); }

    /* === Sponsors === */
    .sponsors-grid { grid-template-columns: repeat(2, 1fr); }

    /* === elClub section === */
    .about-grid, .about-layout { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* === Equipo layout === */
    .eq-layout { grid-template-columns: 1fr; }
    .eq-sidebar { position: static; }
}

@media (max-width: 600px) {
    /* === Global === */
    body { font-size: 15px; }

    .news-wrapper {
        padding: 0 44px;
    }
    .news-carousel .news-card {
        min-width: 230px;
        max-width: 230px;
    }
    .news-carousel .news-card .news-content { padding: 14px; }
    .news-carousel .news-card h3 { font-size: 13px; }
    .news-arrow { width: 38px; height: 38px; font-size: 13px; }

    /* Hero */
    .hero { padding: 60px 20px; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 14px; }

    /* Sections */
    .news-section { padding: 50px 0; }
    .results-section { padding: 50px 0; }
    .news-container h2 { font-size: 24px; }

    /* Board */
    .board-grid { grid-template-columns: 1fr; }
    .board-aside img { max-height: 280px; }

    /* Values */
    .values-grid { grid-template-columns: 1fr; }
    .value-icon img { width: 60px; height: 60px; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Equipo players */
    .eq-players-area .player-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .eq-players-area .player-img { height: 140px; }

    /* Post article */
    .post-hero h1 { font-size: 26px; }
    .post-layout { padding: 30px 16px; gap: 30px; }

    /* Patrocinadores */
    .sponsors-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer-top { flex-direction: column; align-items: center; gap: 16px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .footer-bottom .legal { flex-direction: column; gap: 6px; text-align: center; }

    /* Buttons */
    .btn, .btn-join { padding: 12px 24px; font-size: 14px; }

    /* Results grid */
    .results-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .news-carousel .news-card {
        min-width: 200px;
        max-width: 200px;
    }
    .hero h1 { font-size: 22px; }
    .eq-players-area .player-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================
   OFERFLOW Y TÍTULOS GRANDES EN MOVIL
======================================= */
body {
    overflow-x: hidden; /* Fix for sticky break */
}

@media (max-width: 768px) {
    /* Evitar que los títulos rompan el ancho de pantalla */
    h1, .page-hero h1, .values-hero h1, .board-hero h1, .equipo-hero h1, .sponsors-title, .section-title {
        font-size: 28px !important;
        word-break: break-word;
        hyphens: auto;
    }
    .sponsors-title {
        margin-bottom: 40px;
    }
    .values-hero p, .page-hero p {
        font-size: 15px;
    }

    /* Reducir gap y ancho fijo que causa empuje horizontal */
    .partner-card {
        width: 100% !important; /* Que ocupe el ancho de su columna flex/grid */
        max-width: 160px; /* Limite de tamaño */
        height: auto !important;
        min-height: 80px;
        margin: 0 auto;
    }
    .partner-card img {
        max-width: 100% !important;
        max-height: 70px !important;
    }
    
    .collaborators-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 10px !important;
    }
    .sponsors-grid {
        grid-template-columns: 1fr, 1fr !important;
        gap: 30px !important;
    }
    .sponsors-main img {
        max-width: 100% !important;
        max-height: 80px !important;
        height: auto;
    }
    .sponsors-secondary img {
        max-width: 80% !important;
        max-height: 60px !important;
    }
    .sponsors-inner, .partners-container, .results-container, .history-layout, .history-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .section, .news-section, .sponsors, .results-section, .footer, .history-section, .partners-section {
        padding: 50px 15px !important;
        box-sizing: border-box;
    }
    .results-grid {
        gap: 15px !important;
    }
}

/* COOKIE BANNER */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 25px;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    border-top: 4px solid var(--amarillo);
    flex-wrap: wrap; /* for mobile */
}

.cookie-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--azul);
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

.cookie-content a {
    color: var(--azul);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--azul);
    color: var(--azul);
}
.btn-outline:hover {
    background: var(--azul);
    color: #fff;
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .cookie-actions {
        width: 100%;
        justify-content: center;
    }
}

/* WAVES PARA EQUIPO.HTML */
#equipo-root {
    position: relative;
    overflow: hidden; /* optional unless it crops layout */
}
#equipo-root::before {
    content: "";
    position: absolute;
    top: 50px;
    left: -20%;
    width: 140%;
    height: 1000px;
    background: url("/img/ondas.png") center no-repeat;
    background-size: 1400px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.eq-layout {
    position: relative;
    z-index: 1;
}

/* FIX EQUIPO PLAYERS CARDS & MOBILE RESPONSE */
.eq-players-area .player-card {
    padding: 0 !important;
    gap: 0 !important;
    display: flex;
    flex-direction: column;
}
.eq-players-area .player-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4/5;
    background: #f9f9f9;
}
.eq-players-area .player-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
    background: transparent !important;
}
/* For generic shield fallback, keep contain */
.eq-players-area .player-img img[src*="logoUrola"] {
    object-fit: contain !important;
    padding: 20px;
}
.eq-players-area .player-info {
    padding: 12px 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eq-players-area .player-info h3 {
    font-size: 14px !important;
    margin: 0 0 4px 0 !important;
    word-break: break-word;
}
.eq-players-area .player-juvenil {
    font-size: 11px !important;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}
.eq-players-area .player-dorsal {
    top: 8px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@media (max-width: 600px) {
    .eq-players-area .player-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}
@media (max-width: 380px) {
    .eq-players-area .player-grid {
        grid-template-columns: 1fr !important;
    }
}