.about-hero{
height:350px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
position:relative;
}

.hero-overlay{
background:rgba(0,0,0,0.5);
height:100%;
display:flex;
align-items:center;
}

.hero-content{
color:white;
text-align:center;
}

.hero-content h1{
font-size:48px;
font-weight:700;
}

.hero-content p{
font-size:18px;
}

/* sections */

.about-section{
padding:70px 0;
  background: var(--body-bg);
  color: var(--body-text);
}

.alt-bg {
  background: var(--color-gray-100); /* claro */
}

.dark-theme .alt-bg {
  background: var(--color-secondary-700); /* oscuro */
}

/* rows */

.about-row{
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}

.about-row.reverse{
flex-direction:row-reverse;
}

/* images */

.about-img img{
width:100%;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:0.4s;
}

.about-img img:hover{
transform:scale(1.05);
}

/* text */

.about-text {
  flex: 1;
  color: var(--body-text);
}

.about-text h2{
margin-bottom:15px;
}

.about-text i{
color: var(--color-primary-500);
margin-right:10px;
}

/* mission */

.mission-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.mission-card {
  text-align: center;
  padding: 30px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
  transition: 0.3s;
}

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

.mission-card i{
font-size:30px;
color: var(--color-primary-500);
margin-bottom:10px;
}

/* values */

.section-title{
text-align:center;
margin-bottom:40px;
}

.values-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
}

.value-card {
  text-align: center;
  padding: 25px;
  background: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-md);
  transition: 0.3s;
}

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

.value-card i{
font-size:28px;
color: var(--color-primary-500);
margin-bottom:10px;
}

/* gallery */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.gallery-grid img{
width:100%;
border-radius:10px;
transition:0.4s;
}

.gallery-grid img:hover{
transform:scale(1.05);
}