/* ==========================================================================
   Sección "Nuestra filosofía": frase que se revela + carrusel de imágenes
   ========================================================================== */

.philosophy {
  padding: clamp(var(--space-7), 8vw, 6rem) 0 clamp(var(--space-7), 8vw, 6rem);
  background: var(--color-canvas);
  overflow: hidden;
}

.philosophy__intro {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: 56rem;
  text-align: center;
}

/* Frase editorial. Palabras: gris legible (4.7:1) -> tinta al avanzar el scroll */
.statement {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--color-ink);
}
.statement .word {
  color: #647176;
  transition: color var(--dur-base) var(--ease-out);
}
.statement .word.is-read {
  color: var(--color-ink);
}

/* ---------- Carrusel ---------- */
.gallery {
  --card-w: clamp(11.5rem, 28vw, 20rem);
  position: relative;
  margin-top: calc(var(--space-5) * -1);
}

.gallery__stage { position: relative; }

.gallery__track {
  display: flex;
  align-items: center;
  gap: calc(var(--card-w) * -0.1);   /* compensa el hueco que deja el escalado */
  margin: 0;
  /* Permite centrar la primera y la última tarjeta */
  padding: var(--space-7) calc(50% - var(--card-w) / 2) 4.5rem;   /* aire vertical: que la sombra no se recorte */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  touch-action: pan-x pan-y;
  /* Bordes que se funden con el fondo, como en la referencia */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.gallery__item {
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
  /* --scale, --rot y --opacity los calcula el JS según la distancia al centro */
  transform: perspective(70rem) rotateY(calc(var(--rot, 0) * 1deg)) scale(var(--scale, 1));
  opacity: var(--opacity, 1);
  transition: transform var(--dur-fast) linear, opacity var(--dur-base) var(--ease-out);
  will-change: transform, opacity;
  cursor: pointer;                                  /* las vecinas se pueden pulsar */
}
.gallery__item.is-active { cursor: grab; }
.gallery__track.is-dragging .gallery__item { cursor: grabbing; }
/* Al pasar el ratón, la vecina se avisa (sin competir con la central) */
.gallery__track:not(.is-dragging) .gallery__item:not(.is-active):hover { opacity: 0.8; }

.gallery__figure {
  margin: 0;
  aspect-ratio: 4 / 5;                          /* reserva espacio: sin saltos de layout */
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border-warm);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out) var(--delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--delay, 0ms);
}
/* Entrada: las fotos suben y aparecen en cascada desde el centro (solo si hay JS) */
.gallery.is-ready:not(.is-in) .gallery__figure {
  opacity: 0;
  transform: translateY(2rem) scale(0.94);
}
/* La imagen activa se despega del fondo; las demás quedan planas y en segundo plano */
.gallery__item.is-active .gallery__figure {
  box-shadow: 0 1.5rem 3rem -1rem rgb(53 97 78 / 0.38), 0 0.5rem 1.25rem -0.5rem rgb(44 53 57 / 0.14);
}
.gallery__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Parallax: la foto es un 14% mayor que el marco y se desliza dentro de él */
  transform: scale(1.14) translateX(calc(var(--shift, 0) * 1%));
  -webkit-user-drag: none;        /* evita que el navegador arrastre la imagen como archivo */
  user-select: none;
  pointer-events: none;
}

/* Flechas anterior / siguiente */
.gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0.0625rem solid var(--color-border-warm);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-50%);
  touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.gallery__btn:hover:not(:disabled) { background: #f5efeb; }
.gallery__btn:disabled { opacity: 0.38; cursor: default; }
.gallery__btn svg { width: 1.25rem; height: 1.25rem; }
.gallery__btn--prev { left: var(--gutter); }
.gallery__btn--next { right: var(--gutter); }

/* Título de la imagen activa */
.gallery__caption {
  margin: -3.5rem 0 0;
  min-height: 1.75em;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-ink-soft);
}
.gallery__caption.is-swapping { animation: caption-in var(--dur-base) var(--ease-out); }
@keyframes caption-in {
  from { opacity: 0; transform: translateY(0.375rem); }
  to   { opacity: 1; transform: none; }
}

/* Puntos de paginación: objetivo de 2rem (>= 24px, WCAG 2.2); el punto visible es menor */
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-2);
}
.gallery__dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.gallery__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: #6f9382;                    /* >= 3:1 sobre el lino (no depende solo del color: la activa se alarga) */
  opacity: 0.55;
  transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.gallery__dot:hover::before { opacity: 0.9; }
.gallery__dot[aria-current="true"]::before {
  width: 1.5rem;
  background: var(--color-primary-strong);
  opacity: 1;
}

.philosophy__cta {
  display: flex;
  justify-content: center;
  margin-top: 0;
  padding-inline: var(--gutter);
}

@media (max-width: 48rem) {
  .gallery__track { gap: calc(var(--card-w) * -0.06); }
  .gallery__btn--prev { left: var(--space-2); }
  .gallery__btn--next { right: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item,
  .gallery__figure,
  .gallery__dot::before,
  .statement .word { transition: none; }
  .gallery__caption.is-swapping { animation: none; }
}