body {
margin: 0;
}

/* CONTENEDOR PRINCIPAL */
.sobre-nosotros-container {
max-width: 900px;
margin: 2rem auto;
padding: 1.5rem;
background-color: var(--color-fondo-carta);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
text-align: center;
}

.sobre-nosotros-container h2 {
color: var(--color-primario);
margin-bottom: 1rem;
font-size: 2rem;
}

.sobre-nosotros-container p {
line-height: 1.6;
margin-bottom: 2rem;
font-size: 1.1rem;
text-align: justify;
}

/* HEADER */
header {
background-color: var(--color-primario);
color: var(--color-secundario);
padding: 1.5rem;
text-align: center;
}

.logo-titulo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}

.logo-titulo img {
height: 80px;
width: auto;
}

.logo-titulo h1 {
font-family: 'Comic Neue', 'Comic Sans MS';
color: black;
font-weight: 600;
font-size: 2rem;
letter-spacing: 1px;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.logo-titulo span {
font-size: 1rem;
font-weight: 400;
display: block;
}

/* GALERÍA DE FOTOS */
.galeria {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}

.galeria img {
flex: 1 1 280px;
max-width: 100%;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* BOTÓN VOLVER */
.volver-btn {
display: inline-block;
padding: 0.8rem 1.8rem;
background-color: var(--color-primario);
color: var(--color-secundario);
border: none;
border-radius: 8px;
text-decoration: none;
font-size: 1.1rem;
font-weight: bold;
transition: background 0.3s ease;
}

.volver-btn:hover {
background-color: var(--color-terceario-hover);
}

/* 📱 MOBILE */
@media (max-width: 600px) {
header {
height: 180px; /* 👈 MUCHO más alto */
padding: 2rem 1rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 2rem;       /* agranda más el texto del header */
padding: 20px 15px;    /* más espacio interno */
}

.logo-titulo img {
height: 130px; /* 👈 logo mucho más grande */
}

.logo-titulo h1 {
font-size: 2.6rem; /* 👈 título más grande */
}

.logo-titulo span {
font-size: 1.3rem;
}

.galeria {
flex-direction: column;
}

.galeria img {
max-height: 200px; /* 👈 un poco más chicas */
width: auto;
margin: 0 auto;
display: block;
object-fit: contain;
}

.sobre-nosotros-container p {
font-size: 1.3rem; /* 👈 texto más grande */
line-height: 1.7;
padding: 0 12px;
text-align: center;
}

.volver-btn {
width: 100%;
font-size: 1.5rem;     /* botón más grande */
padding: 14px 28px;    /* más espacio dentro del botón */
border-radius: 14px;   /* bordes más redondeados */
}
}