/* =========================================================
   SOBRE NOSOTROS — estilos propios de esta página
   (usa las variables y el header/footer de styles.css)

   Índice
   1. Utilidades de animación (reveal / stagger / pop)
   2. Banner
   3. ¿Quiénes somos?
   4. Tarjetas misión / valores / visión
   5. Familia
   6. Nuestro equipo
   ========================================================= */

:root {
  /* Curva con un pequeño rebote, para el efecto "pop" */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* El header aquí es sólido: esta página no tiene hero a pantalla completa */
.site-header--solid { background: var(--green-mid); }


/* =========================================================
   1. Utilidades de animación
   ========================================================= */

/* Aparición simple de texto */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-smooth), transform .9s var(--ease-smooth);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Grupo escalonado: los hijos entran uno a uno, de izquierda a derecha */
.js-reveal .stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
}
.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.stagger.is-visible > *:nth-child(2) { transition-delay: .2s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .4s; }

.js-reveal .stagger--pop > * {
  transform: scale(.82);
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-pop);
}
.stagger--pop.is-visible > * { transform: scale(1); }


/* =========================================================
   2. Banner
   ========================================================= */
.about-hero {
  position: relative;
  height: 100vh;
  min-height: 480px;
  max-height: 780px;
  overflow: hidden;
}
.about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.about-hero h1 {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}


/* =========================================================
   3. ¿Quiénes somos?
   ========================================================= */
.about-intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 24px 36px;
  text-align: center;
}
.about-intro h2 {
  color: var(--green-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 20px;
}
.about-intro p {
  color: var(--green-mid);
  line-height: 1.8;
  font-size: .95rem;
}
.about-intro strong { color: var(--green-heading); }


/* =========================================================
   4. Tarjetas misión / valores / visión
   ========================================================= */
.about-cards-wrap {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 24px 90px;
}
.about-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1; /* por encima de la línea ondulada */
}
.about-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--green-mid);
  color: #fff;
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
/* La tercera tarjeta va sola y centrada, debajo de las dos primeras */
.about-card:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 440px);
}
.about-card-icon {
  flex-shrink: 0;
  width: 66px;
  text-align: center;
}
.about-card-icon .ring {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.about-card-icon span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: 1px;
}
.about-card p {
  font-size: .85rem;
  line-height: 1.65;
}

/* Línea decorativa ondulada que cruza por detrás de las tarjetas */
.about-wave {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 90px;
  z-index: 0;
}
.about-wave path {
  fill: none;
  stroke: rgba(76, 124, 46, .35);
  stroke-width: 2;
}


/* =========================================================
   5. Familia
   ========================================================= */
.family-about {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 46px;
  align-items: center;
}
.family-about h2 {
  color: var(--green-mid);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.family-about p {
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: .92rem;
}
.family-about img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  background: var(--green-dark); /* respaldo mientras carga */
}


/* =========================================================
   6. Nuestro equipo
   ========================================================= */
.team {
  position: relative;
  background: var(--green-mid);
  padding: 60px 24px 70px;
  text-align: center;
  overflow: hidden;
}
/* Textura suave de fondo */
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 18px, rgba(255, 255, 255, .6) 19px 20px, transparent 21px);
}
.team h2,
.team-grid {
  position: relative;
  z-index: 1;
}
.team h2 {
  color: #fff;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.team-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.team-member img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15); /* respaldo mientras carga */
}
.team-name {
  display: block;
  margin-top: 14px;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.team-role {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
}


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .about-cards { grid-template-columns: 1fr; }
  .about-card:nth-child(3) { width: 100%; }
  .family-about { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; }
  .about-wave { display: none; } /* en móvil las tarjetas van apiladas */
}