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

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

body{
font-family: "Segoe UI", Arial, sans-serif;
background:#f8f6f3;
color:#333;
line-height:1.7;
}

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

.encabezado{
width:100%;
text-align:center;
}

.div1{
background:#222;
color:white;
padding:15px;
font-size:2rem;
letter-spacing:4px;
font-weight:bold;
}
.foto-carnet {
    position: flex;
    top: 20px;
    left: 20px;
    width: 120px;
    height: 150px;
    object-fit: cover;
}
.banner img{
width:100%;
display:block;
max-height:600px;
object-fit:cover;
}

/* =========================
CONTENIDO PRINCIPAL
========================= */

.contenido{
width:90%;
max-width:1200px;
margin:50px auto;
}

.contenido section{
margin-bottom:50px;
}

.contenido h2{
text-align:center;
margin-bottom:20px;
color:#6a4c93;
font-size:2rem;
}

.contenido p{
text-align:justify;
margin-bottom:15px;
}

/* =========================
GALERÍA
========================= */
.fotos{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    margin:40px 0;
}

.retro{
    width:500px;
    text-align:center;
}

.retro img{
    width:100%;
    max-width:500px;
    height:auto;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    transition:transform .3s;
}

.retro img:hover{
    transform:scale(1.03);
}


.retro p{
padding:15px;
text-align:center;
font-size:0.95rem;
}
video{
    width:100%;
    max-width:900px;
    display:block;
    margin:30px auto;
    border-radius:10px;
}
.patrocinadores {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.patrocinadores img {
  max-width: 150px;
  height: auto;
  transition: transform 0.3s;
}

.patrocinadores img:hover {
  transform: scale(1.1);
}

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

#contacto{
background:white;
padding:60px 20px;
margin-top:60px;
}

.container{
width:90%;
max-width:700px;
margin:auto;
}

#contacto h2{
text-align:center;
margin-bottom:10px;
color:#6a4c93;
}

#contacto p{
text-align:center;
margin-bottom:30px;
}

.formulario{
display:flex;
flex-direction:column;
}

.formulario label{
margin-top:15px;
margin-bottom:5px;
font-weight:bold;
}

.formulario input{
padding:12px;
border:1px solid #ccc;
border-radius:8px;
font-size:1rem;
}

.formulario input:focus{
outline:none;
border-color:#6a4c93;
}

.formulario button{
margin-top:25px;
padding:14px;
background:#6a4c93;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
font-size:1rem;
transition:.3s;
}

.formulario button:hover

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

footer{
background:#222;
color:white;
text-align:center;
padding:40px 20px;
}

footer iframe{
width:100%;
max-width:700px;
border-radius:10px;
margin-bottom:20px;
}

footer a{
color:#d6b4ff;
text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}

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

.btn-whatsapp{
position:fixed;
right:20px;
bottom:20px;
z-index:999;
}

.btn-whatsapp img{
width:65px;
transition:.3s;
}

.btn-whatsapp img:hover{
transform:scale(1.1);
}

/* =========================
IR AL COMIENZO
========================= */

a[href="#title"]{
display:block;
text-align:center;
margin:30px;
color:#6a4c93;
font-weight:bold;
text-decoration:none;
}

a[href="#title"]:hover{
text-decoration:underline;
}

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

@media screen and (max-width:768px){

```
.div1{
    font-size:1.5rem;
}

.contenido h2{
    font-size:1.6rem;
}

.retro{
    width:100%;
    max-width:350px;
}

footer iframe{
    height:300px;
}

.btn-whatsapp img{
    width:55px;
}
```

}