/* Interior pages (the Nosotros set).
   Loaded only by the subpages, so the home page carries none of this weight.
   Everything here is built from the same tokens as styles.css. */

/* Page banner: the hero's colour and texture, at a fraction of its height.
   The pages are read, not scrolled past, so the banner announces where you
   are and then gets out of the way. */
.page-hero {
  background-color: var(--b2-navy-deep);
  background-image:
    linear-gradient(100deg,
      var(--b2-navy-deep) 0%,
      rgba(7, 59, 87, .94) 48%,
      rgba(7, 59, 87, .55) 78%,
      rgba(7, 59, 87, .30) 100%),
    url("assets/hero-textura.webp");
  background-size: cover;
  background-position: center right;
  color: var(--b2-on-dark);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero__eyebrow { color: var(--b2-orange); }
.page-hero h1 {
  margin: var(--sp-2) 0 0;
  font-family: var(--b2-font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: var(--lh-head);
}
.page-hero__lead {
  margin: var(--sp-3) 0 0;
  max-width: 52ch;
  color: var(--b2-cyan-pale);
  font-size: var(--fs-lg);
}

/* Copy on the left, scene on the right. The figure is a fixed-ish column so
   the measure of the text does not change from page to page. */
.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.page-figure { margin: 0; }
.page-figure img { width: 100%; height: auto; }

/* Body copy. Capped at a readable measure rather than the full 1220px wrap,
   which would run to ~140 characters a line on a desktop. */
.prose {
  max-width: 72ch;
  color: var(--b2-text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--sp-4); }
.prose strong { color: var(--b2-navy-deep); font-weight: 700; }
.prose a { color: var(--b2-navy); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--b2-orange-dark); }

.prose h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  color: var(--b2-navy-deep);
  font-family: var(--b2-font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-head);
}

/* Custom marker so the list reads as brand furniture, not a browser default. */
.prose ul { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--b2-orange);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.prose__cta { margin-top: var(--sp-6); }

/* Signature block on the Política Integral page. The rule stands in for the
   ruled line above the name on the signed PDF. */
.prose__sign {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--b2-line);
  max-width: 22rem;
  color: var(--b2-navy-deep);
  font-family: var(--b2-font-display);
  font-weight: 700;
}
.prose__sign span {
  color: var(--b2-text-soft);
  font-family: var(--b2-font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
}

/* Certification marks on the Calidad page. White plates because both logos
   are supplied on white and would otherwise sit in a grey box.
   Selectors are qualified with .prose to outrank `.prose ul li`, which would
   otherwise indent each plate and stamp a chevron marker on it. */
.prose ul.cert-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  padding: 0;
  list-style: none;
}
.prose ul.cert-marks li {
  position: static;
  padding: var(--sp-4);
  margin-bottom: 0;
  background: var(--b2-white);
  border: 1px solid var(--b2-line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.prose ul.cert-marks li::before { content: none; }
.prose ul.cert-marks img { height: 6.5rem; width: auto; object-fit: contain; }

/* The nav entry for the page you are already on. */
.submenu a[aria-current="page"],
.nav > li > a[aria-current="page"] { color: var(--b2-orange); }

/* One column below the tablet break. The scene leads, because a wall of text
   under a banner with nothing else in view reads as a dead end. */
@media (max-width: 860px) {
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .page-figure { order: -1; max-width: 18rem; }
}

@media (max-width: 620px) {
  .prose ul.cert-marks img { height: 4.5rem; }
  .prose h2 { margin-top: var(--sp-6); }
  .page-figure { max-width: 13rem; }
}