/*
  Layout específico de cada sección de la página, en el mismo orden en que
  aparecen en index.html. La tipografía/color compartida entre secciones
  (eyebrow, título, contenedor) vive en el bloque "Scaffolding" acá abajo;
  lo que es exclusivo de una sección vive bajo su propio comentario.
*/

/* ============ Scaffolding compartido entre secciones ============ */
.section {
  position: relative;
  padding: var(--section-pad-y) var(--section-pad-x);
}
.section--flush-top { padding-top: 0; }
.section--overflow-hidden { overflow: hidden; }
.section--ivory { background: var(--color-ivory); color: var(--color-black); }
.section--dark { background: var(--color-black); color: var(--color-ivory); }
.section--brand { background: var(--color-purple); color: #fff; }

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.section__inner--narrow {
  max-width: var(--content-max-narrow);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .24em;
  font-weight: 600;
  display: inline-block;
}
.eyebrow--purple { color: var(--color-purple); }
.eyebrow--purple-light { color: var(--color-purple-light); }
.eyebrow--on-brand { color: rgba(255, 255, 255, .72); }

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 14px 0 0;
}
.section__lede {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.section__lede--lg {
  font-size: 17px;
}
.section__lede--on-ivory {
  color: var(--color-text-on-ivory);
}
.section__lede--on-dark {
  color: var(--color-gray);
}

/* ============ Intro (pantalla de bienvenida) ============ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity var(--duration-hero) ease;
}
.intro.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.intro__word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .34em;
  font-size: 16px;
  color: var(--color-ivory);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
}
.intro__word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-black);
  padding: 120px var(--section-pad-x) 80px;
  overflow: hidden;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-black);
}

/* Mosaico de 4 fotos a tamaño casi nativo (evita el desenfoque de estirar
   una sola foto a pantalla completa) con una deriva lenta tipo Ken Burns. */
.hero__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1.2fr 1fr;
  gap: 3px;
  background: var(--color-black);
}
.hero-tile {
  position: relative;
  overflow: hidden;
}
.hero-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation-name: heroDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hero-tile:nth-child(1) img { object-position: center 30%; animation-duration: 26s; }
.hero-tile:nth-child(2) img { object-position: center 22%; animation-duration: 30s; animation-delay: -6s; }
.hero-tile:nth-child(3) img { object-position: center 25%; animation-duration: 28s; animation-delay: -12s; }
.hero-tile:nth-child(4) img { object-position: center 32%; animation-duration: 32s; animation-delay: -3s; }

.hero__scrim-x {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 18, 22, .95) 0%, rgba(18, 18, 22, .86) 30%, rgba(18, 18, 22, .5) 58%, rgba(18, 18, 22, .22) 100%);
}
.hero__scrim-y {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 18, 22, .75) 0%, rgba(18, 18, 22, 0) 38%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.kinetic {
  height: 40px;
  margin-bottom: 26px;
  position: relative;
}
.kinetic__word {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .42em;
  font-size: 15px;
  color: var(--color-purple-light);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.kinetic__word.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.kinetic__word.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 7.4vw, 104px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-hero) ease, transform var(--duration-hero) ease;
}
.hero__subtext {
  margin: 28px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--color-gray);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-hero) ease .12s, transform var(--duration-hero) ease .12s;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-hero) ease .24s, transform var(--duration-hero) ease .24s;
}
.hero__headline.is-visible,
.hero__subtext.is-visible,
.hero__actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-gray);
}
.scroll-cue span {
  font-size: 11px;
  letter-spacing: .28em;
  font-family: var(--font-display);
}

/* ============ Experiencias ============ */
.exp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}
.exp-header .section__title {
  max-width: 14ch;
}
.exp-header__lede {
  max-width: 38ch;
  color: var(--color-text-on-ivory);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.exp-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exp-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: clamp(20px, 2.6vw, 34px) clamp(20px, 2.6vw, 40px);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(18, 18, 22, .07);
  cursor: default;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.exp-row:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-card-hover);
}
.exp-row__num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-purple-light);
}
.exp-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -.01em;
}
.exp-row__desc {
  margin: 10px 0 0;
  color: var(--color-text-on-ivory);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}
.exp-row__thumb {
  width: clamp(110px, 16vw, 220px);
  height: clamp(88px, 10vw, 132px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface-light);
  flex-shrink: 0;
}
.exp-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ "No necesitas experiencia" ============ */
.beginner__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.beginner .section__title {
  max-width: 15ch;
}
.beginner__text {
  margin: 24px 0 0;
  color: var(--color-gray);
  font-size: 17px;
  line-height: 1.65;
  max-width: 50ch;
}
.beginner__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.collage {
  position: relative;
  height: clamp(380px, 46vw, 560px);
}
.collage__item {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collage__item--a { top: 0; right: 0; width: 66%; height: 64%; }
.collage__item--b { bottom: 0; left: 0; width: 52%; height: 56%; border: 6px solid var(--color-black); }
.collage__item--c { bottom: 12%; right: 6%; width: 34%; height: 38%; border-radius: 16px; border: 6px solid var(--color-black); }
.collage__item--c img { object-position: center top; }

/* ============ Método ============ */
.method__head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.method__head .section__title {
  margin: 14px auto 0;
  max-width: 16ch;
}
.method__body {
  position: relative;
}
.method__line {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 0;
  pointer-events: none;
}
.pillars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pillar {
  background: rgba(18, 18, 22, .16);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.4vw, 34px);
  backdrop-filter: blur(2px);
}
.pillar__num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 22px;
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
}
.pillar__desc {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.55;
}

/* ============ Recorrido ============ */
.journey__intro {
  margin-bottom: 52px;
  max-width: 44ch;
}
.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.journey__card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: clamp(260px, 32vw, 420px);
  background: var(--color-surface-light);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.journey__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journey__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 18, 22, .82) 0%, rgba(18, 18, 22, .15) 55%, rgba(18, 18, 22, .05) 100%);
}
.journey__body {
  position: relative;
  padding: 20px;
  color: #fff;
}
.journey__step {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-purple-light);
  font-weight: 600;
}
.journey__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  margin: 8px 0 0;
}

/* ============ Trayectoria ============ */
.trajectory__intro {
  margin-bottom: 52px;
  max-width: 46ch;
}
.trajectory {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.trajectory__card {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-1);
  display: flex;
  flex-direction: column;
}
.trajectory__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-3);
  overflow: hidden;
}
.trajectory__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trajectory__body {
  padding: 20px 22px 24px;
}
.trajectory__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-strong);
}

/* ============ Galería ============ */
.gallery__intro {
  margin-bottom: 48px;
  max-width: 44ch;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;
}
.gallery__cell {
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) ease;
}
.gallery__cell:hover img,
.gallery__cell:focus-visible img {
  transform: scale(1.05);
}
.gallery__cell--tall { grid-row: span 2; }
.gallery__cell--wide { grid-column: span 2; }

/* ============ Comunidad ============ */
.community__intro {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 56px;
}
.community {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 16px;
}
.community__cell {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-light);
}
.community__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community__cell--tall { grid-row: span 2; }
.community__cell--wide { grid-column: span 2; }
.community__cell--wide img { object-position: center 30%; }
.community__cell--top img { object-position: center top; }

/* ============ Contacto ============ */
.contact__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  opacity: .5;
  pointer-events: none;
}
.contact__grid {
  max-width: var(--content-max-narrow);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact__title {
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1;
}
.contact__text {
  margin: 22px 0 0;
  color: var(--color-gray);
  font-size: 17px;
  line-height: 1.65;
  max-width: 42ch;
}
.contact__whatsapp {
  margin-top: 32px;
  padding: 15px 26px;
}
.contact__note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--color-gray-soft);
}

.contact__card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 40px);
}

.form-success { text-align: center; padding: 30px 10px; }
.form-success[hidden] { display: none; }
.form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-purple-light-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.form-success__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
}
.form-success__text {
  color: var(--color-gray);
  margin: 14px 0 26px;
  font-size: 15px;
  line-height: 1.55;
}

.contact-form[hidden] { display: none; }
.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.interest-group__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-gray);
  margin-bottom: 10px;
}
.interest-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.contact-form__note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-gray-soft);
}

/* ============ Footer ============ */
.site-footer__inner {
  max-width: var(--content-max-narrow);
  margin: clamp(60px, 7vw, 90px) auto 0;
  position: relative;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__tag {
  margin: 0;
  color: var(--color-gray-soft);
  font-size: 13px;
}