@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

:root {
    --color-white: #ffffff;
    --color-white-dark: #f2f2f2;
    --color-gray: #6c757d;
    --color-gray-dark: #495057;
    --color-black: #000000;
    --color-green: #007ac8;
    --color-green-dark: #007ac8;
    --color-orange: #f54e2c;
    --fuente-principal: 'Montserrat', sans-serif;
    --fuente-secundaria: 'Bebas Neue', cursive;
    --container-max: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:var(--fuente-principal); }

body { background:var(--color-white); min-height:100vh; display:flex; flex-direction:column; color:var(--color-black); }

.header { background:var(--color-white); border-bottom:3px solid var(--color-green); position:sticky; top:0; z-index:1100; box-shadow:0 2px 10px rgba(0,0,0,0.06); }

.navbar { max-width:var(--container-max); margin:0 auto; height:80px; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-direction:row; flex-wrap:nowrap; position:relative; }

.logo-container { display:flex; align-items:center; gap:0.8rem; flex-shrink:0; }
.logo { width:58px; height:58px; border-radius:50%; overflow:hidden; border:3px solid var(--color-green); display:flex; align-items:center; justify-content:center; transition:transform .45s ease; flex-shrink:0; }
.logo img { width:100%; height:100%; object-fit:cover; display:block; }
.logo:hover { transform:rotate(360deg) scale(1.1); }
.club-name { font-family:var(--fuente-secundaria); font-size:1.6rem; color:var(--color-black); letter-spacing:1px; white-space:nowrap; }

.nav-links { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.nav-links a { text-decoration:none; font-weight:600; font-size:0.95rem; padding:0.75rem 1.5rem; border-radius:25px; color:var(--color-black); text-transform:uppercase; display:flex; align-items:center; justify-content:center; min-width:120px; height:45px; transition:background-color 0.3s ease,color 0.3s ease,box-shadow 0.3s ease; white-space:nowrap; }
.nav-links a:hover { background:rgba(245,78,44,0.12); color:var(--color-orange); }
.nav-links a.active { background:var(--color-orange); color:var(--color-white); box-shadow:0 4px 14px rgba(245,78,44,0.35); }

.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:4px; border-radius:8px; transition:background 0.2s ease; flex-shrink:0; }
.hamburger:hover { background:rgba(0,0,0,0.06); }
.hamburger span { display:block; width:24px; height:2.5px; background:var(--color-gray); border-radius:2px; transition:transform 0.3s ease,opacity 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* SECCIONES */
.sobre-nosotros { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; max-width:var(--container-max); margin:0 auto; padding:5rem 2rem; }
.texto-sobre h1 { font-family:var(--fuente-secundaria); font-size:3.5rem; color:var(--color-green-dark); letter-spacing:1px; line-height:1.1; margin-bottom:1.5rem; }
.texto-sobre p { font-size:1.1rem; color:var(--color-gray-dark); line-height:1.8; }
.img-sobre { border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.15); border:4px solid var(--color-green); height:380px; }
.img-sobre img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.img-sobre:hover img { transform:scale(1.04); }

.mision { background:var(--color-white-dark); padding:5rem 2rem; }
.mision-invertida { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; max-width:var(--container-max); margin:0 auto; }
.mision-invertida .contenido-mision { order:1; }
.mision-invertida .img-mision { order:2; }
.contenido-mision h2 { font-family:var(--fuente-secundaria); font-size:2.5rem; color:var(--color-green-dark); letter-spacing:1px; line-height:1.15; margin-bottom:1.2rem; border-left:5px solid var(--color-orange); padding-left:1rem; }
.contenido-mision p { font-size:1.05rem; color:var(--color-gray-dark); line-height:1.8; }
.img-mision { border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.15); border:4px solid var(--color-green); height:360px; }
.img-mision img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.img-mision:hover img { transform:scale(1.04); }

.historia { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; max-width:var(--container-max); margin:0 auto; padding:5rem 2rem; }
.texto-historia h3 { font-family:var(--fuente-secundaria); font-size:2.5rem; color:var(--color-green-dark); letter-spacing:1px; margin-bottom:1.2rem; border-left:5px solid var(--color-orange); padding-left:1rem; }
.texto-historia p { font-size:1.05rem; color:var(--color-gray-dark); line-height:1.8; }
.img-historia { border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.15); border:4px solid var(--color-green); height:360px; }
.img-historia img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.img-historia:hover img { transform:scale(1.04); }

@media (max-width:768px) {
    .hamburger { display:flex; }
    .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0.3rem; padding:0.75rem 1rem 1rem; background:var(--color-white); border-top:3px solid var(--color-green); box-shadow:0 8px 20px rgba(0,0,0,0.12); z-index:999; }
    .nav-links.open { display:flex; }
    .nav-links a { width:100%; min-width:unset; height:48px; border-radius:10px; font-size:0.95rem; padding:0 1rem; justify-content:flex-start; }
    .navbar { height:70px; padding:0 1rem; }
    .logo { width:50px; height:50px; }
    .club-name { font-size:1.3rem; }
    .sobre-nosotros, .mision-invertida, .historia { grid-template-columns:1fr; padding:3rem 1.5rem; gap:2rem; }
    .mision { padding:3rem 1.5rem; }
    .mision-invertida .img-mision { order:1; }
    .mision-invertida .contenido-mision { order:2; }
    .texto-sobre h1 { font-size:2.5rem; }
    .contenido-mision h2, .texto-historia h3 { font-size:2rem; }
    .img-sobre, .img-mision, .img-historia { height:260px; }
}

@media (max-width:480px) {
    .navbar { height:60px; }
    .logo { width:42px; height:42px; }
    .club-name { font-size:1.1rem; }
    .texto-sobre h1 { font-size:2rem; }
    .contenido-mision h2, .texto-historia h3 { font-size:1.7rem; }
    .img-sobre, .img-mision, .img-historia { height:220px; }
}