/* ==========================================================================
   Presentación page (presentacion.html / en/presentacion.html)
   Geometry mirrors the Wix page at 1920px; vertical rhythm scales with the
   viewport via min(px, vw) so the proportions hold down to ~900px, then the
   layout collapses to a single column.
   ========================================================================== */

.page-presentacion { background: var(--navy); }

/* On this page the header floats transparently over the hero photo
   (Wix pulls the hero up by the header height). */

.ps-hero,
.ps-intro,
.ps-actos,
.ps-vive,
.ps-banner { position: relative; }

.ps-p { font-size: 20px; line-height: 1.6; color: var(--white); text-align: justify; margin: 0; }
.ps-p + .ps-p { margin-top: 32px; }

.page-presentacion {
  --u: calc(100vw / 1920);                 /* one Wix design pixel: layout scales linearly with the viewport */
  --ut: calc(min(100vw, 2240px) / 1920);   /* text scaling stops growing at ~2240px, as measured on the live page */
}

/* ---------- Hero: sticky photo strip (Wix "fixed" effect) ----------------
   The live page pins a 1905x1254 photo block to the top of the viewport while
   the heading, the award/video card and the synopsis scroll over it. The pin
   lasts as long as .ps-stage (hero + intro) is on screen, then the strip
   scrolls away with it. Page background (navy) shows below the strip. */

.page-presentacion .site-header { background: transparent; }

.ps-stage {
  position: relative;
  display: flow-root;
  margin-top: calc(-1 * var(--header-h));   /* photo starts at the top, behind the transparent header (header height scales with the viewport) */
}
.ps-top { display: contents; }
.ps-strip {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 1254px;                /* live site: fixed 1254px tall at every desktop width, width follows the viewport */
  background: var(--teal-dark);
  overflow: hidden;
}
.ps-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 84% 18%;      /* Wix focal point fp_0.84_0.18 */
}
.ps-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + 54px);   /* heading starts 54px below the header */
  z-index: 2;
}
.ps-intro { position: relative; z-index: 2; }
.ps-hero-text {
  position: relative;
  z-index: 1;
  margin-left: 7.15%;
  width: 40.9%;
  max-width: calc(785 * var(--u));
  padding-bottom: 0;
}
.ps-hero h1 {
  font-size: calc(74 * var(--ut));
  line-height: 1.02;
  font-weight: 300;
  color: var(--teal);
  text-align: left;
  margin: 0 0 25px;
}
.ps-hero .ps-quote,
.ps-hero .ps-tags { text-align: left; }
.ps-hero-text .ps-p + .ps-p { margin-top: 32px; }
.ps-hero-text.ps-tight .ps-p + .ps-p { margin-top: 0; }
.ps-info {
  margin: min(35px, 1.8vw) 0 min(38px, 2vw);
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}
.ps-info li { margin: 0; }
.ps-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; }
.ps-hero .btn { position: relative; z-index: 2; display: flex; width: max-content; }

/* ---------- Intro: award + video card (right) / roseta + synopsis (left) --- */

.ps-intro {
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6.8fr 39.8fr 15.8fr 29.9fr 7.7fr;
  min-height: min(3044px, 158.5vw);
}
.ps-intro-main { grid-column: 2; grid-row: 1; padding-top: min(1430px, 74.5vw); }
.ps-intro-side { grid-column: 4; grid-row: 1; padding-top: min(223px, 11.6vw); }

.ps-award {
  width: 297px;
  max-width: 100%;
  margin: 0 10px 14px auto;
}
.ps-h-small {
  font-size: clamp(26px, 1.67vw, 32px);
  line-height: 1.4;
  font-weight: 300;
  color: var(--teal);
  margin: 0 0 27px;
}
.ps-video-card h3,
.ps-video-card .ps-p { width: 93.33%; }
.ps-video-card {
  background: #121b29;
  border: 1px solid #232c3a;
  border-radius: 15px;
  padding: 27px 27px 238px;
}
.ps-embed { aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.ps-video-card h3 {
  font-size: clamp(24px, 1.67vw, 32px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 11px;
}
.ps-video-card .ps-p { margin-bottom: 31px; }
.ps-btn-info {
  border: 1px solid #9aa3b2;
  color: var(--grey-2);
  background: transparent;
  font-size: 16px;
}
.ps-btn-info:hover, .ps-btn-info:focus-visible { border-color: var(--teal); background: var(--teal); color: var(--black); }

.ps-roseta { width: 204px; height: 204px; margin: 0 0 6px; }
.ps-intro-main .ps-h-small { margin-bottom: 15px; }

/* Desktop: tighter vertical rhythm than the Wix original (which left ~1400px of
   empty left column and ~900px of blank space before "Los actos" at 1920px).
   Same elements and styles; only the spacing changes. Phones keep their layout. */
@media (min-width: 901px) {
  .ps-intro {
    min-height: 0;
    padding-bottom: min(200px, 10vw);
  }
  /* synopsis starts level with the video card (award 256px + "VÍDEO" heading) */
  .ps-intro-main { padding-top: calc(min(223px, 11.6vw) + 342px); }
  .ps-video-card { padding-bottom: 27px; }
}

/* Desktop: the award starts right under the hero's Tickets button instead of
   223px lower (Wix), pulling the video card and the synopsis up with it. */
@media (min-width: 901px) {
  .ps-intro-side { padding-top: 48px; }
  .ps-intro-main { padding-top: calc(48px + 342px); }
}

/* ---------- Los actos + Cía. Pieles (photo background) --------------------- */

.ps-actos {
  min-height: min(1845px, 96.1vw);
  padding: min(74px, 3.85vw) 0 min(33px, 1.7vw);
  background:
    url('/images/light-gradient-from-bottom.webp') center bottom / 100% 400px no-repeat,
    var(--navy) url('/images/derived/presentacion-actos-bg.webp') center top / cover no-repeat;
}
.ps-actos-title {
  font-size: clamp(30px, 2.4vw, 46px);
  line-height: 1.4;
  font-weight: 300;
  color: var(--teal);
  text-align: center;
  margin: 0 0 min(73px, 3.8vw);
}
.ps-cards {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 5.2%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.ps-card {
  background: rgba(11, 19, 33, .5);
  border-radius: 24px;
  padding: 39px 39px 30px;
  text-align: center;
  min-height: 697px;
}
.ps-card img { width: 100%; aspect-ratio: 476 / 366; object-fit: cover; border-radius: 12px; }
.ps-card h3 {
  font-size: clamp(24px, 1.67vw, 32px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--white);
  margin: 36px 0 15px;
}
.ps-card-kicker {
  font-size: 15px;
  line-height: 1.4;
  color: var(--grey-2);
  margin: 0 0 18px;
}
.ps-card .ps-card-text {
  font-size: 18px;
  line-height: 1.06;
  color: var(--grey-1);
  text-align: justify;
  margin: 0 24px;
}

.ps-cia {
  max-width: 1920px;
  margin: min(243px, 12.65vw) auto 0;
  padding-left: 3.55%;
}
html[lang="en"] .ps-cia { margin-top: min(263px, 13.7vw); }   /* Wix EN page sits 20px lower */
.ps-cia-inner { width: 28.2%; max-width: 541px; min-width: 300px; }
.ps-cia h2 { line-height: 1.5; margin-bottom: 5px; }
.ps-cia h2,
.ps-vive h2,
.ps-banner h2 {
  font-size: clamp(36px, 3.125vw, 60px);
  line-height: 1.2;
  font-weight: 300;
  color: var(--teal);
  text-align: left;
  margin: 0 0 20px;
}
.ps-cia .ps-p { margin-bottom: 50px; }
.ps-cia-logo { width: 530px; max-width: 100%; margin-top: 48px; }

/* ---------- Vive una experiencia genuina ---------------------------------- */

.ps-vive {
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60.6fr 30.5fr 8.9fr;
  padding: min(105px, 5.5vw) 0 min(220px, 11.5vw);
}
.ps-vive-text { grid-column: 2; grid-row: 1; }
.ps-vive-widget {                 /* TuriTop booking box in the (previously empty) left column */
  grid-column: 1;
  grid-row: 1;
  padding: 0 5% 0 7.15%;
}
.ps-vive-widget .load-turitop { min-height: 780px; }
/* TuriTop's loader injects a transparent iframe; give it the white panel look */
.ps-vive-widget iframe {
  display: block;
  width: 100% !important;
  min-height: 780px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
#reservas { scroll-margin-top: 24px; }
.ps-vive .ps-p { width: 98%; }
.ps-vive .ps-p + .ps-p { margin-top: 0; }
.ps-vive .ps-p:last-of-type { margin-bottom: 42px; }

/* ---------- Banner "El gusto es nuestro" ---------------------------------- */

.ps-banner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 5.2% min(152px, 7.9vw);
}
.ps-banner-box {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--black);
}
.ps-banner-box > img { width: 100%; aspect-ratio: 1720 / 668; object-fit: cover; }
.ps-banner-text {
  position: absolute;
  top: min(60px, 3.1vw);
  left: 12.85%;
  right: 12.85%;
}
.ps-banner h2 { margin-bottom: 30px; }
.ps-banner p { font-size: 20px; line-height: 1.4; color: var(--grey-2); margin: 0 0 25px; }

/* ---------- Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
  .ps-card { padding: 24px 24px 24px; min-height: 0; }
  .ps-card .ps-card-text { margin: 0; }
  .ps-video-card { padding-bottom: 60px; }
}

@media (max-width: 900px) {
  .ps-intro { display: block; min-height: 0; padding: 60px 6vw 56px; }
  .ps-intro-side, .ps-intro-main { padding-top: 0; }
  .ps-intro-main { padding-top: 56px; }
  .ps-award { margin: 0 auto 24px; }
  .ps-cards { grid-template-columns: 1fr; gap: 24px; }
  .ps-actos { min-height: 0; padding-top: 48px; padding-bottom: 60px; }
  .ps-cia { margin-top: 56px; padding: 0 6vw; }
  .ps-cia-inner { width: auto; max-width: none; min-width: 0; }
  .ps-vive { display: block; padding: 56px 6vw 56px; }
  .ps-vive-widget { padding: 32px 0 0; }
  .ps-vive-widget .load-turitop, .ps-vive-widget iframe { min-height: 900px; }
  .ps-banner { padding: 0 4vw 56px; }
  .ps-banner-box > img { aspect-ratio: auto; height: 520px; }
  .ps-banner-text { left: 6vw; right: 6vw; top: 36px; }
}

@media (max-width: 1000px) {
  .ps-strip { height: auto; aspect-ratio: 1905 / 1254; }
}

@media (max-width: 750px) {
  .page-presentacion .site-header { background: var(--black); }
  .ps-p { font-size: 16px; }
  .ps-hero h1 { font-size: 36px; }
  .ps-hero { padding-top: 44px; }
  .ps-hero-text { margin: 0 6vw; width: auto; max-width: none; }
  .ps-hero .ps-p, .ps-p { text-align: left; }
  .ps-hero .ps-p + .ps-p { margin-top: 20px; }
  .ps-hero-text.ps-tight .ps-p + .ps-p { margin-top: 12px; }
  .ps-p { font-size: 18px; line-height: 1.6; }
  .ps-info { font-size: 16px; }
  .ps-p + .ps-p { margin-top: 20px; }
  /* Phones: no pinned strip — photo sits behind the hero text only */
  .page-presentacion .site-header { position: relative; }
  .ps-top { display: grid; }
  .ps-strip, .ps-hero { grid-area: 1 / 1; position: relative; }
  .ps-stage { margin-top: 0; }
  .ps-strip { aspect-ratio: auto; background: var(--black); }
  .ps-strip img { position: absolute; inset: 0; object-position: 78% 18%; opacity: .55; }
  .ps-hero { top: auto; padding-bottom: 8px; }
  .ps-info { margin: 36px 0 24px; }
  .ps-hero .btn { margin-bottom: 40px; }
  .ps-award { width: 220px; }
  .ps-video-card { padding: 16px 16px 32px; }
  .ps-embed { aspect-ratio: 16 / 9; margin-bottom: 24px; }
  .ps-roseta { width: 150px; height: 150px; }
  .ps-card .ps-card-text { text-align: left; font-size: 16px; line-height: 1.5; }
  .ps-cia-logo { width: 300px; margin-top: 40px; }
  .ps-banner-box > img { height: 460px; }
  .ps-banner p { margin-bottom: 18px; }
}