/* Página Nosotros. Reutiliza tokens, base, layout y componentes; aquí solo lo propio de la página. */

/* ---------- Cabecera de página: misma diagonal roja del hero, más baja ---------- */
.page-head {
  position: relative;
  background: var(--stage);
  overflow: hidden;
  isolation: isolate;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red-bg);
  clip-path: polygon(0 0, 52% 0, 41% 100%, 0 100%);
  z-index: -1;
}

.page-head .wrap {
  display: flex;
  align-items: center;
  min-height: 320px;
}

.page-head-copy {
  color: var(--on-red);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px 0;
}

.page-head h1 { font-size: clamp(56px, 7.4vw, 108px); }

/* ---------- Misión y visión ---------- */
.mv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
}

.mv article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 28px;
  border-top: 6px solid var(--red);
}

.mv h2 { font-size: clamp(44px, 6vw, 80px); }
.mv h2 b { color: var(--red-ink); }

.mv p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  max-width: 34em;
}

/* ---------- Valores ---------- */
.values { background: var(--gray); }
.values .sec-head h2 b { color: var(--red-ink); }

.value-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.value-grid li {
  display: flex;
  align-items: flex-end;
  min-height: 140px;
  padding: 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 6px solid var(--red);
}

.value-grid h3 {
  margin: 0;
  font: 600 26px/1.05 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- Mensaje del CEO ---------- */
.ceo .wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 48px 72px;
  align-items: center;
}

.ceo-photo { margin: 0; }

/* Recorte con la diagonal de la identidad visual; proporción 4:5. */
.ceo-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.ceo-msg {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ceo-msg h2 { margin: 0; }

.ceo blockquote {
  position: relative;
  margin: 0;
  max-width: 62ch;
  font-size: 21px;
  line-height: 1.5;
}

/* Comillas tipográficas del bloque (decorativas; el texto queda literal). */
.ceo blockquote::before {
  content: "“";
  display: block;
  height: .5em;
  font: 700 96px/1 var(--display);
  color: var(--red-ink);
}

.ceo blockquote > p:last-of-type::after { content: "”"; }

.ceo blockquote p { margin: 0 0 18px; }

.ceo blockquote ul {
  margin: 0 0 18px;
  padding-left: 1.2em;
  list-style: square;
}

.ceo blockquote li { margin-bottom: 10px; }
.ceo blockquote li::marker { color: var(--red-ink); }

.ceo blockquote footer {
  margin-top: 26px;
  padding: 0;
  background: none;
  font: 500 15px/1.3 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ceo cite {
  font: 600 26px/1.05 var(--display);
  font-style: normal;
  letter-spacing: .02em;
  color: var(--ink);
}

@media (max-width: 900px) {
  .page-head::before { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); }

  .page-head .wrap {
    align-items: flex-start;
    min-height: 260px;
  }

  .page-head-copy { padding: 40px 0 96px; }

  .mv { grid-template-columns: 1fr; }

  .ceo .wrap { grid-template-columns: 1fr; }

  .ceo-photo { max-width: 420px; }
}

@media (max-width: 560px) {
  .value-grid li { min-height: 96px; }

  .ceo blockquote { font-size: 20px; }
}