:root {
  --color-bg: #f0f1ee;
  --color-navy: #1e2a3a;
  --color-navy-70: rgba(30, 42, 58, 0.7);
  --color-navy-50: rgba(30, 42, 58, 0.5);
  --color-accent: #f2b705;
  --color-accent-strong: #d9a400;
  --color-accent-text: #a67a00;
  --color-surface: #ffffff;
  --color-surface-muted: #e7e9e5;
  /* Amarillo de marca a mayor luminosidad: mismo tono (45) y misma saturacion
     (96%) que --color-accent, solo mas claro. Sustituye a las cajas blancas
     para romper el exceso de off-white. Contraste 5.0:1 con --color-slate y
     11.4:1 con --color-navy, o sea AA para texto normal. */
  --color-panel-warm: #fde291;
  --color-panel-warm-border: rgba(217, 164, 0, 0.45);
  --color-border: rgba(30, 42, 58, 0.12);
  --color-slate: #55606e;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-mono: "Source Sans 3", system-ui, sans-serif;

  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

/* Ensure [hidden] always wins over display rules (e.g. .lead-capture display:grid) */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* Faint engineering-grid backdrop for hero/section backgrounds */
/* Grid backdrop removed — flat backgrounds. Classes kept as no-ops so existing
   markup (hero / contact panels) needs no changes. */
.bg-grid {
}

.bg-grid-dark {
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-navy);
}

h1 {
  font-size: clamp(2.75rem, 8vw, 5.625rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.12;
}

h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.375rem);
  line-height: 1.25;
}

p {
  margin: 0;
  color: var(--color-slate);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(240, 241, 238, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-navy);
  white-space: nowrap;
  flex-shrink: 0;
}

.logo span {
  color: var(--color-accent-text);
}

.logo-img {
  display: block;
  height: 90px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.footer-brand .logo-img {
  height: 44px;
}

.main-nav {
  display: none;
  align-items: center;
  /* .wrap esta topado en 1200px, asi que el espacio disponible es constante en
     todo el desktop: 1200 - 139 (logo) - 185 (acciones) = 876px para el nav.
     Los 6 items suman 689px a 15px, dejando 187px repartibles en 5 huecos.
     28px deja ~47px de margen de seguridad. Un gap en vw creceria sin que
     hubiera mas espacio real y desbordaria en pantallas anchas. */
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.main-nav a {
  white-space: nowrap;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-navy-70);
}

.main-nav a:hover {
  color: var(--color-navy);
}

.main-nav a[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
}

@media (min-width: 1280px) {
  .main-nav {
    display: flex;
  }
}

/* Nav dropdowns (desktop, hover/focus) */
.main-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.main-nav .nav-item.has-dropdown > a::after {
  content: "\25be"; /* ▾ */
  margin-left: 5px;
  font-size: 0.8em;
  color: var(--color-navy-50);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(30, 42, 58, 0.14);
  padding: 8px;
  display: none;
}

.nav-dropdown--wide {
  columns: 2;
  column-gap: 4px;
  min-width: 480px;
}

.main-nav .nav-item.has-dropdown:hover > .nav-dropdown,
.main-nav .nav-item.has-dropdown:focus-within > .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-navy-70);
  white-space: nowrap;
  break-inside: avoid;
}

.nav-dropdown a:hover {
  background: var(--color-surface-muted);
  color: var(--color-navy);
}

.nav-dropdown .nav-dropdown-all {
  font-weight: 600;
  color: var(--color-navy);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-cta {
  display: none;
}

@media (min-width: 640px) {
  .header-cta {
    display: inline-flex;
  }
}

.locale-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.locale-switch a {
  display: inline-flex;
  min-width: 28px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-slate);
}

.locale-switch a[aria-current="true"] {
  background: var(--color-navy);
  color: #fff;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-navy);
}

.btn-primary:hover {
  background: var(--color-accent-strong);
}

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-navy-50);
}

.btn-navy {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}

.btn-navy:hover {
  background: #28374a;
  border-color: #28374a;
}

/* Hero */
.hero {
  border-bottom: 1px solid var(--color-border);
  padding: 64px 0;
}

.hero .wrap {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .hero .wrap {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero h1 {
  margin-top: 16px;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}

.hero p.lead {
  margin-top: 24px;
  max-width: 38rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.trust-line {
  margin-top: 32px;
  font-size: 14px;
  color: var(--color-slate);
}

/* Card / tool */
.tool-card {
  border: 1px solid var(--color-panel-warm-border);
  border-radius: 14px;
  background: var(--color-panel-warm);
  padding: 24px;
  box-shadow: 0 1px 0 0 rgba(30, 42, 58, 0.04);
}

@media (min-width: 640px) {
  .tool-card {
    padding: 32px;
  }
}

.tool-card .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-card .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
}

.tool-card p.desc {
  margin-top: 8px;
  /* Entradilla del quiz: sobre el panel amarillo, 14px en slate se leia
     debil. Navy en 17px/600 da 11.37:1 y ancla la jerarquia del bloque. */
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-navy);
}

.result-panel {
  margin-top: 32px;
  border-radius: 10px;
  background: var(--color-navy);
  color: #fff;
  padding: 24px;
}

/* CTA row inside the result panel — even gap, wraps cleanly on narrow widths. */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.result-panel .result-caption {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* En el estado vacio esta linea es el UNICO contenido del panel navy: es el
   mensaje que explica que hacer, no una nota al pie. A 12px/65% (6.97:1) se
   leia como letra chica. 16px/500 al 92% da 12.49:1. */
.result-state[data-state="empty"] .result-caption {
  margin-top: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* ESG question + choice toggle */
.esg-question {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
}

.choice-toggle {
  display: inline-flex;
  gap: 2px;
  margin-top: 12px;
  /* Pista blanca: sobre el panel amarillo el toggle transparente se fundia
     con el fondo y no se leia como control accionable. */
  background: #ffffff;
  border: 1px solid rgba(30, 42, 58, 0.18);
  border-radius: 999px;
  padding: 3px;
}

.choice-toggle button {
  min-width: 72px;
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-slate);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.choice-toggle button[aria-pressed="true"] {
  background: var(--color-navy);
  color: #fff;
}

/* Hero image */
.hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--color-surface-muted);
}

/* Home hero: the client's original is a portrait shot (896x1195), and the
   4/3 crop threw away the glass wall and most of the polished floor.
   Only the two index.html files use the base ratio — the 46 service pages
   override it inline to 16/9 — but this is scoped so it stays that way. */
.hero-img--portrait {
  aspect-ratio: 4 / 5;
}

/* Hero credential strip */
.hero-cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 36px;
}

.hero-cert-strip .stat {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
}

/* Teaser grid */
.teaser-grid {
  margin-top: 40px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .teaser-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Trio "Mas alla de la limpieza": navy, no blanco ni amarillo.
   Van entre los dos hubs amarillos y la banda de contacto, asi que el navy
   alterna el ritmo de la pagina y encadena hacia el CTA oscuro de abajo. */
.teaser-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-navy);
  border-radius: 12px;
  background: var(--color-navy);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.teaser-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Todo el texto del card toma su color del propio panel oscuro. */
.teaser-card h3 {
  color: #ffffff;
}

.teaser-card p {
  color: rgba(255, 255, 255, 0.8);
}

/* El eyebrow dorado (--color-accent-text) da 3.73:1 sobre navy y no llega a
   AA; el amarillo de marca da 7.98:1 y aqui si funciona como acento. */
.teaser-card .eyebrow {
  color: var(--color-accent);
}

.teaser-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--color-surface-muted);
}

.teaser-card h3 {
  font-size: 1.05rem;
}

.teaser-card p {
  font-size: 14px;
}

.teaser-card .teaser-cta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
}

/* Tabbed explorer */
.explorer {
  scroll-margin-top: 88px;
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.tab {
  border: none;
  background: transparent;
  padding: 12px 2px;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-slate);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover {
  color: var(--color-navy);
}

.tab[aria-selected="true"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-accent);
}

/* Process steps */
.process-grid {
  margin-top: 8px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.process-grid .process-step {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
}

.process-grid h3 {
  margin-top: 8px;
  font-size: 1.05rem;
}

.process-grid p {
  margin-top: 8px;
  font-size: 14px;
}

/* Procurement-readiness scorecard */
.scorecard {
  margin-top: 20px;
}

.scorecard-q {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.scorecard-q:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.scorecard-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-navy);
}

.scorecard-q .choice-toggle {
  margin-top: 12px;
}

.scorecard-gaps {
  margin-top: 16px;
}

.scorecard-gaps-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.scorecard-gaps ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scorecard-gaps li {
  display: block;
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.scorecard-gaps li::before {
  content: "\00d7";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.scorecard-gaps li strong {
  font-weight: 600;
}

.gap-outcome {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.result-state .result-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.result-message {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.cert-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Footer certifications — full-width band, logos spread across the footer */
.footer-certs {
  margin-top: 24px;
}

.footer-certs-band {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-certs-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  text-align: center;
}

.footer-certs-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: center;
  justify-content: center;
}

/* Spread the logos edge-to-edge across the footer once there's room. */
@media (min-width: 720px) {
  .footer-certs-band .footer-certs-logos {
    justify-content: space-between;
    gap: 32px;
  }
}

.cert-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0;
}

.cert-chip img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.disclaimer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--color-slate);
}

/* Sections */
.section {
  padding: 72px 0;
}

.section-muted {
  background: var(--color-surface-muted);
}

/* Consistent breathing room from a section heading to the block below it. */
.section-heading + .tool-card,
.section-heading + .explorer {
  margin-top: 40px;
}

/* Careers / "Trabaja con nosotros" */
.careers-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.careers-wrap .section-heading {
  margin: 0;
}

.careers-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Full-bleed photo band. Lives outside .wrap, so it spans the section's full
   width without negative margins or 100vw (no horizontal scrollbar). */
.bleed-band {
  margin: 40px 0;
}

.bleed-band img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 768px) {
  .bleed-band img {
    aspect-ratio: 21 / 9;
  }
}

/* Careers page — application form + HR contact aside */
.careers-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}

@media (min-width: 860px) {
  .careers-layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
  }
}

.careers-form {
  display: grid;
  gap: 16px;
  max-width: 34rem;
}

.careers-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
}

.careers-form input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 11px 12px;
}

.careers-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.3);
}

.careers-note {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0;
}

.careers-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.careers-error {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #b42318;
}

.careers-consent {
  margin: 0;
  font-size: 12px;
  color: var(--color-slate);
}

.careers-aside {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 24px;
}

.careers-aside-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
}

.careers-aside p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-slate);
}

.careers-contact {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.careers-contact a {
  color: var(--color-navy);
  font-weight: 500;
  text-decoration: none;
}

.careers-contact a:hover {
  text-decoration: underline;
}

.section-heading {
  max-width: 40rem;
}

.section-heading p {
  margin-top: 24px;
}

.section-heading h2,
.section-heading h1 {
  margin-top: 12px;
}

/* Page-title H1s inside section/positioning headers use the base H1 size so
   every page shares one consistent top-of-scale title (H1 ≫ H2 ≫ H3). */
.section-heading h1,
.positioning h1 {
  font-size: clamp(2.75rem, 8vw, 5.625rem);
  line-height: 1.08;
}

/* Credentials */
.credentials-grid {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .credentials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.credential-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 20px;
}

.credential-card .tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
}

.credential-card .tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
}

.credential-card p {
  margin-top: 8px;
  font-size: 14px;
}

/* Chip strip (summaries) */
.chip-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .chip-header {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* Sentence-length hero headline: steps below the display scale so a long line
   doesn't fill the viewport before any content shows. */
h1.h1-long {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.14;
}

/* Breathing room between the page title and its subtext (matches landing hero). */
.chip-header p {
  margin-top: 24px;
}

.chip-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 8px 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.chip span.chip-label {
  font-size: 14px;
  font-weight: 500;
}

/* Positioning (image + text) */
.positioning {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .positioning {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.positioning img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--color-surface-muted);
}

.positioning p {
  margin-top: 24px;
  max-width: 34rem;
}

.positioning .btn {
  margin-top: 32px;
}

/* Module grid (services/industries/resources) */
.module-grid {
  margin-top: 48px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.module-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.module-card:hover {
  border-color: rgba(242, 183, 5, 0.6);
  transform: translateY(-2px);
}

/* Press feedback: card turns yellow on click */
.module-card:active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
  transform: translateY(0);
}

.module-card:active .module-cta {
  color: var(--color-navy);
}

.module-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.module-card .module-body {
  padding: 24px;
}

.module-card .module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-card .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-slate);
}

.module-card h3 {
  margin-top: 16px;
  font-size: 1.05rem;
}

.module-card p {
  margin-top: 8px;
  font-size: 14px;
}

.module-card .module-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-text);
}

/* Contact band */
.contact-band {
  padding: 64px 0;
}

.contact-band .panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 14px;
  background-color: var(--color-navy);
  color: #fff;
  padding: 40px;
}

@media (min-width: 640px) {
  .contact-band .panel {
    flex-direction: row;
    align-items: center;
  }
}

.contact-band-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
}

.contact-band .btn-primary {
  flex-shrink: 0;
}

/* Contact section detail */
.contact-detail {
  margin-top: 40px;
  display: grid;
  gap: 24px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  padding: 32px;
}

@media (min-width: 640px) {
  .contact-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-detail .field-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slate);
}

.contact-detail .field-value {
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.75);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 48px 0;
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-brand .logo {
  color: #fff;
}

.footer-brand p {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

.footer-col ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile nav */
.mobile-nav-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 1280px) {
  .mobile-nav-toggle {
    display: none;
  }
}

.mobile-nav-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--color-border);
}

.mobile-nav-panel.open {
  display: flex;
}

.mobile-nav-panel a {
  padding: 10px 0;
  text-decoration: none;
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}

/* Mobile nav collapsible groups (services / industries) */
.mnav-group {
  border-bottom: 1px solid var(--color-border);
}

.mnav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}

.mnav-group > summary::-webkit-details-marker {
  display: none;
}

.mnav-group > summary::after {
  content: "\25be"; /* ▾ */
  color: var(--color-navy-50);
}

.mnav-group[open] > summary::after {
  content: "\25b4"; /* ▴ */
}

.mnav-group a {
  padding: 8px 0 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-70);
  border-bottom: none;
}

.mnav-group a.nav-dropdown-all {
  color: var(--color-navy);
  font-weight: 600;
}

@media (min-width: 1280px) {
  .mobile-nav-panel {
    display: none !important;
  }
}

/* Content pages (services / essays) */
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.prose-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose-list li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 15px;
  color: var(--color-slate);
}

.prose-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
}

/* Flip cards (facility management) */
.flip-card {
  perspective: 1200px;
  cursor: pointer;
  outline: none;
  align-self: start;
}

.flip-card .flip-inner {
  position: relative;
  transition: transform 0.55s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-surface);
}

.flip-front {
  position: relative;
  display: flex;
  flex-direction: column;
}

.flip-front img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* Front face uses the same padding scale as .module-card, whose rules are
   scoped to that class and so never reached these cards. */
.flip-front .module-body {
  padding: 24px;
}

.flip-front .module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flip-front .module-top + h3 {
  margin-top: 16px;
}

.flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}

.flip-back h3 {
  color: var(--color-navy);
  font-size: 1.05rem;
}

.flip-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.flip-list li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
}

.flip-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-navy);
}

/* Report gate / lead capture (inside the navy result panel) */
.report-gate {
  margin-top: 20px;
}

.report-gate .report-cta {
  width: 100%;
}

.lead-capture {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.lead-intro {
  margin: 0 0 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.lead-capture label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

.lead-capture input {
  font-family: var(--font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 11px 12px;
}

.lead-capture input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.35);
}

.lead-capture .lead-submit {
  width: 100%;
  margin-top: 4px;
}

.lead-error {
  margin: 0;
  font-size: 13px;
  color: #ffd0c7;
}

.lead-consent {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.lead-success p {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
}

/* Secondary button rendered on the navy panel */
/* Boton fantasma sobre el panel navy de resultados.
   Faltaba declarar el fondo: ni .btn ni esta regla lo definian, asi que el
   <button> caia al buttonface del navegador (#efefef) y quedaba texto blanco
   sobre gris claro — 1.07:1, ilegible. Se veia como una caja en blanco en el
   resultado de las dos calculadoras. Transparente sobre navy da 14.51:1. */
.btn-on-navy {
  display: inline-block;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-on-navy:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Card/subsection H3 tier — clearer step below H2, above body. */
.teaser-card h3,
.module-card h3,
.flip-back h3,
.flip-front h3,
.process-grid h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.375rem);
}

/* Off-white backdrop behind content images (shows on load / letterboxing).
   Scoped to <main> so the header logo and footer cert logos are untouched. */
main img {
  background-color: var(--color-bg);
}

/* Cookie / privacy notice banner (injected by calculators.js) */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--color-navy);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}
.cookie-banner p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.cookie-banner a {
  color: var(--color-accent);
}
.cookie-accept {
  flex-shrink: 0;
  background: var(--color-accent);
  color: var(--color-navy);
  border: 0;
  border-radius: 8px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.cookie-accept:hover {
  background: var(--color-accent-strong);
}

/* ------------------------------------------------------------------
   Dual heading — two text blocks side by side (home: bioseguridad +
   seguridad de datos). Collapses to one column below 900px.
   ------------------------------------------------------------------ */
.dual-heading {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .dual-heading {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Inside a column the 40rem cap would leave the grid half empty. */
.dual-heading .section-heading {
  max-width: none;
}

.dual-heading .prose-list {
  margin-top: 24px;
  max-width: none;
}

/* Paneles de color de la seccion dual.
   La pagina venia siendo casi toda #f0f1ee y este bloque se leia apagado.
   Se resuelve con dos cajas dentro de la paleta de marca: una en tinte del
   amarillo y otra en navy solido, que ademas rima con la banda de contacto. */
.dual-panel {
  padding: 40px 36px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /* Arriba, no centrado: con contenido de distinto largo el centrado dejaba
     los dos H2 a alturas distintas y se leia como un error de maquetado. */
  justify-content: flex-start;
}

@media (max-width: 620px) {
  .dual-panel {
    padding: 32px 24px;
  }
}

.dual-panel--warm {
  background: var(--color-panel-warm);
  border: 1px solid var(--color-panel-warm-border);
}

.dual-panel--navy {
  background: var(--color-navy);
  border: 1px solid var(--color-navy);
}

/* El texto del panel oscuro toma su color del propio panel, nunca de los
   tokens claros, o quedaria navy sobre navy. */
.dual-panel--navy h2 {
  color: #ffffff;
}

.dual-panel--navy p,
.dual-panel--navy .prose-list li {
  color: rgba(255, 255, 255, 0.8);
}

.dual-panel--navy .prose-list li::before {
  background: var(--color-accent);
}

/* ------------------------------------------------------------------
   Hub card — one card per section; hovering reveals the full list
   with thumbnails, same idea as the header dropdowns.
   The panel is absolutely positioned so nothing below it shifts.
   Pointer-less devices (phones/tablets) never get the panel: they
   keep the face card and reach the list through its CTA or the menu.
   ------------------------------------------------------------------ */
.hub {
  position: relative;
  margin-top: 48px;
  border: 1px solid var(--color-panel-warm-border);
  border-radius: 10px;
  background: var(--color-panel-warm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub:hover,
.hub:focus-within {
  border-color: rgba(242, 183, 5, 0.6);
}

/* Clipping lives on the face, not on .hub — the panel has to be able to
   overflow past the card the way a nav dropdown does. */
.hub-face {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 9px;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hub-face {
    grid-template-columns: 1.05fr 1fr;
    /* Tall enough that the 14-service panel keeps its bottom padding. */
    min-height: 400px;
  }
}

.hub-face img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hub-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

@media (min-width: 900px) {
  .hub-copy {
    padding: 48px;
  }
}

.hub-copy h3 {
  margin-top: 16px;
  font-size: 1.85rem;
}

.hub-copy p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.5;
}

.hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 700;
  /* Navy, no --color-accent-text: el dorado sobre el panel amarillo daba
     3.05:1 y no llega a AA. Navy sobre #fde291 da 11.37:1. */
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hub-cta:hover {
  color: #000;
}

/* Misma razon: el eyebrow dorado es ilegible sobre las cajas amarillas. */
.hub .eyebrow,
.tool-card .eyebrow {
  color: var(--color-navy);
  font-size: 15px;
}

.hub-cta:hover {
  text-decoration: underline;
}

/* "Pasa el cursor…" hint — only meaningful where hover exists. */
.hub-hint {
  display: none;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  /* Sobre amarillo, --color-slate (5.01:1) pasa AA pero se lee debil a 13px;
     navy-70 sube el contraste sin competir con el titulo. */
  color: var(--color-navy-70);
}

.hub-panel {
  display: none;
}

@media (hover: hover) and (min-width: 900px) {
  .hub-hint {
    display: block;
  }

  .hub-panel {
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    min-height: calc(100% + 2px);
    z-index: 20;
    padding: 28px 32px;
    background: var(--color-surface);
    border: 1px solid rgba(242, 183, 5, 0.6);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(30, 42, 58, 0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }

  /* .is-open is set by initHubs() in calculators.js and is the path that
     actually runs; :hover/:focus-within stay as the no-JS fallback. */
  .hub.is-open .hub-panel,
  .hub:hover .hub-panel,
  .hub:focus-within .hub-panel {
    opacity: 1;
    visibility: visible;
  }
}

.hub-panel-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
}

.hub-panel-all:hover {
  color: var(--color-accent-text);
}

.hub-list {
  margin-top: 16px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  .hub-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-navy-70, var(--color-slate));
  font-size: 14px;
  line-height: 1.25;
  transition: background 0.12s ease, color 0.12s ease;
}

.hub-item:hover {
  background: var(--color-surface-muted);
  color: var(--color-navy);
}

.hub-item img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
}

/* .hub--lg (Industrias): only 9 items in 3 columns, so the panel has vertical
   room to spare — use bigger thumbnails there. The services hub keeps 44px
   because its 14 items already fill the panel height. Thumb files are 160px,
   so they stay sharp at 2x up to 80px. */
.hub--lg .hub-item {
  gap: 14px;
  padding: 8px 10px;
}

.hub--lg .hub-item img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
}

.hub--lg .hub-item span {
  font-size: 15px;
}