/* =========================================================
   NEWWEST — Acerca de: solo composición (grillas y espacios).
   Tipografías y tamaños vienen del sistema (mismas clases que la Home):
   .t-hero, .t-hero-sub, .t-title, .t-subtitle, .t-lead, .t-body, .principles, .label
   ========================================================= */

/* ---------- N° 01 EXPERIENCIA ---------- */
.experiencia__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: center;
}
/* Bienvenida arriba de la sección, primera línea después de la foto de entrada (como en las demás páginas) */
.experiencia__welcome { grid-column: 1 / -1; margin-bottom: 0; }
/* Foto del fundador (aprobada 20-10): vertical, a la derecha del texto; la cabeza está arriba de la foto */
.experiencia__img { aspect-ratio: 2 / 3; background: var(--marfil-2); }
.experiencia__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.experiencia__figure figcaption { margin-top: 16px; }
.experiencia__content { display: grid; gap: 26px; justify-items: start; }
.experiencia__content .t-title { margin: 0 0 14px; }
.experiencia__pre { margin-top: 6px; font-style: italic; }
.experiencia__content .t-lead { max-width: 26em; }
.experiencia__content .t-body { max-width: 36em; }

/* ---------- N° 02 FILOSOFÍA ---------- */
.filosofia__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 7vw, 120px); }
.filosofia__head { position: sticky; top: calc(var(--header-h-compact) + 48px); align-self: start; display: grid; gap: 28px; }
.filosofia__content { display: grid; gap: 22px; }
.filosofia__content .t-lead { max-width: 24em; }
.filosofia__content .t-body { max-width: 36em; }
.filosofia__values { margin-top: clamp(28px, 4vw, 48px); }

/* ---------- BANNER DE MARCA ---------- */
.brand-banner { position: relative; min-height: 72vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.brand-banner__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.brand-banner__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.brand-banner__media::after { content: ""; position: absolute; inset: 0; background: rgba(59, 46, 40, .42); }
.brand-banner__inner { position: relative; z-index: 2; padding: 80px var(--gutter); }
.brand-banner__inner img { width: clamp(220px, 24vw, 360px); height: auto; }

/* ---------- N° 03 LO QUE PERMANECE ---------- */
.permanece__title { margin-top: 28px; max-width: 16em; }
.permanece__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 110px);
  margin-top: clamp(56px, 7vw, 100px);
}
.permanece__col--cambia li { font-style: italic; opacity: .55; }
.permanece__close { margin-top: clamp(64px, 8vw, 120px); }

/* ---------- N° 04 PROPÓSITO ---------- */
.proposito__head { display: grid; gap: 28px; margin-bottom: clamp(48px, 6vw, 80px); }
.proposito__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.proposito__grid article { padding: 30px clamp(16px, 2.6vw, 40px) 0 0; }
.proposito__grid article + article { padding-left: clamp(16px, 2.6vw, 40px); border-left: 1px solid var(--line); }
.proposito__grid .t-subtitle { margin: 14px 0 16px; }
.proposito__grid .t-body { max-width: 26em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .experiencia__grid, .filosofia__grid { grid-template-columns: 1fr; }
  .experiencia__figure { order: 2; max-width: 520px; }
  .experiencia__img { aspect-ratio: 4 / 5; }
  .filosofia__head { position: static; }
  .permanece__grid { grid-template-columns: 1fr; }
  .proposito__grid { grid-template-columns: 1fr; }
  .proposito__grid article, .proposito__grid article + article { padding: 28px 0; border-left: 0; }
  .proposito__grid article + article { border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .brand-banner { min-height: 56vh; }
}