/* ═══════════════════════════════════════════
   HOME · «Nuestros proyectos» en carrusel
   Se ven 4 tarjetas en escritorio (las prioritarias) y el resto
   aparece al deslizar o con las flechas. En móvil, una tarjeta por vista.
   ═══════════════════════════════════════════ */

/* Nombre del proyecto enlazado, sin cambiar su aspecto */
.proyecto-name a { color: inherit; text-decoration: none; }
.proyecto-name a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Puntos de posición */
.proyectos-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.4rem;
  align-self: stretch;
  width: 100%;
  position: relative;
  z-index: 2;
}
.proyectos-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1.5px solid var(--carbonic-gray);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.proyectos-dots button.is-active {
  background: var(--carbonic-gray);
  transform: scale(1.25);
}
[data-theme="dark"] .proyectos-dots button { border-color: var(--radiactive-yellow); }
[data-theme="dark"] .proyectos-dots button.is-active { background: var(--radiactive-yellow); }

/* Escritorio: fila deslizable de 4 en 4 */
@media (min-width: 951px) {
  .proyectos-carousel-container {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }
  .proyectos-grid {
    display: flex;
    gap: 2rem;
    width: calc(4 * 18vw + 3 * 2rem);
    max-width: calc(100vw - 200px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* aire para que la tarjeta pueda subir al pasar el ratón sin cortarse */
    padding-top: 14px;
    margin-top: -14px;
    outline: none;
  }
  .proyectos-grid::-webkit-scrollbar { display: none; }
  .proyectos-grid .proyecto-card {
    flex: 0 0 18vw;
    scroll-snap-align: start;
  }
  .proyectos-grid .proyecto-image { width: 100%; }
  .carousel-nav.prev { left: -70px; }
  .carousel-nav.next { right: -70px; }
  .carousel-nav[disabled] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
}

/* Pantallas sin ratón: las etiquetas se ven siempre (no hay hover) */
@media (hover: none) {
  .proyecto-overlay {
    opacity: 1;
    transform: none;
  }
}

/* v2 · bucle infinito y animación propia: el scroll lo mueve el JS, no el navegador */
.proyectos-grid { scroll-behavior: auto !important; }
@media (min-width: 951px) {
  .proyectos-grid { cursor: grab; }
  .proyectos-grid.is-dragging { cursor: grabbing; user-select: none; }
  .proyectos-grid.is-dragging .proyecto-card { pointer-events: none; }
  .proyectos-grid img { -webkit-user-drag: none; user-select: none; }
}