/* =============================================================
   ABOUT-HERO — Mini hero de Quiénes somos
   WordPress: template-parts/sections/about-hero.php
   ============================================================= */

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
  container-type: inline-size;
}

/* ── Columna izquierda (texto) ───────────────────────────────── */
.about-hero__left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-section) var(--pad-x) var(--pad-section) max(var(--pad-x), calc((100cqw - var(--container)) / 2 + var(--pad-x)));
}

.about-hero__left-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.about-hero__title {
  font-family: var(--f-heading);
  font-size: var(--text-9xl);
  line-height: 1.05;
  color: var(--blk-text, var(--c-dark));
}

.about-hero__sub {
  font-family: var(--f-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--blk-text, var(--c-text-2));
}

/* ── Columna derecha (imagen) ────────────────────────────────── */
.about-hero__right {
  position: relative;
  overflow: hidden;
}

/* La imagen usa position absolute para llenar siempre la celda de grid */
.about-hero__right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Esquemas de color ───────────────────────────────────────── */

.about-hero.is-style-dark {
  background-color: var(--dark-bg, #0D0D0D);
  border-color: #333333;
}
.about-hero.is-style-dark .about-hero__title { color: #FFFFFF; }
.about-hero.is-style-dark .about-hero__sub   { color: #94A3B8; }
.about-hero.is-style-dark .eyebrow           { color: var(--dark-accent, #2EA3F1); }
.about-hero.is-style-dark .eyebrow__dot,
.about-hero.is-style-dark .eyebrow__line     { background-color: var(--dark-accent, #2EA3F1); }

/* btn--dark sobre fondo negro → pasa a blanco sólido */
.about-hero.is-style-dark .btn--dark {
  background-color: #FFFFFF;
  color: #0D0D0D;
  border-color: #FFFFFF;
}
.about-hero.is-style-dark .btn--dark:hover { opacity: 0.88; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  /* Imagen arriba en mobile/tablet */
  .about-hero__right {
    order: -1;
    position: relative;
    height: 360px;
  }

  .about-hero__left {
    justify-content: flex-start;
  }

  .about-hero__left-inner {
    max-width: 100%;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .about-hero__right {
    height: 260px;
  }

  .about-hero__title {
    font-size: var(--text-7xl);
  }
}