/* =========================================================
   Jardines Perpetuos — Nosotros (/nosotros/)

   Se carga DESPUÉS de styles.css: hereda tokens, tipografías, botones,
   header, footer y utilidades. Todo con prefijo .no-.

   Ritmo de la página:
     PORTADA    morado, tipográfica (todavía sin fotografía del equipo)
     EQUIPO     marfil, los cuatro rasgos
     DUELO      blanco, texto y cita
     CATRI      marfil, los videos
     MISIÓN     blanco, dos columnas enfrentadas
     FESTIVAL   morado, la tira de fotografías
   ========================================================= */

.no-body {
  --no-marfil: #FBF7F2;
  --no-linea: rgba(75, 36, 100, .14);
  --no-linea-clara: rgba(255, 210, 122, .3);
}

/* Antetítulo y título comunes a los bloques claros */
.no-ante {
  font: 700 12px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--jp-marigold-deep);
}
.no-titulo {
  margin-top: 14px;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(34px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--jp-purple);
}

/* =========================================================
   PORTADA
   ========================================================= */
.no-portada {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(50% 72% at 88% 12%, rgba(120, 60, 170, .42) 0%, rgba(120, 60, 170, 0) 70%),
    linear-gradient(150deg, #2E0F42 0%, var(--jp-purple) 56%, #34124A 100%);
  padding: clamp(52px, 6.4vw, 104px) 0 clamp(52px, 6vw, 96px);
}
.no-portada__inner {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 36px;
}
.no-portada__copy { max-width: 56ch; }
.no-portada__ante {
  font: 700 12px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.no-portada__titulo {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(42px, 5.4vw, 84px); line-height: 1; letter-spacing: -.018em;
  color: var(--jp-cream);
}
.no-portada__texto {
  margin-top: clamp(16px, 1.8vw, 26px); max-width: 52ch;
  font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.62; color: rgba(255, 255, 255, .88);
}
.no-portada__frase {
  flex: none; max-width: 14ch; text-align: right; padding-bottom: .4em;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2vw, 30px); line-height: 1.28; color: var(--jp-gold);
}

/* La fotografía del equipo, difuminada de fondo. Capas hacia arriba:
   foto (0) · velo (1) · texto (2). El velo es morado y más denso a la
   izquierda, que es donde cae el titular. */
.no-portada__fondo, .no-portada__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-portada__fondo { z-index: 0; opacity: 1; }
.no-portada__fondo img { object-fit: cover; object-position: 50% 48%; }
.no-portada::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* velo propio bajo la frase dorada, que cae donde el grupo se ve casi limpio */
    radial-gradient(40% 58% at 88% 64%, rgba(34, 10, 50, .82) 0%, rgba(34, 10, 50, 0) 74%),
    linear-gradient(90deg, rgba(34, 10, 50, .93) 0%, rgba(34, 10, 50, .86) 34%, rgba(34, 10, 50, .5) 62%, rgba(34, 10, 50, .3) 100%),
    linear-gradient(0deg, rgba(34, 10, 50, .35) 0%, rgba(34, 10, 50, 0) 55%);
}

/* =========================================================
   EL EQUIPO EN CIFRAS
   ========================================================= */
.no-equipo { background: var(--no-marfil); border-bottom: 1px solid var(--no-linea); }
/* La grupal, a sangre y sin nada encima: aquí se mira a la gente. */
.no-equipo__foto { margin: 0; }
.no-equipo__foto picture { display: block; }
.no-equipo__foto img { width: 100%; height: auto; }
.no-equipo__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.no-equipo__grid li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(26px, 3vw, 42px) clamp(12px, 1.6vw, 24px);
}
.no-equipo__grid li + li::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--no-linea);
}
.no-equipo__marca {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--jp-purple-light); color: var(--jp-purple);
}
.no-equipo__marca .icon { font-size: 26px; stroke-width: 1.3; }
.no-equipo__dato {
  margin-top: 16px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(22px, 2.1vw, 31px); line-height: 1.05; color: var(--jp-purple);
}
.no-equipo__texto { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--jp-muted); }

/* =========================================================
   ACOMPAÑAMIENTO EN DUELO
   ========================================================= */
.no-duelo { background: var(--jp-white); padding: clamp(46px, 5.4vw, 88px) 0 clamp(48px, 5.6vw, 90px); }
.no-duelo__inner {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 64px); align-items: start;
}
/* El retrato va a la izquierda aunque en el HTML venga después: así en móvil,
   con una sola columna, se lee primero el titular y luego la fotografía. */
.no-duelo__retrato { grid-column: 1; grid-row: 1; margin: 0; max-width: 400px; }
.no-duelo__foto { display: block; }
.no-duelo__foto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
}
.no-duelo__cuerpo {
  grid-column: 2; grid-row: 1;
  display: grid; gap: clamp(24px, 2.8vw, 40px); align-content: start;
}
/* Con sitio de sobra, la cita vuelve al costado del texto: si se queda debajo,
   la mitad derecha del bloque se queda vacía. */
@media (min-width: 1100px) {
  .no-duelo__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    align-items: start; gap: clamp(30px, 3vw, 52px);
  }
}
.no-duelo__lead {
  margin-top: clamp(16px, 1.8vw, 24px); max-width: 50ch;
  font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.65; color: var(--jp-muted);
}
.no-duelo__cita {
  margin: 0; padding-left: clamp(20px, 2vw, 30px);
  border-left: 2px solid var(--jp-marigold);
}
.no-duelo__cita p {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; color: var(--jp-purple-deep);
}
.no-duelo__cita footer {
  margin-top: 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--jp-muted);
}

/* =========================================================
   CATRI INFORMA
   ========================================================= */
.no-catri {
  background: var(--no-marfil); border-top: 1px solid var(--no-linea);
  padding: clamp(46px, 5.4vw, 88px) 0 clamp(48px, 5.6vw, 90px);
}
.no-catri__inner {
  display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 56px); align-items: start;
}
.no-catri__lead {
  margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--jp-muted);
}
.no-catri__inner .link-caps { margin-top: 18px; }

/* =========================================================
   VIDEOS — portada propia, reproductor sólo al pulsar
   ========================================================= */
.no-videos { display: grid; gap: clamp(14px, 1.8vw, 26px); }
.no-videos--uno { grid-template-columns: minmax(0, min(520px, 100%)); }
.no-videos--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.no-videos--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.no-videos--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.no-duelo .no-videos { margin-top: clamp(30px, 3.4vw, 50px); }

.no-video__enlace { display: block; text-decoration: none; color: inherit; }
.no-video__lienzo,
.no-video__marco {
  display: grid; place-items: center; position: relative;
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius); overflow: hidden;
}
.no-video__lienzo {
  background:
    radial-gradient(60% 80% at 50% 20%, rgba(120, 60, 170, .5) 0%, rgba(120, 60, 170, 0) 70%),
    linear-gradient(150deg, #34124A 0%, var(--jp-purple) 60%, #2E0F42 100%);
  box-shadow: 0 18px 34px -26px rgba(42, 15, 59, .8);
}
.no-video__play {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.no-video__play .icon { font-size: 22px; margin-left: 3px; }
.no-video__enlace:hover .no-video__play { background: var(--jp-marigold); color: var(--jp-purple-deep); transform: scale(1.06); }
.no-video__dur {
  position: absolute; right: 10px; bottom: 10px;
  padding: 4px 8px; border-radius: 5px;
  background: rgba(20, 8, 28, .8); color: #fff;
  font: 600 12px/1 var(--font-sans); letter-spacing: .02em;
}
.no-video__titulo {
  display: block; margin-top: 12px;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--jp-text);
}
.no-video__enlace:hover .no-video__titulo { color: var(--jp-purple); }

/* Mientras no haya enlaces de video */
.no-pronto {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(26px, 3vw, 44px);
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px dashed var(--no-linea); border-radius: var(--radius);
  background: rgba(255, 255, 255, .6);
  font-size: 15px; line-height: 1.5; color: var(--jp-muted);
}
.no-pronto__marca {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--jp-purple-light); color: var(--jp-purple);
}
.no-pronto__marca .icon { font-size: 19px; margin-left: 2px; }

/* =========================================================
   MISIÓN Y VISIÓN
   ========================================================= */
.no-mv {
  background: var(--jp-white);
  padding: clamp(48px, 5.6vw, 92px) 0 clamp(50px, 5.8vw, 94px);
}
.no-mv__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 72px);
}
.no-mv__col { position: relative; text-align: center; }
.no-mv__col + .no-mv__col::before {
  content: ""; position: absolute; left: calc(clamp(30px, 4vw, 72px) / -2); top: 6px; bottom: 6px;
  width: 1px; background: var(--no-linea);
}
.no-mv__titulo {
  font: 700 13px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--jp-purple);
}
/* Filete con rombo, como en el boceto */
.no-mv__titulo::after {
  content: ""; display: block; width: 88px; height: 7px; margin: 18px auto 0;
  background:
    linear-gradient(90deg, transparent, var(--jp-marigold) 18%, var(--jp-marigold) 82%, transparent) center / 100% 1px no-repeat,
    linear-gradient(45deg, transparent 42%, var(--jp-marigold) 42%, var(--jp-marigold) 58%, transparent 58%) center / 7px 7px no-repeat;
}
.no-mv__texto {
  margin-top: 22px; max-width: 46ch; margin-inline: auto;
  font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.7; color: var(--jp-text);
}

/* =========================================================
   FESTIVAL
   ========================================================= */
.no-festival {
  color: #fff;
  background:
    radial-gradient(46% 66% at 8% 90%, rgba(196, 58, 128, .38) 0%, rgba(196, 58, 128, 0) 66%),
    linear-gradient(120deg, #2E0F42 0%, #4B2464 55%, #34124A 100%);
  padding: clamp(46px, 5.4vw, 88px) 0 clamp(48px, 5.6vw, 90px);
}
.no-festival__inner {
  display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 56px); align-items: center;
}
.no-festival .no-ante { color: var(--jp-gold); }
.no-festival .no-titulo { color: var(--jp-cream); }
.no-festival__lead {
  margin-top: 14px; margin-bottom: clamp(20px, 2.2vw, 30px);
  font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.no-festival__tira {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.no-festival__tira figure { margin: 0; }
.no-festival__img { overflow: hidden; border-radius: var(--radius); background: rgba(255, 255, 255, .08); }
.no-festival__img picture { display: block; }
.no-festival__img img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .9s var(--ease);
}
.no-festival__tira li:hover .no-festival__img img { transform: scale(1.04); }
.no-festival__tira figcaption {
  margin-top: 10px;
  font: 600 11px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* =========================================================
   APARICIÓN SUAVE — retardos de esta página
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .no-equipo__grid [data-reveal]:nth-child(2),
  .js .no-videos [data-reveal]:nth-child(2),
  .js .no-festival__tira [data-reveal]:nth-child(2) { transition-delay: .07s; }
  .js .no-equipo__grid [data-reveal]:nth-child(3),
  .js .no-videos [data-reveal]:nth-child(3),
  .js .no-festival__tira [data-reveal]:nth-child(3) { transition-delay: .14s; }
  .js .no-equipo__grid [data-reveal]:nth-child(4),
  .js .no-videos [data-reveal]:nth-child(4),
  .js .no-festival__tira [data-reveal]:nth-child(4) { transition-delay: .21s; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width: 1023px) {
  .no-duelo__inner,
  .no-catri__inner,
  .no-festival__inner { grid-template-columns: 1fr; }
  .no-duelo__retrato, .no-duelo__cuerpo { grid-column: 1; grid-row: auto; }
  .no-duelo__retrato { max-width: none; }
  .no-catri__inner, .no-festival__inner { gap: clamp(22px, 3vw, 34px); }
  .no-equipo__grid { grid-template-columns: repeat(2, 1fr); }
  .no-equipo__grid li:nth-child(odd)::before { display: none; }
  .no-equipo__grid li:nth-child(n+3) { border-top: 1px solid var(--no-linea); }
}

/* =========================================================
   MÓVIL — una columna; los videos se apilan a ancho completo
   ========================================================= */
@media (max-width: 767px) {
  .no-portada { padding: 38px 0 40px; }
  /* En vertical el titular ocupa casi todo: el velo sube para sostenerlo. */
  .no-portada::after {
    background:
      /* banda propia bajo la frase dorada, que cae a un ~18 % del borde inferior */
      linear-gradient(0deg, rgba(34, 10, 50, 0) 8%, rgba(34, 10, 50, .42) 15%,
                            rgba(34, 10, 50, .42) 27%, rgba(34, 10, 50, 0) 34%),
      linear-gradient(0deg, rgba(34, 10, 50, .5) 0%, rgba(34, 10, 50, .74) 45%, rgba(34, 10, 50, .8) 100%);
  }
  .no-portada__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .no-portada__copy { max-width: none; }
  .no-portada__titulo { font-size: clamp(36px, 11vw, 50px); }
  .no-portada__texto { font-size: 15.5px; }
  .no-portada__frase { max-width: none; text-align: left; padding-bottom: 0; font-size: 20px; }

  .no-equipo__grid li { padding: 22px 10px; }
  .no-equipo__marca { width: 48px; height: 48px; }
  .no-equipo__marca .icon { font-size: 22px; }
  .no-equipo__dato { font-size: 21px; margin-top: 12px; }
  .no-equipo__texto { font-size: 13.5px; }

  .no-duelo { padding: 38px 0 40px; }
  .no-titulo { font-size: clamp(30px, 9.5vw, 42px); }
  .no-duelo__inner { gap: 26px; }
  .no-duelo__cita { padding-left: 18px; }
  .no-duelo__cita p { font-size: 20px; }

  .no-catri { padding: 38px 0 40px; }
  .no-videos--duo, .no-videos--trio, .no-videos--cuatro { grid-template-columns: 1fr; gap: 18px; }
  .no-video__titulo { font-size: 15.5px; }

  .no-mv { padding: 38px 0 42px; }
  .no-mv__inner { grid-template-columns: 1fr; gap: 32px; }
  .no-mv__col + .no-mv__col::before {
    left: 0; right: 0; top: -16px; bottom: auto; width: auto; height: 1px;
  }
  .no-mv__texto { font-size: 15.5px; max-width: none; }

  .no-festival { padding: 38px 0 42px; }
  .no-festival__tira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .no-festival .btn { width: 100%; justify-content: center; }
}