/* ==========================================================================
   about.css — Sobre nosotros (#nosotros)               prefijo: .about-
   1. franja de plataformas  2. quiénes somos  3. lo que hacemos
   ========================================================================== */

.about {
  position: relative;
  padding-bottom: var(--section-y);
  overflow-x: clip;                 /* los brillos decorativos no generan scroll lateral */
}

/* brillos de fondo: dan continuidad con el banner sin repetir su panel */
.about::before,
.about::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.about::before {
  width: 42rem; height: 42rem;
  top: 18%; left: -18rem;
  background: radial-gradient(circle, rgba(193, 44, 229, .16), transparent 65%);
}
.about::after {
  width: 36rem; height: 36rem;
  bottom: 4%; right: -14rem;
  background: radial-gradient(circle, rgba(79, 124, 255, .12), transparent 65%);
}

/* ---------------------------------------------------------------------
   1. Franja de plataformas (marquesina infinita)
   --------------------------------------------------------------------- */
.about-marquee {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.about-marquee__label {
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.about-marquee__viewport {
  overflow: hidden;
  /* bordes que se desvanecen: la franja parece no tener fin */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.about-marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee var(--marquee-dur, 40s) linear infinite;
}
/* se frena al pasar el mouse, para poder leer */
.about-marquee__viewport:hover .about-marquee__track { animation-play-state: paused; }
/* main.js la pausa también cuando está fuera de pantalla */
.about-marquee.is-paused .about-marquee__track { animation-play-state: paused; }

.about-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  /* padding en vez de gap: así la mitad del recorrido cae justo en la copia y el loop no salta */
  padding-right: clamp(2.25rem, 1.5rem + 2vw, 3.75rem);
  color: var(--text-2);
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.about-marquee__item:hover { color: var(--text); }
.about-marquee__item svg {
  width: 1.6em; height: 1.6em;
  fill: currentColor;
  color: var(--platform-ic);
  flex-shrink: 0;
}
.about-marquee__item--more {
  color: var(--text-3);
  font-weight: 600;
}
.about-marquee__item--more strong {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   2. Quiénes somos
   --------------------------------------------------------------------- */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 2rem + 4vw, 7rem);
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}

.about-text {
  margin-top: 1rem;
  color: var(--text-2);
  line-height: 1.7;
}

.about-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.about-points li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
}
.about-points__ic {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(193, 44, 229, .16);
  border: 1px solid rgba(193, 44, 229, .35);
  color: var(--brand-hi);
}
.about-points__ic svg { width: .8rem; height: .8rem; }

.about-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.5rem;
}

/* ---------- columna de imagen con tarjeta encastrada ---------- */
/* La tarjeta se asienta en la esquina inferior derecha de la foto y la foto
   "se recorta" alrededor, con un aire (--cut-gap) y curvas invertidas en las
   dos uniones. El recorte se pinta con el color de fondo de la página, así que
   detrás de la foto no tiene que haber brillos (el brillo va debajo de la tarjeta). */
.about-media {
  --cut-gap: .75rem;                 /* aire entre la foto y la tarjeta */
  --cut-r:   var(--r-lg);            /* radio de las curvas invertidas */
  position: relative;
  width: 100%;
  max-width: 38rem;
  justify-self: center;
}
.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
}

.about-cta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 62%;
}
/* el recorte lo dibuja .notch-cut (base.css), configurado con las variables de .about-media */

.about-cta__card {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem) clamp(1.3rem, .9rem + 1.2vw, 1.9rem);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, var(--surface-3), var(--surface)) padding-box,
    linear-gradient(200deg, var(--line-strong), rgba(193, 44, 229, .75)) border-box;
  box-shadow: 0 18px 50px -14px rgba(193, 44, 229, .55);
}
.about-cta__title {
  font-weight: 700;
  font-size: clamp(1.2rem, .95rem + .9vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
}
.about-cta__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
  color: var(--brand-hi);
  font-weight: 700;
  font-size: var(--fs-base);
}
.about-cta__arrow {
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  transition: transform var(--t-med) var(--ease-out);
}
.about-cta__arrow svg { width: .8rem; height: .8rem; }
.about-cta__link:hover .about-cta__arrow { transform: translateX(4px); }
.about-cta__link:hover { color: var(--text); }


/* ---------------------------------------------------------------------
   3. Lo que hacemos por tu música
   --------------------------------------------------------------------- */
.about-pillars-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(5rem, 3rem + 6vw, 9rem);
}
.about-pillars-head h3 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  letter-spacing: -0.035em;
}
.about-pillars-head p {
  max-width: 28rem;
  color: var(--text-2);
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.about-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.75rem 1.6rem 1.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.about-card:hover {
  border-color: rgba(193, 44, 229, .4);
  transform: translateY(-4px);
}
.about-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.about-card__ic {
  width: 3.25rem; height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
    var(--grad-brand) border-box;
  color: var(--brand-hi);
  box-shadow: 0 10px 30px -10px rgba(193, 44, 229, .55);
}
.about-card__ic svg { width: 1.5rem; height: 1.5rem; }
.about-card__num {
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.about-card h4 {
  margin-top: 1.75rem;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}
.about-card p {
  margin-top: .65rem;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* dos columnas angostas (961–1200 px): la tarjeta se ensancha para ocupar menos alto */
@media (min-width: 961px) and (max-width: 1200px) {
  .about-cta { width: 76%; }
}

@media (max-width: 960px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-media { max-width: 30rem; margin-top: 1rem; }
  .about-pillars-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 640px) {
  .about-points { grid-template-columns: minmax(0, 1fr); }
  .about-ctas { flex-direction: column; }
  .about-ctas .btn { width: 100%; }
  .about-media { max-width: 22rem; --cut-gap: .55rem; --cut-r: 1.1rem; }
  .about-cta { width: 80%; }
  .about-cta__title { font-size: 1.05rem; }
  .about-cta__link { font-size: var(--fs-sm); margin-top: .8rem; }
  .about-pillars { grid-template-columns: minmax(0, 1fr); }
  .about-card h4 { margin-top: 1.25rem; }
}

@media (max-width: 360px) {
  .about-cta { width: 84%; }
  .about-cta__title { font-size: .95rem; }
}

/* sin movimiento: la franja se vuelve una grilla estática y centrada */
@media (prefers-reduced-motion: reduce) {
  .about-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .about-marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1rem;
    animation: none;
  }
  .about-marquee__item[data-clone] { display: none; }
}