/* Portadas de Laboratorio e Investigación. Fuente compartida de esta familia. */
.hub-page {
  --paper: #fafaf8;
  --ink: #292d2e;
  --muted: #626a6c;
  --line: #d9dedd;
  --dark: #202123;
  --signal: #b7d90c;
  --side: clamp(22px, 4.5vw, 72px);
  --width: 1440px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.hub-page *, .hub-page *::before, .hub-page *::after { box-sizing: border-box; }
.hub-page a { color: inherit; text-decoration: none; }
.hub-page button { font: inherit; color: inherit; }
.hub-page img { display: block; max-width: 100%; height: auto; }
.hub-page ::selection { background: var(--signal); color: var(--dark); }
.hub-page :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.hub-wrap { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: var(--side); }
.hub-skip { position: fixed; top: 10px; left: 10px; z-index: 10; transform: translateY(-160%); padding: 12px; background: var(--signal); color: var(--dark); }
.hub-skip:focus { transform: none; }
.hub-header { position: relative; background: var(--dark); color: #fff; }
.hub-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; width: 100%; min-height: 84px; padding-inline: clamp(24px, 4vw, 72px); }
.hub-brand { display: block; justify-self: start; width: 94px; flex: 0 0 94px; }
.hub-brand img { width: 94px; }
.hub-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.hub-nav a, .hub-contact, .hub-language { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hub-nav a { padding-block: 8px; border-bottom: 1px solid transparent; }
.hub-nav a[aria-current="page"] { border-bottom-color: var(--signal); }
.hub-nav a:hover, .hub-contact:hover { color: var(--signal); }
.hub-header__actions { display: flex; justify-self: end; align-items: center; gap: 28px; }
.hub-header__contact { display: flex; align-items: center; gap: 10px; }
.hub-whatsapp { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #25d366; }
.hub-whatsapp svg { display: block; width: 16px; height: 16px; overflow: visible; }
.hub-whatsapp:hover { filter: brightness(1.05); }
.hub-language { display: flex; gap: 10px; }
.hub-language button { padding: 5px 0; border: 0; background: transparent; color: #c5c9c9; cursor: pointer; }
.hub-language button[aria-pressed="true"] { color: #fff; border-bottom: 1px solid var(--signal); }
.hub-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 30px; font-size: 10px; color: var(--muted); }
.hub-breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.hub-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hub-eyebrow::before { content: ""; flex: 0 0 36px; height: 2px; background: var(--signal); }
.hub-hero { padding-block: clamp(38px, 6vw, 88px) clamp(54px, 6vw, 88px); }
.hub-hero h1 { margin: 0; font-family: "Raleway", "Manrope", sans-serif; font-size: clamp(44px, 10.3vw, 148px); font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }
.hub-hero__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-top: 38px; }
.hub-hero__intro { max-width: 540px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; }
.hub-hero__index { display: flex; justify-content: flex-end; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 11px; }
.hub-hero__index a { display: inline-flex; gap: 12px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.hub-hero__index span { color: var(--muted); font-variant-numeric: tabular-nums; }
.hub-band { width: 100%; }
.hub-band--soft { background: #eef1ee; }
.hub-area-grid { display: grid; grid-template-columns: 1fr 1fr; }
.hub-area { min-width: 0; padding: clamp(30px, 4.2vw, 62px) var(--side); }
.hub-area__inner { width: 100%; max-width: calc(var(--width) / 2 - 2 * var(--side)); }
.hub-area:first-child .hub-area__inner { margin-left: auto; }
.hub-area:last-child .hub-area__inner { margin-right: auto; }
.hub-area--dark { background: var(--dark); color: #fff; --muted: #c5cdcd; --line: #4a5051; }
.hub-area__number, .hub-study__number { display: block; margin-bottom: 28px; color: var(--muted); font-size: 11px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.hub-area h2 { margin: 0 0 18px; font-family: "Raleway", "Manrope", sans-serif; font-size: clamp(28px, 3.8vw, 52px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; }
.hub-area__intro { margin: 0 0 28px; color: var(--muted); font-size: 17px; }
.hub-text-link { display: inline-flex; align-items: baseline; gap: 22px; padding-block: 10px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; }
.hub-text-link span:last-child { transition: transform .15s ease; }
.hub-text-link:hover span:last-child { transform: translate(3px, -3px); }
.hub-module-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 30px 0 0; padding: 0; list-style: none; }
.hub-module-list li { border-top: 1px solid var(--line); }
.hub-module-list a { display: flex; gap: 12px; padding-block: 13px; font-size: 11px; }
.hub-module-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
.hub-module-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-research-list { margin: 34px 0 32px; padding: 0; list-style: none; }
.hub-research-list li { border-top: 1px solid var(--line); }
.hub-research-list a { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; padding-block: 22px; }
.hub-research-list small { color: var(--muted); font-size: 10px; }
.hub-research-list strong { font-size: 17px; font-weight: 500; line-height: 1.5; }
.hub-research-list a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.hub-area__note { max-width: 400px; margin: 30px 0 0; color: var(--muted); font-size: 12px; }
.hub-study { padding-block: clamp(44px, 6vw, 84px); border-top: 1px solid var(--line); }
.hub-study--with-period { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 86px); align-items: center; }
.hub-study__copy { min-width: 0; }
.hub-study__number { margin-bottom: 22px; }
.hub-study__kicker { margin: 0 0 18px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hub-study h2 { max-width: 700px; margin: 0 0 24px; font-family: "Raleway", "Manrope", sans-serif; font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.hub-study__description { max-width: 560px; margin: 0 0 26px; color: var(--muted); font-size: 15px; }
.hub-study__status { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 24px; font-size: 10px; color: var(--muted); }
.hub-study__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.hub-period { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding: clamp(30px, 4vw, 52px); background: #e8ece9; }
.hub-period__label { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hub-period__years { display: flex; flex-direction: column; margin: 22px 0; font-size: clamp(60px, 7vw, 104px); font-weight: 500; letter-spacing: -.065em; line-height: 1.2; }
.hub-period__years span:last-child { padding-left: 20%; color: #697371; border-top: 1px solid #bdc6c1; }
.hub-period__note { margin: 0; color: var(--muted); font-size: 11px; }
.hub-footer { margin-top: clamp(48px, 6vw, 88px); padding-block: 36px; background: var(--dark); color: #fff; }
.hub-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; font-size: 11px; }
.hub-footer__links { display: flex; flex-wrap: wrap; gap: 28px; }
.hub-footer a { border-bottom: 1px solid #737a7a; padding-bottom: 5px; }
.hub-footer a:hover { border-bottom-color: var(--signal); }
@media (max-width: 900px) {
  .hub-header__inner { gap: 22px; padding-inline: clamp(20px, 3.2vw, 34px); }
  .hub-header__actions { gap: 16px; }
  .hub-nav { gap: 18px; }
  .hub-hero__bottom { grid-template-columns: 1fr; gap: 26px; }
  .hub-hero__index { justify-content: flex-start; }
  .hub-area-grid { grid-template-columns: 1fr; }
  .hub-area__inner { max-width: none; }
  .hub-area h2 { font-size: clamp(30px, 6vw, 48px); }
  .hub-study--with-period { gap: 32px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (max-width: 600px) {
  .hub-header__inner { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 16px; row-gap: 20px; }
  .hub-brand { flex-basis: 84px; }
  .hub-brand img { width: 84px; }
  .hub-nav { order: 3; flex-basis: 100%; gap: 26px; }
  .hub-contact { font-size: 9px; }
  .hub-breadcrumb { padding-block: 24px; }
  .hub-hero { padding-top: 28px; }
  .hub-hero h1 { font-size: clamp(40px, 10.7vw, 64px); }
  .hub-hero__index { flex-wrap: wrap; gap: 12px 24px; }
  .hub-module-list { grid-template-columns: 1fr; }
  .hub-study--with-period { grid-template-columns: 1fr; }
  .hub-period { min-height: 300px; }
  .hub-period__years { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 18px; font-size: clamp(48px, 14vw, 78px); }
  .hub-period__years span:last-child { padding-left: 0; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-text-link span:last-child { transition: none; }
}
