/* ---------- Filosofía: frase de marca + image trail ---------- */
.filosofia {
  position: relative;
  overflow: hidden;
  padding-block: clamp(7rem, 18vh, 12rem);
}

.filosofia__inner {
  position: relative;
  z-index: 2;
  width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-lg);
  align-items: end;
  pointer-events: none;
}

/* cajas con borde neón blanco (mismo efecto que la franja de confianza) */
.filosofia__quote-wrap,
.filosofia__texto {
  padding: var(--space-md) var(--space-lg);
  border-radius: 16px;
  border: 1px solid var(--white);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--white) 90%, transparent),
    0 0 22px color-mix(in srgb, var(--white) 55%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--white) 65%, transparent);
}

.filosofia__quote {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  line-height: 1.15;
  max-width: 18ch;
}

.filosofia__cuerpo {
  max-width: 38ch;
  color: color-mix(in srgb, currentColor 75%, transparent);
}

.filosofia__firma {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--text-body);
  color: var(--brown-300);
}

/* pool de imágenes del trail (oculto) */
.trail-pool {
  display: none;
}

.trail-img {
  position: absolute;
  width: 240px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.trail-img.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.trail-img.saliendo {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

@media (max-width: 768px) {
  .filosofia__inner {
    grid-template-columns: 1fr;
  }
  .filosofia__quote {
    padding-left: 0;
  }
}