/* =========================================================
   Glamorée by Pecky Land — estilos
   Desktop/tablet (>= 900px): cada sección es un "escenario" 1366×768
   (mismo lienzo que el diseño original) escalado con unidades cqw.
   Mobile (< 900px): layouts reorganizados en flujo vertical.
   ========================================================= */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --gold: #ffbd59;
  --gold-light: #ffde59;
  --cream: #fff7d5;
  --white: #ffffff;
  --ivory: #e0e0d5;

  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* 1 px del lienzo original (1366 px de ancho) */
  --u: calc(100cqw / 1366);
  /* Bodoni Moda es ~3.5% más ancha que Coterie: compensación */
  --d: .965;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: none; }

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Estructura base ---------- */

.section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.stage {
  position: relative;
  width: min(100%, calc(100vh * 1366 / 768));
  width: min(100%, calc(100svh * 1366 / 768));
  aspect-ratio: 1366 / 768;
  margin-inline: auto;
  container-type: inline-size;
  overflow: hidden;
}

/* Elemento posicionado con las coordenadas del lienzo original */
.el {
  position: absolute;
  left: calc(var(--x) * 100% / 1366);
  top: calc(var(--y) * 100% / 768);
  width: calc(var(--w) * 100% / 1366);
  height: calc(var(--h) * 100% / 768);
}

/* Marco con recorte: la imagen se ubica según el crop del original */
.frame { overflow: hidden; }
.frame > img {
  position: absolute;
  left: calc(var(--cx) / var(--w) * 100%);
  top: calc(var(--cy) / var(--h) * 100%);
  width: calc(var(--cw) / var(--w) * 100%);
  height: calc(var(--ch) / var(--h) * 100%);
  object-fit: cover;
}
.is-flipped { transform: scaleX(-1); }

/* Títulos serif (Coterie en el original → Bodoni Moda) */
.hero-title,
.about-title,
.pecky-title,
.quality-title,
.special-title,
.videos-title,
.contact-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
  line-height: 1.2;
  word-spacing: .08em;
  white-space: nowrap;
}

.bokeh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- 1. HERO ---------- */

.hero { background: #000; }

.bokeh--hero { opacity: .23; }

/* fuera del lienzo (pantallas más anchas que 16:9) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/bokeh-poster.webp") center / cover no-repeat;
  opacity: .23;
}
.hero .stage { z-index: 1; }

.hero-shade {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: .3;
  pointer-events: none;
}

.hero-cutout { pointer-events: none; }

.hero-title {
  font-size: calc(171 * var(--u) * var(--d));
  font-weight: 600;
  color: #fff4dc;
  text-align: center;
  letter-spacing: .005em;
  text-shadow:
    0 0 calc(3 * var(--u)) rgba(255, 200, 100, .95),
    0 0 calc(14 * var(--u)) rgba(255, 189, 89, .9),
    0 0 calc(34 * var(--u)) rgba(255, 170, 60, .7),
    0 0 calc(70 * var(--u)) rgba(255, 150, 40, .35);
}

.hero-by,
.hero-kicker {
  font-family: var(--font-body);
  color: var(--gold-light);
  line-height: 1.4;
  white-space: nowrap;
  text-shadow:
    0 0 calc(6 * var(--u)) rgba(255, 189, 89, .75),
    0 0 calc(16 * var(--u)) rgba(255, 160, 50, .45);
}
.hero-by {
  font-size: calc(30.3 * var(--u));
  text-align: center;
}
.hero-kicker {
  font-size: calc(28.98 * var(--u));
}

/* Botón dorado metálico */
.btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(21.33 * var(--u));
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(90, 55, 0, .45);
  border-radius: calc(14 * var(--u));
  background: url("../assets/images/boton-dorado.webp") center / 100% 100% no-repeat;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease), filter .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .45), 0 0 calc(24 * var(--u)) rgba(255, 200, 100, .35);
}
.btn-gold:active { transform: translateY(0); }

/* ---------- 2. ACERCA DE ---------- */

.about { background: var(--gold); }

.about-bg {
  position: absolute;
  left: 0;
  top: -8.5%;
  width: 100%;
  height: auto;
  min-height: 118%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

.about .stage { z-index: 1; }

.about-title {
  font-size: calc(101 * var(--u) * var(--d));
  line-height: .9;
  color: var(--cream);
}

.about-text,
.about-note {
  font-size: calc(21.33 * var(--u));
  line-height: 1.28;
  color: var(--cream);
}

/* ---------- 3. PECKY LAND ---------- */

.pecky { background: #1b0705; }

.pecky .stage { overflow: visible; }
.pecky-bg { opacity: .6; }

.pecky-photo > img { object-fit: cover; }

.pecky-title {
  font-size: calc(74.67 * var(--u) * var(--d));
  color: var(--cream);
}

.pecky-role,
.pecky-note {
  font-size: calc(25.7 * var(--u));
  line-height: 1.2;
  color: var(--cream);
  white-space: nowrap;
}

/* ---------- 4. MENSAJE DE EVENTOS ---------- */

.quality-tint {
  background: linear-gradient(90deg, #ff9700 0%, rgba(255, 151, 0, 0) 100%);
  opacity: .4;
}

.quality-dim {
  background: #000;
  opacity: .13;
}

.quality-title {
  font-size: calc(64.6 * var(--u) * var(--d));
  color: var(--ivory);
  text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .55);
}

/* ---------- 5. EVENTOS ESPECIALES ---------- */

.special-glow { pointer-events: none; }
.special-glow--a {
  background: radial-gradient(closest-side, rgba(255, 150, 40, .45) 0%, rgba(255, 140, 30, .22) 50%, rgba(255, 120, 0, 0) 100%);
}
.special-glow--b {
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(150, 110, 255, .36) 0%, rgba(120, 80, 230, .18) 40%, rgba(100, 79, 205, 0) 100%);
}
.special-glow--c {
  background: radial-gradient(closest-side, rgba(255, 150, 0, .95) 0%, rgba(255, 140, 0, .75) 15%, rgba(255, 130, 0, .35) 38%, rgba(255, 120, 0, 0) 68%);
}

.special-leak {
  background: url("../assets/images/luz-calida.webp") 50% 0 / 202.95% 100% no-repeat;
  transform: rotate(90deg);
  pointer-events: none;
}

.special-haze {
  background:
    linear-gradient(270deg, rgba(255, 215, 190, .45) 0%, rgba(255, 215, 190, 0) 30%),
    radial-gradient(closest-side, rgba(255, 108, 170, .55) 0%, rgba(255, 108, 170, .2) 50%, rgba(255, 108, 170, 0) 100%);
  opacity: .45;
  pointer-events: none;
}

.special-title {
  font-size: calc(75.75 * var(--u) * var(--d));
  color: var(--ivory);
  text-align: center;
  text-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(40, 10, 60, .6);
}

/* ---------- 6. VIDEOS ---------- */

.videos-title {
  font-size: calc(75.75 * var(--u) * var(--d));
  color: var(--ivory);
  text-align: center;
  white-space: normal;
}

.videos-carousel {
  position: relative;
  padding: 72px 0 64px;
}
.videos-carousel[hidden],
.videos .stage[hidden] { display: none; }

/* Pista con desplazamiento horizontal y "snap" (se puede deslizar con el dedo) */
.videos-track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 0 16px;
  scrollbar-width: none;
}
.videos-track::-webkit-scrollbar { display: none; }
/* espaciadores para que el primer y el último video puedan quedar centrados
   (el ancho lo calcula js/main.js según el tamaño real de cada video) */
.videos-track::before,
.videos-track::after {
  content: "";
  flex: none;
  align-self: stretch;
}
.videos-track::before { width: var(--pad-start, 0px); }
.videos-track::after { width: var(--pad-end, 0px); }

.video-card {
  flex: none;
  width: min(86vw, 640px);
  scroll-snap-align: center;
}
.video-card--vertical { width: min(62vw, 300px); }

.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
  border-radius: 6px;
}
.video-card--vertical .video-card__media { aspect-ratio: 9 / 16; }
.video-card__media iframe,
.video-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-card__media video { object-fit: contain; }

.video-card__title {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--ivory);
  text-align: center;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}
.carousel-controls[hidden] { display: none; }
.carousel-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 222, 89, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: var(--gold-light);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.carousel-btn svg { width: 24px; height: 24px; }
.carousel-btn:hover:not([disabled]) { background: rgba(255, 189, 89, .15); border-color: var(--gold-light); }
.carousel-btn[disabled] { opacity: .3; cursor: default; }
.carousel-count {
  min-width: 64px;
  text-align: center;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ivory);
}

/* ---------- 7. CONTACTO ---------- */

.contact { background: #000; }

.bokeh--contact {
  opacity: .6;
  z-index: 0;
}

.contact .stage { z-index: 1; }

.contact-title {
  font-size: calc(82.4 * var(--u) * var(--d));
  color: var(--ivory);
  text-align: center;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  height: auto;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(26.06 * var(--u));
  line-height: 1.4;
  color: var(--ivory);
  text-decoration: none;
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.contact-link--underline span {
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .14em;
}
.contact-link:hover { color: var(--white); }
.contact-link:hover span { text-decoration-color: var(--gold-light); }

.contact-icon {
  flex: none;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  color: #fff3d0;
  transition: transform .3s var(--ease);
}
.contact-link:hover .contact-icon { transform: scale(1.08); }

/* =========================================================
   MOBILE / TABLET VERTICAL (< 900px)
   El lienzo 16:9 se reemplaza por layouts en flujo vertical.
   ========================================================= */
@media (max-width: 899.98px) {
  .stage {
    width: 100%;
    aspect-ratio: auto;
  }

  .el {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .hero-title,
  .about-title,
  .pecky-title,
  .quality-title,
  .special-title,
  .videos-title,
  .contact-title {
    word-spacing: .05em;
  }

  /* ----- Hero ----- */
  .hero .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 88px 16px 72px;
    text-align: center;
  }

  .hero-photo {
    position: absolute;
    width: 50%;
    height: 33.4%;
  }
  .hero-photo > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .hero-photo--cancan     { left: 0;   top: 0; }
  .hero-photo--plumas     { left: 50%; top: 0; }
  .hero-photo--escenario  { left: 0;   top: 33.3%; }
  .hero-photo--guitarra   { left: 50%; top: 33.3%; }
  .hero-photo--contorsion { left: 0;   top: 66.6%; }
  .hero-photo--tango      { left: 50%; top: 66.6%; }
  .hero-photo--cancan > img { object-position: 30% center; }
  .hero-photo--plumas > img { object-position: 60% center; }
  .hero-photo--contorsion > img { object-position: 40% center; }
  .hero-photo--tango > img { object-position: 45% center; }

  .hero-cutout,
  .hero-shade--cta { display: none; }

  .hero-shade--title {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    background:
      radial-gradient(120% 55% at 50% 50%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .15) 100%);
  }

  .hero-kicker  { order: 1; font-size: clamp(16px, 4.8vw, 24px); white-space: normal; }
  .hero-title   { order: 2; font-size: min(16.5vw, 150px); line-height: 1.05; margin-top: 4px; }
  .hero-by      { order: 3; font-size: clamp(18px, 5.6vw, 30px); align-self: center; margin-top: 2px; }
  .btn-gold     { order: 4; width: 220px; height: 58px; margin-top: 36px; font-size: 18px; border-radius: 12px; }

  .hero-title {
    text-shadow:
      0 0 2px rgba(255, 200, 100, .95),
      0 0 10px rgba(255, 189, 89, .85),
      0 0 26px rgba(255, 170, 60, .6);
  }
  .hero-by,
  .hero-kicker {
    text-shadow: 0 0 6px rgba(255, 189, 89, .7), 0 0 14px rgba(255, 160, 50, .4);
  }

  /* ----- Acerca de ----- */
  .about-bg {
    top: 0;
    height: 100%;
    min-height: 0;
    object-position: 50% 100%;
  }
  .about::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(60, 32, 0, .45) 0%, rgba(25, 12, 0, .6) 35%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, 0) 80%);
  }
  .about .stage {
    padding: 64px 20px calc(min(70vw, 560px));
  }
  .about-title {
    font-size: min(15.5vw, 104px);
    line-height: .95;
  }
  .about-text,
  .about-note {
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.45;
    max-width: 34em;
  }
  .about-text { margin-top: 28px; }
  .about-note { margin-top: 20px; }

  /* ----- Pecky Land ----- */
  .pecky .stage {
    display: flex;
    flex-direction: column;
    padding: 64px 20px 56px;
  }
  .pecky-bg {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
  .pecky-bg > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: center 85%;
  }
  .pecky-title { font-size: min(14vw, 96px); }
  .pecky-role,
  .pecky-note {
    font-size: clamp(16px, 4.6vw, 22px);
    white-space: normal;
  }
  .pecky-role { margin-top: 2px; }
  .pecky-note { margin-top: 28px; }
  .pecky-photo {
    order: 4;
    width: min(82%, 380px);
    aspect-ratio: 370.5 / 685.7;
    margin: 36px auto 0;
  }
  .pecky-photo > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* ----- Mensaje de eventos ----- */
  .quality .stage {
    min-height: min(135vw, 760px);
    padding: 40px 20px;
  }
  .quality-photo--a,
  .quality-cutout { display: none; }
  .quality-photo--b,
  .quality-dim {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
  .quality-photo--b > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: 80% 30%;
  }
  .quality-tint {
    position: absolute;
    inset: 0 30% 0 0;
    width: auto;
    height: auto;
    opacity: .5;
  }
  .quality-dim {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .1) 100%);
  }
  .quality-title {
    font-size: min(12.4vw, 60px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  }

  /* ----- Eventos especiales ----- */
  .special .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 54vw 54vw 58vw;
  }
  .special-photo {
    width: auto;
    height: auto;
  }
  .special-photo > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .special-photo--bailarin  { grid-column: 1; grid-row: 1 / 3; }
  .special-photo--angel     { grid-column: 2; grid-row: 1; }
  .special-photo--acrobatas { grid-column: 2; grid-row: 2; }
  .special-photo--ballet    { grid-column: 1 / 3; grid-row: 3; }
  .special-photo--bailarin > img { object-position: 30% 30%; }
  .special-photo--angel > img { object-position: 70% center; }

  .special-cutout,
  .special-leak { display: none; }

  .special-glow,
  .special-haze,
  .special-title {
    position: absolute;
  }
  .special-glow--a { left: -20%; top: 25%; width: 140%; height: 90%; }
  .special-glow--b { left: -40%; top: -15%; width: 130%; height: 80%; }
  .special-glow--c { left: -55%; top: 55%; width: 115%; height: 70%; }
  .special-haze {
    inset: 0;
    width: auto;
    height: auto;
    opacity: .6;
  }
  .special-title {
    left: 16px;
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    font-size: min(13vw, 88px);
    line-height: 1.05;
    white-space: normal;
  }
  .js .special-title.reveal { translate: 0 calc(-50% + 14px); }
  .js .special-title.reveal.is-visible { translate: 0 -50%; }

  /* ----- Videos ----- */
  .videos .stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    min-height: 70svh;
    padding: 96px 20px;
  }
  .videos-title {
    font-size: min(11.5vw, 72px);
    line-height: 1.15;
  }

  /* ----- Contacto ----- */
  .contact .stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90vh;
    min-height: 90svh;
    padding: 96px 24px 72px;
  }
  .contact-title {
    font-size: min(14vw, 96px);
    line-height: 1.1;
    white-space: normal;
  }
  .contact-list {
    margin: 48px auto 0;
    gap: 14px;
    align-self: flex-start;
  }
  .contact-link {
    gap: 12px;
    min-height: 44px;
    font-size: clamp(17px, 4.8vw, 22px);
  }
  .contact-icon {
    width: 30px;
    height: 30px;
  }
}

/* ---------- Página 404 ---------- */

.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px 20px;
  text-align: center;
  background:
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
    url("../assets/images/bokeh-poster.webp") center / cover no-repeat;
}
.notfound-code {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  font-size: clamp(96px, 22vw, 200px);
  line-height: 1;
  color: #fff4dc;
  text-shadow: 0 0 10px rgba(255, 189, 89, .85), 0 0 34px rgba(255, 170, 60, .55);
}
.notfound-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 6vw, 48px);
  text-transform: uppercase;
  color: var(--ivory);
}
.notfound-text {
  margin-top: 16px;
  font-size: clamp(16px, 4vw, 19px);
  color: var(--cream);
}
.notfound .notfound-btn {
  width: 230px;
  height: 58px;
  margin-top: 36px;
  font-size: 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* ---------- Animaciones sutiles ---------- */

.js .reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

.hero-title,
.hero-by,
.hero-kicker,
.btn-gold {
  animation: fade-in 1.2s var(--ease) both;
}
.hero-kicker { animation-delay: .15s; }
.hero-title { animation-delay: .3s; }
.hero-by { animation-delay: .6s; }
.btn-gold { animation-delay: .8s; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
}