/* =========================================================
   EXPERIENCE SECTION
   Capas exportadas desde Photoshop con el mismo lienzo
========================================================= */

.experience-section {
  position: relative;
  overflow: hidden;

  min-height: 100vh;

  /*
    Subimos apenas la sección para tapar la línea divisoria
    entre intro y experience.
  */
  margin-top: -2px;

  /*
    Fondo temporal antes de que aparezca la lámina.
    Usa la nueva imagen:
    img/experiencia/fondoIntro.png
  */
  background:
    linear-gradient(
      to bottom,
      rgba(48, 37, 109, 0.08) 0%,
      rgba(48, 37, 109, 0) 22%
    ),
    url("../img/experiencia/fondoIntro.webp");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  isolation: isolate;
}

/* Unión superior con intro */
.experience-top-fade {
  position: absolute;
  left: 0;
  top: -2px;

  width: 100%;
  height: 180px;

  z-index: 8;
  pointer-events: none;

  /*
    Suaviza la unión entre intro y experience
    para que no se vea una línea horizontal.
  */
  background:
    linear-gradient(
      to bottom,
      rgba(48, 37, 109, 0.28) 0%,
      rgba(72, 54, 132, 0.14) 38%,
      rgba(72, 54, 132, 0) 100%
    );
}

/* Escenario completo */
.experience-stage {
  position: absolute;
  inset: 0;

  z-index: 1;
  pointer-events: none;

  overflow: hidden;
}

/* Todas las capas comparten el mismo lienzo */
.experience-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: fill;
  object-position: center center;

  user-select: none;
  pointer-events: none;

  will-change: transform, opacity;
}

/* =========================================================
   ORDEN VISUAL DE CAPAS
========================================================= */

.experience-bg-layer {
  z-index: 1;
  opacity: 0;
  transform: none;

  transition: opacity 0.45s ease;
}

.experience-section.experience-bg-active .experience-bg-layer {
  opacity: 1;
}

.experience-rug-layer {
  z-index: 2;
}

.experience-painting-layer {
  z-index: 3;
}

/* Planta detrás del sofá */
.experience-plant-layer {
  z-index: 4;
  transform-origin: center bottom;
}

/* Sofá delante de la planta */
.experience-sofa-layer {
  z-index: 5;
  transform-origin: center bottom;
}

.experience-table-layer {
  z-index: 6;
}

.experience-cups-layer {
  z-index: 7;
}

.experience-book-layer {
  z-index: 8;
}

/* Estado inicial de objetos.
   La entrada real la controla js/experience.js */
.experience-rug-layer,
.experience-painting-layer,
.experience-plant-layer,
.experience-sofa-layer,
.experience-table-layer,
.experience-cups-layer,
.experience-book-layer {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
}

/* =========================================================
   CONTENIDO
========================================================= */

.experience-content {
  position: relative;
  z-index: 12;

  width: min(1480px, 100%);
  min-height: 100vh;

  margin: 0 auto;
  padding: 80px 6vw 56px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.experience-heading {
  max-width: 1180px;
}

.experience-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 24px;
  margin-bottom: 34px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);

  background: rgba(255, 255, 255, 0.32);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255, 255, 255, 0.96);

  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 50px rgba(45, 96, 130, 0.12);
}

.experience-title {
  margin: 0;

  max-width: 1180px;

  color: #10263a;

  font-size: clamp(4rem, 7.4vw, 8.7rem);
  line-height: 0.88;
  letter-spacing: -0.085em;
  font-weight: 950;

  text-shadow:
    0 14px 42px rgba(255, 255, 255, 0.26),
    0 18px 65px rgba(58, 112, 150, 0.08);
}

.experience-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 4vw, 70px);

  padding-top: 70px;
}

.experience-services article {
  max-width: 440px;
}

.experience-services article span {
  display: block;

  margin-bottom: 4px;

  color: rgba(16, 38, 58, 0.92);

  font-size: 1rem;
  font-weight: 500;
}

.experience-services article h3 {
  margin: 0 0 4px;

  color: #10263a;

  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.experience-services article p {
  margin: 0;

  color: rgba(16, 38, 58, 0.86);

  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  line-height: 1.14;
  font-weight: 500;
}

/* =========================================================
   LÁMINA TEMPORAL DEL FONDO EXPERIENCE
   Esta imagen la crea js/experience.js usando:
   img/experiencia/fondo-base.png

   Importante:
   - No mueve .experience-section.
   - No crea una sección nueva.
   - Solo aparece como capa fija sobre intro.
========================================================= */

.experience-bg-transition-clone {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  object-fit: fill;
  object-position: center center;

  /*
    Alto para asegurar que se vea sobre intro, hero-transition
    y otros elementos decorativos.
  */
  z-index: 99999;

  pointer-events: none;
  user-select: none;

  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(-28vw, -120vh, 0)
    rotate(-8deg)
    scale(1.12);

  transform-origin: center center;

  will-change: transform, opacity, visibility;
  filter: blur(2px);

  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.25),
    0 16px 44px rgba(20, 24, 64, 0.18);
}

.experience-bg-transition-clone.is-visible {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
  .experience-section {
    min-height: 100vh;
  }

  .experience-content {
    padding: 95px 24px 50px;
  }

  .experience-title {
    font-size: clamp(3.2rem, 10vw, 6rem);
    line-height: 0.92;
  }

  .experience-services {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 56px;
  }

  .experience-services article {
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  .experience-section {
    min-height: 100svh;
  }

  .experience-top-fade {
    height: 165px;
  }

  .experience-content {
    min-height: 100svh;
    padding: 92px 20px 42px;
  }

  .experience-tag {
    min-height: 38px;
    padding: 0 16px;
    margin-bottom: 24px;

    font-size: 0.68rem;
    letter-spacing: 0.11em;
  }

  .experience-title {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
    line-height: 0.96;
    letter-spacing: -0.075em;
  }

  .experience-services {
    gap: 18px;
    padding-top: 44px;
  }

  .experience-services article h3 {
    font-size: 1.12rem;
  }

  .experience-services article p {
    font-size: 0.95rem;
    line-height: 1.35;
  }
}