/* ==========================================================================
   Página Projects — hero negro con el título a todo el ancho, arranca
   justo donde termina la barra navegadora (que en esta página es oscura).
   ========================================================================== */

.projects-hero {
  background-color: var(--color-text);
  container-type: inline-size;
  padding: var(--nav-height) var(--container-padding) 0;
  min-height: 100svh;
  box-sizing: border-box;
  /* el título queda centrado en el eje vertical del bloque negro, no
     pegado arriba justo debajo de la navbar */
  display: flex;
  align-items: center;
  justify-content: center;
}

.projects-hero__title {
  /* ancho fijo al 100% del contenedor + texto centrado adentro: así,
     aunque el cálculo del font-size no sea 100% exacto, el texto queda
     repartido parejo a los dos lados en vez de pegado a la izquierda. */
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  /* cqw = relativo al ancho de la sección, no del viewport — así ocupa
     todo el ancho sin importar el tamaño de pantalla, igual que el
     watermark "contact us" del modal de contacto. Valor medido con el
     ancho real del texto renderizado (no a ojo). */
  font-size: 24.84cqw;
  line-height: 0.85;
  color: var(--color-bg);
  white-space: nowrap;
}

/* La "C" queda intacta: el asterisco vive adentro suyo, en su hueco,
   como una segunda capa pequeña sobre la misma letra. */
.projects-hero__c {
  position: relative;
  display: inline-block;
}

.projects-hero__asterisk {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  font-family: var(--font-asterisk);
  font-style: italic;
  /* chico a propósito: tiene que entrar en el hueco de la C, no taparla */
  font-size: 0.4em;
  color: var(--color-accent);
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s var(--ease-default);
  cursor: default;
}

.projects-hero__asterisk:hover {
  /* se "cae" 180° al tocarlo, vuelve solo al sacar el mouse */
  transform: translate(-50%, -50%) rotate(180deg);
}

/* ==========================================================================
   Fotos — dos imágenes a todo el ancho, pegadas, sin recorte de la barra
   navegadora (empiezan debajo del hero negro)
   ========================================================================== */

.projects-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.projects-photos__item {
  aspect-ratio: 1485 / 1856;
  overflow: hidden;
}

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

/* ==========================================================================
   Índice de proyectos — bloques a todo el ancho sobre fondo base, cada uno
   con marca (bold) + servicio a la izquierda y lo que hizo musa a la
   derecha. Al pasar el cursor se pinta del color clave, igual que el
   índice de Home.
   ========================================================================== */

.projects-index {
  background-color: var(--color-bg);
  list-style: none;
}

.projects-index__row {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 32px var(--container-padding);
  border-bottom: 1px solid rgba(var(--color-text-rgb), 0.15);
  transition: background-color 0.25s var(--ease-default);
  /* algunas filas ya son <a> (proyectos con página propia), otras
     todavía son <div> hasta que subamos su contenido */
  color: inherit;
  text-decoration: none;
}

.projects-index > li:first-child .projects-index__row {
  border-top: 1px solid rgba(var(--color-text-rgb), 0.15);
}

.projects-index__row:hover,
.projects-index__row:focus-visible {
  background-color: var(--color-accent);
  outline: none;
}

.projects-index__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.projects-index__brand {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

.projects-index__service {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.7;
}

.projects-index__desc {
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

/* ==========================================================================
   Flyers & Posters — panel estilo archivo (caja acento con texto) + carrusel
   vertical de piezas sueltas en 4:5, sobre fondo base.
   ========================================================================== */

.flyers {
  background-color: var(--color-bg);
  padding: 100px var(--container-padding);
}

.flyers__grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  align-items: stretch;
  /* sin gap a propósito: el panel y el póster se leen como un solo bloque */
  gap: 0;
  max-width: 820px;
  margin-inline: auto;
}

.flyers__panel {
  background-color: var(--color-accent);
  border: 1px solid var(--color-border-muted);
  border-right: none;
  border-radius: 24px 0 0 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.flyers__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.6;
}

.flyers__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  color: var(--color-text);
}

.flyers__text {
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.75;
}

/* ---- Navegación (vive en el panel, no encima de los pósters) ---- */

.flyers__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.flyers__nav-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s var(--ease-default), color 0.2s var(--ease-default);
}

.flyers__nav-btn:hover {
  background-color: var(--color-text);
  color: var(--color-accent);
}

/* ---- Carrusel vertical ---- */

.flyers-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
  background-color: var(--color-text);
}

.flyers-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.flyers-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-default), visibility 0s linear 0.9s;
}

.flyers-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-default);
}

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

.flyers-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.flyers-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(var(--color-bg-rgb), 0.4);
  transition: background-color 0.2s var(--ease-default), transform 0.2s var(--ease-default);
}

.flyers-carousel__dot.is-active {
  background-color: var(--color-accent);
  transform: scale(1.3);
}

/* ==========================================================================
   Cierre — franja negra final con la firma del estudio
   ========================================================================== */

.projects-closing {
  background-color: var(--color-text);
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--container-padding);
}

.projects-closing__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.55;
  margin-bottom: 36px;
}

.projects-closing__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.85;
  margin-bottom: 28px;
}

.projects-closing__text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.6;
  margin-bottom: 48px;
}

.projects-closing__tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.45;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .flyers {
    padding: 64px var(--container-padding-mobile);
  }

  .flyers__grid {
    grid-template-columns: 1fr;
    /* apiladas: vuelven a ser dos cajas separadas, cada una con sus 4 esquinas */
    gap: 24px;
  }

  .flyers__panel {
    padding: 32px;
    border-right: 1px solid var(--color-border-muted);
    border-radius: 24px;
  }

  .flyers-carousel {
    max-width: 340px;
    margin-inline: auto;
    border-radius: 24px;
  }

  .projects-closing {
    padding: 90px var(--container-padding-mobile);
  }

  .projects-hero {
    padding: var(--nav-height-mobile) var(--container-padding-mobile) 0;
    min-height: 100svh;
  }

  .projects-photos {
    grid-template-columns: 1fr;
  }

  .projects-index__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px var(--container-padding-mobile);
  }
}