/* =========================================================
   Rogel Development Group — Hero
   Logo + CTA reveal with a left-to-right "wipe" animation
   (wipe animation runs on desktop; mobile fades in instead)
   ========================================================= */

/* Solo Garet Book (la variante delgada) — se usa para todo: texto, títulos y botones */
@font-face{
  font-family: "Garet";
  src: url("fonts/Garet-Book.woff2") format("woff2"),
       url("fonts/Garet-Book.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #fcfbf7;
  --ink: #000000;          /* exact logo color */
  --accent: #f2be3c;       /* amarillo de acento: botón "Contacto" del header y su sección */
  --logo-w: 434px;         /* max width of the logo on desktop (620px - 30%) */
  --section-h: 80vh;       /* alto del hero Y de la sección "Proyecto actual" */
  --header-h: 88px;        /* alto del header fijo (y del hero ya colapsado) — 110px - 20% */

  --ease: cubic-bezier(.65,0,.35,1);
  --logo-duration: 1000ms;
  --logo-delay: 150ms;         /* termina ~1150ms */
  --tagline-duration: 700ms;
  --tagline-delay: 600ms;      /* termina ~1300ms */
  --btn-duration: 700ms;
  --btn-delay: 950ms;          /* termina ~1650ms */

  --collapse-duration: 550ms;  /* qué tan rápido se "minimiza" el hero */

  /* Progreso continuo del colapso hero -> header (0 = hero completo,
     1 = ya tomó la forma/alto del header). Lo actualiza script.js en
     cada scroll — de ahí que todo lo que dependa de él reaccione al
     instante y sea reversible (subir = se vuelve a agrandar). */
  --hero-progress: 0;
}

@media (max-width: 767px){
  :root{
    --header-h: 61px;     /* 76px - 20% */
  }
}

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

html, body{
  margin: 0;
  padding: 0;
}

body{
  /* sin background aquí: el fondo #fafaf9 es solo del .hero, el resto de la
     página queda en el color estándar (blanco por defecto del navegador,
     o el fondo que ya definas en el resto de tu sitio) */
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;   /* Garet Book — texto de cuerpo */
}

/* Títulos: misma Garet Book, sin negrita (el navegador pone h1-h6 en bold por defecto) */
h1, h2, h3, h4, h5, h6{
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* ---------- Hero shell ---------- */

/* .hero-wrap reserva SIEMPRE el mismo alto en el documento (el alto
   completo del hero, --section-h) — este alto NUNCA cambia con el
   scroll. Esto es clave: si el alto reservado cambiara según el scroll
   (como antes), el navegador entra en un ciclo de retroalimentación
   (intenta compensar el salto de layout ajustando el scroll, lo que
   vuelve a disparar el cálculo, etc.) que en algunos casos incluso
   llega a bloquear el scroll por completo. Al mantener este alto fijo,
   el scroll de la página se comporta de forma 100% normal y estable. */
.hero-wrap{
  position: relative;
  height: var(--section-h);
}

/* El hero visual queda "pegado" (sticky) arriba del todo mientras se
   recorre el alto reservado por .hero-wrap. Su propio alto sí se va
   "minimizando poco a poco" con el scroll (de --section-h a
   --header-h, según --hero-progress) — pero como está en position:
   sticky dentro de un contenedor de alto fijo, este cambio de alto es
   puramente visual y no afecta el alto total del documento ni el
   scroll — es completamente reversible: si el usuario sube,
   --hero-progress baja y el hero vuelve a crecer. */
.hero{
  position: sticky;
  top: 0;
  width: 100%;
  height: calc(
    var(--header-h) + (var(--section-h) - var(--header-h)) * (1 - var(--hero-progress))
  );
  background: var(--bg);

  display: flex;
  align-items: center;      /* vertical centering  */
  justify-content: center;  /* horizontal centering */
  padding: calc(6vh * (1 - var(--hero-progress))) 1.5rem;
  overflow: hidden;
}

/* ---------- Header fijo (aparece cuando el hero se "minimiza") ---------- */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);

  display: flex;
  align-items: stretch;
  background: #ffffff;

  /* Aparece con un fundido cruzado hacia el final del colapso del
     hero (últimos 35% del recorrido), no de golpe al llegar a un
     punto fijo — así se siente como si el propio hero se convirtiera
     en el header en vez de "desaparecer y ser reemplazado". */
  opacity: calc(clamp(0, (var(--hero-progress) - 0.65) / 0.35, 1));
  pointer-events: auto;
}

.site-header__inner{
  display: flex;
  align-items: center;
  width: 100%;
}

/* Solo escritorio: el contenido del header queda del mismo ancho
   (y alineado a los mismos límites izq/der) que la imagen de
   "Proyecto actual" (.project__inner, max-width 1200px). */
@media (min-width: 768px){
  .site-header{
    padding: 0 1.5rem;
  }

  .site-header__inner{
    max-width: 1200px;
    margin: 0 auto;
  }
}

.site-header__logo-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  padding: 0 1.75rem;
  background: var(--bg);   /* mismo fondo del hero: la "huella" que queda */
}

.site-header__logo{
  display: block;
  height: 42px;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.site-header__nav{
  display: flex;
  align-items: center;
  margin-left: 2rem;
  gap: 2rem;   /* misma distancia entre títulos que del logo al primero */
}

.site-header__link{
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 200ms var(--ease);
}

.site-header__link:hover,
.site-header__link:focus-visible{
  opacity: 1;
}

/* Botón de "Contacto": a propósito distinto de los links normales del
   nav (relleno, color de acento) para que resalte como la acción
   principal del header. Se queda pegado al borde derecho del header
   (mismo límite que la imagen de "Proyecto actual" en escritorio). */
.site-header__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;

  background: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.55em 1.6em;

  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}

.site-header__cta:hover,
.site-header__cta:focus-visible{
  background: var(--ink);
  color: #ffffff;
}

/* Botón de menú: oculto en escritorio, solo aparece en móvil */
.site-header__menu-btn{
  display: none;
  margin-left: 0.75rem;
  margin-right: 1.1rem;

  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.site-header__menu-btn span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}

.site-header__menu-btn[aria-expanded="true"] span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.site-header__menu-btn[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px){
  /* En móvil el header sigue el mismo --hero-progress continuo que en
     escritorio (ver .hero / .site-header más arriba): aparece poco a
     poco según el scroll, y es igual de reversible. */
  .site-header__logo-badge{
    padding: 0 1.1rem;
  }

  .site-header__logo{
    height: 30px;
  }

  /* En móvil, el nav se compacta en un botón de menú: el <nav> pasa a
     ser un panel desplegable, oculto hasta que se abre. */
  .site-header__menu-btn{
    display: flex;
  }

  .site-header__nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;

    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;

    background: #ffffff;
    padding: 0 1.1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    transition: max-height 280ms var(--ease), opacity 220ms var(--ease),
                padding 280ms var(--ease);
  }

  .site-header__nav.is-open{
    max-height: 220px;
    opacity: 1;
    padding: 0.75rem 1.1rem 1.25rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  }

  .site-header__link{
    font-size: 0.95rem;
    padding: 0.4rem 0;
  }

  .site-header__cta{
    font-size: 0.75rem;
    padding: 0.5em 1.1em;
  }
}

.hero__inner{
  display: flex;
  flex-direction: column;
  align-items: center;      /* centers logo + button on the X axis */
  justify-content: center;
  text-align: center;

  /* Se encoge junto con el hero en vez de desvanecerse de golpe: se
     mantiene visible (sin opacity:0) durante la mayor parte del
     recorrido, y solo se funde en el mismo tramo final en el que
     aparece el header real (ver .site-header) — como si el propio
     logo/tagline se transformara en el header, no como si
     desapareciera y lo reemplazaran de golpe. Con scroll-progress = 0
     vuelve exactamente a su tamaño y opacidad original. */
  transform: scale(calc(1 - 0.55 * var(--hero-progress)));
  opacity: calc(1 - clamp(0, (var(--hero-progress) - 0.65) / 0.35, 1));
}

/* ---------- Logo ---------- */

.hero__logo{
  display: block;
  width: min(90vw, var(--logo-w));
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Tagline ---------- */

.hero__tagline{
  margin: 1.5rem 0 0;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);   /* gris suave sobre el negro del logo */
}

/* ---------- CTA button ---------- */

.hero__cta{
  margin-top: 1.75rem;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;       /* más chico, como se pidió */
  font-weight: 400;        /* Garet Book — sin negrita */
  letter-spacing: normal;

  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;         /* sin radios / esquinas rectas */

  padding: 0.81em 2.21em;   /* 0.95em 2.6em - 15% */
  cursor: pointer;

  transition: background-color 220ms var(--ease),
              color 220ms var(--ease);
}

.hero__cta:hover,
.hero__cta:focus-visible{
  background: var(--ink);
  color: var(--bg);
}

.hero__cta:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* =========================================================
   Reveal animation — left to right wipe
   Implemented with clip-path so the logo's silhouette and the
   button's outline+text appear progressively from left to right.
   ========================================================= */

@keyframes wipe-reveal{
  from{ clip-path: inset(0 100% 0 0); }
  to{   clip-path: inset(0    0  0 0); }
}

/* Desktop: full wipe animation (as requested, this is a desktop effect) */
@media (min-width: 768px){

  .hero__logo{
    clip-path: inset(0 100% 0 0); /* fully hidden until animation runs */
    animation: wipe-reveal var(--logo-duration) var(--ease) var(--logo-delay) both;
  }

  .hero__tagline{
    clip-path: inset(0 100% 0 0);
    animation: wipe-reveal var(--tagline-duration) var(--ease) var(--tagline-delay) both;
  }

  .hero__cta{
    clip-path: inset(0 100% 0 0);
    animation: wipe-reveal var(--btn-duration) var(--ease) var(--btn-delay) both;
  }
}

/* Mobile / tablet: simple, lighter fade + rise instead of the wipe */
@media (max-width: 767px){

  @keyframes fade-up{
    from{ opacity: 0; transform: translateY(12px); }
    to{   opacity: 1; transform: translateY(0); }
  }

  .hero__logo{
    opacity: 0;
    animation: fade-up 700ms var(--ease) 100ms both;
  }

  .hero__tagline{
    opacity: 0;
    animation: fade-up 600ms var(--ease) 400ms both;
  }

  .hero__cta{
    opacity: 0;
    animation: fade-up 600ms var(--ease) 700ms both;
  }
}

/* Respect users who prefer reduced motion, on any screen size */
@media (prefers-reduced-motion: reduce){
  .hero__logo,
  .hero__tagline,
  .hero__cta{
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero,
  .site-header,
  .hero__inner,
  .project__slide,
  .site-header__nav{
    transition: none !important;
  }
}

/* =========================================================
   Sección "Proyecto actual"
   Mismo alto que el hero (--section-h). Foto arriba, texto abajo
   centrado, número de proyecto pegado a la esquina inferior derecha.
   ========================================================= */

.project{
  width: 100%;
  min-height: var(--section-h);
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vh 1.5rem;   /* más compacto */

  position: relative;
}

.project__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Tamaño de imagen original: ancho completo del contenedor, alto
   proporcional (16:9 en escritorio, 4:3 en móvil — ver media query). */
.project__media{
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 9;   /* alto -20% respecto a 16:9, mismo ancho */
  overflow: hidden;
}

.project__slides{
  position: relative;
  width: 100%;
  height: 100%;
}

.project__slide{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Crossfade suave y sutil (antes se sentía "trabado") */
  transition: opacity 1400ms ease;
  will-change: opacity;
}

.project__slide.is-active{
  opacity: 1;
}

/* Flechas: control manual, solo en escritorio (ver media query) */
.project__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;

  transition: background-color 200ms var(--ease);
}

.project__arrow:hover,
.project__arrow:focus-visible{
  background: #ffffff;
}

.project__arrow--prev{ left: 0.65rem; }
.project__arrow--next{ right: 0.65rem; }

/* Puntos: indicador + control, debajo de la imagen (no encima) */
.project__dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.project__dot{
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}

.project__dot.is-active{
  background: var(--ink);
  transform: scale(1.15);
}

.project__info{
  margin-bottom: 1rem;   /* más compacto: menos aire hacia la imagen de abajo */
}

.project__eyebrow{
  display: block;
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.65;
  margin-bottom: 0.3rem;
  text-decoration: none;
  transition: opacity 200ms var(--ease);
}

.project__eyebrow:hover,
.project__eyebrow:focus-visible{
  opacity: 1;
}

.project__title{
  font-size: clamp(1.8rem, 4vw, 3rem);   /* -20% */
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.5rem;   /* más compacto */
}

.project__desc{
  max-width: 480px;
  margin: 0 auto 0.75rem;   /* más compacto: menos aire antes del botón */

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
}

.project__cta{
  display: inline-block;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  text-decoration: none;

  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.75em 2.1em;

  transition: background-color 220ms var(--ease),
              color 220ms var(--ease);
}

.project__cta:hover,
.project__cta:focus-visible{
  background: var(--ink);
  color: #ffffff;
}

.project__number{
  align-self: flex-end;   /* debajo de la imagen, pegado a la esquina inferior derecha */
  margin-top: 0.5rem;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  color: var(--ink);
  opacity: 0.55;
}

@media (max-width: 767px){
  /* Más compacto: menos aire entre imagen, textos y botón */
  .project{
    padding: 2vh 1.25rem;   /* más compacto */
    min-height: auto;   /* la sección se ajusta al contenido: menos alta */
  }

  .project__media{
    aspect-ratio: 5 / 3;   /* alto -20% respecto a 4:3, mismo ancho */
  }

  .project__dots{
    margin-top: 0.6rem;
  }

  /* Controles de cambio: solo en escritorio, como se pidió */
  .project__arrow{
    display: none;
  }

  .project__info{
    margin-bottom: 0.7rem;   /* más compacto */
  }

  .project__eyebrow{
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .project__title{
    margin-bottom: 0.5rem;
  }

  .project__desc{
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;   /* más compacto */
  }

  .project__cta{
    font-size: 0.68rem;
    padding: 0.65em 1.8em;
  }

  .project__number{
    margin-top: 0.35rem;   /* más pegado a la imagen */
    font-size: 0.9rem;
  }
}

/* =========================================================
   Sección "Más proyectos" — mitad del alto del hero.
   Dos "grupos" (título arriba, 2 miniaturas cuadradas, título/caption
   abajo). Las miniaturas son botones que enlazan a la página de cada
   proyecto (placeholders hasta que existan esas páginas).
   ========================================================= */

.more-projects{
  width: 100%;
  min-height: calc(var(--section-h) * 0.65);   /* mitad del hero + 30% más alta */
  background: var(--bg);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 1.5rem;
  padding-top: 0.8vh;   /* -80%: menos separación desde "Proyecto actual" */

  position: relative;
}

/* Título de sección ("Estudio", "Servicios"): arriba a la izquierda,
   mismo tamaño que "Casa sfe" (.project__title) y acotado al mismo
   límite de ancho que la imagen de "Proyecto actual". */
.section-title{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 1.25rem;
  text-align: left;

  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--ink);
}

.more-projects__inner{
  width: 100%;
  /* Mismo límite de ancho que la imagen de "Proyecto actual"
     (.project__inner): los dos grupos se distribuyen dentro de ese
     mismo espacio en vez de amontonarse al centro. */
  max-width: 1200px;
  margin: 0 auto 2rem;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;   /* separación central = misma distancia que entre imágenes (1rem) */
}

.more-projects__group{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.more-projects__title{
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 1rem;
}

.more-projects__pair{
  display: flex;
  gap: 1rem;   /* misma separación que las imágenes de "Servicios": el estándar del sitio */
}

/* Botón-imagen: cuadrado, tamaño chico y definido (+30% y luego +20%) */
.thumb-btn{
  display: block;
  width: clamp(131px, 14vw, 187px);
  height: clamp(131px, 14vw, 187px);
  overflow: hidden;

  border: none;
  text-decoration: none;
  cursor: pointer;

  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.thumb-btn:hover,
.thumb-btn:focus-visible{
  opacity: 0.85;
  transform: scale(0.97);
}

.thumb-btn__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.more-projects__caption{
  display: block;
  margin-top: 0.85rem;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.7;
}

.more-projects__cta{
  display: inline-block;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  text-decoration: none;

  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.75em 2.4em;

  transition: background-color 220ms var(--ease),
              color 220ms var(--ease);
}

.more-projects__cta:hover,
.more-projects__cta:focus-visible{
  background: var(--ink);
  color: var(--bg);
}

/* Solo escritorio: la primera imagen de cada bloque se alarga para que,
   entre las dos, se repartan el espacio restante del grupo — así se
   reduce el hueco vacío en medio de los dos bloques. También se agrega
   una sombra al pasar el cursor, pero solo alrededor de ese bloque de
   imágenes (no en toda la sección). En móvil no cambia nada de esto. */
@media (min-width: 768px){
  .more-projects__group{
    flex: 1 1 0;
    max-width: calc(50% - 0.5rem);   /* mitad del gap de 1rem entre bloques */
  }

  .more-projects__pair{
    width: 100%;
  }

  .more-projects__pair .thumb-btn{
    transition: opacity 200ms var(--ease), transform 200ms var(--ease),
                box-shadow 220ms var(--ease);
  }

  .more-projects__pair .thumb-btn:first-child{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .more-projects__pair .thumb-btn:last-child{
    flex: 0 0 clamp(131px, 14vw, 187px);
  }

  .more-projects__pair:hover{
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
  }
}

@media (max-width: 767px){
  .more-projects{
    padding: 4vh 1.25rem;
    padding-top: 0.8vh;   /* -80%: menos separación desde "Proyecto actual" */
  }

  /* Cada grupo ya es una fila de 2 imágenes — en móvil los grupos se
     apilan uno debajo del otro en vez de ir lado a lado. */
  .more-projects__inner{
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
  }

  .more-projects__title{
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }

  .thumb-btn{
    width: clamp(172px, 52.8vw, 234px);
    height: clamp(172px, 52.8vw, 234px);
  }

  .more-projects__caption{
    font-size: 0.8rem;
    margin-top: 0.65rem;
  }

  .more-projects__cta{
    font-size: 0.68rem;
    padding: 0.65em 2em;
  }
}

/* =========================================================
   Sección "Servicios"
   Escritorio: cuadrícula 2x2 — título/descripción/botón arriba,
   foto abajo, cada tarjeta separada por una línea muy fina.
   Móvil: tarjetas individuales apiladas con efecto "peel" (sticky),
   inspirado solo en la función de apilado de las tarjetas de
   Mercado Pago — mismos colores del sitio, sin radios de esquina.
   ========================================================= */

.services{
  width: 100%;
  background: #ffffff;   /* zona de arriba (título + fila 1): blanco */
  position: relative;
}

/* Solo escritorio: mismo margen lateral que "Proyecto actual" y
   "Estudio", para que el límite de las tarjetas y del título coincida
   con el de la imagen. En móvil las tarjetas se mantienen a todo lo
   ancho (diseño ya definido), solo el título lleva su propio margen. */
@media (min-width: 768px){
  .services{
    padding: 0 1.5rem;
  }
}

.services__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Escritorio: cuadrícula 2x2 real (una sola, sin dividir en dos
   filas/contenedores) para que en móvil las 4 tarjetas puedan vivir en
   un solo flujo y apilarse en una sola secuencia continua (ver abajo).
   Las "bandas" son decorativas: ocupan cada una toda su fila del grid
   (mismas líneas que las tarjetas de esa fila) y se extienden de lado
   a lado de la pantalla, dando el efecto de "dos secciones separadas"
   sin necesidad de dos contenedores distintos. */
.services__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;   /* pequeña separación entre las dos tarjetas de cada fila */
}

/* Solo tiene efecto en móvil (ver media query): en escritorio no es
   más que un div vacío sin alto. */
.services__pause{
  height: 0;
}

.services__band{
  grid-column: 1 / -1;
  position: relative;
}

.services__band--top{ grid-row: 1; }
.services__band--bottom{ grid-row: 2; }

.services__band::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
}

.services__band--top::before{ background: #ffffff; }
.services__band--bottom::before{ background: var(--bg); }

.service-card{
  position: relative;
  z-index: 1;   /* por encima de las bandas decorativas */
  display: flex;
  flex-direction: column;
  /* sin bordes: las tarjetas de cada fila se ven como un solo bloque continuo */
  background: var(--bg);
}

/* Ubicación explícita en la cuadrícula 2x2 (coincide con las bandas de
   arriba) y color propio de cada tarjeta: necesario para que, en el
   apilado "sticky" de móvil, la tarjeta cubra opacamente a la
   anterior con el color correcto al deslizarse sobre ella. */
.service-card[data-stack="1"]{ grid-row: 1; grid-column: 1; background: #ffffff; }
.service-card[data-stack="2"]{ grid-row: 1; grid-column: 2; background: #ffffff; }
.service-card[data-stack="3"]{ grid-row: 2; grid-column: 1; background: var(--bg); }
.service-card[data-stack="4"]{ grid-row: 2; grid-column: 2; background: var(--bg); }

.service-card__info{
  text-align: center;
  padding: 2.5rem 1.5rem 1.5rem;
}

.service-card__title{
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.service-card__desc{
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 1.1rem;
}

.service-card__cta{
  display: inline-block;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--ink);
  text-decoration: none;

  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.65em 1.9em;

  transition: background-color 220ms var(--ease),
              color 220ms var(--ease);
}

.service-card__cta:hover,
.service-card__cta:focus-visible{
  background: var(--ink);
  color: var(--bg);
}

.service-card__media{
  width: 100%;
  aspect-ratio: 21 / 10;
  overflow: hidden;
}

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

/* -------- Móvil: tarjetas individuales apiladas (efecto sticky/peel) -------- */
@media (max-width: 767px){
  /* El título se queda pausado/fijo (pegado justo debajo del header)
     mientras se recorre el alto de ".services__pause" — el "respiro"
     antes de que empiecen a apilarse las tarjetas. Fondo blanco propio
     para que no se vea nada de la tarjeta 1 detrás mientras está fijo. */
  .services .section-title{
    padding: 0.85rem 1.25rem;
    margin-bottom: 0;
    position: sticky;
    top: var(--header-h);
    z-index: 0;
    background: #ffffff;
  }

  .services__pause{
    height: 22vh;
  }

  .services__grid{
    display: block;
  }

  /* Las bandas de color son solo para el efecto "dos bloques" de
     escritorio; en móvil cada tarjeta ya trae su propio color de
     fondo opaco, así que las bandas no hacen falta. */
  .services__band{
    display: none;
  }

  .service-card{
    position: sticky;
    border: none;
    margin: 0;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.10);
  }

  /* Cada tarjeta se "pega" un poco más abajo que la anterior, dejando
     asomar una franja de la de atrás al hacer scroll — la función de
     apilado de Mercado Pago, sin cambiar nuestros colores ni radios.
     El paso entre tarjetas es más chico que antes (40px en vez de
     64px): la animación de apilado se recorre más comprimida, así
     que en cuanto llega a la última tarjeta se sigue de una vez hacia
     el resto de la página, sin espacio muerto de más. */
  .service-card[data-stack="1"]{ top: var(--header-h); z-index: 1; }
  .service-card[data-stack="2"]{ top: calc(var(--header-h) + 40px); z-index: 2; }
  .service-card[data-stack="3"]{ top: calc(var(--header-h) + 80px); z-index: 3; }
  .service-card[data-stack="4"]{ top: calc(var(--header-h) + 120px); z-index: 4; }

  /* Alto fijo e igual para las 4 tarjetas (antes variaba un poco según
     el largo de cada descripción): el texto se centra dentro de ese
     mismo espacio en vez de definir el alto de la tarjeta. */
  .service-card__info{
    min-height: 128px;
    padding: 1rem 1.25rem 0.85rem;   /* compacto: sin mucho espacio en blanco */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra el bloque completo verticalmente */
  }

  .service-card__title{
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }

  .service-card__desc{
    font-size: 0.8rem;
    margin-bottom: 0.7rem;
  }

  .service-card__cta{
    align-self: center;   /* no se estira a lo ancho por el flex de arriba */
    font-size: 0.68rem;
    padding: 0.55em 1.7em;
  }

  .service-card__media{
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce){
  .service-card{
    position: static !important;
  }
}

/* =========================================================
   Sección "Partners"
   Carrusel horizontal tipo Apple TV: cada tarjeta ocupa casi todo el
   ancho del visor y deja asomar un poco de la tarjeta vecina a los
   lados. Avanza sola (autoplay) y también se controla con flechas
   (solo escritorio, como en "Proyecto actual") y puntos.
   ========================================================= */

.partners{
  width: 100%;
  background: #ffffff;
  padding: 4vh 1.5rem 5vh;
  position: relative;
}

.partners__inner{
  width: 100%;
  /* Más ancho que el límite normal de 1200px a propósito: el visor le
     quita 8% + 8% de "peek" a los lados (ver .partners__viewport), así
     que para que la tarjeta ACTIVA quede exactamente del mismo tamaño
     que la imagen de "Proyecto actual" (1200px), el contenedor tiene
     que ser 1200px / 0.84. El título, al mantener su propio límite de
     1200px centrado, sigue alineado con el resto del sitio sin cambios. */
  max-width: calc(1200px / 0.84);
  margin: 0 auto;
}

.partners__viewport{
  position: relative;
  overflow: hidden;
  padding: 0 8%;   /* deja ver un poco de las tarjetas vecinas a los lados */
}

.partners__track{
  display: flex;
  gap: 1rem;
  transition: transform 550ms var(--ease);
  will-change: transform;
}

.partner-card{
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 20 / 9;   /* misma proporción que la imagen de "Proyecto actual" */
  overflow: hidden;
  background: #0a0a0a;
}

.partner-card__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-card__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.partner-card__badge{
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: #ffffff;
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
}

.partner-card__logo{
  display: block;
  height: 20px;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.partner-card__text{
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 4.25rem;
  color: #ffffff;
}

.partner-card__name{
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  margin: 0 0 0.25rem;
}

.partner-card__sub{
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.85;
}

.partner-card__cta{
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;

  display: inline-block;
  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  color: #ffffff;
  text-decoration: none;

  border: 1.5px solid #ffffff;
  border-radius: 0;
  padding: 0.6em 1.8em;

  transition: background-color 220ms var(--ease),
              color 220ms var(--ease);
}

.partner-card__cta:hover,
.partner-card__cta:focus-visible{
  background: #ffffff;
  color: #0a0a0a;
}

/* Flechas: control manual, solo en escritorio (como en "Proyecto actual") */
.partners__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;

  transition: background-color 200ms var(--ease);
}

.partners__arrow:hover,
.partners__arrow:focus-visible{
  background: #ffffff;
}

.partners__arrow--prev{ left: 1.25rem; }
.partners__arrow--next{ right: 1.25rem; }

.partners__dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.partners__dot{
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}

.partners__dot.is-active{
  background: var(--ink);
  transform: scale(1.15);
}

@media (max-width: 767px){
  .partners{
    padding: 3vh 1.25rem 4vh;
  }

  /* Sin "asomo" de vecinas en móvil: la tarjeta ocupa el mismo ancho
     que la imagen de "Proyecto actual" (misma franja de 1.25rem a los
     lados, sin el 6-8% extra que se le resta en escritorio). */
  .partners__viewport{
    padding: 0;
  }

  /* Misma proporción que ".project__media" en móvil (5/3): con el
     mismo ancho, esto también iguala el alto. */
  .partner-card{
    aspect-ratio: 5 / 3;
  }

  /* En móvil, sin el "asomo" de las tarjetas vecinas ya no hay pista
     visual de que se puede cambiar de imagen — por eso aquí SÍ se
     muestran las flechas (a diferencia de "Proyecto actual", donde en
     móvil solo hay puntos). */
  .partners__arrow{
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
  }

  .partners__arrow--prev{ left: 0.75rem; }
  .partners__arrow--next{ right: 0.75rem; }

  /* Tarjeta simplificada en móvil: solo título y botón. */
  .partner-card__badge,
  .partner-card__sub{
    display: none;
  }

  .partner-card__text{
    left: 1rem;
    right: 1rem;
    bottom: 3.6rem;
  }

  .partner-card__name{
    font-size: 1.15rem;
  }

  .partner-card__cta{
    left: 1rem;
    bottom: 1rem;
    font-size: 0.68rem;
    padding: 0.55em 1.6em;
  }
}

@media (prefers-reduced-motion: reduce){
  .partners__track{
    transition: none !important;
  }
}

/* =========================================================
   Sección "Contacto"
   Bloque de color de acento (amarillo) de lado a lado, con el
   mismo límite de 1200px que el resto del sitio. Los campos
   siguen el lenguaje visual del sitio (esquinas rectas, tipografía
   Garet). "Presupuesto estimado" y "¿Cuándo planeas iniciar?" son
   campos sugeridos para calificar mejor a cada prospecto; quítalos
   o cámbialos si no los necesitas.
   ========================================================= */

.contact{
  width: 100%;
  background: var(--bg);   /* mismo color de fondo que "Estudio" */
  padding: 5vh 1.5rem 6vh;
}

.contact__inner{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.contact__intro{
  max-width: 560px;
  margin: 0 0 2rem;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
}

.contact__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}

.contact__field{
  display: flex;
  flex-direction: column;
}

.contact__field--full{
  grid-column: 1 / -1;
}

.contact__field label{
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.contact__field input,
.contact__field select,
.contact__field textarea{
  width: 100%;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--ink);

  background: #ffffff;   /* se distingue del fondo crema de la sección */
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 0.75em 0.9em;

  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.contact__field textarea{
  resize: vertical;
  min-height: 6.5rem;
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus{
  outline: none;
  border-color: var(--ink);
  background: #ffffff;
}

/* Flecha del <select> dibujada a mano: el estilo nativo del navegador
   no siempre respeta border-radius:0 ni el resto de la estética. */
.contact__field select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 10px 7px;
  padding-right: 2.2em;
}

.contact__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.contact__consent{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 480px;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.7);
}

.contact__consent input{
  margin-top: 0.2rem;
  accent-color: var(--ink);
  flex-shrink: 0;
}

.contact__submit{
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: #ffffff;

  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.85em 2.6em;

  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}

.contact__submit:hover,
.contact__submit:focus-visible{
  background: transparent;
  color: var(--ink);
}

.contact__note{
  margin: 1rem 0 0;

  font-family: "Garet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
}

@media (max-width: 767px){
  .contact{
    padding: 4vh 1.25rem 5vh;
  }

  .contact__intro{
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .contact__grid{
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .contact__footer{
    flex-direction: column;
    align-items: stretch;
  }

  .contact__submit{
    width: 100%;
    text-align: center;
  }
}