/* Conócenos — página 2 */
.cz-page { background: var(--forest); }

/* escenario fijo: equipo → flores → texto → jornadas */
.cz-intro { position: relative; }
.cz-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pink); }
.cz-layer { position: absolute; inset: 0; overflow: hidden; }
.cz-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cz-equipo { background: var(--pink); }
.cz-texto { background: var(--forest); display: grid; place-items: center; visibility: hidden; }
.cz-flores { pointer-events: none; }
.cz-flores .cz-fl { visibility: hidden; }
.cz-fl > img, .cz-fl2 > img { width: 100%; height: 100%; }
.cz-fl2 { will-change: transform; }

.cz-photo { margin: 0; overflow: hidden; border-radius: 0; }
.cz-photo > img { position: absolute; left: 0; top: 0; translate: none; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cz-photo:hover > img { transform: scale(1.04); }
.cz-team { border-radius: 68px; }
.cz-kid { cursor: pointer; transform-origin: 50% 100%; }

.cz-title {
  position: absolute; left: 498px; top: 1612px; width: 2255px; margin: 0; text-align: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 180px; letter-spacing: 18px; line-height: normal;
  text-transform: uppercase; color: var(--cream);
}
.cz-texto-p {
  margin: 0; width: min(62vw, 980px); text-align: center;
  font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: clamp(16px, calc(50 * var(--u)), 28px); letter-spacing: .1em; line-height: 1.5;
  color: var(--cream);
}

/* tiras horizontales */
.cz-strip-wrap { background: var(--forest); visibility: hidden; }
.cz-strip { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cz-strip-copy { position: absolute; color: var(--cream); font-family: 'Montserrat', sans-serif; }
.cz-strip-copy h2 { margin: 0 0 54px; font-weight: 700; font-size: 57.1px; letter-spacing: 5.7px; text-transform: uppercase; }
.cz-strip-copy p { margin: 0; font-weight: 600; font-size: 48px; letter-spacing: 4.8px; line-height: normal; }
.cz-right { text-align: right; }

.cz-gallery { position: relative; background: var(--plum); }
.cz-gallery-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--plum); }

/* formación */
.cz-formacion {
  position: relative; overflow: hidden; background: var(--pink);
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(110 * var(--u)); align-items: start;
  padding: calc(330 * var(--u)) calc(260 * var(--u)) calc(330 * var(--u)) calc(103 * var(--u));
  min-height: 100svh;
}
.cz-form-text { position: relative; z-index: 1; color: var(--cream); }
.cz-form-title { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: calc(170 * var(--u)); letter-spacing: calc(17 * var(--u)); text-transform: uppercase; line-height: 1.1; }
.cz-form-lead { margin: calc(30 * var(--u)) 0 calc(80 * var(--u)); font-size: calc(51.8 * var(--u)); line-height: 1.36; max-width: calc(1142 * var(--u)); }
.cz-quote { margin: 0 0 calc(80 * var(--u)); max-width: calc(1055 * var(--u)); }
.cz-quote blockquote {
  margin: 0; padding: calc(44 * var(--u)) calc(56 * var(--u)); border-radius: calc(36 * var(--u));
  background: var(--cream); color: var(--forest); font-size: calc(42 * var(--u)); line-height: 1.4; font-style: italic;
}
.cz-quote figcaption { margin-top: calc(18 * var(--u)); text-align: right; font-size: calc(51.8 * var(--u)); }
.cz-form-photo { position: relative; z-index: 1; aspect-ratio: 1185 / 1206; width: 100%; }
.cz-blob { position: absolute; pointer-events: none; }
.cz-blob-plum { right: calc(-140 * var(--u)); top: calc(260 * var(--u)); width: calc(553 * var(--u)); rotate: -10.84deg; }
.cz-blob-rust { left: calc(1050 * var(--u)); bottom: calc(-260 * var(--u)); width: calc(1195 * var(--u)); rotate: 22.42deg; }

.animate--pink, .animate--pink.animate { background: var(--pink); }

@media (max-width: 760px) {
  .cz-texto-p { width: 86vw; font-size: 16px; letter-spacing: .05em; }
  /* en celular el texto de las tiras cabe en una pantalla: más angosto y algo más arriba */
  .cz-strip-copy { width: 680px !important; top: 1290px !important; }
  .cz-strip-copy.cz-right { right: 110px !important; }
  .cz-strip-copy:not(.cz-right) { left: 110px !important; }
  .cz-strip-copy h2 { font-size: 50px; letter-spacing: 3px; margin-bottom: 26px; line-height: 1.15; }
  .cz-strip-copy p { font-size: 32px; letter-spacing: .5px; line-height: 1.4; }
  .cz-formacion { grid-template-columns: 1fr; padding: 90px 7vw 120px; gap: 32px; }
  .cz-form-title { font-size: 12vw; letter-spacing: .08em; }
  .cz-form-lead { font-size: 4.4vw; margin: 3vw 0 7vw; }
  .cz-quote blockquote { font-size: 4vw; padding: 5vw 6vw; border-radius: 5vw; }
  .cz-quote figcaption { font-size: 4.2vw; }
  .cz-blob-rust { left: 30vw; width: 90vw; }
  .cz-blob-plum { width: 40vw; }
}