/* B. ADVISERS — estilos estáticos */
:root {
  --navy: #1a3d6b;
  --navy-dark: #0f2847;
  --navy-footer: #1d4a7a;
  --teal: #4a90a4;
  --teal-light: #6eb5c4;
  --teal-accent: #5eb8d4;
  --gold: #c9b88a;
  --cream: #ede6d6;
  --panel: #eef1f5;
  --gray-50: #f9fafb;
  --gray-200: #e5e7eb;
  --max-w: 80rem;
  --side-w: 18rem;
  --side-nav-radius: 2rem;
  --side-nav-v-gap: clamp(2rem, 7.5vh, 4rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition:
      opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1),
      transform 2.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

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

a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .container { padding: 0 2.5rem; }
}

/* Logo */
.logo { font-weight: 700; line-height: 1; display: inline-flex; align-items: baseline; }
.logo--white { color: #fff; transition: color 0.35s ease; }
.logo--teal { color: var(--teal); }
.logo--sm { font-size: 1.5rem; }
.logo--md { font-size: 2.25rem; }
.logo--lg { font-size: 3.75rem; }
.logo-dot { color: var(--teal-accent); }
.logo-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--teal);
  padding: 1rem;
}
.logo-box--white { border-color: #fff; color: #fff; }
.logo-box__sub {
  margin-top: 0.5rem;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
}
.logo-box__sub small {
  display: block;
  font-size: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.8;
  margin-top: 2px;
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

@media (min-width: 1024px) {
  .site-header {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
    padding-right: max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
  }
}

/* Header sobre secciones claras (fuera del hero) */
.site-header--light {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 12px rgba(26, 61, 107, 0.08);
}

.site-header--light .logo--white {
  color: var(--navy);
}

.site-header--light .menu-toggle span {
  background: var(--navy);
}

/* Menú abierto: mantener logo/hamburguesa blancos sobre el overlay */
body.nav-open .site-header {
  background: transparent;
  box-shadow: none;
}

body.nav-open .site-header .logo--white {
  color: #fff;
}

body.nav-open .site-header .menu-toggle span {
  background: #fff;
}
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: background 0.35s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Panel de navegación derecho — oculto hasta activar menú */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 40, 71, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.nav-open { overflow: hidden; }

.side-nav {
  display: flex;
  position: fixed;
  top: 50%;
  right: 0;
  width: min(var(--side-w), 88vw);
  height: auto;
  max-height: calc(100vh - 2 * var(--side-nav-v-gap));
  background: var(--panel);
  padding: 2rem 1.75rem 2rem 2rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: -8px 0 32px rgba(26, 61, 107, 0.15);
  border-radius: var(--side-nav-radius) 0 0 var(--side-nav-radius);
  z-index: 60;
  transform: translate(100%, -50%);
  transition: transform 0.35s ease, visibility 0.35s ease;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.nav-open .side-nav {
  transform: translate(0, -50%);
  visibility: visible;
}
.side-nav nav ul { list-style: none; }
.side-nav nav a {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  color: rgba(26, 61, 107, 0.7);
  font-weight: 500;
  transition: color 0.2s;
}
.side-nav nav a:hover,
.side-nav nav a.active { color: var(--navy); font-weight: 600; }
.side-nav__logo {
  display: block;
  margin-bottom: 2rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
.side-nav__logo:hover { opacity: 0.9; }
.site-logo-img--menu {
  display: block;
  width: min(100%, 12rem);
  max-width: 100%;
  height: 9rem;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}
.side-nav__contact {
  border-top: 1px solid #ccc;
  padding-top: 1.5rem;
}
.side-nav__contact p { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--navy); }
.side-nav__contact a { font-size: 0.875rem; color: var(--teal); margin-top: 0.25rem; display: block; }


.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.menu-toggle span {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.hero--short { min-height: calc(70vh - 80px); }
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,61,107,0.88) 0%, rgba(74,144,164,0.75) 100%);
}
.hero > .hero-overlay {
  background: linear-gradient(135deg, rgba(26, 61, 107, 0.55) 0%, rgba(74, 144, 164, 0.5) 100%);
}
.hero:has(.section-label--hero) > .hero-overlay {
  background: linear-gradient(135deg, rgba(26, 61, 107, 0.65) 0%, rgba(74, 144, 164, 0.65) 100%);
}
.hero__content {
  position: relative;
  z-index: 10;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  transform: translateY(-40px);
}

/* Etiqueta de sección — estilo unificado (referencia Alcance) */
.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: auto;
  padding: 0.4375rem 1.125rem;
  border: 1px solid var(--navy);
  border-radius: 9999px;
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.section-label--hero {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  background: transparent;
  margin-bottom: 1.5rem;
}
.hero__tagline {
  max-width: 56rem;
  white-space: normal;
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.hero__tagline-accent {
  display: inline;
}
.hero__brand {
  margin-top: 1.35rem;
  max-width: 44rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: clamp(0.875rem, 1.35vw, 1.0625rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: 0.75rem;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s ease;
}
.hero__btn:hover {
  background: #e4dcc9;
  transform: translateY(-1px);
}
.hero__title {
  max-width: 56rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
.hero__subtitle {
  max-width: 42rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
}

/* Sections */
.section { padding: 5.5rem 0; }
.section--gray { background: var(--gray-50); }
.section__title {
  font-size: 1.75rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .section { padding: 7rem 0; }
  .section__title { font-size: 1.875rem; }
}
.text-muted { color: rgba(26, 61, 107, 0.8); font-size: 0.875rem; line-height: 1.7; }

.page-title {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 7rem 1.5rem 2rem;
  color: var(--navy);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}
.page-title--posts { padding-bottom: 1rem; }
.post-title-wrap { padding-top: 7rem; padding-bottom: 2rem; text-align: center; }
.post-title-wrap .page-title { padding: 1.5rem 0 0; text-align: center; }

/* Compact the page heading-to-collection transition only on Capacidades and
   Sectores; other internal pages keep their current spacing. */
.page-id-9 .page-title,
.page-id-10 .page-title { padding-bottom: 0.75rem; }
.page-id-9 .services-section,
.page-id-10 .industries-section { padding-top: 2rem; }
.page-id-10 .industries-section { background: #fff; }

/* Keep internal pages compact without changing the approved Home or
   Capacidades layouts. */
.blog .page-title--posts { padding-bottom: 0.75rem; }
.blog .blog-grid { margin-top: 1rem; }
.page-id-152 .page-title--posts { padding-bottom: 0.75rem; }
.page-id-152 .section,
body.blog .section { padding-top: 2rem !important; }
.page-id-152 .blog-grid,
body.blog .blog-grid { margin-top: 1rem !important; }

/* Publication detail pages and category archives use the same compact
   heading-to-content transition as the Publications index. */
.single-post .post-title-wrap { padding-bottom: 0.75rem; }
.single-post .post-title-wrap + .section { padding-top: 2rem; }
.archive.category .page-title--posts { padding-bottom: 0.75rem; }
.archive.category .section { padding-top: 2rem; }
.archive.category .blog-grid { margin-top: 1rem; }

.page:not(.page-id-8):not(.page-id-9):not(.page-id-10):not(.page-id-152) .page-title {
  padding-bottom: 0.75rem;
}

.page:not(.page-id-8):not(.page-id-9):not(.page-id-10)
  .wp-block-post-content > .services-section,
.page:not(.page-id-8):not(.page-id-9):not(.page-id-10)
  .wp-block-post-content > .industries-section,
.page:not(.page-id-8):not(.page-id-9):not(.page-id-10)
  .wp-block-post-content > .cases-section {
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  .page-title { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (max-width: 767px) {
  .page-title { padding-top: 6rem; padding-bottom: 1.5rem; font-size: 1.75rem; }
  .post-title-wrap { padding-top: 6rem; }
}

.identidad-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo-img--identidad {
  display: block;
  width: min(100%, 10.5rem);
  height: auto;
}
.identidad-copy p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.expansion-intro .text-muted {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.text-sm { font-size: 0.875rem; }
.grid-2 { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
.grid-3 { display: grid; gap: 2rem; }
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Quiénes somos */
.quienes-somos {
  background: #fff;
}

.quienes-somos__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2rem;
  max-width: 100%;
}

.quienes-somos__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  max-width: 100%;
}

.quienes-somos__intro p {
  color: #4a5568;
  font-size: 0.9375rem;
  line-height: 1.75;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

@media (min-width: 768px) {
  .quienes-somos__title,
  .quienes-somos__intro {
    max-width: 55%;
  }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

@media (min-width: 768px) {
  .stats-grid {
    gap: 2.5rem 2rem;
  }
}

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

.stats-grid__item {
  padding: 0;
}

.stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4a5568;
}

.stat-divider {
  height: 0;
  border-top: 1px solid #c8d6e3;
  margin: 0.75rem 0 1rem;
}

.stat-number {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
}

.stat-sub {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--teal);
}

/* Alcance Global */
.alcance-section.section--gray {
  background: #f4f7f9;
}

.alcance-section__title {
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 2.75rem;
}

.alcance-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .alcance-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
  }
}

.alcance-categories--svg {
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .alcance-categories--svg {
    gap: 1rem;
    align-items: stretch;
  }
}

.alcance-category-svg {
  margin: 0;
  min-width: 0;
}

.alcance-category-svg__img,
.alcance-category-svg img {
  display: block;
  width: 100%;
  height: auto;
}

.alcance-category__bar {
  background: #005c7a;
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.35;
}

.alcance-category__list-wrap {
  margin-top: 1rem;
}

.alcance-category__list {
  list-style: none;
  margin: 0;
  padding-left: 0.875rem;
  border-left: 1px solid #4a7a9a;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4a7a9a;
  line-height: 2.15;
}

.alcance-category__list-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  margin-top: 1rem;
}

.alcance-category__list-cols .alcance-category__list-wrap {
  margin-top: 0;
}

.alcance-layout {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .alcance-layout {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
    gap: 2rem;
    align-items: start;
  }
}

.alcance-copy {
  min-width: 0;
}

.alcance-copy__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.alcance-copy__text p {
  color: #4a5568;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.alcance-map {
  min-width: 0;
}

.alcance-map__slot {
  width: 100%;
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

.alcance-map__slot--empty {
  aspect-ratio: 4 / 5;
  max-height: 22rem;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8edf2;
  border: 1px dashed #b8c9d6;
  border-radius: 0.25rem;
}

.alcance-map__img {
  width: 100%;
  height: auto;
  max-height: 24rem;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  background: transparent;
}

.alcance-map__slot--empty::after {
  content: "Mapa de alcance";
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* Services grid */
.services-section {
  position: relative;
}

.services-section__container {
  position: relative;
}

.services-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.services-section__intro,
.industries-section__intro {
  flex: 1;
  min-width: 0;
  max-width: 34rem;
}

.services-watermark {
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.services-watermark img {
  display: block;
  height: clamp(8rem, 11vw, 10.5rem);
  width: auto;
  max-width: none;
}

.services-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .services-grid > .service-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
  }
}
.service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: start;
  border: 1px solid #d1d9e6;
  border-radius: 1.25rem;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  container-type: inline-size;
  container-name: service-card;
}

.service-card__media {
  grid-column: 1 / -1;
  height: calc(100cqw * 10 / 16 - 40px);
  overflow: hidden;
  background: #e8edf2;
}

.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__icon {
  margin: 1.25rem 0 0 1.5rem;
  color: #d6c490;
  line-height: 0;
  align-self: center;
}

.service-card__icon svg,
.service-card__icon img {
  display: block;
  width: 42px;
  height: 42px;
}

.service-card h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  align-self: center;
  margin: 1.25rem 1.5rem 0 0;
}

.service-card__text {
  grid-column: 1 / -1;
  flex: 1;
  margin: 0.75rem 1.5rem 1.5rem;
  /* WP core's global styles zero out margin-block-end on the last child of
     any .is-layout-flow block (":root :where(.is-layout-flow) > :last-child
     { margin-block-end: 0; }") to avoid double spacing when using its own
     block-gap system. This card uses fixed BEM margins instead, so that
     rule fights ours and needs to be beaten explicitly. */
  margin-block-end: 1.5rem !important;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(26, 61, 107, 0.7);
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}

.service-card__btn {
  display: inline-block;
  margin-top: 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background: #81d4e5;
  padding: 0.625rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.2s ease;
}

.service-card__btn:hover {
  background: var(--teal-light);
}
.btn-outline {
  display: inline-block;
  margin-top: 1.5rem;
  border: 1px solid var(--teal);
  border-radius: 0.25rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--teal);
  align-self: flex-start;
}
.btn-outline:hover { background: var(--teal); color: #fff; }
.btn-primary {
  display: inline-block;
  margin-top: 2rem;
  background: var(--teal);
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-primary:hover { background: var(--teal-light); }

.capital-intro {
  max-width: 26rem;
}

.capital-intro__logo {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(4.5rem, 11vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

.capital-intro__logo-dot {
  color: var(--teal-accent);
}

.capital-intro__eyebrow {
  margin: 1.5rem 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(26, 61, 107, 0.58);
}

.capital-intro__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.capital-intro__text {
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 61, 107, 0.62);
}

.capital-intro__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.875rem 2rem;
  border-radius: 0.625rem;
  background: var(--teal-light);
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.25s ease;
}

.capital-intro__cta:hover {
  background: var(--teal-accent);
}

.capital-section {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .capital-section {
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    gap: 2.5rem 3rem;
  }
}

/* Case tiles masonry */
.cases-section {
  padding-block: 3.5rem;
}

.cases-section .ba-collection-head,
.cases-section__title {
  margin-bottom: 2rem;
  text-align: center;
}

.case-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .case-masonry {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 20rem;
    gap: 0.75rem;
  }

  .case-masonry > .case-block {
    min-height: 0;
  }

  .case-masonry__slot-1 { grid-column: 1; grid-row: 1; }
  .case-masonry__slot-2 { grid-column: 1; grid-row: 2; }
  .case-masonry__slot-3 { grid-column: 2; grid-row: 1 / 3; }
  .case-masonry__slot-4 { grid-column: 3; grid-row: 1; }
  .case-masonry__slot-5 { grid-column: 3; grid-row: 2; }
}

.case-block {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 0.5625rem;
  min-height: 10rem;
}

/*
 * Every direct child is stacked into the same grid cell instead of using
 * `position: absolute` layers. This renders identically on the front end,
 * but (unlike absolute positioning) isn't broken by the block editor's own
 * wrapper element around each block, which forces `position: relative` on
 * itself and would otherwise become the wrong containing block for an
 * absolutely-positioned child, causing it to collapse to zero height.
 */
.case-block > * {
  grid-column: 1;
  grid-row: 1;
}

.case-block--navy,
.case-block--gold {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.25rem;
}

.case-block--navy {
  background: var(--navy);
  color: #fff;
}

.case-block--gold {
  background: var(--gold);
}

.case-block--image {
  min-height: 11rem;
}

.case-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-block__overlay {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.case-block__overlay--navy {
  background: linear-gradient(
    to top,
    rgba(26, 61, 107, 0.9) 0%,
    rgba(26, 61, 107, 0.74) 38%,
    rgba(26, 61, 107, 0.42) 68%,
    rgba(26, 61, 107, 0.12) 100%
  );
}

.case-block__overlay--gold {
  background: linear-gradient(
    to top,
    rgba(190, 172, 125, 0.94) 0%,
    rgba(201, 184, 138, 0.82) 38%,
    rgba(201, 184, 138, 0.42) 68%,
    rgba(201, 184, 138, 0.12) 100%
  );
}

.case-block__overlay--dark {
  background: linear-gradient(
    to top,
    rgba(15, 40, 71, 0.9) 0%,
    rgba(26, 61, 107, 0.74) 38%,
    rgba(26, 61, 107, 0.42) 68%,
    rgba(26, 61, 107, 0.12) 100%
  );
}

.case-block__overlay--teal {
  background: linear-gradient(
    to top,
    rgba(190, 228, 236, 0.96) 0%,
    rgba(210, 238, 244, 0.8) 35%,
    rgba(210, 238, 244, 0.38) 65%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.case-block__text {
  width: 100%;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.0625rem;
  padding: 1.25rem;
  color: #fff;
  z-index: 1;
}

.case-block__text--navy .case-sector,
.case-block__text--navy .case-amount,
.case-block__text--navy .case-block__sub {
  color: #fff;
  text-shadow: 0 1px 4px rgba(15, 40, 71, 0.45);
}

.case-block__text--navy .case-block__sub {
  opacity: 0.94;
}

.case-block__text--compact .case-amount {
  font-size: clamp(0.75rem, 1.25vw, 1rem);
}

.case-block__text--gold .case-sector,
.case-block__text--gold .case-amount,
.case-block__text--gold .case-block__sub {
  color: #fff;
  text-shadow: 0 1px 4px rgba(70, 55, 25, 0.5);
}

.case-block__text--gold .case-sector {
  opacity: 0.92;
}

.case-block__text--gold .case-block__sub {
  opacity: 0.94;
}

.case-block__text--teal .case-sector,
.case-block__text--teal .case-block__sub {
  color: rgba(26, 61, 107, 0.92);
}

.case-block__text--teal .case-amount {
  color: var(--navy);
}

.case-amount {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
}

.case-sector {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.15;
}

.case-block__sub {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 500;
  max-width: 16rem;
}

.case-block__region {
  align-self: start;
  justify-self: end;
  width: max-content;
  max-width: calc(100% - 2rem);
  height: auto;
  padding: 0.45rem 0.8rem;
  margin: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(15, 40, 71, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0.2rem 0.7rem rgba(15, 40, 71, 0.18);
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: right;
  text-shadow: none;
}

.case-block__title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Industries grid (3×2) — home */
.industries-section {
  background: #f8f9fa;
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(16.5rem, auto));
    gap: 1rem;
  }
}

.industry-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 1.125rem;
  min-height: 15rem;
}

/* See the matching comment on `.case-block > *`: stacking every direct
   child into the same grid cell (instead of `position: absolute`) keeps
   this layout intact inside the block editor's own wrapper divs. */
.industry-card > * {
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 768px) {
  .industry-card {
    min-height: 16.5rem;
    height: 100%;
  }
}

.industry-card__bg,
.industry-card > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industry-card__overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(8, 24, 44, 0.94) 0%,
    rgba(8, 24, 44, 0.78) 22%,
    rgba(8, 24, 44, 0.42) 42%,
    rgba(8, 24, 44, 0.08) 58%,
    transparent 72%
  );
  pointer-events: none;
}

.industry-card__content {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem 1.35rem;
  text-align: center;
  color: #fff;
}

@media (min-width: 768px) {
  .industry-card__content {
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 0.55rem;
  }
}

.industry-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: #7dd0df;
}

.industry-card__symbol,
.industry-card__icon img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.industry-card__title {
  margin: 0;
  font-size: clamp(0.75rem, 1.15vw, 0.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.industry-card__title::after {
  content: none;
}

.industry-card__text {
  margin: 0;
  max-width: 17rem;
  font-size: clamp(0.625rem, 0.95vw, 0.6875rem);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  opacity: 0.96;
  text-wrap: balance;
}

/* Team */
.team-section {
  background: #f8f9fa;
  overflow: visible;
}

.team-section .container {
  overflow: visible;
}

.team-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .team-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

.team-header__title {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--navy);
}

.team-header__tagline {
  margin-top: 0.25rem;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  color: rgba(26, 61, 107, 0.72);
}

.team-header__desc {
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--navy);
}

@media (min-width: 768px) {
  .team-header__desc {
    text-align: right;
  }
}

.team-slider {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: visible;
}

.team-slider__viewport {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(1.5rem, calc((100vw - var(--max-w)) / 2 + 1.5rem));
  padding-right: max(1.5rem, calc((100vw - var(--max-w)) / 2 + 1.5rem));
  box-sizing: border-box;
  /* Mockup source used `overflow: visible` here, which leaves nothing for
     initTeamSlider()'s viewport.scrollTo()/scrollLeft calls to act on, so
     the left/right marks never actually moved the track. overflow-x: auto
     makes it a real scroll container (arrows now work) while the hidden
     scrollbar keeps the visual identical to the mockup. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-slider__viewport::-webkit-scrollbar {
  display: none;
}

.team-slider__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  width: max-content;
  min-width: 100%;
  padding: 0.125rem 0;
}

/* Descendant (not direct-child) combinator on purpose: in the block editor,
   Gutenberg wraps each block (including reusable-block references) in its
   own div, so .team-card/.team-intro are no longer direct children of
   .team-slider__track there even though they are on the public site. A
   descendant selector matches both cases without changing anything on the
   frontend. */
.team-slider__track .team-intro,
.team-slider__track .team-card {
  flex: 0 0 auto;
  width: clamp(9.5rem, 42vw, 12.5rem);
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

/* team-intro is plain text on a solid background, not a cropped photo like
   team-card -- at narrow widths its fixed aspect-ratio height can be too
   short for the full sentence, and overflow:hidden was silently truncating
   it mid-word (confirmed present in the original mockup too, at the same
   mobile width). Let the text spill past the card's nominal height instead
   of clipping it; team-card keeps overflow:hidden since its photo does need
   cropping. */
.team-slider__track .team-intro {
  overflow: visible;
}

@media (min-width: 768px) {
  .team-slider__track .team-intro,
  .team-slider__track .team-card {
    width: clamp(10rem, 15vw, 13.5rem);
  }
}

@media (min-width: 1024px) {
  .team-slider__viewport {
    padding-left: max(2.5rem, calc((100vw - var(--max-w)) / 2 + 2.5rem));
    padding-right: max(2.5rem, calc((100vw - var(--max-w)) / 2 + 2.5rem));
  }
}

.team-slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.team-slider__mark {
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(74, 144, 164, 0.35);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}

.team-slider__nav[data-state="start"] .team-slider__mark--left {
  width: 1.75rem;
  background: var(--teal);
}

.team-slider__nav[data-state="start"] .team-slider__mark--right {
  width: 0.5rem;
}

.team-slider__nav[data-state="end"] .team-slider__mark--left {
  width: 0.5rem;
}

.team-slider__nav[data-state="end"] .team-slider__mark--right {
  width: 1.75rem;
  background: var(--teal);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.team-grid > .team-intro,
.team-grid > .team-card {
  width: 100%;
  min-width: 0;
  border-radius: 1rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-sizing: border-box;
}

/* Same fix as .team-slider__track .team-intro above: text-only card, let it
   spill past the fixed aspect-ratio height instead of silently clipping. */
.team-grid > .team-intro {
  overflow: visible;
}

@media (min-width: 1024px) {
  .team-grid:not(.team-grid--with-bios) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .team-grid:not(.team-grid--with-bios) > .team-intro,
  .team-grid:not(.team-grid--with-bios) > .team-card {
    flex: 1 1 0;
    width: 0;
    height: auto;
  }
}

.team-grid--with-bios {
  align-items: start;
}

/* Descendant combinators here on purpose, not direct-child (`>`) -- see the
   matching comment on .team-slider__track: the block editor inserts its own
   wrapper div around every block (including reusable-block references),
   which breaks a `>` selector in the editor even though the frontend has no
   such wrapper. */
.team-grid--with-bios .team-intro,
.team-grid--with-bios .team-card {
  width: 100%;
  min-width: 0;
  border-radius: 1rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-sizing: border-box;
}

/* Same text-clipping fix as the other .team-intro rules above. */
.team-grid--with-bios .team-intro {
  overflow: visible;
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.team-member__bio {
  font-size: 0.6875rem;
  line-height: 1.6;
  color: rgba(26, 61, 107, 0.8);
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

@media (min-width: 1024px) {
  .team-grid--with-bios {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .team-grid--with-bios .team-intro,
  .team-grid--with-bios .team-member {
    flex: 1 1 0;
    width: 0;
  }

  .team-member__bio {
    margin-top: 0.25rem;
    font-size: 0.625rem;
    line-height: 1.55;
  }
}

.team-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cream);
  padding: 1.25rem;
}

@media (min-width: 1024px) {
  .team-intro {
    padding: 1rem 0.875rem;
  }
}

.team-intro__logo {
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .team-intro__logo {
    font-size: clamp(2.5rem, 3.5vw, 3.75rem);
  }
}

.team-intro__text {
  margin-top: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 400;
  flex-shrink: 1;
  min-height: 0;
}

.team-card {
  position: relative;
  display: grid;
  background: #e8edf2;
  /* Fallback size for when this card is used standalone (the
     b-advisers/team-card block inserted directly on a page), not nested
     inside .team-slider__track or .team-grid, neither of which set an
     explicit width/aspect-ratio of their own -- without one, .team-card__
     media's width:100%/height:100% has no definite parent height to
     resolve against and the whole card collapses to near-zero height.
     .team-slider__track .team-card / .team-grid > .team-card below are
     more specific selectors, so they still override this everywhere the
     card is already used today. */
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
}

/* Same technique as .industry-card > * (see the comment there): a universal
   child selector grid-stacks whatever ends up as a direct child, including
   the wrapper div the block editor inserts around each block -- so photo,
   overlay and caption can be separate native blocks instead of one wp:html
   blob, and still visually stack like position:absolute did. */
.team-card > * {
  grid-column: 1;
  grid-row: 1;
}

.team-card__media {
  width: 100%;
  height: 100%;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.45s ease;
}

.team-card:hover .team-card__media img,
.team-card:focus-within .team-card__media img {
  filter: grayscale(0%);
}

@media (prefers-reduced-motion: reduce) {
  .team-card__media img {
    transition: none;
  }
}

.team-card--empty::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px dashed #b8c9d6;
  border-radius: 0.5rem;
  z-index: 0;
  pointer-events: none;
}

.team-card--empty::after {
  content: attr(data-photo);
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  color: #94a3b8;
  text-align: center;
  word-break: break-word;
  z-index: 0;
  pointer-events: none;
}

.team-card__overlay {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(15, 40, 71, 0.9) 0%,
    rgba(15, 40, 71, 0.4) 32%,
    transparent 58%
  );
  pointer-events: none;
}

.team-card__caption {
  align-self: end;
  justify-self: stretch;
  padding: 1rem;
  z-index: 1;
}

.team-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.team-card__role {
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.35;
}

/* Banner image section */
.banner-section {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 810;
  min-height: 16rem;
  max-height: 32rem;
  overflow: hidden;
  background: #c5d4de;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .banner-section {
    margin-top: 3.5rem;
  }
}

/*
 * WP alignfull compatibility: `.banner-section` hardcodes `width: 100%`, which is harmless in
 * the static mockup because its `<main>` has no horizontal padding (100% of main == viewport).
 * In the block theme, `.banner-section` sits inside `.wp-block-post-content` (has-global-padding),
 * so `width: 100%` resolves against the PADDED content box instead of the full-bleed box, leaving
 * a gutter equal to the root padding on the right edge despite the alignfull negative-margin
 * breakout already cancelling that padding.
 * Fix must keep `width` a DEFINITE value (not `auto`): this element also has `aspect-ratio` +
 * `max-height`, and CSS aspect-ratio sizing only derives height from width when width is auto;
 * once max-height clamps that derived height, an auto width gets recalculated BACKWARD through
 * the ratio (width = clamped-height * ratio), which under-fills the box. A plain `width: 100%`
 * does not have this problem because it is definite, so aspect-ratio only computes the missing
 * height from it and never reflows width — exactly how the mockup renders (full width, height
 * simply clamped). Reproduce that here by defining "100%" as the full-bleed box instead of the
 * padded content box.
 */
.wp-block-post-content .alignfull.banner-section {
  width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
}

.banner-section + .section {
  padding-top: 3rem;
}

@media (min-width: 768px) {
  .banner-section + .section {
    padding-top: 3.5rem;
  }
}

.banner-section img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(26, 61, 107, 0.22) 0%,
    rgba(26, 61, 107, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.banner-section--empty::before {
  content: "Mesa de trabajo 7bg barco.webp";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  z-index: 0;
}

.banner-section__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.banner-section--ejecucion .banner-section__overlay {
  background: rgba(26, 61, 107, 0.1);
}

/* Internal pages (home) */
.internal-pages-section {
  background: #fff;
}

.internal-pages-section__head {
  margin-bottom: 2.5rem;
  text-align: center;
}

.internal-pages-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .internal-pages-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.internal-page-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #d1d9e6;
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.internal-page-card:hover,
.internal-page-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(74, 144, 164, 0.55);
  box-shadow: 0 12px 28px rgba(15, 40, 71, 0.1);
  outline: none;
}

.internal-page-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8edf2;
}

.internal-page-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.internal-page-card:hover .internal-page-card__media img,
.internal-page-card:focus-visible .internal-page-card__media img {
  transform: scale(1.04);
}

.internal-page-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.5rem 1.5rem;
}

.internal-page-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
}

.internal-page-card__text {
  margin: 0.65rem 0 1.25rem;
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(26, 61, 107, 0.72);
}

.internal-page-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.02em;
}

.internal-page-card__cta::after {
  content: "→";
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}

.internal-page-card:hover .internal-page-card__cta::after,
.internal-page-card:focus-visible .internal-page-card__cta::after {
  transform: translateX(3px);
}

.banner-section--ejecucion .banner-section__content.container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.banner-section--ejecucion .banner-section__copy {
  position: absolute;
  left: 11%;
  top: calc(55% - 40px);
  max-width: min(42%, 22rem);
  text-align: left;
}

@media (max-width: 767px) {
  .banner-section--ejecucion .banner-section__copy {
    left: 8%;
    top: calc(48% - 40px);
    max-width: 84%;
  }
}

.banner-section__copy {
  text-align: left;
}

.banner-section h2 {
  font-size: clamp(1.125rem, 1.75vw, 1.375rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.18;
  margin: 0;
}

.banner-section__lead {
  margin: 0;
  font-size: clamp(1.125rem, 1.75vw, 1.375rem);
  font-weight: 400;
  line-height: 1.18;
  color: #fff;
}

.banner-section__btn.hero__btn {
  margin-top: 1.25rem;
  width: auto;
  min-width: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: normal;
  text-align: center;
}

@media (min-width: 768px) {
  .banner-section__btn.hero__btn {
    margin-top: 1.5rem;
  }
}

.banner-section p:not(.banner-section__lead) {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

/* Pillar cards */
.pillars-section .section-label {
  margin-bottom: 2.5rem;
}

.pillars-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.pillar-card {
  display: flex;
  flex-direction: column;
}

.pillar-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
}

.pillar-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pillar-card__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 61, 107, 0.1);
  z-index: 1;
  pointer-events: none;
}

.pillar-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 40, 71, 0.88) 0%,
    rgba(15, 40, 71, 0.5) 38%,
    transparent 68%
  );
  z-index: 2;
  pointer-events: none;
}

.pillar-card__title {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
}

.pillar-card__text {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(26, 61, 107, 0.72);
  text-align: left;
}

/* Servicios page layout */
.services-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0;
}

.services-content {
  background: #f8f9fb;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .services-layout { flex-direction: row; }
  .services-sidebar { width: 17.5rem; flex-shrink: 0; }
  .services-content {
    flex: 1;
    min-width: 0;
    padding: 2rem 2rem 2rem 3rem;
  }
}

.services-sidebar__logo {
  display: inline-flex;
  font-size: clamp(3.5rem, 5vw, 4.25rem);
  line-height: 1;
  margin-bottom: 2.25rem;
}

.services-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.services-nav__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.services-nav__item:not(:first-child)::before {
  content: "";
  display: block;
  width: 1px;
  height: 0.75rem;
  background: rgba(74, 144, 164, 0.45);
  margin-bottom: 0.75rem;
}

.nav-tab {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.35;
  color: var(--teal);
  font-weight: 400;
  font-family: inherit;
  transition: color 0.2s;
}

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

.nav-tab.active {
  font-weight: 600;
  color: var(--navy);
}
.service-panel-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 14px rgba(26, 61, 107, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.service-panel-select__chevron {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--teal);
}

.service-headline {
  margin: 0 0 2rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  text-align: left;
}

.financing-feature {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .financing-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2.5rem;
  }
}

.financing-feature__visual {
  position: relative;
  aspect-ratio: 32 / 9;
  overflow: hidden;
  border-radius: 0;
}

.financing-feature__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.financing-feature__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 61, 107, 0.65) 0%, rgba(44, 78, 128, 0.65) 100%);
}

.financing-feature__stat {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}

.financing-feature__text {
  margin: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--navy);
  text-align: left;
}

.financing-bridge {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 2.5rem;
  padding: 0.75rem 0;
}

.financing-bridge__left,
.financing-bridge__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.875rem 1.25rem;
  font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.financing-bridge__left {
  background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 42%, var(--teal) 100%);
  color: #fff;
  border-radius: 9999px 0 0 9999px;
}

.financing-bridge__right {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-light) 58%, #b8dce6 100%);
  color: var(--navy);
  border-radius: 0 9999px 9999px 0;
}

.financing-bridge__center {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fb;
}

.financing-bridge__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  background: #fff;
  border: 1px solid var(--teal);
  border-radius: 0.75rem;
}

.financing-bridge__logo-img {
  display: block;
  width: 5.25rem;
  height: auto;
}

@media (max-width: 640px) {
  .financing-bridge {
    flex-direction: column;
    gap: 0.75rem;
  }

  .financing-bridge__left,
  .financing-bridge__right {
    width: 100%;
    border-radius: 9999px;
  }
}

.financing-bottom {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .financing-bottom {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .financing-bottom--single {
    grid-template-columns: 1fr;
  }

  .financing-bottom--single .financing-bottom__copy {
    padding-right: 0;
  }
}

.financing-bottom__copy {
  padding-right: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

@media (min-width: 768px) {
  .financing-bottom__copy {
    padding-right: 2.5rem;
  }
}

.financing-bottom__lead {
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

.financing-bottom__text {
  margin: 0;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 61, 107, 0.72);
}

.financing-bottom__text + .financing-bottom__text {
  margin-top: 1rem;
}

.financing-bottom__list {
  list-style: none;
  margin: 0;
  padding: 0.125rem 0 0.125rem 1.5rem;
  border-left: 1px solid rgba(74, 144, 164, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.financing-bottom__list li {
  padding: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.highlight-box {
  margin-top: 1.5rem;
  border-left: 4px solid var(--teal);
  background: var(--gray-50);
  padding: 1rem;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; list-style: none; }
.tag-list li {
  background: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: rgba(26,61,107,0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.accordion-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--gray-200);
  background: #fff;
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: inherit;
  color: var(--navy);
  text-align: left;
}
.accordion-item:hover { background: var(--gray-50); }
.accordion-item span:last-child { color: var(--teal); }

/* Digital blocks */
.digital-grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  text-align: center;
}
@media (min-width: 640px) { .digital-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .digital-grid { grid-template-columns: repeat(4, 1fr); } }
.digital-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.digital-block h3 { margin-top: 1rem; font-size: 0.875rem; font-weight: 700; }
.digital-block p { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: rgba(26,61,107,0.7); }

/* Map overlay block */
.map-block {
  position: relative;
  min-height: 320px;
  border-radius: 0.25rem;
  overflow: hidden;
}
.map-block img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.map-block__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  color: #fff;
}
.map-block__overlay .big { font-size: 3.75rem; font-weight: 300; }

/* Capital process (Casos de éxito) */
.capital-process {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 640px) {
  .capital-process {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
    gap: 1rem 1.125rem;
  }
}

@media (min-width: 1024px) {
  .capital-process {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: 1rem 1.25rem;
  }
}

.capital-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.capital-process__steps::before {
  content: "";
  position: absolute;
  left: 1.1875rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: #1a3d6b;
}

.capital-process__step {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}

.capital-process__step + .capital-process__step {
  margin-top: 1.125rem;
}

.capital-process__num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: #d9ebf0;
  color: #1a3d6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.capital-process__copy h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1a3d6b;
}

.capital-process__copy p {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(26, 61, 107, 0.72);
}

.capital-process__visual {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  aspect-ratio: 4 / 5;
  min-height: 17.5rem;
  background: transparent;
}

.capital-process__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 1024px) {
  .capital-process__visual {
    min-height: 20rem;
  }
}

/* Dark CTA section */
.dark-cta {
  position: relative;
  padding: clamp(4rem, 8vw, 5.5rem) 0;
  overflow: hidden;
}

.dark-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

.dark-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 40, 71, 0.92) 0%,
    rgba(26, 61, 107, 0.88) 48%,
    rgba(26, 61, 107, 0.84) 100%
  );
}

.dark-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .dark-cta__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: 3.5rem 4rem;
  }
}

.dark-cta__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal-light);
}

.dark-cta__lead {
  margin: 1.5rem 0 0;
  max-width: 22rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: #fff;
}

.dark-cta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.dark-cta__list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.dark-cta__check {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: #d4c49e;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.dark-cta__item-text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

.dark-cta__item-text strong {
  font-weight: 700;
  color: #fff;
}

/* Footer */
.site-footer {
  background: var(--cream);
  color: var(--navy);
}

.footer-main {
  display: grid;
  gap: 2.5rem;
  padding: 4rem 1.5rem 2.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    gap: 3rem 4rem;
    padding: 4.5rem 2.5rem 3rem;
    align-items: start;
  }
}

.footer-brand__link {
  display: inline-block;
  text-decoration: none;
}

.footer-brand__logo {
  display: block;
  width: min(100%, 10.5rem);
  height: auto;
}

.footer-columns {
  display: grid;
  gap: 2rem 1.5rem;
}

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

@media (min-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

.footer-col__title {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--navy);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}

.footer-nav,
.footer-list {
  list-style: none;
}

.footer-nav li,
.footer-list li {
  margin-bottom: 0.45rem;
}

.footer-nav a,
.footer-list a {
  display: inline-block;
  padding: 0.1rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--navy);
  transition: opacity 0.2s ease;
}

.footer-nav a:hover,
.footer-list a:hover {
  opacity: 0.75;
}

.footer-nav a.is-active {
  font-weight: 700;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.footer-contact-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-contact-btn:hover {
  opacity: 0.75;
}

.footer-contact-btn--email {
  color: var(--navy);
}

.footer-contact-btn__label {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--navy);
}

.footer-contact-btn__value {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--navy);
}

.footer-contact-btn--linkedin {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: 0.15rem;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
}

.footer-contact-btn--linkedin svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--teal);
}

.footer-legal {
  border-top: 1px solid rgba(26, 61, 107, 0.25);
  padding: 1.25rem 1.5rem 1.75rem;
  max-width: var(--max-w);
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.65;
  color: rgba(26, 61, 107, 0.65);
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 1024px) {
  .footer-legal {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mb-4 { margin-bottom: 1rem; }
.uppercase-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal);
}
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }

/* Content block from design */
.presence-block {
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--gray-50);
  border-left: 4px solid var(--teal);
  border-radius: 0 0.25rem 0.25rem 0;
}
.presence-block p + p { margin-top: 1rem; }

/* Responsive refinements */
@media (max-width: 767px) {
  .hero {
    min-height: 60vh;
  }
  .hero--short {
    min-height: calc(42vh - 80px);
  }
  .hero__content {
    padding: 4.5rem 1.5rem 2.5rem;
  }
  .hero__title { font-size: 1.35rem; }
  .hero__tagline { font-size: clamp(1.25rem, 5.2vw, 1.5rem); padding: 0 0.5rem; }
  .hero__brand { font-size: 0.875rem; padding: 0 0.75rem; }
  .hero__actions { margin-top: 1.75rem; gap: 0.75rem; }
  .hero__btn { min-width: 11rem; width: auto; padding: 0.85rem 1.25rem; font-size: 0.8125rem; }
  .case-masonry { grid-template-columns: 1fr; }
  .case-masonry__slot-3 { grid-row: auto; min-height: 14rem; }
  .cases-home-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .industries-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .services-watermark { display: none; }
  .financing-grid { grid-template-columns: 1fr; }
  .stats-grid {
    gap: 1.25rem 0.875rem;
    align-items: start;
  }
  .stats-grid__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
  .stat-label {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
  .stat-divider {
    margin: 0.5rem 0 0.625rem;
  }
  .stat-number {
    font-size: 1.625rem;
  }
  .stat-sub {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  /* Home hero — shorter band, bottom-anchored content, mobile bg swap.
     Imagen original de bg-ciudad-3-mobil.jpg, sin recortar — igualamos el
     alto al aspecto real de la imagen (1080x1045) para que `cover` no
     necesite recortar nada, igual que en desktop. */
  .hero--home {
    aspect-ratio: 1080 / 1045;
    min-height: 0;
  }
  .hero--home .hero__bg {
    background-image: url(../images/hero/hero-home-bg-mobile.webp);
  }
  /* .hero__content normalmente está en flujo (position:relative) y "empuja"
     el alto del contenedor si el texto no cabe — eso arruina el aspect-ratio
     recién fijado arriba. Lo volvemos overlay (como .hero__bg) para que se
     superponga sobre la imagen sin agrandar la caja. */
  .hero--home .hero__content {
    position: absolute;
    inset: 0;
    justify-content: flex-end;
    padding: 1.5rem 1.25rem 3rem;
  }
  .hero__tagline--light {
    font-size: clamp(1.0625rem, 4.8vw, 1.25rem);
    line-height: 1.45;
  }
  .hero--home .hero__actions--links {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    gap: 0.25rem 1.25rem;
  }
  .hero--home .hero__actions--links .wp-block-button__link {
    font-size: 0.75rem;
  }
}

@media (max-width: 1023px) {
  .services-section__head {
    display: block;
  }

  .services-watermark {
    display: none;
  }
}

/* ==========================================================================
   Block theme additions (Phase 1)
   ========================================================================== */

/* Hero background image — set here instead of inline style so template
   part/template HTML never needs an inline `style` attribute. Same image
   is used on every hero across the site. */
.hero__bg {
  background-image: url(../images/hero/hero-1.webp);
}

/* useRootPaddingAwareAlignments root padding: 1.5rem base, 2.5rem at
   desktop, matching the mockup's .container breakpoint. */
:where(body) .wp-site-blocks {
  --wp--style--root--padding-left: 1.5rem;
  --wp--style--root--padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  :where(body) .wp-site-blocks {
    --wp--style--root--padding-left: 2.5rem;
    --wp--style--root--padding-right: 2.5rem;
  }
}

/* Block-editor structural wrappers should not fight the mockup's own
   width/spacing system on hand-authored sections. */
.hero.wp-block-group,
.hero__content.wp-block-group {
  max-width: none;
}

/* ==========================================================================
   Home hero redesign (scoped to .hero--home only — front-page.html)
   ========================================================================== */

.hero--home .hero__bg {
  background-image: var(--hero-bg-image, url(../images/hero/hero-home-bg.webp));
}

/* La imagen (2400x1600, 1.5:1) fue compuesta como un hero ancho, no como
   un panel de 100vh. Si el contenedor es proporcionalmente más alto que la
   imagen, `cover` la agranda para tapar el alto, "acercando" los edificios
   más de lo previsto. Igualamos el alto del hero al aspecto real de la
   imagen (con tope para pantallas muy anchas) para que cover no necesite
   ampliar de más. Solo desktop/tablet: el min-height de mobile (más abajo,
   dentro de su propio @media) no se toca. */
@media (min-width: 768px) {
  .hero--home {
    min-height: clamp(31.25rem, 66.7vw, 56.25rem);
  }
}

.hero.hero--home > .hero-overlay {
  background: none;
}

/* Propiedades que NO cambian entre mobile/desktop (sin @media, para que no
   puedan pisar por orden de cascada a las reglas de mobile de más arriba). */
.hero--home .hero__content {
  align-items: flex-start;
  text-align: left;
  transform: none;
}
.hero__tagline--light {
  font-weight: 300;
  max-width: 46rem;
}
.hero--home .hero__actions--links {
  display: flex;
  align-items: flex-start;
}
/* Botones nativos core/button dentro del hero: quitamos el estilo "pill"
   por defecto y los dejamos como links subrayados (esto aplica igual en
   mobile y desktop). */
.hero--home .hero__actions--links .wp-block-button__link {
  display: inline-block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 0.2s ease;
}
.hero--home .hero__actions--links .wp-block-button__link:hover {
  opacity: 0.75;
  color: #fff;
}

/* Propiedades que SÍ difieren — solo desktop/tablet aquí; mobile tiene sus
   propios valores dentro de su @media (max-width:767px) más arriba, y deben
   ganar ahí sin que esto los pise. */
@media (min-width: 768px) {
  .hero--home .hero__content {
    justify-content: flex-start;
    padding: 9rem 1.5rem 5rem clamp(1.5rem, 6vw, 6rem);
  }
  .hero__tagline--light {
    font-size: clamp(0.9375rem, 1.6vw, 1.25rem);
    line-height: 1.5;
  }
  .hero--home .hero__actions--links {
    flex-direction: column;
    gap: 0.85rem;
  }
  .hero--home .hero__actions--links .wp-block-button__link {
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   Generic reusable patterns (client-editable building blocks)
   ========================================================================== */

.generic-quote__block {
  border-left: 4px solid var(--teal);
  padding-left: 1.5rem;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--navy);
}

.generic-quote__block cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--teal);
}

.generic-faq .wp-block-details {
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.generic-faq .wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}

.generic-cta-banner .wp-block-heading,
.generic-cta-banner p {
  max-width: 42rem;
}

/* Explicit gap for core/columns in the generic patterns, instead of the
   editor's own "blockGap" style control: this theme sets a site-wide
   --wp--style--block-gap of 0px in theme.json (the rest of the site uses
   fixed BEM margins, not WP's block-gap system), which columns otherwise
   inherits, leaving them with no visible spacing. A hand-typed blockGap
   style attribute was tried first and failed block validation in this WP
   version (core/columns' real save() output didn't match what was typed by
   hand) -- a plain custom class sidesteps that entirely. */
.generic-columns-gap {
  row-gap: 1.5rem;
  column-gap: 2.5rem;
}

/* Blog / Publicaciones (templates/home.html, templates/single.html,
   patterns/post-starter.php). Same visual language as .service-card /
   .industry-card: white card, subtle border, soft shadow, navy/teal/gold
   accents. Spacing uses plain classes + CSS (not the style.spacing.blockGap
   attribute) for the same reason as .generic-columns-gap above. */
/* Listing (home.html) */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.blog-grid > li {
  list-style: none;
  margin: 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.25rem 0;
  border: 1px solid var(--gray-200);
  border-radius: 1.25rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 61, 107, 0.12);
}
/* Tamaño y recorte fijados aquí (no vía el atributo "aspectRatio" del
   bloque): ese atributo depende de que el figure/img de WordPress calcule
   bien el alto a partir de un ancho definido dentro de una tarjeta flex, y
   con imágenes de proporción muy distinta a la horizontal (p. ej. un mapa
   vertical) el resultado no se recortaba, saliendo gigante y sin encajar en
   la tarjeta. Un alto fijo + overflow:hidden aquí es la misma técnica ya
   usada en .service-card__media / .industry-card, y funciona igual sin
   importar la proporción original de la imagen. */
.post-card__media {
  aspect-ratio: 3 / 2;
  border-radius: 0.75rem;
  overflow: hidden;
}
.post-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}
.post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 0 1.5rem;
  flex: 1;
}
.post-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
}
.post-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}
.post-card__title a {
  color: inherit;
  text-decoration: none;
}
.post-card__title a:hover {
  color: var(--teal);
}
.post-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(26, 61, 107, 0.8);
  flex: 1;
}
.post-card__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.post-card__link:hover {
  color: var(--teal);
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3.5rem;
}
.blog-pagination .wp-block-query-pagination-previous,
.blog-pagination .wp-block-query-pagination-next {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.blog-pagination .wp-block-query-pagination-previous:hover,
.blog-pagination .wp-block-query-pagination-next:hover {
  color: var(--teal);
}
.blog-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.blog-pagination .page-numbers.current {
  background: var(--navy);
  color: #fff;
}
.blog-pagination .page-numbers:hover:not(.current) {
  background: var(--panel);
}

/* Single post (single.html) */
.post-article-header {
  padding-top: 4rem;
  padding-bottom: 1rem;
  text-align: left;
}
.post-article-header__date {
  margin: 0;
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-article-header__title {
  margin: 0.7rem 0 0 !important;
  padding: 0 !important;
  color: var(--navy) !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.12 !important;
  text-align: left !important;
}
.post-intro-subtitle {
  margin: 0 !important;
  color: rgba(26, 61, 107, 0.72);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.45;
}
.post-intro-image {
  width: 100%;
  max-width: none;
  margin: 1.25rem auto 2.5rem !important;
}
.post-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.65 / 1;
  object-fit: cover;
  border-radius: 0.85rem;
  box-shadow: 0 8px 24px rgba(15, 40, 71, 0.12);
}
.post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 0.5rem;
  max-width: var(--max-w);
  padding: 0 1.5rem;
  text-align: center;
}
.post-hero-meta__date,
.post-hero-meta__terms {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.post-hero-meta__terms a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-cover {
  width: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--navy-dark);
  text-align: center;
  color: #fff;
}
.post-single-section {
  padding-top: 0 !important;
}
.post-cover > * {
  max-width: 60rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
.post-cover__eyebrow {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-cover__title {
  margin-top: 0.9rem !important;
  color: #fff !important;
  font-size: clamp(1.9rem, 3.8vw, 3.25rem) !important;
  line-height: 1.1 !important;
}
.post-cover__subtitle {
  margin-top: 0.9rem !important;
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
}
.post-cover__tagline {
  margin-top: 1rem !important;
  color: var(--teal-light);
  font-size: 0.95rem;
  font-style: italic;
}
.post-cover__brand {
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.post-cover__company {
  margin-top: 0.25rem !important;
  color: var(--gold);
  font-weight: 600;
}
.post-cover__source {
  margin-top: 0.25rem !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
}
.post-cover-image {
  width: 100%;
  max-width: 36rem;
  margin: 1.75rem auto !important;
}
.post-cover-image img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(15, 40, 71, 0.16);
}

.post-single__media {
  width: 100%;
  max-width: 48rem;
  margin: 2rem auto 2.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 40, 71, 0.16);
}
.post-single__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article body typography -- applies to whatever the client writes inside
   the single-post core/post-content block (templates/single.html only).
   NOTE: core/post-content always outputs a `.entry-content` class on every
   template that uses it (pages too, via page.html/front-page.html) -- an
   earlier version of this rule targeted `.entry-content` directly and it
   leaked onto every page's content (e.g. underlined links in the "Conozca
   más" cards on Inicio). Fixed by giving single.html's post-content block
   its own `className:"post-article-content"` and scoping to that instead.

   Kept at the full 80rem container width (matching every other page's
   sections), per explicit request -- an earlier version narrowed this to a
   42rem reading column for better line length, but consistency with the
   rest of the site's section width was prioritized over that. */
.post-article-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(26, 61, 107, 0.9);
  padding: 0 0 4rem;
}
.post-article-content > * + * {
  margin-top: 1.5rem;
}
.post-article-content > p:first-of-type {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
}
.post-article-content h2,
.post-article-content h3,
.post-article-content h4 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.3;
}
.post-article-content h2,
.post-article-content h3 {
  margin-top: 3rem !important;
}
.post-article-content h2:nth-of-type(2) {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26, 61, 107, 0.16);
}
.post-article-content h2 { font-size: 1.625rem; }
.post-article-content h3 { font-size: 1.3125rem; }
.post-article-content a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-article-content a:hover {
  color: var(--teal);
}
.post-article-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 40, 71, 0.12);
}
.post-article-content ul,
.post-article-content ol {
  padding-left: 1.5rem;
}
.post-article-content li + li {
  margin-top: 0.5rem;
}
.post-article-content .post-doc-list {
  padding-left: 1.5rem;
  margin-top: 0.75rem;
}
.post-article-content .post-doc-list li {
  padding-left: 0.25rem;
}
.post-article-content .post-doc-list li::marker {
  color: var(--gold);
  font-size: 1.05em;
}
.post-article-content .post-source {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: rgba(26, 61, 107, 0.6);
}
.post-article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.post-article-content th,
.post-article-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}
.post-article-content th {
  background: var(--panel);
  color: var(--navy);
  font-weight: 700;
}
.post-article-content .wp-block-quote,
.post-article-content .post-quote {
  margin: 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--gold);
  background: var(--panel);
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
  color: var(--navy);
}
.post-article-content .wp-block-quote p {
  font-size: 1.125rem;
  line-height: 1.6;
}
.post-article-content .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  color: var(--teal);
}

/* Patrones reutilizables adicionales para publicaciones
   (patterns/post-key-points.php, post-image-caption.php, post-cta.php --
   post-pull-quote.php reutiliza .post-quote / .wp-block-quote de arriba). */
.post-key-points {
  padding: 1.75rem 2rem;
  background: var(--panel);
  border-radius: 1rem;
  border-left: 4px solid var(--teal);
}
.post-key-points__title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
}
.post-key-points__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-key-points__list li {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
}
.post-key-points__list li + li {
  margin-top: 0.75rem;
}
.post-key-points__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--gold);
}

.post-article-content figure.post-image-caption figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(26, 61, 107, 0.65);
  text-align: center;
}

.post-cta {
  padding: 2rem 2.25rem;
  background: var(--navy);
  border-radius: 1.25rem;
  text-align: center;
}
.post-cta__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.post-cta__text {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}
.post-cta .wp-block-buttons {
  justify-content: center;
}
.post-cta__btn .wp-block-button__link {
  padding: 0.85rem 1.75rem;
  border-radius: 0.75rem;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.post-cta__btn .wp-block-button__link:hover {
  background: #e4dcc9;
}

.post-stat {
  padding: 1.75rem 2rem;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  text-align: center;
}

.post-disclaimer {
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(26, 61, 107, 0.6);
}

/* Native core/pullquote and core/separator, used directly (not via a
   custom pattern) for visual variety inside post-article-content. */
.post-article-content .wp-block-pullquote {
  margin: 0;
  padding: 2rem 0;
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
  text-align: center;
}
.post-article-content .wp-block-pullquote p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.post-article-content .wp-block-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  color: var(--teal);
}
.post-article-content .wp-block-separator {
  width: 4rem;
  margin: 1rem auto;
  border: none;
  border-top: 2px solid var(--gold);
}
@media (min-width: 1024px) {
  .post-hero-meta { padding-left: 2.5rem; padding-right: 2.5rem; }
}

.ba-section-header { padding: 3.5rem 0; background: #fff; }
.ba-section-header--gray { background: var(--gray-50); }
.ba-section-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ba-section-header__copy { flex: 1; min-width: 0; max-width: 34rem; }
.ba-section-header__subtitle { margin-top: 1rem; }
.ba-section-header__media { flex: 0 0 auto; line-height: 0; pointer-events: none; }
.ba-section-header__media img { display: block; width: clamp(7rem, 14vw, 12rem); height: auto; max-height: 11rem; object-fit: contain; }
.ba-section-header--no-image .ba-section-header__media { display: none; }
.ba-section-header + .services-section,
.ba-section-header + .industries-section { padding-top: 1rem; }
@media (max-width: 767px) {
  .ba-section-header { padding: 2.25rem 0; }
  .ba-section-header + .services-section,
  .ba-section-header + .industries-section { padding-top: 0.75rem; }
  .ba-section-header__inner { gap: 1rem; }
  .ba-section-header__media img { width: 5.75rem; max-height: 8rem; }
  .ba-section-header__copy { max-width: none; }
}

/* Internal page hero: shared new composition for every page except Home.
   The front-page hero remains scoped to .hero--home above. */
.hero--internal {
  min-height: clamp(31.25rem, 66.7vw, 56.25rem);
}
.hero--internal .hero__bg {
  background-image: url(../images/hero/hero-home-bg.webp);
  background-position: center center;
}
.hero.hero--home.hero--internal > .hero-overlay {
  background: linear-gradient(135deg, rgba(26, 61, 107, 0.55) 0%, rgba(74, 144, 164, 0.5) 100%);
}
.hero.hero--posts > .hero-overlay { background: none; }
.hero > .hero-overlay { background: none !important; }
.hero--internal .hero__content {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  transform: none;
  padding: 9rem 1.5rem 5rem clamp(1.5rem, 6vw, 6rem);
}

/* Align desktop hero copy with the fixed header logo across Home and
   internal/publication heroes. Mobile keeps its dedicated composition. */
@media (min-width: 1024px) {
  .hero--home .hero__content,
  .hero--internal .hero__content {
    padding-left: max(2.5rem, calc((100% - var(--max-w)) / 2 + 2.5rem));
  }
}

@media (max-width: 767px) {
  .hero--internal {
    aspect-ratio: 1080 / 1045;
    min-height: 0;
  }
  .hero--internal .hero__content {
    padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  }
  .hero--internal .hero__title {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }
  .hero--internal .hero__subtitle {
    margin-top: 1rem;
    font-size: 0.9375rem;
  }
}

/* Home hero mobile composition: keep the copy centered over the water and
   let the source image define the visible vertical composition. These rules
   intentionally come last so the desktop-oriented home-hero defaults above
   cannot override them in the mobile viewport. */
@media (max-width: 767px) {
  .hero--home {
    aspect-ratio: 1080 / 1045;
    min-height: 0;
    height: auto;
  }

  .hero--home .hero__bg {
    /* The block renderer supplies the desktop image through an inline
       --hero-bg-image value; the mobile composition must take precedence. */
    background-image: url(../images/hero/hero-home-bg-mobile.webp) !important;
  }

  .hero--home .hero__content {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    text-align: center;
  }

  .hero--home .hero__tagline--light {
    max-width: 36rem;
    font-size: clamp(0.625rem, 1.8vw, 0.75rem) !important;
    line-height: 1.35;
    text-align: center;
  }

  .hero--home .hero__actions--links {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    width: 100%;
    margin-top: 1.25rem;
  }

  .hero--home .hero__actions--links .wp-block-button {
    margin: 0;
  }

  .hero--home .hero__actions--links .wp-block-button__link {
    font-size: 0.5625rem !important;
    text-align: center;
  }
}