/* ================= SECCIÓN SERVICIOS ================= */
#sec2 {
  position: relative;
  padding: 0;                                     /* espacio arriba y abajo */
  z-index: 1;
}


/* ---------- Contenedor general ---------- */
#sec2 .servicios__contenedor {
  display: grid;
  grid-template-columns: repeat(2, 1fr);                           /* Dos columnas en escritorio, mitad y mitad */
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---------- Columna ---------- */
.servicios__col {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Fondo columna 1 */
.servicios__col:nth-child(1) {
  background: linear-gradient(135deg, #004e79, #0086CF);
}

/* Fondo columna 2 */
.servicios__col:nth-child(2) {
  background: linear-gradient(135deg, #da7f18, #ffb83c);
}


/* ---------- Video ---------- */
.servicios__video {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  pointer-events: none;
}

.servicios__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
  user-select: none;
  
  transform: translateZ(0); /* Evita que la imagen del 360 se vea mal renderizada */
  will-change: transform;
}


/* ---------- Texto sobre video ---------- */
.servicios__texto {
  flex: 0 0 auto;       /* no crece, no se encoge */
  padding: 6rem 6rem 0; /* arriba | lados | abajo */
  max-width: 900px;

  text-align: left;
  color: #fff;

  z-index: 3;
}

#sec2 .servicios__texto h1 {
   font-size: clamp(2rem, 6vw, 4.5rem);
   font-family: 'Instrument Sans', sans-serif;
}

#sec2 .servicios__texto h2 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 100;
  font-style: italic;
  margin-bottom: 0.4rem;
  letter-spacing: 1px;
}

.servicios__texto p {
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.3;
  opacity: 0.95;
  margin-bottom: 1.8rem;
}

.btn-sec2 {
  min-width: clamp(100px, 30vw, 200px);
  padding: clamp(0.7rem, 2vw, 0.9rem)
           clamp(1.6rem, 4vw, 2.5rem);

  font-size: clamp(0.8rem, 2vw, 0.9rem);
  text-align: center;
}

.sec2__txtInferior {
  position: absolute;
  font-style: italic;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);

  max-width: 90%;
  text-align: center;

  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 300;

  color: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 6;
}

.sec2__sombra {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40vh;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.35) 30%,
    rgba(0, 0, 0, 0.15) 55%,
    rgba(0, 0, 0, 0) 100%
  );

  pointer-events: none;
  z-index: 5;
}

@media (max-width: 768px) {

  /* La sección puede crecer */
  #sec2.panel {
    height: auto;
    min-height: auto;
  }

  /* Stack vertical */
  #sec2 .servicios__contenedor {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* Cada servicio = 1 pantalla */
  #sec2 .servicios__col {
    height: calc(var(--vh, 1vh) * 100);
  }

  .servicios__texto {
    max-width: 100%;
    padding: 3rem 1rem 0; /* arriba | lados | abajo */
  }

  .servicios__video img {
    object-position: center bottom;
  }
}


@media (hover: hover) and (pointer: fine) { /* ---------------------------- 2 Columnas en computador */
  #sec2 .servicios__contenedor {
    grid-template-columns: repeat(2, 1fr);
    height: 100vh;
  }
}

@media (hover: none) and (pointer: coarse) { /* ---------------------------- 2 Filas en celular y otro diseño */

  @media screen and (max-width: 1024px) {
    #sec2 .servicios__col {
      min-height: 50vh;
    }
  }

  #sec2 .servicios__contenedor {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* Viñeta individual por servicio */
  .servicios__col::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 35vh;

    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.35) 35%,
      rgba(0, 0, 0, 0) 100%
    );

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

  .sec2__sombra,
  .sec2__txtInferior {
    display: none;
  }
}

/* ================== EXPANSIÓN DE SERVICIO ================== */

.servicios__col {
  position: relative;
  overflow: visible; /* CRÍTICO: permite crecer fuera */
}

/* capa que se expande */
.servicio-expandido {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;              /* exactamente la otra mitad */
  z-index: 10;               /* por encima del otro servicio */
  pointer-events: none;


  clip-path: inset(0 100% 0 0); /* estado cerrado por defecto */
}

/* IZQUIERDA → crece hacia la derecha */
.servicios__col:nth-child(1) .servicio-expandido {
  left: 100%;
  transform-origin: left;
  background: linear-gradient(135deg, #004e79, #0086CF);
}

/* DERECHA → crece hacia la izquierda */
.servicios__col:nth-child(2) .servicio-expandido {
  right: 100%;
  transform-origin: right;
  background: linear-gradient(135deg, #da7f18, #ffb83c);
}

/* contenido original siempre visible */
.servicios__texto,
.servicios__video {
  position: relative;
  z-index: 3;
}
.btn-sec2.is-open{
  background: rgb(241, 83, 83);
}

.servicio-expandido--3d {
  display: flex;
  align-items: center;
  justify-content: center;
}

.servicio-expandido--3d {
  isolation: isolate;
}