/* ============================================================
   ACATHI — pantalla: Quiénes somos (patterns/about.php)
   ============================================================ */

.ac-about-hero {
  background: linear-gradient(135deg, var(--primary-fixed) 0%, var(--background) 65%);
  padding: var(--stack-lg) var(--gutter) var(--stack-md);
  text-align: center;
}
.ac-about-hero__inner { max-width: 880px; margin: 0 auto; }
.ac-about-hero__title { margin: 16px 0 24px; }
.ac-about-hero__lead { margin: 0 auto; max-width: 620px; }

.ac-about-mv-section { padding: var(--stack-md) var(--gutter); }
.ac-about-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ac-about-mv__card {
  background: var(--surface-container-lowest); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); border-left: 4px solid var(--tone); padding: 32px;
}
.ac-about-mv__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ac-about-mv__head .material-symbols-outlined { font-size: 32px; color: var(--tone); }
.ac-about-mv__head h2 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 24px; color: var(--tone); margin: 0;
}
.ac-about-mv__card p { font-size: 17px; line-height: 26px; color: var(--on-surface-variant); margin: 0; }

.ac-about-values-section { background: var(--surface-container-low); }
.ac-about-section-head { text-align: center; margin-bottom: 40px; }
.ac-about-section-head h2 { margin: 0 0 8px; }
.ac-about-section-head p { margin: 0; }
.ac-about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ac-about-value {
  background: var(--surface-container-lowest); border-radius: var(--radius-lg);
  border-top: 4px solid var(--tone); box-shadow: var(--shadow-sm); padding: 24px;
}
.ac-about-value .material-symbols-outlined { font-size: 30px; color: var(--tone); }
.ac-about-value h3 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 18px; color: var(--on-surface); margin: 12px 0 6px;
}
.ac-about-value p { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); margin: 0; }

.ac-about-timeline-wrap { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.ac-about-timeline-title { text-align: center; margin: 0 0 48px; }
.ac-about-timeline {
  position: relative; padding-left: 8px;
  display: flex; flex-direction: column; gap: 28px;
}
.ac-about-timeline::before {
  content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px; background: var(--outline-variant);
}
.ac-about-tl-item { position: relative; padding-left: 56px; }
.ac-about-tl-item__dot {
  position: absolute; left: 6px; top: 2px; width: 28px; height: 28px;
  border-radius: 999px; background: var(--tone); border: 4px solid var(--surface-page);
}
.ac-about-tl-item__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.ac-about-tl-item__year {
  font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: 20px; color: var(--tone);
}
.ac-about-tl-item__head h4 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 18px; color: var(--on-surface); margin: 0;
}
.ac-about-tl-item p { font-size: 15px; line-height: 22px; color: var(--on-surface-variant); margin: 0; max-width: 560px; }

.ac-about-team { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.ac-about-team__icon { font-size: 48px; color: var(--secondary-fixed-dim); }
.ac-about-team h2 { font-size: 32px; margin: 16px 0 16px; }
.ac-about-team > p { margin: 0 auto 32px; }
.ac-about-team__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .ac-about-mv { grid-template-columns: 1fr 1fr; }
  .ac-about-values { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .ac-about-mv { grid-template-columns: 1fr; }
  /* values-grid del prototipo se mantiene a 2 columnas también en móvil */
}

/* Bloque Nuestra diferencia */
.ac-about-diferencia {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start;
}
.ac-about-diferencia__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: sticky; top: 100px;
}
@media (max-width: 1100px) {
  .ac-about-diferencia { grid-template-columns: 1fr; }
  .ac-about-diferencia__stats { position: static; grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PILOTO — soporte para la versión en bloques editables de
   patterns/about.php. Aditivo: si se revierte el patrón al HTML
   original, estas reglas quedan inertes (no afectan a nada).
   ============================================================ */

/* Tono por componente como CLASE (sustituye a style="--tone:..." inline).
   Reutilizable por .ac-about-mv__card, .ac-about-value y .ac-about-tl-item. */
.ac-tone--primary   { --tone: var(--primary); }
.ac-tone--secondary { --tone: var(--secondary); }
.ac-tone--amber     { --tone: var(--on-tertiary-container); }
.ac-tone--red       { --tone: var(--rainbow-red); }
.ac-tone--green     { --tone: var(--rainbow-green); }
.ac-tone--blue      { --tone: var(--rainbow-blue); }

/* Gutenberg inyecta márgenes (blockGap) entre bloques hermanos y los grupos
   añaden márgenes propios. Aquí se neutralizan dentro de .ac-about para que el
   espaciado lo sigan dando exclusivamente las clases .ac-*. :where() = 0
   especificidad, así no pisa los márgenes deliberados de los componentes. */
.ac-about :where(.is-layout-flow, .is-layout-constrained) > * + * { margin-block-start: 0; }
.ac-about :where(.wp-block-group) { margin-block: 0; }
/* margin-block (no shorthand) borra solo el margen vertical de UA en <p>,
   preservando el margin:0 auto de elementos centrados como el lead. */
.ac-about p { margin-block: 0; }
.ac-about .ac-eyebrow { margin: 0; }

/* "Nuestra diferencia": estilos que en el HTML original iban inline. */
.ac-about-diferencia__text > h2 { margin: 16px 0 24px; }
.ac-about-diferencia__text > p {
  font-size: 17px; line-height: 27px; color: var(--on-surface-variant); margin: 0 0 20px;
}
.ac-about-diferencia__points { display: flex; flex-direction: column; gap: 12px; }
.ac-about-diferencia__point { display: flex; align-items: flex-start; gap: 12px; }
.ac-about-diferencia__point .material-symbols-outlined { flex: none; margin-top: 2px; }
.ac-about-diferencia__point p { margin: 0; font-size: 16px; }

/* ============================================================
   REDISEÑO EDITORIAL (solo CSS) — NO toca el markup de bloques,
   así que el round-trip del editor Gutenberg queda intacto.
   Hero oscuro a sangre con rainbow (::before) y mesh (::after).
   ============================================================ */
.ac-about-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(120% 130% at 50% 0%, #4a148c 0%, transparent 60%),
    linear-gradient(160deg, #1a1228 0%, #310065 65%, #4a148c 100%);
  padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px);
}
.ac-about-hero::before { /* hairline arcoíris superior */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--rainbow-gradient); z-index: 3;
}
.ac-about-hero::after { /* malla de color ambiental */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 18% 18%, rgba(115,69,182,0.35), transparent 60%),
    radial-gradient(45% 55% at 85% 25%, rgba(223,14,132,0.28), transparent 60%);
}
.ac-about-hero__inner { position: relative; z-index: 2; }
.ac-about-hero .ac-eyebrow { color: var(--secondary-fixed-dim); justify-content: center; }
.ac-about-hero__title {
  color: #fff; font-weight: var(--weight-extra);
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); line-height: 1.05; letter-spacing: -0.025em;
  margin: 18px auto 0; max-width: 860px;
}
.ac-about-hero__lead { color: rgba(255,255,255,0.86); margin: 22px auto 0; }

/* Encabezados de sección a escala editorial (sube .ac-h2 dentro de About). */
.ac-about .ac-h2,
.ac-about-timeline-title,
.ac-about-team h2 {
  font-weight: var(--weight-extra);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em;
}

/* Misión / Visión — tarjetas con relieve y elevación. */
.ac-about-mv__card {
  border: 1px solid var(--border-subtle); border-left: 5px solid var(--tone);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ac-about-mv__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Valores — borde superior de color + elevación. */
.ac-about-value {
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ac-about-value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Timeline — punto con halo y línea teñida. */
.ac-about-timeline::before { background: linear-gradient(var(--primary), var(--secondary)); opacity: 0.35; }
.ac-about-tl-item__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.ac-about-tl-item { transition: transform var(--dur-fast) var(--ease-out); }
.ac-about-tl-item:hover { transform: translateX(4px); }

/* Sección de equipo (ya es .ac-dark) — fondo con rainbow superior. */
.ac-about-team { position: relative; }