/**
 * Subsitio Experiencia - Home page exclusive styles.
 * Overrides header/footer variables for this page and styles home content.
 *
 * Home-only behavior:
 * - Hero is outside main (sibling before main) so the video affects only header + hero.
 * - Video is output in header when EXP_IS_HOME; header is transparent so video shows through.
 * - main contains only the sections below the hero and has solid background (#f5f0e8).
 */

/* Theme: transparent header over video; footer and hero text #F5DCC0; content bg #F5DCC0, text #7B612A */
body.exp-home {
  --exp-header-bg: rgba(0, 0, 0, 0.4);
  --exp-header-text: #fff;
  --exp-header-cta-bg: #c4a35a;
  --exp-header-cta-text: #fff;
  --exp-footer-bg: #7B612A;
  --exp-footer-text: #f5dcc0;
  --exp-footer-pattern: rgba(255, 255, 255, 0.06);
  --exp-mobile-menu-bg: rgba(245, 220, 192, 0.4);
}

body.exp-home .header-experiencia {
  background: var(--exp-header-bg);
}

body.exp-home .header-experiencia--scrolled {
  background: rgba(0, 0, 0, 0.5);
}

/* Footer on home: text and SVG fill #F5DCC0 */
body.exp-home .footer-experiencia {
  color: #f5dcc0;
}

body.exp-home .footer-experiencia svg path {
  fill: #f5dcc0;
}

/* Full-viewport video behind header and hero only (home). Rest of page has main background. */
.exp-home-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

body.exp-home .site-content {
  position: relative;
  z-index: 1;
}

/* Hero outside main: only header + hero show the video; main has solid background. */
body.exp-home .exp-hero--home {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  padding-bottom: 5%;
}

body.exp-home .exp-hero--home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.2));
  z-index: 0;
  pointer-events: none;
}

body.exp-home .exp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 0 1.5rem;
  text-align: left;
  box-sizing: border-box;
  padding-bottom: 2rem;
}

body.exp-home .exp-hero__title {
  font-size: 72px;
  color: #f5dcc0;
  margin: 0 0 1rem;
  font-weight: 400;
  line-height: 1.1;
}

body.exp-home .exp-hero__title-line {
  display: block;
  font-style: normal;
}

body.exp-home .exp-hero__title-line--italic {
  font-style: italic;
}

body.exp-home .exp-hero__text {
  font-size: 24px;
  line-height: 28.65px;
  color: #f5dcc0;
  text-align: left;
  margin: 0;
  max-width: 80%;
}

body.exp-home .exp-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.25rem;
  font-family: "Fira Sans", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f5dcc0;
  background: rgba(245, 220, 192, 0.2);
  border: 1px solid #f5dcc0;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 1.5rem;
}

body.exp-home .exp-hero__btn:hover {
  opacity: 0.92;
}

body.exp-home .exp-hero__btn:visited {
    color: #f5dcc0;
}

body.exp-home .exp-hero__btn-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

body.exp-home .exp-hero__btn-arrow--down {
  display: none;
}

body.exp-home .exp-hero__btn:hover .exp-hero__btn-arrow--right,
body.exp-home .exp-hero__btn:focus .exp-hero__btn-arrow--right,
body.exp-home .exp-hero__btn:active .exp-hero__btn-arrow--right {
  display: none;
}

body.exp-home .exp-hero__btn:hover .exp-hero__btn-arrow--down,
body.exp-home .exp-hero__btn:focus .exp-hero__btn-arrow--down,
body.exp-home .exp-hero__btn:active .exp-hero__btn-arrow--down {
  display: inline-block;
  transform: translateY(4px);
}

/* Smooth scroll to next section when clicking hero button */
html:has(body.exp-home) {
  scroll-behavior: smooth;
}

/* Main (sections only): background and text color for home only. */
.exp-main--home {
  background: #f5dcc0;
  color: #7b612a;
}

.exp-main--home .exp-section {
  padding: 5rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.exp-main--home .exp-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.exp-main--home .exp-section__title {
  font-size: 72px;
  color: #7b612a;
  margin: 0 0 0.25rem;
}

.exp-main--home .exp-section--tierra .exp-section__title {
  font-size: 48px;
  line-height: 80px;
}

.exp-main--home .exp-section--tierra .exp-section__img {
  border-radius: 0;
}

.exp-main--home .exp-section--tierra .exp-section__img img {
  border: 1px solid #000;
}

.exp-main--home .exp-section__subtitle {
  font-family: "Sanomat Web", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.15em;
  color: #7b612a;
  margin: 0 0 1rem;
}

.exp-main--home .exp-section__body {
  color: #7b612a;
  line-height: 1.6;
  margin: 0;
}

.exp-main--home .exp-section__img {
  position: relative;
  min-height: 280px;
  border-radius: 0;
  overflow: hidden;
}

.exp-main--home .exp-section__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-main--home .exp-section--experiencias {
  background: #f5dcc0;
}

.exp-main--home .exp-section--experiencias-title {
    padding: 3.5rem 1.5rem;
  background: #f5dcc0;
  flex-direction: row;
    display: flex;
    justify-content: space-between;
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;

}

.exp-main--home .exp-section__heading {
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  color: #7b612a;
  margin: 0 0 0.5rem;
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
}

.exp-main--home .exp-grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.exp-main--home .exp-card {
  border-radius: 0;
  overflow: hidden;
}

/* 4:5 proportion (width:height); no max-height */
.exp-main--home .exp-card__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.exp-main--home .exp-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-main--home .exp-card__title {
  font-family: "Fira Sans", sans-serif;
  font-size: 1rem;
  margin: 1rem 1rem 0;
  color: #7b612a;
}

.exp-main--home .exp-card__text {
  font-size: 0.875rem;
  color: #7b612a;
  margin: 0.25rem 1rem 1rem;
}

.exp-main--home .exp-section--vive {
  text-align: center;
  background: #f5dcc0;
}

.exp-main--home .exp-section--vive .exp-section__logo {
  margin: 2rem 0 1rem;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.exp-main--home .exp-section--vive .exp-section__logo svg path {
  fill: #7b612a;
}

.exp-main--home .exp-section--vive .exp-section__logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.exp-main--home .exp-section--vive  p {
  max-width: 50%;
  margin: auto;
}
.exp-main--home .exp-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: #7b612a;
  color: #f5dcc0;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  border-radius: 4px;
  margin-top: 1rem;
}

.exp-main--home .exp-btn:visited {
    color: #f5dcc0;
}

.exp-main--home .exp-btn:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  body.exp-home .exp-hero__title {
    font-size: 48px;
  }

  body.exp-home .exp-hero__text {
    font-size: 16px;
    max-width: 80%;
  }

  .exp-main--home .exp-section__inner {
    grid-template-columns: 1fr;
  }

  /* Tierra section: image only goes edge-to-edge on mobile; text unchanged */
  .exp-main--home .exp-section--tierra .exp-section__col--img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
  }

  .exp-main--home .exp-section--tierra .exp-section__img {
    width: 100%;
  }

  .exp-main--home .exp-section--tierra .exp-section__img img {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 280px;
    object-fit: cover;
  }

  /* Experiencias grid: edge-to-edge on mobile (no side padding), 6px gap between cards */
  .exp-main--home .exp-section--experiencias {
    padding-left: 0;
    padding-right: 0;
  }

  .exp-main--home .exp-section--experiencias .exp-grid--three {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    gap: 6px;
  }

  .exp-main--home .exp-grid--three {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
  }

  /* Card width so that first image is full and ~10% of second is visible (peek) */
  .exp-main--home .exp-grid--three .exp-card {
    flex: 0 0 auto;
    width: calc((100vw - 6px) / 1.1);
    min-width: calc((100vw - 6px) / 1.1);
    max-width: calc((100vw - 6px) / 1.1);
    scroll-snap-align: start;
  }

  .exp-main--home .exp-section__subtitle {
    font-size: 20px;
  }

  .exp-main--home .exp-section--vive .exp-section__logo {
    max-width: 300px;
  }

  .exp-main--home .exp-section--vive .exp-section__logo svg {
    width: 300px;
  }

  .exp-main--home .exp-section--vive .exp-section__title {
    font-size: 48px;
    line-height: 58px;
  }

  .exp-main--home .exp-section--vive .exp-section__body,
  .exp-main--home .exp-section--vive p {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}