/* === CARACTERÍSTICAS INTRO === */
.features-intro {
  padding: 3rem 1rem 2rem;
  background: var(--c-surface);
  text-align: center;
  transition: background var(--transition);
}
.features-intro-container {max-width: 900px; margin: 0 auto;}
.features-intro .section-label {color: var(--c-primary-dark); font-weight: 600; font-size: 32px; margin-bottom: .5rem; transition: color var(--transition);}
.features-intro h2 {font-size: 32px; font-weight: 700; margin-bottom: 1rem;}
.features-intro .section-desc {color: var(--c-text-muted); font-size: 1rem; line-height: 1.6; transition: color var(--transition);}

/* ===== CARACTERÍSTICAS VISUALES ===== */
.features {
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  background: var(--c-surface);
  transition: background var(--transition);
}
.features-container {max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem;}
.feature {display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;}
.feature.reverse {flex-direction: row-reverse;}
.feature__img {
  flex: 1 1 320px;
  max-width: 500px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px var(--c-shadow-color);
  transition: box-shadow var(--transition);
}
.feature__img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.feature__text {flex: 1 1 320px; min-width: 280px;}
.feature__text h3 {font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--c-text-primary); transition: color var(--transition);}
.feature__text p {font-size: 1rem; color: var(--c-text-secondary); line-height: 1.6; transition: color var(--transition);}

@media (max-width: 768px) {
  .feature, .feature.reverse {flex-direction: column; text-align: center;}
  .feature__text, .feature__img {max-width: 100%;}
}

@media(max-width:600px){
  .feature.reverse{flex-direction:column} /* This is redundant with the above media query but kept as per original */
  .feature{flex-direction:column} /* This is redundant with the above media query but kept as per original */
}