/* Presentación de Iván Picazo */
.personal-page, .personal-teaser { --personal-accent: var(--gold); }
.personal-page main { overflow: clip; }
.personal-teaser, .personal-hero, .personal-vision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
}
.personal-teaser { border-block: 1px solid var(--line); background: #121214; }
.personal-teaser figure, .personal-page figure { margin: 0; min-width: 0; }
.personal-teaser img, .personal-page main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.personal-teaser figcaption, .personal-page figcaption {
  padding-top: 14px;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .13em;
}
.personal-eyebrow {
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--personal-accent);
  margin: 0 0 26px;
}
.personal-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
}
.personal-copy { min-width: 0; }
.personal-copy p:not(.personal-eyebrow), .personal-history p,
.personal-principles article p, .personal-closing>p:not(.personal-eyebrow) {
  color: #c3bfbc;
  font-size: 15px;
  line-height: 1.85;
}
.personal-page h1, .personal-page h2, .personal-teaser h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 30px;
}
.personal-page h1 { font-size: clamp(35px, 4.4vw, 68px); }
.personal-page h1 span, .personal-page h2 span, .personal-teaser h2 span {
  color: var(--personal-accent);
}
.personal-copy .personal-lead, .personal-history .personal-lead, .personal-closing .personal-lead {
  color: var(--paper);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.6;
}
.personal-button {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 50px;
  padding: 16px 22px;
  margin-top: 24px;
  background: var(--personal-accent);
  color: #111113;
  font-size: 11px;
  letter-spacing: .05em;
  font-weight: 700;
  transition: background .2s;
}
.personal-button:hover { background: #dfc28d; }
.personal-underlink {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  font-size: 13px;
  color: var(--personal-accent);
  border-bottom: 1px solid rgba(201, 168, 106, .4);
  margin-top: 16px;
}
.personal-hero, .personal-history, .personal-vision, .personal-principles, .personal-closing {
  max-width: 1440px;
  margin-inline: auto;
  padding: 90px clamp(24px, 7vw, 100px);
}
.personal-hero { padding-top: 160px; }
.personal-hero figure { max-width: 520px; justify-self: end; }
.personal-history { border-top: 1px solid var(--line); }
.personal-section-intro { max-width: 820px; margin-bottom: 60px; }
.personal-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.personal-chapters article { display: flex; gap: 20px; border-top: 1px solid var(--line); padding-top: 25px; }
.personal-number { color: var(--personal-accent); font-size: 12px; padding-top: 3px; }
.personal-page h3 { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
.personal-vision { background: #141416; }
.personal-quote {
  max-width: 1050px;
  margin: 0 auto;
  padding: 100px 30px;
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1.55;
  letter-spacing: -.03em;
}
.personal-quote span { color: var(--personal-accent); }
.personal-principles { border-top: 1px solid var(--line); }
.personal-principles>div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 45px; }
.personal-principles article { border-top: 1px solid rgba(201, 168, 106, .4); padding-top: 22px; }
.personal-closing {
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 80%, rgba(201, 168, 106, .05), transparent 65%);
}
.personal-closing h2 { max-width: 950px; margin-inline: auto; }
.personal-closing .personal-lead { max-width: 670px; margin: 0 auto 20px; }
.personal-closing .personal-signature { margin-top: 54px; font-size: 12px; }
.personal-signature strong { font-size: 19px; color: var(--paper); }
.primary-nav [aria-current="page"] { color: var(--gold); }

/* Accommodate the additional navigation item on tablets. */
@media (min-width:901px) and (max-width:1150px) {
  .site-header { padding-inline: 20px; }
  .primary-nav { gap: 12px; font-size: 9px; }
  .primary-nav .nav-cta { padding: 10px; }
}
@media (max-width:760px) {
  .personal-teaser, .personal-hero, .personal-vision, .personal-chapters { grid-template-columns: 1fr; gap: 35px; }
  .personal-hero, .personal-history, .personal-vision, .personal-principles, .personal-closing { padding: 60px 22px; }
  .personal-hero { padding-top: 125px; }
  .personal-hero figure { justify-self: stretch; max-width: none; }
  .personal-page h1 { font-size: clamp(33px, 8.5vw, 54px); }
  .personal-page h2, .personal-teaser h2 { font-size: clamp(30px, 7.8vw, 46px); }
  .personal-eyebrow { font-size: 9px; letter-spacing: .1em; }
  .personal-teaser { padding: 55px 22px; }
  .personal-teaser figure { max-width: 480px; margin-inline: auto; }
  .personal-quote { padding: 65px 24px; }
  .personal-principles>div { grid-template-columns: 1fr; gap: 20px; }
  .personal-button { padding-inline: 16px; font-size: 10px; gap: 12px; }
}