/* =========================
   TIPOGRAFÍA — SUISSE INTL
   Sin estos @font-face el sitio cae a Helvetica en cualquier
   máquina que no tenga Suisse instalada.
   Los .woff2 pesan ~60% menos que los .otf originales.

   Cada peso declarado coincide con el usWeightClass real del
   archivo. Ojo: el nombre interno de la familia es 'Suisse Intl',
   no 'Suisse'. Aquí no importa porque el @font-face bautiza la
   familia, pero por eso nunca engancharon instaladas localmente.

   El Black (900) está fuera por decisión de diseño. --fw-black: 800
   no tiene archivo propio y cae al Bold de 700.
========================= */
@font-face {
  font-family: 'Suisse';
  src: url('fonts/SuisseIntl-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse';
  src: url('fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse';
  src: url('fonts/SuisseIntl-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse';
  src: url('fonts/SuisseIntl-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse';
  src: url('fonts/SuisseIntl-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   VARIABLES
========================= */
:root {
  --color-offwhite: #f1f0ed; 
  --color-black: #1b1919;
  --color-bright-orange: #ff5e00;
  --color-gray: #888888;

  --ff-base: 'Suisse', 'Helvetica Neue', Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-xs:   clamp(0.7rem, 0.1vw + 0.65rem, 0.85rem); 
  --fs-sm:   clamp(0.85rem, 0.2vw + 0.75rem, 1rem); 
  --fs-body: clamp(1rem, 0.3vw + 0.9rem, 1.15rem); 
  --fs-l:    clamp(1.1rem, 0.4vw + 1rem, 1.5rem); 
  --fs-xl:   clamp(1.5rem, 1.5vw + 1.2rem, 2.8rem); 
  --fs-xxl:  clamp(1.8rem, 3.5vw + 1.2rem, 4.8rem); 
  --fs-xxxl: clamp(2.8rem, 6vw + 1.5rem, 8rem);

  --tracking-normal: 0.01em;
  --tracking-relaxed: 0.04em;
  --lh-editorial: 1.3;
  --lh-body: 1.45;
  --lh-h1: 1.15;
  --lh-h3: 1.25;
  --lh-compact: 1.1;

  --space-xxs: clamp(.25rem, .6vw, .375rem);
  --space-xs:  clamp(.5rem, 1vw, .75rem);
  --space-sm:  clamp(.75rem, 1.6vw, 1rem);
  --space-md:  clamp(1.25rem, 3vw, 2.25rem);
  --space-lg:  clamp(1.75rem, 4vw, 2.5rem);
  --space-xl:  clamp(2rem, 6vw, 4rem);
  --space-xxl: clamp(3rem, 9vw, 6rem);

  --container-max: 112.5rem;
  --container-padding: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  /* Gráfico de la transición, sobre el panel naranja. */
  --transition-graphic: url('images/transicion.png');

  --line-weight: .125rem;
  --menu-offset: .5rem;
  --header-offset: var(--space-lg);
  --header-height: 5.5rem;
}

/* =========================
   RESET + BASE
========================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: 100%;
  scroll-behavior: smooth;
  /* Evita que los anchors queden debajo del header fijo */
  scroll-padding-top: calc(var(--header-height) + var(--header-offset) + var(--space-md));
}
body {
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  background: var(--color-offwhite);
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: transparent; font: inherit; }
.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; }

/* Foco visible para navegación con teclado */
:focus-visible {
  outline: 3px solid var(--color-bright-orange);
  outline-offset: 3px;
}
/* Dentro de las cajas con overflow:hidden el anillo se recorta y
   sólo se ve un trozo. Aquí se dibuja hacia adentro. */
.menu-row a:focus-visible,
.cta:focus-visible,
.lang-gate__btn:focus-visible {
  outline-offset: -3px;
}
/* El contenedor del diálogo recibe el foco al abrir, pero no debe pintar anillo */
.lang-gate:focus,
.lang-gate:focus-visible { outline: none; }

/* Salto al contenido — solo aparece al tabular */
.skip-link {
  position: fixed;
  top: 0;
  left: var(--container-padding);
  z-index: 2000;
  transform: translateY(-150%);
  background: var(--color-black);
  color: var(--color-offwhite);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-relaxed);
  transition: transform 200ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* =========================
   GRID
========================= */
.container {
  width: min(100% - 2 * var(--container-padding), var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.col-span-6 { grid-column: 1 / 7; }
.col-span-3 { grid-column: span 3; }
.col-1-1 { grid-column: 1 / 2; }
.col-2-3 { grid-column: 2 / 4; }
.col-2-4 { grid-column: 2 / 5; } 
.col-4-6 { grid-column: 4 / 7; }
.col-5-6 { grid-column: 5 / 7; }

/* =========================
   TIPOGRAFÍA UTILITARIA
========================= */
.ui-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-relaxed);
  color: var(--color-gray);
}
.ui-bold {
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-relaxed);
  text-transform: uppercase;
}
.fs-xxl { font-size: var(--fs-xxl); }
.fw-light { font-weight: var(--fw-light); }

/* =========================
   HEADER
========================= */
.site-header {
  margin-top: var(--menu-offset);
  position: fixed;
  top: var(--header-offset);
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 260ms ease;
}
.site-header--hidden {
  transform: translateY(calc(-1 * (var(--header-height) + var(--header-offset) + var(--menu-offset) * 2)));
}
.site-header .container {
  display: block;
  padding-inline: var(--container-padding);
  position: relative;
}
.header-box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  background: var(--color-offwhite);
  border: var(--line-weight) solid var(--color-black);
  height: 5.5rem;
  overflow: hidden;
  position: relative;
  outline: var(--menu-offset) solid var(--color-offwhite);
}
.menu-toggle { display: none; }

.logo-cell {
  height: auto; 
  align-self: stretch; 
  display: flex; 
  align-items: stretch; 
  justify-content: center;
  border-right: var(--line-weight) solid var(--color-black);
  background: var(--color-offwhite);
  overflow: hidden;
  padding: 0;
}
.logo-img { 
  display: block;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%); 
  margin: 0;
}
.title-cell {
  display: grid;
  place-items: center;
  border-right: var(--line-weight) solid var(--color-black);
  padding: var(--space-sm);
}
.brand-title {
  white-space: nowrap; 
  display: block;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.right-panel { display: grid; grid-template-rows: auto auto; }
.menu-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.menu-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xs) var(--space-sm);
  border-left: var(--line-weight) solid var(--color-black);
  background: var(--color-offwhite);
  color: var(--color-black);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-relaxed);
  transition: background-color 150ms ease, color 150ms ease;
}
.menu-row a:first-child { border-left: none; }
.menu-row a:hover { background: var(--color-black); color: var(--color-offwhite); }


/* =========================
   IDIOMA — una sola cajita con rodillo
   Muestra el idioma vigente; al apuntarla el texto rueda
   hacia arriba y entra el otro. La celda es su propia
   vista previa de lo que va a pasar.
========================= */
.menu-row { grid-template-columns: 1fr 1fr 1fr auto; }

.lang-switch {
  min-width: 3.4rem;
  white-space: nowrap;
  overflow: hidden;
}

/* Ventanilla del rodillo: recorta lo que entra y lo que sale */
.lang-roll {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15em;
}
.lang-roll__now,
.lang-roll__next {
  display: block;
  transition: transform 340ms cubic-bezier(.65, 0, .35, 1);
}
.lang-roll__next {
  position: absolute;
  inset: 0;
  transform: translateY(100%);   /* espera abajo, fuera de la ventanilla */
}

/* El hover sólo cuenta en dispositivos con puntero real, y sólo
   después del primer movimiento: al cambiar de idioma el cursor
   se queda encima y la celda llegaría encendida sin razón. */
@media (hover: hover) {
  html:not(.no-hover) .lang-switch:hover {
    background: var(--color-bright-orange);
    color: var(--color-black);
  }
  html:not(.no-hover) .lang-switch:hover .lang-roll__now { transform: translateY(-100%); }
  html:not(.no-hover) .lang-switch:hover .lang-roll__next { transform: translateY(0); }
}
.lang-switch:focus-visible {
  background: var(--color-bright-orange);
  color: var(--color-black);
}
.lang-switch:focus-visible .lang-roll__now  { transform: translateY(-100%); }
.lang-switch:focus-visible .lang-roll__next { transform: translateY(0); }

/* =========================
   VELO DE ATENUACIÓN
   Al apuntar al cambio de idioma la página se apaga.
   Queda por debajo del header (z-index 1000), así la nav
   sigue nítida mientras se traduce en vivo.
========================= */
.screen-dim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--color-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
body.is-dimmed .screen-dim { opacity: .5; }

@media (max-width: 1000px) {
  .lang-switch { min-width: 3rem; }
}

/* La fila del menú es repeat(3, 1fr) más la celda de idioma en auto.
   El mínimo implícito de 1fr es el ancho del texto, así que la fila no
   puede encogerse por debajo de la suma de sus cuatro contenidos. En
   pantallas angostas eso supera el ancho de .header-box, que tiene
   overflow: hidden, y la celda del idioma se recortaba contra el borde.
   Con menos padding lateral la fila cabe sin tocar tamaños de letra. */
@media (max-width: 600px) {
  .menu-row a {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
  .lang-switch { min-width: 2.6rem; }
}

/* =========================
   CTAs
========================= */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--line-weight) solid var(--color-black);
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  background: var(--color-offwhite);
  color: var(--color-black);
  border-left: var(--line-weight) solid var(--color-black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  transition: background-color 150ms ease, color 150ms ease;
}
.cta:first-child { border-left: none; }
.cta.cta--whatsapp:hover { background: #25D366; color: var(--color-black); }
.cta.cta--instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

/* =========================
   HERO (INDEX)
========================= */
.hero { height: 100vh; background: var(--color-offwhite); }
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-black);
}
.hero-slider__track { position: relative; width: 100%; height: 100%; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  background: var(--color-black);
}
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   SECCIONES BASE
========================= */
.section-home {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  border-top: var(--line-weight) solid currentColor;
}
.section-home .container.section-grid {
  display: grid !important;
  flex-grow: 1;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap);
}
.spacer-row {
  grid-row: 2;
  grid-column: 1 / -1;
  pointer-events: none;
}

/* =========================
   NOSOTROS
========================= */
.section-nosotros {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}
.intro-box { grid-column: 1 / 7; }
.intro-paragraph {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-editorial);
}
.label-box {
  grid-row: 3;
  grid-column: 1 / 2;
  align-self: start;
}
.label-box .ui-label {
  font-size: var(--fs-l);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  text-transform: none;
  letter-spacing: 0;
}
.services-intro-box {
  grid-row: 3;
  grid-column: 2 / 5;
}
.services-intro {
  font-size: var(--fs-l);
  font-weight: var(--fw-light);
  line-height: var(--lh-compact);
}
.list-box {
  grid-row: 3;
  grid-column: 5 / 7;
  text-align: right;
  align-self: start;
}
.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.services-list li {
  font-size: var(--fs-l);
  font-weight: var(--fw-light);
  line-height: var(--lh-compact);
  margin-bottom: var(--space-xs);
}

/* =========================
   MARCATEXTOS
========================= */
.text-marker {
  background-image: linear-gradient(var(--color-bright-orange), var(--color-bright-orange));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  display: inline;
  padding: 0.1em 0;
}
.text-marker.is-active { background-size: 100% 100%; }

/* =========================
   PROYECTOS
========================= */
.section-projects {
  background-color: var(--color-black);
  color: var(--color-offwhite);
  overflow: hidden;
}
.projects-header-box {
  grid-row: 1;
  grid-column: 1 / -1;
}
.projects-main-title {
  font-size: var(--fs-xxxl);
  font-weight: var(--fw-light);
  line-height: 0.85;
  margin: 0;
}
.projects-list-box {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.projects-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}
.project-item {
  border: none;
  padding: var(--space-xs) 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.project-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.p-services {
  font-size: var(--fs-body);
  color: var(--color-gray);
  margin-right: var(--space-sm);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.p-name {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-light);
  line-height: 1.1;
}

/* Efecto hover: dimming de proyectos no hover */
.projects-list:has(.project-item:hover) .project-item:not(:hover) {
  opacity: 0.15;
}
/* Ocultar servicios en hover */
.projects-list:has(.project-item:hover) .p-services {
  opacity: 0;
  visibility: hidden;
}

.projects-bg-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.section-projects .container.section-grid {
  position: relative;
  z-index: 2;
}

/* =========================
   CONTACTO
========================= */
.section-contact {
  height: 75vh;
  background-color: var(--color-offwhite);
  border-top: var(--line-weight) solid var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact-content { grid-column: 1 / 7; }
.contact-text {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-editorial);
  color: var(--color-black);
}
.email-link {
  cursor: pointer;
  display: inline-block;
  color: inherit;
  border-bottom: var(--line-weight) solid var(--color-black);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.email-link.is-copied {
  color: var(--color-bright-orange);
  border-bottom-color: transparent;
}

/* =========================
   FOOTER
========================= */
.site-footer {
  min-height: 75vh;
  background-color: var(--color-black);
  color: var(--color-offwhite);
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
  display: flex;
  flex-direction: column;
  border-top: var(--line-weight) solid currentColor;
}
.footer-grid {
  flex-grow: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
}
.footer-top-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.footer-top-row .col-1 { grid-column: 1; }
.footer-top-row .col-2 { grid-column: 2 / 4; }
.footer-top-row .col-4 { grid-column: 4; }
.footer-top-row .col-5 { grid-column: 5 / 7; }
.footer-info p {
  font-size: var(--fs-l);
  font-weight: var(--fw-light);
  line-height: 1.2;
  margin: 0;
}
.footer-bottom-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.footer-bottom-group .footer-brand,
.footer-bottom-group .footer-legal {
  grid-column: 4 / 7;
}
.footer-brand {
  font-size: var(--fs-xxxl);
  font-weight: var(--fw-semibold);
  line-height: 0.85;
  text-transform: uppercase;
}
.footer-legal {
  font-size: var(--fs-sm);
  opacity: 0.8;
}

/* =========================
   HERO PROYECTO (DESPLAZAMIENTO HORIZONTAL)
========================= */
.horizontal-transition-hero {
  height: 200vh;
  position: relative;
  background-color: var(--color-black);
}
.sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.horizontal-content-hero {
  display: flex;
  width: 200%;
  height: 100%;
  will-change: transform;
}
.hero-panel,
.info-panel {
  width: 50%;
  height: 100vh;
  flex-shrink: 0;
}
.hero-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info-panel {
  display: flex;
  align-items: flex-end;
  background-color: var(--color-black);
  color: var(--color-offwhite);
  padding-bottom: var(--space-xxl);
}
.info-panel .container.project-info-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  width: min(100% - 2 * var(--container-padding), var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Título del proyecto */
.project-title-main {
  grid-column: 3 / 7;
  grid-row: 1;
  font-size: var(--fs-xxl);
  font-weight: var(--fw-light);
  line-height: 1.1;
  margin: 0;
  padding-bottom: var(--space-xs);
}

/* Metadata y descripción en fila 2 */
.project-metadata,
.project-description-text {
  grid-row: 2;
}
.project-metadata {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: start;
}
.metadata-row {
  display: flex;
  flex-direction: column;
}
.metadata-row .ui-label {
  font-size: var(--fs-body);
  color: var(--color-gray);
  text-transform: none;
  letter-spacing: 0;
}
.info-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-compact);
}
.project-description-text {
  grid-column: 3 / 7;
}
.project-description-text p {
  margin-top: 0;
  font-size: var(--fs-l);
  line-height: var(--lh-editorial);
  font-weight: var(--fw-light);
}
/* El redactor entrega párrafos; se respeta la separación */
.project-description-text p + p { margin-top: var(--space-sm); }

/* =========================
   GALERÍA
========================= */
.project-gallery {
  background-color: var(--color-offwhite);
  position: relative;
  z-index: 5;
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}
.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
  grid-auto-rows: auto;
  align-items: start;
}
.gallery-block {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
}
.gallery-block img,
.gallery-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bloques cuadrados */
.gallery-block.col-span-3 {
  grid-column: span 3;
  aspect-ratio: 8 / 9;
}
/* Bloques panorámicos */
.gallery-block.col-span-6 {
  grid-column: 1 / 7;
}
.gallery-block.col-span-6 img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Bloque de color plano. Sin imagen dentro no tiene altura propia,
   así que la toma de la proporción del bloque que le corresponde. */
.gallery-block--color.col-span-6 { aspect-ratio: 16 / 9; }
.gallery-block--color.col-span-3 { aspect-ratio: 8 / 9; }

/* =========================
   SIGUIENTE PROYECTO
========================= */
.next-project-section {
  background-color: var(--color-offwhite);
  /* Asimétrico a propósito. Arriba basta --space-xl porque se suma al
     --space-xxl que ya trae la galería; con xxl quedaba demasiado aire.
     Abajo sí va --space-xxl: el footer arranca en negro y ese borde
     se ve, así que necesita el ritmo completo. */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xxl);
  cursor: pointer;
  overflow: hidden;
}
.next-project-link {
  text-decoration: none;
  color: var(--color-black);
  display: block;
}
.next-project-header {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-lg);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-compact);
}
.next-label { grid-column: 1 / 4; text-align: left;  min-width: 0; }
.next-name  { grid-column: 4 / 7; text-align: right; min-width: 0; }
/* min-width: 0 impide que la columna crezca con el texto y empuje el
   grid fuera del contenedor. Combinado con nowrap y text-align: right,
   un nombre muy largo se desborda hacia la IZQUIERDA y se encima con
   la etiqueta, en vez de recortarse contra el borde derecho.
   Es intencional: nada debe partirse en dos líneas. */
/* Selector compuesto a propósito: .slide-text declara display:
   inline-block más abajo y, a igual especificidad, ganaría por orden.
   Con las dos clases juntas la regla pesa más y no depende del orden.
   La abreviatura es SOLO para tablet (601–1000px): ahí el nombre del
   proyecto sigue visible y los dos compiten por el ancho. Abajo de
   600px .next-name se oculta, así que cabe la etiqueta completa. */
.slide-text.next-label-short { display: none; }
@media (min-width: 601px) and (max-width: 1000px) {
  .slide-text.next-label-full  { display: none; }
  .slide-text.next-label-short { display: inline-block; }
}
.slide-text {
  display: inline-block;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
  white-space: nowrap;
}
.next-project-image-container {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.next-project-image-wrapper {
  grid-column: 1 / 7;
  height: 50vh;
  overflow: hidden;
}
.next-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.next-project-link:hover .next-img { transform: scale(1.03); }
.is-exiting .slide-text {
  transform: translateX(110vw);
  opacity: 0;
}

/* =========================
   TRANSICIÓN DE PÁGINA — wipe naranja
   Ambas fases barren de derecha a izquierda:
   al salir, el naranja entra desde la derecha hasta cubrir;
   al llegar, se retira hacia la izquierda y la página
   nueva se revela de derecha a izquierda.
========================= */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Altura fija a propósito, NO inset: 0.
     En celular la barra de direcciones aparece y desaparece, y con
     inset: 0 el panel se encogía con ella: el gráfico está en cover,
     así que se reescalaba a media transición y se veía un tirón.
     lvh es la altura con la barra retraída y no cambia nunca. */
  height: 100vh;
  height: 100lvh;
  z-index: 9999;
  background: var(--color-bright-orange);
  pointer-events: none;
  clip-path: inset(0 0 0 0);          /* al cargar: cubriendo */
  will-change: clip-path;
}
/* Gráfico sobre el naranja, en su propia capa: el panel ya usa
   background para el color plano.
   La ruta se resuelve desde styles.css, que vive en la raíz, así que
   la misma línea sirve para español e inglés.
   `cover` en todos los tamaños: el gráfico va siempre a sangre y se
   recorta contra el borde de la pantalla. Es intencional — no cambiar
   a `contain` ni agregar excepciones por breakpoint. */
.page-transition-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--transition-graphic, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* LLEGADA — se retira hacia la izquierda */
.page-transition-overlay.is-leaving {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms cubic-bezier(.76, 0, .24, 1);
}
/* Recolocar al borde derecho sin animar, antes de la salida */
.page-transition-overlay.is-armed {
  transition: none;
  clip-path: inset(0 0 0 100%);
}
/* SALIDA — barre desde la derecha hasta cubrir */
.page-transition-overlay.is-covering {
  clip-path: inset(0 0 0 0);
  transition: clip-path 560ms cubic-bezier(.76, 0, .24, 1);
}

/* =========================
   SCROLL REVEAL
   El estado oculto vive bajo .js, que el HTML agrega
   en el <head>. Si el JS falla, todo queda visible
   en vez de quedarse en opacity: 0 para siempre.
========================= */
.js .gallery-block,
.js .reveal-item {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 800ms cubic-bezier(.16, 1, .3, 1),
              transform 800ms cubic-bezier(.16, 1, .3, 1);
}
.js .gallery-block.is-visible,
.js .reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================
   SELECTOR DE IDIOMA
   El hero sigue corriendo detrás, desenfocado.
   Mientras está activo, la nav espera fuera de pantalla.
========================= */
.lang-gate {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--container-padding);
  /* Respaldo para navegadores sin backdrop-filter */
  background: rgba(241, 240, 237, 0.55);
  -webkit-backdrop-filter: blur(1.75rem) saturate(115%);
          backdrop-filter: blur(1.75rem) saturate(115%);
  opacity: 1;
  transition: opacity 600ms ease, -webkit-backdrop-filter 600ms ease, backdrop-filter 600ms ease;
}
.lang-gate.is-dismissed {
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-gate { background: rgba(241, 240, 237, 0.92); }
}

.lang-gate__panel {
  /* Mismas proporciones que el panel derecho del header:
     dos filas de 2.75rem, 5.5rem en total */
  width: min(100%, 24rem);
  border: var(--line-weight) solid var(--color-black);
  outline: var(--menu-offset) solid var(--color-offwhite);
  background: var(--color-offwhite);
  overflow: hidden;
}

/* Fila superior — formato de .menu-row a */
.lang-gate__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  background: var(--color-offwhite);
  color: var(--color-black);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-relaxed);
  text-transform: uppercase;
}

/* Fila inferior — formato de .cta-row */
.lang-gate__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--line-weight) solid var(--color-black);
}
.lang-gate__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: .5rem 1rem;
  background: var(--color-offwhite);
  color: var(--color-black);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease;
}
.lang-gate__btn + .lang-gate__btn {
  border-left: var(--line-weight) solid var(--color-black);
}
.lang-gate__btn:hover {
  background: var(--color-black);
  color: var(--color-offwhite);
}

/* Velo que cruza la carga de página al elegir English.
   Lo enciende un script en línea del <head>, antes del primer
   pintado, para que no se vea /en/ sin desenfoque ni un instante. */
html.gate-exit body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  background: rgba(241, 240, 237, 0.55);
  -webkit-backdrop-filter: blur(1.75rem) saturate(115%);
          backdrop-filter: blur(1.75rem) saturate(115%);
  opacity: 1;
  transition: opacity 600ms ease;
}
html.gate-exit.gate-clearing body::after { opacity: 0; }

/* La nav espera arriba mientras no se elige idioma */
body.lang-gating .site-header {
  transform: translateY(calc(-1 * (var(--header-height) + var(--header-offset) + var(--menu-offset) * 2)));
  transition: none;
}

@media (max-width: 600px) {
  /* Mismas alturas que el header móvil */
  .lang-gate__label { height: 2.75rem; }
  .lang-gate__btn   { height: 2.125rem; }
}

/* =========================
   MOTION PREFERENCES
========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .text-marker { transition: none; }
  .screen-dim { transition: none; }
  .lang-roll__now, .lang-roll__next { transition: none; }
  .screen-dim { transition: none; }
  html { scroll-behavior: auto; }

  /* Sin animación de entrada: el contenido se muestra y ya */
  .js .gallery-block,
  .js .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
  /* El wipe se desactiva también desde JS, esto es el respaldo */
  .page-transition-overlay { display: none; }
  .lang-gate { transition: none; }
  body.lang-gating .site-header { transform: none; }
}

/* =========================
   TABLET (≤1000px)
========================= */
@media (max-width: 1000px) {
  .logo-cell { display: none; }
  /* Sin el gif, el reparto pasa de 50/50 a 33/67: la nav ahora
     lleva cuatro celdas y necesita el espacio que dejó el logo. */
  .title-cell {
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .brand-title {
    text-align: center;
    /* Más contenido que --fs-xl para que quepa en el tercio */
    font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  }
  .right-panel { grid-column: 3 / 7; display: grid; }
  .menu-toggle { display: none; }

  .section-grid {
    grid-template-rows: auto 1fr auto !important;
    gap: var(--space-md) !important;
  }
  .services-intro-box { display: none; }
  .label-box { grid-column: 1 / 3; }
  .list-box { grid-column: 3 / 7; text-align: right; }

  .projects-list-box { align-items: flex-end; }
  .project-item { padding: var(--space-xs) 0; opacity: 1 !important; }
  .projects-bg-container { display: none !important; }
  .projects-list:has(.project-item:hover) .project-item:not(:hover) { opacity: 1 !important; }
  .projects-list:has(.project-item:hover) .p-services { opacity: 1 !important; visibility: visible !important; }

  .section-contact { height: 50vh; }

  .footer-top-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gap);
  }
  .ui-label.col-1,
  .footer-info.col-2 { grid-column: 1 / 3; }
  .footer-info.col-2 { grid-row: 2; margin-top: var(--space-xs); }
  .ui-label.col-4,
  .footer-info.col-5 { grid-column: 4 / 7; }
  .footer-info.col-5 { grid-row: 2; margin-top: var(--space-xs); }

  .footer-bottom-group {
    grid-row: 3;
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-self: end;
  }
  .footer-brand {
    font-size: 11.25vw;
    white-space: nowrap;
    width: 100%;
  }

  /* Proyecto — tablet */
  .project-title-main { grid-column: 1 / 7; grid-row: 1; }
  .info-panel .container.project-info-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: var(--grid-gap) !important;
  }
  .project-metadata {
    grid-column: 1 / 7 !important;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-row: 2;
    gap: var(--grid-gap);
    align-items: start;
  }
  .metadata-row { grid-column: span 2 !important; }
  .project-description-text {
    grid-column: 1 / 7 !important;
    grid-row: 3;
    margin-top: var(--space-sm) !important;
  }
}

/* =========================
   MÓVIL (≤600px)
========================= */
@media (max-width: 600px) {
  /* Header móvil */
  .header-box {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: 4.25rem 0 0;
    height: auto;
    transition: grid-template-rows 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    overflow: hidden;
  }
  .header-box.nav-open {
    grid-template-rows: 4.25rem 2.125rem 2.125rem;
  }
  .title-cell {
    grid-column: 1 / 6 !important;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: var(--line-weight) solid var(--color-black);
    padding: 0 var(--space-xs);
  }
  .brand-title {
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
  }
  .menu-toggle {
    display: flex;
    grid-column: 6 / 7;
    grid-row: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  .hamburger-line {
    width: 20px;
    height: var(--line-weight);
    background-color: var(--color-black);
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .right-panel {
    grid-column: 1 / 7;
    grid-row: 2 / 4;
    display: contents;
  }
  .menu-row {
    grid-column: 1 / 7;
    grid-row: 2;
    display: grid !important;
    /* Tres enlaces + la celda de idioma, que va a su ancho */
    grid-template-columns: repeat(3, 1fr) auto !important;
    border-top: var(--line-weight) solid var(--color-black);
  }
  .menu-row a {
    border-left: none;
    border-right: var(--line-weight) solid var(--color-black);
    font-size: var(--fs-xs);
  }
  .menu-row a:last-child { border-right: none; }
  .cta-row {
    grid-column: 1 / 7;
    grid-row: 3;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-top: var(--line-weight) solid var(--color-black);
  }
  .cta-row .cta {
    border-left: none;
    border-right: var(--line-weight) solid var(--color-black);
  }
  .cta-row .cta:last-child { border-right: none; }

  /* Hamburguesa animada */
  .nav-open .hamburger-line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-open .hamburger-line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

  /* Proyectos — mobile */
  .section-projects .p-services { display: none !important; }

  /* Siguiente proyecto — mobile */
  .next-name { display: none !important; }

  /* Footer — mobile */
  .footer-top-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    align-items: start !important;
    gap: var(--grid-gap) !important;
    row-gap: var(--space-md) !important;
  }
  .ui-label.col-1,
  .ui-label.col-4,
  .footer-info.col-2,
  .footer-info.col-5 { margin: 0 !important; padding: 0 !important; display: block !important; }
  .footer-info p { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; word-break: break-all; }
  .ui-label.col-1 { grid-column: 1 / 2 !important; grid-row: 1 !important; }
  .footer-info.col-2 { grid-column: 2 / 7 !important; grid-row: 1 !important; }
  .ui-label.col-4 { grid-column: 1 / 2 !important; grid-row: 2 !important; }
  .footer-info.col-5 { grid-column: 2 / 7 !important; grid-row: 2 !important; }
}