/* ==========================================================================
   EMAPRO — areas-de-atuacao.css
   Estilos exclusivos de la página Áreas de Atuação.
   ========================================================================== */

[data-animar] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-animar].visible { opacity: 1; transform: translateY(0); }

/* ---------- Filas alternadas ---------- */
.area-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 50px 0;
}

.area-fila + .area-fila { border-top: 1px solid var(--gris-borde); }

.area-fila--invertida .area-fila__imagen { order: 2; }
.area-fila--invertida .area-fila__texto { order: 1; }

.area-fila__imagen img {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  width: 100%;
  object-fit: cover;
}

.area-fila__icono { font-size: 2.2rem; margin-bottom: 14px; }
.area-fila__texto h3 { font-size: 1.6rem; margin-bottom: 14px; }
.area-fila__texto p { margin-bottom: 20px; }

.area-fila__enlace {
  color: var(--verde-medio);
  font-weight: 600;
  transition: var(--transicion);
}

.area-fila__enlace:hover { color: var(--verde-oscuro); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .area-fila { grid-template-columns: 1fr; gap: 30px; }
  .area-fila--invertida .area-fila__imagen { order: 0; }
  .area-fila--invertida .area-fila__texto { order: 1; }
}