/* Kennedy Hidalgo — layout & chrome (tokens from horizont-design-system.css) */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--neutral-content-default-para);
  background: var(--neutral-content-default-bg);
}

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

a {
  color: var(--brand-blue-link-text);
  text-decoration: none;
  transition: color var(--motion-dur-sm) var(--motion-easing);
}

a:hover {
  color: var(--brand-blue-link-hover-text);
}

a:active {
  color: var(--brand-blue-link-active-text);
}

[hidden] {
  display: none !important;
}

.wrap {
  width: min(100% - 2 * var(--space-md), var(--container-middle));
  margin-inline: auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.site_header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--neutral-content-bordered-border);
  background: var(--neutral-content-default-bg);
  transition:
    background-color var(--motion-dur-md) var(--motion-easing),
    border-color var(--motion-dur-md) var(--motion-easing),
    box-shadow var(--motion-dur-md) var(--motion-easing);
}

.site_header.is_scrolled {
  box-shadow: var(--shadow-neutral-subtle-1);
}

.nav_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: calc(2rem + 2 * var(--space-sm));
  padding-block: var(--space-sm);
}

.brand_mark {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--brand-blue-content-default-title);
}

.brand_mark .material-symbols-outlined {
  font-size: var(--text-18);
  color: var(--brand-blue-content-default-text-div);
}

.nav_links {
  display: none;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav_links a {
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-content-default-title);
}

.nav_links a:hover {
  color: var(--brand-blue-link-hover-text);
}

.nav_tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.lang_switch {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 0 var(--space-xs);
  min-height: 2rem;
  height: 2rem;
  border: 1px solid var(--neutral-content-bordered-border);
  border-radius: var(--radius-sm);
  background: var(--neutral-content-default-bg);
}

.lang_switch a {
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-content-default-text-div);
  padding: var(--space-xxs);
  border-radius: var(--radius-xs);
  transition:
    color var(--motion-dur-sm) var(--motion-easing),
    background-color var(--motion-dur-sm) var(--motion-easing);
}

.lang_switch a.is_active {
  color: var(--brand-blue-btn-solid-text);
  background: var(--brand-blue-btn-solid-bg);
}

.nav_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--neutral-content-bordered-border);
  border-radius: var(--radius-sm);
  background: var(--neutral-content-default-bg);
  color: var(--neutral-content-default-title);
  cursor: pointer;
  transition:
    background-color var(--motion-dur-sm) var(--motion-easing),
    border-color var(--motion-dur-sm) var(--motion-easing),
    color var(--motion-dur-sm) var(--motion-easing);
}

.nav_toggle:hover {
  background: var(--neutral-content-subtle-bg);
}

.nav_drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: 0 var(--space-sm);
  border-top: 1px solid var(--neutral-content-bordered-border);
}

.site_header.is_open .nav_drawer {
  display: flex;
}

.nav_drawer a {
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--neutral-content-default-title);
}

@media (min-width: 768px) {
  .nav_links {
    display: flex;
  }

  .nav_toggle,
  .nav_drawer {
    display: none !important;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  min-height: 2rem;
  height: 2rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-blue-btn-outline-border);
  background: var(--brand-blue-btn-outline-bg);
  color: var(--brand-blue-btn-outline-text);
  font-family: var(--font-family-body);
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  font-weight: var(--font-weight-body);
  cursor: pointer;
  transition:
    background-color var(--motion-dur-sm) var(--motion-easing),
    color var(--motion-dur-sm) var(--motion-easing),
    border-color var(--motion-dur-sm) var(--motion-easing);
}

.btn .material-symbols-outlined {
  font-size: var(--text-16);
}

.logo_cta {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity var(--motion-dur-sm) var(--motion-easing);
}

.logo_cta:hover,
.logo_cta:focus-visible {
  opacity: 0.85;
}

.logo_cta img {
  display: block;
  width: auto;
  height: 1.75rem;
  object-fit: contain;
}

.logo_cta_on_dark img {
  height: 1.85rem;
  filter: drop-shadow(0 1px 8px rgb(from var(--color-black) r g b / 0.35));
}

.btn:hover {
  background: var(--brand-blue-btn-outline-hover-bg);
  color: var(--brand-blue-btn-outline-hover-text);
  border-color: var(--brand-blue-btn-outline-hover-border);
}

.btn_solid {
  background: var(--brand-blue-btn-solid-bg);
  color: var(--brand-blue-btn-solid-text);
  border-color: var(--brand-blue-btn-solid-border);
}

.btn_solid:hover {
  background: var(--brand-blue-btn-solid-hover-bg);
  color: var(--brand-blue-btn-solid-hover-text);
  border-color: var(--brand-blue-btn-solid-hover-border);
}

.btn_ghost {
  border-color: transparent;
  background: transparent;
  color: var(--brand-blue-content-primary-title);
}

.btn_ghost:hover {
  background: rgb(from var(--color-white) r g b / 0.12);
  color: var(--brand-blue-content-primary-title);
  border-color: transparent;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-950);
  color: var(--brand-blue-content-primary-para);
}

.hero_media {
  position: absolute;
  inset: 0;
}

.hero_photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.02);
  animation: hero_drift 18s var(--motion-easing) infinite alternate;
}

.hero_scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgb(from var(--color-950) r g b / 0.35) 0%,
      rgb(from var(--color-950) r g b / 0.55) 42%,
      rgb(from var(--color-950) r g b / 0.88) 100%
    ),
    linear-gradient(
      90deg,
      rgb(from var(--color-950) r g b / 0.72) 0%,
      rgb(from var(--color-950) r g b / 0.28) 55%,
      rgb(from var(--color-950) r g b / 0.12) 100%
    );
}

.hero_body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
  width: min(100% - 2 * var(--space-md), var(--container-middle));
  margin-inline: auto;
  padding-block: calc(4rem + var(--space-xl)) var(--space-xl);
}

@keyframes hero_drift {
  from {
    transform: scale(1.02) translateY(0);
  }
  to {
    transform: scale(1.06) translateY(-1.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_photo {
    animation: none;
    transform: none;
  }

  .hero_brand,
  .hero_title,
  .hero_lead,
  .hero_actions,
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero_brand {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-title-82);
  line-height: var(--text-title-82-lh);
  color: var(--brand-blue-content-primary-title);
  letter-spacing: -0.03em;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise_in var(--motion-dur-xl) var(--motion-easing) 80ms forwards;
}

.hero_title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-title-32);
  line-height: var(--text-title-32-lh);
  color: var(--brand-blue-content-primary-title);
  max-width: 28ch;
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise_in var(--motion-dur-xl) var(--motion-easing) 160ms forwards;
}

.hero_lead {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-18);
  line-height: var(--text-18-lh);
  color: var(--color-100);
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise_in var(--motion-dur-xl) var(--motion-easing) 240ms forwards;
}

.hero_actions {
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise_in var(--motion-dur-xl) var(--motion-easing) 320ms forwards;
}

.hero .btn_solid {
  background: var(--color-white);
  color: var(--color-700);
  border-color: var(--color-white);
}

.hero .btn_solid:hover {
  background: var(--color-100);
  color: var(--color-800);
  border-color: var(--color-100);
}

@keyframes rise_in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  padding-block: var(--space-xxl);
}

.section_subtle {
  background: var(--neutral-content-subtle-bg);
}

.section_dark {
  background: var(--color-950);
  color: var(--color-100);
}

.section_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 48rem;
  margin-bottom: var(--space-lg);
}

.brand_logo {
  display: block;
  width: auto;
  height: 2rem;
  object-fit: contain;
}

.brand_logo_shopify {
  height: 2.25rem;
}

.brand_logo_on_dark {
  height: 2.5rem;
}

.section_kicker {
  margin: 0;
  font-size: var(--text-10);
  line-height: var(--text-10-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-blue-content-default-text-div);
}

.section_dark .section_kicker {
  color: var(--color-300);
}

.section_title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-title-40);
  line-height: var(--text-title-40-lh);
  color: var(--brand-blue-content-default-title);
}

.section_dark .section_title {
  color: var(--color-white);
}

.section_lead {
  margin: 0;
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--neutral-700);
  max-width: 54ch;
}

.formacion_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.section_dark .section_lead {
  color: var(--color-200);
}

.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--motion-dur-xl) var(--motion-easing),
    transform var(--motion-dur-xl) var(--motion-easing);
}

.reveal.is_visible {
  opacity: 1;
  transform: translateY(0);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 62ch;
}

.prose p {
  margin: 0;
  color: var(--neutral-content-default-para);
}

.focus_list {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.focus_item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-left: 2px solid var(--color-500);
  background: var(--brand-blue-content-subtle-bg);
}

.focus_item .material-symbols-outlined {
  font-size: var(--text-title-32);
  color: var(--brand-blue-content-default-text-div);
}

.focus_item h3 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-18);
  line-height: var(--text-18-lh);
  color: var(--brand-blue-content-default-title);
}

.focus_item p {
  margin: 0;
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--neutral-700);
}

.role_block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--neutral-content-bordered-border);
}

.role_title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-title-26);
  line-height: var(--text-title-26-lh);
  color: var(--brand-blue-content-default-title);
}

.role_meta {
  margin: 0;
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-500);
}

.bullet_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullet_list li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
}

.bullet_list .material-symbols-outlined {
  flex: none;
  margin-top: 0.1em;
  color: var(--color-500);
  font-size: var(--text-18);
}

.brand_strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.brand_group h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.chip_row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: 2rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-content-bordered-border);
  background: var(--neutral-content-default-bg);
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-content-default-title);
}

.chip .material-symbols-outlined {
  font-size: var(--text-16);
  color: var(--brand-blue-content-default-text-div);
}

.tool_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

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

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

.tool_cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  min-height: 7.5rem;
  border-bottom: 1px solid var(--neutral-200);
}

.section_dark .tool_cell {
  border-bottom-color: var(--color-800);
}

.tool_cell .material-symbols-outlined {
  font-size: var(--text-title-32);
  color: var(--color-300);
}

.tool_cell strong {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--color-white);
}

.tool_cell span {
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--color-200);
}

.cert_row {
  display: grid;
  gap: var(--space-md);
}

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

.cert_item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cert_item .material-symbols-outlined {
  font-size: var(--text-title-40);
  color: var(--brand-blue-content-default-text-div);
}

.cert_item h3 {
  margin: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--brand-blue-content-default-title);
}

.cert_item p {
  margin: 0;
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  color: var(--neutral-600);
}

.setup_grid {
  display: grid;
  gap: var(--space-sm);
}

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

.setup_item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--neutral-content-bordered-border);
}

.setup_item .material-symbols-outlined {
  font-size: var(--text-title-28);
  color: var(--brand-blue-content-default-text-div);
}

.setup_item h3 {
  margin: 0;
  font-size: var(--text-14);
  line-height: var(--text-14-lh);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--brand-blue-content-default-title);
}

.setup_item p {
  margin: 0;
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-600);
}

.place_band {
  position: relative;
  min-height: clamp(18rem, 52vw, 28rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

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

.place_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(from var(--color-950) r g b / 0.2) 0%,
    rgb(from var(--color-950) r g b / 0.78) 100%
  );
}

.place_body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-xl);
  max-width: 40rem;
}

.place_band .section_kicker {
  color: var(--color-200);
}

.place_band .section_title {
  color: var(--color-white);
}

.place_band .section_lead {
  color: var(--color-100);
}

.contact_panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .contact_panel {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.contact_actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact_list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact_list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-16);
  line-height: var(--text-16-lh);
  color: var(--brand-blue-content-default-title);
}

.contact_list .material-symbols-outlined {
  color: var(--brand-blue-content-default-text-div);
}

.site_footer {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--neutral-content-bordered-border);
  background: var(--neutral-content-default-bg);
}

.footer_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.footer_row p {
  margin: 0;
  font-size: var(--text-12);
  line-height: var(--text-12-lh);
  color: var(--neutral-500);
}

.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}