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

html{
scroll-behavior:smooth;
}

:root{

--gold:#d4af37;
--blue:#071223;
--blue2:#0f1f38;
--white:#ffffff;

}

body{

background:var(--blue);

color:white;

overflow-x:hidden;

}

.container{

max-width:1400px;

margin:auto;

padding:0 30px;

}

img{

max-width:100%;

display:block;

}

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

header{

position:fixed;

top:0;
left:0;

width:100%;

height:90px;

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

backdrop-filter:blur(10px);

z-index:9999;

border-bottom:1px solid rgba(212,175,55,.3);

}

.navbar{

height:100%;

display:flex;

justify-content:space-between;

align-items:center;

max-width:1400px;

margin:auto;

padding:0 30px;

}

.logo-container{

display:flex;

align-items:center;

gap:15px;

}

.logo{

width:70px;

height:70px;

object-fit:cover;

border-radius:50%;

border:3px solid var(--gold);

}

.logo-info h2{

color:var(--gold);

font-size:1.5rem;

letter-spacing:6px;

}

.logo-info p{

font-size:.8rem;

letter-spacing:4px;

}

.menu{

display:flex;

gap:25px;

list-style:none;

}

.menu a{

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

}

.menu a:hover{

color:var(--gold);

}

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

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

width:100%;
height:100%;

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

}

.hero-content{

position:relative;

z-index:10;

text-align:center;

max-width:1000px;

padding:20px;

}

.hero-content h1{

font-size:6rem;

color:var(--gold);

letter-spacing:15px;

margin-bottom:20px;

}

.hero-content h2{

font-size:2rem;

margin-bottom:20px;

}

.hero-content p{

font-size:1.2rem;

margin-bottom:35px;

}

/* BOTONES */

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:15px 35px;

border-radius:50px;

font-weight:bold;

text-decoration:none;

transition:.3s;

}

.btn-gold{

background:var(--gold);

color:black;

}

.btn-outline{

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

color:var(--gold);

}

.btn-white{

background:white;

color:black;

}

.btn:hover{

transform:translateY(-5px);

}

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

.historia{

padding:100px 0;

background:#08172a;

}

.historia h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:30px;

}

.historia p{

max-width:900px;

margin:auto;

text-align:center;

line-height:2;

font-size:1.1rem;

}

.historia-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:50px;

}

.historia-card{

background:var(--blue2);

border-radius:20px;

overflow:hidden;

transition:.4s;

}

.historia-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.historia-card img{

width:100%;

height:250px;

object-fit:cover;

}

.historia-card h3{

padding:20px;

color:var(--gold);

}

.historia-card p{

padding:0 20px 25px;

text-align:left;

}

/* ================= */
/* ACADEMIA */
/* ================= */

.academia{

padding:100px 0;

background:#071223;

}

.academia h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.academia-text{

text-align:center;

max-width:800px;

margin:auto;

margin-bottom:50px;

}

.academia-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.academia-box{

background:var(--blue2);

padding:40px;

border-radius:20px;

text-align:center;

transition:.4s;

}

.academia-box:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.academia-box h3{

color:var(--gold);

margin-bottom:20px;

font-size:1.5rem;

}

/* ================= */
/* GALERIA */
/* ================= */

.galeria{

padding:100px 0;

background:#08172a;

}

.galeria h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.subtitle{

text-align:center;

margin-bottom:50px;

opacity:.8;

}

.galeria-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:20px;

}

.galeria-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

transition:.4s;

cursor:pointer;

border:2px solid transparent;

}

.galeria-grid img:hover{

transform:scale(1.05);

border-color:var(--gold);

box-shadow:
0 0 25px rgba(212,175,55,.5);

}

/* ================= */
/* VIDEOS */
/* ================= */

.videos{

padding:100px 0;

background:#071223;

}

.videos h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.video-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:25px;

}

.video-grid video{

width:100%;

border-radius:20px;

border:3px solid var(--gold);

box-shadow:
0 0 20px rgba(212,175,55,.3);

}

/* ================= */
/* TROFEOS */
/* ================= */

.trofeos{

padding:100px 0;

background:#08172a;

}

.trofeos h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.trofeos-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.trofeo-card{

background:var(--blue2);

padding:40px;

border-radius:20px;

text-align:center;

transition:.4s;

border:1px solid rgba(212,175,55,.2);

}

.trofeo-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.trofeo-card h3{

color:var(--gold);

margin-bottom:15px;

font-size:1.5rem;

}

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

.contacto{

padding:100px 0;

background:#071223;

}

.contacto h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.contacto-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.contacto-box{

background:var(--blue2);

padding:35px;

border-radius:20px;

text-align:center;

}

.contacto-box h3{

color:var(--gold);

margin-bottom:15px;

}

.contacto-box a{

display:inline-block;

margin-top:15px;

padding:12px 25px;

background:var(--gold);

color:black;

font-weight:bold;

border-radius:50px;

text-decoration:none;

}

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

footer{

background:black;

padding:60px 20px;

text-align:center;

border-top:2px solid var(--gold);

}

footer h2{

color:var(--gold);

letter-spacing:8px;

margin-bottom:20px;

}

footer p{

opacity:.8;

margin-top:10px;

}


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

@media(max-width:900px){

.navbar{

flex-direction:column;

height:auto;

padding:15px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.hero-content h1{

font-size:3rem;

letter-spacing:5px;

}

.hero-content h2{

font-size:1.5rem;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.galeria-grid,
.video-grid,
.historia-grid,
.academia-grid,
.trofeos-grid,
.contacto-grid{

grid-template-columns:1fr;

}

}

/* ================= */
/* SCROLL BAR */
/* ================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071223;

}

::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:10px;

}

/* ================= */
/* EFECTOS GLOBALES */
/* ================= */

section{

transition:.5s;

}

h2{

text-transform:uppercase;

letter-spacing:3px;

}

.historia-card,
.academia-box,
.trofeo-card,
.contacto-box{

transition:.4s;

}

.historia-card:hover,
.academia-box:hover,
.trofeo-card:hover,
.contacto-box:hover{

transform:translateY(-10px);

}

/* ================= */
/* BOTON FLOTANTE */
/* ================= */

.whatsapp-float{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

color:white;

text-decoration:none;

z-index:9999;

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

}

/* ================= */
/* ANIMACION LOGO */
/* ================= */

.logo{

animation:flotar 3s ease-in-out infinite;

}

@keyframes flotar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}

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

.hero-content h1{

text-shadow:
0 0 20px rgba(212,175,55,.6);

}

.hero-content h2{

text-shadow:
0 0 10px rgba(0,0,0,.8);

}


/* BOTON TOP */

.top-button{

position:fixed;

bottom:25px;

left:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#d4af37;

font-size:25px;

cursor:pointer;

z-index:9999;

}

/* FULLSCREEN */

.fullscreen{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

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

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.fullscreen img{

max-width:90%;

max-height:90%;

border:4px solid #d4af37;

border-radius:20px;

}

/* ANIMACIONES */

.historia-card,
.academia-box,
.trofeo-card,
.contacto-box{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.visible{

opacity:1 !important;

transform:translateY(0) !important;

}

/* ================= */
/* HORARIOS */
/* ================= */

.horarios{

padding:100px 0;

background:#08172a;

}

.horarios h2{

text-align:center;

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.horarios-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:50px;

}

.horario-card{

background:var(--blue2);

padding:35px;

border-radius:20px;

text-align:center;

border:1px solid rgba(212,175,55,.2);

transition:.4s;

}

.horario-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.horario-card h3{

color:var(--gold);

margin-bottom:20px;

}

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

.redes{

padding:100px 0;

background:#071223;

}

.redes-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:50px;

}

.red-card{

background:var(--blue2);

padding:30px;

border-radius:20px;

text-align:center;

text-decoration:none;

color:white;

transition:.4s;

}

.red-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.red-card h3{

color:var(--gold);

margin-bottom:15px;

}

/* ================= */
/* CONTADORES */
/* ================= */

.contadores{

padding:100px 0;

background:#08172a;

}

.contador-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:50px;

}

.contador-box{

background:var(--blue2);

padding:40px;

border-radius:20px;

text-align:center;

}

.contador-box h3{

font-size:3rem;

color:var(--gold);

margin-bottom:10px;

}

.contador-box p{

font-size:1.1rem;

}

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

.footer{

background:#000;

padding:80px 20px;

border-top:2px solid var(--gold);

}

.footer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.footer h3{

color:var(--gold);

margin-bottom:15px;

}

.footer p{

line-height:1.8;

}

.copyright{

text-align:center;

margin-top:30px;

opacity:.8;

}

/* ================= */
/* NUESTRA CASA */
/* ================= */

.nuestra-casa{

padding:100px 0;

background:#071223;

}

.canchas-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-top:40px;

}

.cancha-card{

background:var(--blue2);

padding:35px;

border-radius:20px;

text-align:center;

border:1px solid rgba(212,175,55,.2);

transition:.4s;

}

.cancha-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.cancha-card h3{

color:var(--gold);

margin-bottom:15px;

}

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

.equipo{

padding:100px 0;

background:#08172a;

}

.equipo-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:40px;

}

.equipo-card{

background:var(--blue2);

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

}

.equipo-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.equipo-card h3{

color:var(--gold);

margin-bottom:15px;

}

/* ================= */
/* NOTICIAS */
/* ================= */

.noticias{

padding:100px 0;

background:#071223;

}

.noticias-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-top:40px;

}

.noticia-card{

background:var(--blue2);

padding:35px;

border-radius:20px;

transition:.4s;

}

.noticia-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 25px rgba(212,175,55,.4);

}

.noticia-card h3{

color:var(--gold);

margin-bottom:15px;

}

/* ================= */
/* FRASE DEL CLUB */
/* ================= */

.frase-club{

padding:120px 20px;

background:
linear-gradient(
135deg,
#071223,
#0f1f38
);

text-align:center;

}

.frase-club h2{

max-width:1000px;

margin:auto;

font-size:2.5rem;

line-height:1.6;

color:var(--gold);

}

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

.hero-final{

height:70vh;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

background:
linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.7)
),
url("IMG-20260110-WA0339.jpg");

background-size:cover;
background-position:center;

}

.hero-final-content h2{

font-size:4rem;

color:#d4af37;

letter-spacing:8px;

margin-bottom:20px;

}

.hero-final-content p{

font-size:1.3rem;

margin-bottom:30px;

}

.btn-final{

display:inline-block;

padding:18px 40px;

background:#d4af37;

color:black;

font-weight:bold;

border-radius:50px;

text-decoration:none;

transition:.4s;

}

.btn-final:hover{

transform:translateY(-8px);

}

/* ========================= */
/* SOMBRAS PREMIUM */
/* ========================= */

.historia-card,
.academia-box,
.trofeo-card,
.contacto-box,
.noticia-card,
.equipo-card,
.cancha-card,
.horario-card,
.red-card{

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

}

/* ========================= */
/* TITULOS */
/* ========================= */

section h2{

text-transform:uppercase;

letter-spacing:4px;

}

/* ========================= */
/* EFECTO DORADO */
/* ========================= */

h2,
h3{

transition:.3s;

}

h2:hover,
h3:hover{

color:#d4af37;

}

/* ========================= */
/* BOTON WHATSAPP */
/* ========================= */

.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:70px;
height:70px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;
align-items:center;

font-size:35px;

text-decoration:none;

color:white;

z-index:99999;

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

}

/* ========================= */
/* ANIMACION ENTRADA */
/* ========================= */

@keyframes aparecer{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.historia-card,
.academia-box,
.trofeo-card,
.noticia-card,
.equipo-card{

animation:aparecer 1s ease;

}

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

@media(max-width:768px){

.hero-content h1{

font-size:3rem;

}

.hero-final-content h2{

font-size:2rem;

}

.menu{

flex-direction:column;

gap:10px;

}

}

.top-btn{

position:fixed;

left:25px;

bottom:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#d4af37;

font-size:24px;

cursor:pointer;

z-index:9999;

}


/* FORMULARIO HÉRCULES */

.registro-form{

padding:80px 20px;

display:flex;

justify-content:center;

}

.form-hercules{

width:100%;

max-width:900px;

background:#102443;

padding:40px;

border-radius:25px;

box-shadow:0 10px 40px rgba(0,0,0,.4);

}

.form-hercules h3{

text-align:center;

color:#d4af37;

font-size:2rem;

margin-bottom:30px;

}

.input-group{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.form-hercules input,
.form-hercules select,
.form-hercules textarea{

width:100%;

padding:15px;

background:#08172a;

border:2px solid transparent;

border-radius:15px;

color:white;

font-size:16px;

}

.form-hercules textarea{

height:140px;

resize:none;

margin-bottom:20px;

}

.form-hercules input:focus,
.form-hercules select:focus,
.form-hercules textarea:focus{

outline:none;

border-color:#d4af37;

}

.form-hercules button{

width:100%;

padding:18px;

background:#d4af37;

color:black;

font-size:18px;

font-weight:bold;

border:none;

border-radius:50px;

cursor:pointer;

transition:.3s;

}

.form-hercules button:hover{

transform:translateY(-5px);

}

@media(max-width:768px){

.input-group{

grid-template-columns:1fr;

}

}

.contador-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:40px;
}

.contador-box{
background:#102443;
padding:40px;
border-radius:25px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.contador-box h3{
font-size:4rem;
color:#d4af37;
margin-bottom:10px;
}

.contador-box p{
font-size:1.3rem;
}

.trofeos{
padding:100px 20px;
background:#071223;
text-align:center;
}

.trofeos h2{
font-size:3rem;
color:#d4af37;
margin-bottom:15px;
letter-spacing:5px;
}

.subtitle{
color:#ccc;
margin-bottom:50px;
}

.trofeos-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
max-width:1400px;
margin:0 auto;
}

.trofeo-card{
background:#102443;
padding:40px;
border-radius:25px;
box-shadow:0 10px 25px rgba(0,0,0,.3);
transition:.4s;
}

.trofeo-card:hover{
transform:translateY(-10px);
box-shadow:0 0 25px rgba(212,175,55,.4);
}

.trofeo-card h3{
color:#d4af37;
font-size:2rem;
margin-bottom:20px;
}

.trofeo-card p{
font-size:1.1rem;
line-height:1.8;
}

.contadores h2{

text-align:center;

font-size:3rem;

color:#d4af37;

letter-spacing:6px;

margin-bottom:50px;

width:100%;

}

.proximo-partido{

padding:80px 20px;

text-align:center;

}

.proximo-partido h2{

color:#d4af37;

font-size:3rem;

letter-spacing:5px;

margin-bottom:40px;

}

.partido-card{

max-width:600px;

margin:0 auto;

background:#102443;

padding:40px;

border-radius:25px;

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

}

.partido-card h3{

font-size:2rem;

margin-bottom:20px;

color:white;

}

.partido-card p{

font-size:1.2rem;

margin:10px 0;

}

.red-social:hover{

transform:translateY(-10px);

transition:.3s;

box-shadow:0 0 25px rgba(212,175,55,.4);

}

.redes h2{

text-align:center;

font-size:3rem;

color:#d4af37;

letter-spacing:6px;

margin-bottom:20px;

width:100%;

}

.redes .subtitle{

text-align:center;

font-size:1.2rem;

color:#c0c0c0;

margin-bottom:50px;

}

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

.equipo{

padding:100px 20px;

background:#071223;

text-align:center;

}

.equipo h2{

font-size:3rem;

color:#d4af37;

letter-spacing:6px;

margin-bottom:20px;

}

.equipo .subtitle{

color:#c0c0c0;

font-size:1.2rem;

margin-bottom:50px;

}

.equipo-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:30px;

max-width:1400px;

margin:0 auto;

}

.equipo-card{

background:#102443;

padding:40px;

border-radius:25px;

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

transition:.3s;

}

.equipo-card:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(212,175,55,.4);

}

.equipo-card h3{

color:#d4af37;

font-size:1.8rem;

margin-bottom:15px;

}

.equipo-card p{

font-size:1.1rem;

color:white;

}


.noticias{

text-align:center;

}

.noticias h2{

color:#d4af37;

font-size:3rem;

letter-spacing:6px;

margin-bottom:15px;

}

.noticias .subtitle{

text-align:center;

color:#c0c0c0;

font-size:1.2rem;

margin-bottom:50px;

}

.hero-final-content h2{

font-size:5rem;

color:#d4af37;

letter-spacing:8px;

margin-bottom:20px;

font-weight:bold;

}
.hero-final-content p{

font-size:2rem;

color:white;

margin-bottom:30px;

}

.contacto{

padding:80px 20px;

text-align:center;

}

.contacto h2{

font-size:3rem;

color:#d4af37;

letter-spacing:5px;

margin-bottom:30px;

}

.contacto p{

font-size:1.3rem;

margin:10px 0;

}

footer{

padding:60px 20px;

}

.footer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:40px;

max-width:1400px;

margin:0 auto;

}

.footer-grid h3{

font-size:1.8rem;

color:#d4af37;

margin-bottom:20px;

}

.footer-grid p{

font-size:1.1rem;

line-height:2;

}

.frase-final{

text-align:center;

padding:80px 20px;

font-size:2.5rem;

font-weight:bold;

color:#d4af37;

letter-spacing:3px;

max-width:1200px;

margin:0 auto;

}

.contacto{

padding:80px 20px;

background:#071223;

text-align:center;

}

.contacto h2{

font-size:3rem;

color:#d4af37;

letter-spacing:5px;

margin-bottom:30px;

}

.contacto p{

font-size:1.4rem;

color:white;

margin:12px 0;

}

/* ========================= */
/* FOOTER HERCULES FC */
/* ========================= */

.footer{

background:#000;

padding:60px 20px;

border-top:3px solid #d4af37;

}

.footer-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:40px;

max-width:1400px;

margin:0 auto;

text-align:center;

}

.footer h3{

color:#d4af37;

font-size:28px;

margin-bottom:20px;

}

.footer p{

color:white;

font-size:18px;

line-height:1.8;

}

.footer hr{

margin:40px auto;

max-width:1200px;

border:1px solid #444;

}

.copyright{

text-align:center;

font-size:16px;

color:#bdbdbd;

margin-top:20px;

}

/* FORMULARIO */

.registro-form{

padding:100px 20px;

display:flex;

justify-content:center;

background:#071223;

}

.form-hercules{

width:100%;

max-width:900px;

background:#102443;

padding:40px;

border-radius:25px;

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

}

.form-hercules h3{

text-align:center;

font-size:2.5rem;

color:#d4af37;

margin-bottom:30px;

}

.input-group{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.form-hercules input,
.form-hercules select,
.form-hercules textarea{

width:100%;

padding:15px;

background:#08172a;

border:none;

border-radius:15px;

color:white;

font-size:18px;

}

.form-hercules textarea{

height:150px;

resize:none;

margin-bottom:20px;

}

.form-hercules button{

width:100%;

padding:18px;

background:#d4af37;

color:black;

font-size:20px;

font-weight:bold;

border:none;

border-radius:50px;

cursor:pointer;

}

.form-hercules button:hover{

opacity:.9;

}

@media(max-width:768px){

.input-group{

grid-template-columns:1fr;

}

}


@media (max-width:768px){

header{

position:relative;

height:auto;

}

.navbar{

flex-direction:column;

padding:15px;

}

.menu{

flex-direction:column;

gap:10px;

margin-top:15px;

}

}
@media (max-width:768px){

.navbar{

flex-direction:column;

padding:15px 0;

}

.menu{

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

margin-top:20px;

}

.logo{

flex-direction:column;

text-align:center;

}

.logo img{

width:80px;

}

.logo-text h1{

font-size:2rem;

}

}

@media (max-width:768px){

.menu{

display:none;

}

}