/* ============================================================
   Grupo Summum · Holding — estilos propios de la web paraguas.
   Carga DESPUÉS de colors_and_type.css, summum-system.css,
   kit-shell.css y page-shell.css. Solo añade lo que la matriz
   necesita y que no vive en el sistema compartido.
   Por Summum Marketing.
   ============================================================ */

/* ---------- Guarda global anti-scroll horizontal ----------
   Los elementos decorativos (círculos del hero, blobs de las
   cards, marquee) pueden asomar por el borde en viewports
   estrechos. El papel nunca debe scrollear en horizontal. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--inv);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Nav móvil horneada ---------- */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  justify-self: end;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav.mobile-open .mobile-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.mobile-open .mobile-toggle span:nth-child(2) { opacity: 0; }
.nav.mobile-open .mobile-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* La doble u del wordmark en el nav usa el oro gradiente del holding */
.brand-summum .brand .wordmark .u {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none; /* el oro no parpadea de color; la oscilación la lleva la línea */
}
.brand-summum.on-dark .brand .wordmark .u,
.brand-summum .footer .brand .wordmark .u { background: var(--accent-grad); }

/* ---------- Eyebrow del hero con punto oro ---------- */
.brand-summum .eyebrow .dot,
.brand-summum .hero-eyebrow .dot { background: var(--gold-deep); }

/* ---------- Hero: el blob oro y los círculos ---------- */
.brand-summum .hero-blob { background: var(--accent-grad); }

/* ---------- Manifiesto / lema del grupo ---------- */
.creed {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.creed .creed-mark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.creed .creed-mark .gold {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.creed p { font-size: 18px; line-height: 1.6; color: var(--fg-dim); margin: 0 0 1.1em; max-width: 56ch; }
.creed p:last-child { margin-bottom: 0; }
.creed p strong { color: var(--fg); font-weight: 500; }
.creed p em { font-family: var(--serif); font-style: italic; }

/* ---------- Métricas del grupo: la doble-u oro ---------- */
.brand-summum .metric .v .u { color: var(--accent-on-dark); }

/* ---------- Las seis marcas (refuerza subs-grid de kit-shell) ---------- */
.subs-grid.holding-subs { grid-template-columns: repeat(3, 1fr); }
.sub-card .sub-domain {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  margin-top: 6px;
}
.sub-card .corner {
  position: absolute;
  top: -60px; right: -60px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  opacity: 0.07;
  pointer-events: none;
}
.sub-card.is-holding { background: var(--ink); color: var(--inv); border-color: transparent; }
.sub-card.is-holding p { color: var(--inv-dim); }
.sub-card.is-holding .sub-tag { color: var(--inv-mute); }
.sub-card.is-holding .sub-domain { color: var(--inv-mute); }
.sub-card.is-holding h3 .it {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sub-card.is-holding .more { color: var(--accent-on-dark); }
.sub-card .more .arr { transition: transform 220ms ease; }
.sub-card:hover .more .arr { transform: translateX(3px); }

/* ---------- Oficinas (reusa loc de kit-shell, ajustes holding) ---------- */
.brand-summum .loc.hq { background: var(--accent-soft); }
.brand-summum .loc .dash { background: var(--gold-deep); }
.loc .addr { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--fg-mute); letter-spacing: 0.02em; }

/* ---------- Línea de tiempo (página grupo) ---------- */
.timeline { display: grid; grid-template-columns: 1fr; gap: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.tl-row:last-child { border-bottom: 0; }
.tl-row .year {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.tl-row .year .gold {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tl-row .tl-body h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.tl-row .tl-body p { font-size: 15px; line-height: 1.6; color: var(--fg-dim); margin: 0; max-width: 60ch; }

/* ---------- Gobernanza ---------- */
.gov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gov-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.gov-card .gov-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gov-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.gov-card p { font-size: 14px; line-height: 1.6; color: var(--fg-dim); margin: 0; }

/* ---------- Quote / lema con resalte oro ---------- */
.brand-summum .quote p .hl { background: var(--gold-soft); }

/* ---------- Botón oro del holding sobre tinta ---------- */
.brand-summum .btn-accent { background: var(--accent-grad); color: #16140F; }
.brand-summum .btn-accent:hover { filter: brightness(1.04); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .mobile-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 16px var(--pad-x) 24px;
  }
  .nav.mobile-open .nav-links { display: flex; }
  .nav.mobile-open .nav-links a { padding: 12px 14px; font-size: 15px; }
  .creed { grid-template-columns: 1fr; gap: 28px; }
  .subs-grid.holding-subs { grid-template-columns: 1fr; }
  .gov-grid { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .tl-row .year { font-size: 32px; }
}