/* ------------------------------------
   Base
------------------------------------ */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
  font-weight: normal;
}


p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
figure {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* ------------------------------------
   Layout helpers
------------------------------------ */

.site-wrapper {
  min-height: 100vh;
}

.grid-18 {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

main {
  width: 100%;
}

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

.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;
}



/* ------------------------------------
   WordPress prep markers
------------------------------------ */

[data-component],
[data-field],
[data-collection],
[data-repeatable],
[data-template] {
  /* Marcadores sin impacto visual para migración a WordPress */
}

/* ------------------------------------
   Global sans type system
------------------------------------ */

.site-brand,
.main-nav__list a,
.site-footer__block,
.project-top__label,
.project-top__meta-label,
.project-pagination a {
  font-family: var(--font-sans);
  font-size: var(--fs-sans);
  font-weight: var(--fw-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
}

/* ------------------------------------
   Text selection per page
------------------------------------ */

/* Home + proyectos → azul */
.home ::selection,
.project-page ::selection {
  background: var(--color-bg);
  color: var(--color-hover-blue);
}

/* Estudio → rojo */
.studio-page ::selection {
  background: var(--color-bg);
  color: var(--color-hover-red);
}

/* Buhemsa → verde */
.buhemsa-page ::selection {
  background: var(--color-bg);
  color: var(--color-hover-green);
}

/* text selection mozilla */

.home ::-moz-selection,
.project-page ::-moz-selection {
  background: var(--color-bg);
  color: var(--color-hover-blue);
}

.studio-page ::-moz-selection {
  background: var(--color-bg);
  color: var(--color-hover-red);
}

.buhemsa-page ::-moz-selection {
  background: var(--color-bg);
  color: var(--color-hover-green);
}

a::selection {
  color: inherit;
}

/* ------------------------------------
   Header
------------------------------------ */

.site-header {
  padding: var(--page-padding);
  align-items: start;
}

.site-brand {
  grid-column: 1 / span 4;
}

/* ------------------------------------
   Navigation
------------------------------------ */

.main-nav {
  grid-column: 14 / -1;
}

.main-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 28px;
}

.main-nav__list a {
  transition: color 0.15s ease;
}

/* Navigation hover states */

.nav-proyectos:hover {
  color: var(--color-hover-blue);
}

.nav-estudio:hover {
  color: var(--color-hover-red);
}

.nav-buhemsa:hover {
  color: var(--color-hover-green);
}

.nav-eus:hover {
  color: var(--color-hover-grey);
}

/* Navigation active states */

.nav-proyectos.is-active {
  color: var(--color-hover-blue);
}

.nav-estudio.is-active {
  color: var(--color-hover-red);
}

.nav-buhemsa.is-active {
  color: var(--color-hover-green);
}

.nav-eus.is-active {
  color: var(--color-hover-grey);
}

/* ------------------------------------
   Footer
------------------------------------ */

.site-footer {
  padding: 170px var(--page-padding) 14px;
  align-items: end;
}

.site-footer__block {
  line-height: 1.15;
}

.site-footer__block p + p {
  margin-top: 2px;
}

.site-footer__brand {
  grid-column: 1 / span 3;
}

.site-footer__address {
  grid-column: 6 / span 4;
}

.site-footer__contact {
  grid-column: 12 / span 4;
}

.site-footer__legal {
  grid-column: 17 / span 2;
}

.site-footer__address a,
.site-footer__contact a,
.site-footer__legal a {
  display: inline-block;
}

.site-footer a:hover {
  color: var(--color-hover-grey);
}

/* ------------------------------------
   Responsive
------------------------------------ */

@media (max-width: 991px) {
  .site-brand {
    grid-column: 1 / span 6;
  }

  .main-nav {
    grid-column: 10 / -1;
  }

  .main-nav__list {
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .grid-18 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  /* ------------------------------------
     Header
  ------------------------------------ */

  .site-header {
    row-gap: 0;
    align-items: start;
  }

  .site-brand {
    grid-column: 1 / span 4;
    white-space: nowrap;
  }

  .main-nav {
    grid-column: 5 / -1;
    display: flex;
    justify-content: flex-end;
  }

  .main-nav__list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
    justify-items: end;
    align-items: start;
    column-gap: 18px;
    row-gap: 6px;
  }

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

  .main-nav__item--lang {
    grid-column: 3 / 4;
  }

  /* ------------------------------------
     Footer
  ------------------------------------ */

  .site-footer {
    padding: 100px var(--page-padding) 14px;
    row-gap: 28px;
    align-items: start;
  }

    .site-footer__address {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .site-footer__brand {
    grid-column: 1 / span 4;
    grid-row: 2;
  }

  .site-footer__contact {
    grid-column: 7 / -1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .site-footer__legal {
    grid-column: 7 / -1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .main-nav__list {
    column-gap: 14px;
  }
}