/* ==========================================================================
   LA COMPAÑÍA / THE COMPANY page (compania.html, en/compania.html)
   Layout mirrors the Wix Studio page: the hero, team grid and logo sections
   sit inside a 1600px max-width container (Wix "spx" units scale with
   --s16); the text sections are full-width and scale with the viewport.
   ========================================================================== */

.page-compania {
  --s16: min(100vw, 1600px);   /* Wix scaling factor for max-width sections */
  --text-size: clamp(16px, 1.25vw, 20px);
  --text-lh: 1.6;
}
.page-compania h1 { font-weight: 300; }   /* fino, como Presentación */
.page-compania h2 { font-weight: 400; }

/* Body copy shared by all text blocks (Wix font_8: Questrial, justified) */
.co-text { font-family: var(--font-body); font-size: var(--text-size); line-height: var(--text-lh); color: var(--white); text-align: justify; }
.co-text p { margin: 0; }
.co-text p.gap-1 { margin-bottom: 1.6em; }      /* one empty paragraph on Wix */
.co-text p.gap-2 { margin-bottom: 3.2em; }
.co-text p.gap-3 { margin-bottom: 4.8em; }
.co-text.lead-1 { padding-top: 1.6em; }          /* text block that starts with an empty line */

/* ---------- 1. Hero: Pieles "10 años" logo + info button on a stage photo -- */

.co-hero {
  position: relative;
  height: min(100vh, 1080px);
  min-height: 560px;
  background: var(--black);
  overflow: hidden;
}
.co-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.co-hero-inner {
  position: relative;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
}
.co-hero-logo {
  position: absolute;
  top: calc(0.0740479 * var(--s16));
  left: 50%;
  transform: translateX(-50%);
  width: calc(0.171254 * var(--s16));
  display: block;
}
.co-hero-logo img { width: 100%; height: auto; }
.co-hero-btn {
  position: absolute;
  top: calc(0.1739014 * var(--s16));
  left: 50%;
  transform: translateX(-50%);
  width: calc(0.1109375 * var(--s16));
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 0.2943662;
  padding: 0;
  border: 0;
  border-radius: calc(0.0164063 * var(--s16));
  background: var(--white);
  color: var(--black);
  font-size: max(14px, calc(0.0117188 * var(--s16)));
  line-height: 1.4;
}
.co-hero-btn:hover,
.co-hero-btn:focus-visible { background: var(--teal); color: var(--black); border: 0; }

/* ---------- 2. Team: 12 portraits, 2 rows of 6, on black -------------------- */

.co-team {
  background: var(--black);
}
.co-team-grid {
  width: calc(0.67734375 * var(--s16));
  min-height: calc(0.390625 * var(--s16));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: calc(0.00625 * var(--s16));
}
.co-team-grid li {
  width: calc(16.6666667% - 0.0052077 * var(--s16) - 1px);
  flex: 0 0 auto;
}
.co-team-grid figure {
  margin: 0;
  min-height: calc(0.2343744 * var(--s16));
  display: grid;                 /* photo and name share one cell, like the Wix repeater item */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
}
.co-team-grid img {
  grid-area: 1 / 1;
  width: 102.27285%;
  max-width: none;
  margin-left: calc(-0.0024292 * var(--s16));
  aspect-ratio: 1 / 1.5005583;
  object-fit: cover;
  object-position: 50% 40%;
  align-self: start;
}
.co-team-grid figcaption {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  margin-top: calc(0.1827881 * var(--s16));
  width: 71.24586%;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 300;
  -webkit-text-stroke: 0.35px currentColor;   /* Wix renders a faux-bold Poppins ExtraLight */
  font-size: calc(0.0117188 * var(--s16));
  line-height: 1.4;
  color: var(--teal);
}

/* ---------- 3. LA COMPAÑÍA: centred intro text on navy --------------------- */

.co-intro {
  background: var(--navy);
  min-height: 39.80469vw;
  display: grid;
  align-items: center;
  justify-items: center;
}
.co-intro-box {
  width: 66.826171875%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.co-intro h1 {
  width: 92.59%;
  margin: 0 0 25px;
  font-size: max(40px, calc(74 * min(100vw, 2240px) / 1920));   /* como Presentación */
  line-height: 1;
  text-align: center;
  color: var(--teal);
}
.co-intro .co-text { width: 100%; }

/* ---------- 4. Pieles vertical logo (transparent section) ------------------- */

.co-logo {
  min-height: calc(0.390625 * var(--s16));
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.co-logo img {
  width: calc(0.1526179 * var(--s16));
  min-width: 120px;
  height: auto;
  margin-top: calc(0.0923706 * var(--s16));
}

/* ---------- 5. SOBRE LA COMPAÑÍA + TRAYECTORIA over the boat photo ---------- */

.co-about {
  position: relative;
  overflow: clip;
  background: var(--navy);
  min-height: 2820.97px;
  padding: 100px 100px 70px;
  display: grid;
  grid-template-rows: minmax(929.66px, auto) minmax(1721.29px, auto);
  grid-template-columns: minmax(0, 1fr);
}
.co-about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .3;
  pointer-events: none;
}
.co-about-row { position: relative; display: flex; flex-direction: column; align-items: center; }
.co-about-row-1 { justify-content: flex-end; }
.co-about-row-2 { justify-content: flex-start; }
.co-about .co-textbox { width: 82.55497685%; display: flex; flex-direction: column; }
.co-about-row-2 .co-textbox { margin-top: 78px; }
.co-about h2 {
  width: 89.187%;
  margin: 0 0 10px;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: normal;
  color: var(--teal);
}

/* ---------- 6. ¡GRACIAS!: photo fading into navy + thank-you text ---------- */

.co-thanks {
  background: var(--navy);
  padding: 100px;
  display: grid;
  grid-template-columns: .5fr .5fr;
  grid-template-rows: minmax(calc(48.35945vw + 56px), auto);  /* +56px: measured on the live page */
  column-gap: 0;
}
.co-thanks-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.co-thanks-photo {
  width: 539.8px;
  height: 774.25px;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.co-thanks-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.8147805;
  object-fit: fill;
  pointer-events: none;
}
.co-thanks-text {
  display: grid;
  align-items: center;
  justify-items: center;
}
.co-thanks .co-textbox { width: 62.578125%; display: flex; flex-direction: column; }
.co-thanks h2 {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: normal;
  color: var(--teal);
}
.co-thanks .co-text { width: 98.533%; }

/* ---------- Responsive: tablet (Wix breakpoint 751–1000px) ------------------ */

@media (max-width: 1000px) {
  .co-intro { align-items: start; }
  .co-intro-box { width: 57.16%; margin-bottom: 50px; }

  .co-about { min-height: 802.4px; padding: 50px; grid-template-rows: minmax(370.9px, auto) minmax(371.5px, auto); }
  .co-about-row { align-items: flex-start; }
  .co-about-row-1 { justify-content: flex-start; padding-bottom: 30px; }
  .co-about-row-1 .co-textbox { width: 82.9%; }
  .co-about-row-2 .co-textbox { width: 77.84%; margin-top: 0; }
  .co-about h2 { width: auto; margin-bottom: 15px; font-size: clamp(22px, 2.8646vw, 32px); }
  .co-about-row-1 .co-text { width: 93.9%; }

  .co-thanks { min-height: 787px; padding: 0; grid-template-rows: minmax(787px, auto); }
  .co-thanks-media { align-items: center; }
  .co-thanks .co-textbox { width: 68.27%; }
  .co-thanks h2 { width: 91.66%; margin-bottom: 15px; font-size: clamp(22px, 2.8646vw, 32px); }
  .co-thanks .co-text { width: 100%; }
}

/* ---------- Responsive: mobile (Wix breakpoint ≤750px) ---------------------- */

@media (max-width: 750px) {
  .page-compania {
    --s16: 100vw;
    --text-size: clamp(14px, 3.59vw, 18px);
  }

  .co-hero-logo { width: 35.2599vw; top: 7.91667vw; }
  .co-hero-btn { width: 27.4743vw; top: 23.28526vw; aspect-ratio: 1 / 0.29433; font-size: max(14px, 1.17vw); }

  .co-team-grid { width: 87.2196%; min-height: 265.05vw; gap: 0.62513vw; }
  .co-team-grid li { width: calc(50% - 0.31256vw - 1px); }
  .co-team-grid figure { min-height: 23.43744vw; }
  .co-team-grid img {
    width: 68.0688%;
    margin-left: 0;
    justify-self: center;
    aspect-ratio: 1 / 1.1940911;
    object-position: 50% 30%;
  }
  .co-team-grid figcaption { margin-top: 39.47115vw; font-size: max(12px, 2.05128vw); }

  .co-intro { min-height: 234.56px; padding: 30px 30px 50px; }
  .co-intro-box { width: 100%; margin-bottom: 0; }
  .co-intro h1 { width: 100%; font-size: 40px; }

  .co-about { padding: 30px; }
  .co-about-row { align-items: center; }
  .co-about-row-1 .co-textbox,
  .co-about-row-2 .co-textbox { width: 100%; }
  .co-about-row-1 .co-text { width: 100%; }
  .co-about h2 { text-align: center; font-size: clamp(24px, 6.15383vw, 40px); }

  .co-thanks {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(528.5px, auto) minmax(272.2px, auto);
  }
  .co-thanks-media { align-items: center; }
  .co-thanks-photo { width: 366.27px; height: 525.36px; }
  .co-thanks-fade { aspect-ratio: 1 / 0.6120289; }
  .co-thanks-text { padding: 0 30px 70px; }
  .co-thanks .co-textbox { width: 100%; }
  .co-thanks h2 { width: auto; text-align: center; font-size: clamp(24px, 6.15383vw, 40px); }
}