/* ----- General Styling ----- */
:root {
    --accent: #1da1f2;


  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: sans-serif;
    background-color: #fff;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  a {
    color:#212f3c;
  }
  
  h2 {
    font-size: 2.3em;
    text-transform: uppercase;
  }
  
  h3 {
    font-size: 1.8em;
  }
  
  a {
    text-decoration: none;
    transform: 0.3s;
  }
  
  a:hover {
    color: var(--accent);
  }
  
  p {
    color: #424949;
    line-height: 25px;
  
    margin: 1.5em 0;
    font-size: 0.9em;
  }
  
  .container {
    width: 80vw;
    max-width: 1250px;
    margin: 0 auto;
  }
  
  
  
  
  /* ======== HEADER ========= */
  
  header {
    background: url(/assets/img/fondos/fondo1.jpg) no-repeat center;
    background-size: cover;
    padding: 1.5em 1.5em 2.5em 1.5em;
  }
  
  .header-content {
    display: flex;
    gap: 2em;
    margin-top: 11rem;
    padding-bottom: 11rem;
  }
  
  .header-images {
    display: flex;
    gap: 3em;
    margin-left: 18px;
    margin-top: -90px;/*margen superior de la imagen*/
  }
  
  .header-images div {
    position: relative;
    text-align: center;
  }
  
  .header-images img {
    width: 35vw;/*tamaño de la imagen del producto*/
   
  }
  
  .img1 img {
    margin-bottom: 4em;
  }
  
  .img2 img {
    margin-top: -1em;
  }
  
  .title {
    font-size: 45px;
  }
  
  .sub-heading {
    color: #616a6b;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .btn {
    display: flex;
    align-items:center;
    border-style: solid;
    border-color: 
    #0086cc;
    border-radius: 5em;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    color: black;
  }
  
  .spec {
    display: inline-block;
    font-size: 0.9em;
    color: #1f96d2;
    padding: 0.5em 0;
    border-bottom: 1px black solid;
    position: absolute;
  }
  
  .img1 .spec {
    right: -2em;
    top: -6em;
  }
  
  .img2 .spec {
    top: -8em;
    left: 2em;
  }
  
  .spec::before {
    content: "";
    background: black;
    width: 6em;
    height: 1px;
    position: absolute;
    bottom: -2.2em;
    left: 50%;
  }
  
  .img1 .spec::before {
    transform: translateX(-50%) rotate(-45deg);
  }
  
  .img2 .spec::before {
    transform: translateX(-50%) rotate(45deg);
  }
  
  .dot {
    position: absolute;
    bottom: -82px;
    height: 1.8em;
    width: 1.8em;
    border: 1px black solid;
    border-radius: 50%;
    animation: expand 1sease-in-out infinite;
  }
  
  .img1 .dot {
    left: 25%;
  }
  
  .img2 .dot {
    left: 63%;
  }
  
  .dot::before {
    content: "";
    background: var(--accent);
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
  }
  /*====================INICIO =========================*/
  
  .inicio{
    background-image: url(/assets/img/TEXTURAS/fondoproduc.png);

    background-repeat: no-repeat;
    }

.descripcion{
  display: none;
}
  /* ======== ABOUT SECTION ========= */
  
  .about {
    background: linear-gradient(135deg, #fff, #fff);
    padding-top: 150px;
    padding-bottom: 60px;
  }
  

  .about img {
    width: 50%;
    filter: drop-shadow(0 0 1.5em rgb(0, 0, 0, 0.5));
  }
  
  
  /* ======== PRODUCT SECTION ========= */
  
  .product {
    background: linear-gradient(135deg, #2A3E59, #5c6373);
  }
  
  .product h2,
  .specs h2,
  .slide h2 {
    text-align: center;
    margin-bottom: 22px;
  }
  
  .product .info > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .product img {
    width: 20em;
    justify-self: right;
    margin-right: 6em;
    padding: 6em 0;
  }
  
  .info-text {
    padding-left: 6em;
    border-left: 1px var(--accent) solid;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  
  .info-text::after,
  .info-text::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
  }
  
  .info-text::before {
    background: var(--accent);
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    left: -0.43em;
  }
  
  .info-text::after {
    border: 1px var(--primary) solid;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    left: -0.97em;
  }
  
  .product .btn {
    text-align: center;
  }
  
  
  /* ======== SPECS SECTION ========= */
  
  .specs {
    background-image: url(./assets/img/TEXTURAS/TEXTURA3.png);
    padding-bottom: 100px;
    padding-top:100px ;
    background-repeat: no-repeat;
    }
    
  .specs .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Espaciado entre columnas */
}

.pdf-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.pdf-container {
  width: 80%;
  
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 10px;
}




  
  
  
  
  /* VIDEO*/ 
  
  /* ================== ESTILOS GENERALES ================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* ================== VIDEO Y TEXTO ================== */

.video-text-wrapper {
  display: flex; /* Alinea el video y el texto en la misma fila */
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas más pequeñas */
  justify-content: space-between; /* Espaciado entre el video y el texto */
  align-items: flex-start; /* Alinea los elementos en la parte superior */
  padding-bottom: 100px;
}

.video-container {
  flex: 1; /* Ocupa el espacio disponible */
  max-width: 600px;
  margin: 10px;
  overflow: hidden;
  border-radius: 20px;
}

/* Estilo para el video */
iframe,
video {
  width: 100%; /* Se adapta al contenedor */

  border-radius: 20px;
}

.text-container {
  flex: 1; /* Ocupa el espacio disponible */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

p {
  font-size: 1.2rem; /*tamaño de letra*/
  line-height: 1.6; /*espaciado de letra*/
  margin-bottom: 20px;
}

/* Estilos personalizados para controles de video */
video::-webkit-media-controls {
  border-radius: 20px;
}

video::-webkit-media-controls-panel {
  border-radius: 20px;
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button {
  border-radius: 50%;
}

/* ================== MEDIA QUERIES - RESPONSIVE ================== */

/* Pantallas medianas y tablets */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    margin-top: 3em;
  }

  .header-images {
    margin-top: 4em;
    justify-content: center;
  }

  .header-images img {
    width: 50vw;
  }

  .product .info > div {
    display: block;
  }

  .product img {
    width: 100%;
    margin-right: 0;
    padding: 3em 0;
  }

  .info-text {
    padding-left: 0;
    text-align: center;
  }

  .info-text::before,
  .info-text::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Pantallas pequeñas (tablets y móviles grandes) */
@media (max-width: 768px) {
  .video-text-wrapper {
    flex-direction: column; /* Apila el video y el texto */
    align-items: center; /* Centra los elementos */
  }

  .video-container,
  .text-container {
    max-width: 100%;
    margin: 10px 0;
  }

  h2 {
    font-size: 1.6rem;
  }

  p {
    font-size: 0.9rem;
  }

  .header-content {
    margin-top: 2em;
    padding-bottom: 2em;
  }

  .title {
    font-size: 2.5em;
  }

  .header-images {
    flex-direction: column;
  }

  .header-images img {
    width: 80%;
  }

  .pagination {
    display: none;
  }

  .footer-menu,
  .footer-social {
    text-align: center;
  }
}


  
  /* Estilo para el visor de PDF */
  #pdf-container {
    margin-bottom: 2em;
    display: flex;
    justify-content: center;  /* Centra el canvas */
    align-items: center;
    position: relative;
    width: 100%;  /* Asegura que ocupe todo el ancho del contenedor */
  }
  
  canvas {
    border: 1px solid var(--secondary);
    border-radius: 15px;
    max-width: 100%;
   
  }
  
  /* SECCIÓN DE BOTONES */
  .navigation {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 1em;
    width: 44%;
}
  

  button {
    
    color: var(--primary);
    border: none;
    padding: -2.2em 31em;
    border-radius: 5em;
    cursor: pointer;
    font-size: -1em;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  
  .navegacion {
    display: flex;
    justify-content: space-between; /* Distribuye los botones a los extremos */
    align-items: center; /* Centra verticalmente */
    width: 100%;
    margin-bottom: 10px; /* Espacio entre botones y PDF */
}

.navegacion button {
    background: none;
    border: none;
    cursor: pointer;
}

.navegacion img {
    width: 50px;
}

/*----------------------------------------*/
@media (max-width: 1024px) {
  .row {
      flex-direction: column;
      align-items: center;
  }

  .pdf-wrapper, .nav-wrapper {
      width: 100%;
  }

  .pdf-container {
      max-width: 90%;
  }

  .btn-nav img {
      width: 35px; /* Ajustar tamaño en pantallas más pequeñas */
  }
  .nav-wrapper {
    flex: 1;
    display: flex
;
    flex-direction: column;
    align-items: initial;
}
}

/* Móviles (hasta 768px) */
@media (max-width: 768px) {

  .btn-nav img {
      width: 30px; /* Reducir tamaño en móviles */
  }

  .download-btn {
      width: 213%;
  }
}

/* Dispositivos muy pequeños (hasta 480px) */
@media (max-width: 480px) {
  .navegacion {
      flex-direction: column;
  }

  #pdf-canvas {
      max-height: 400px;
  }

  .download-btn {
      font-size: 14px;
      padding: 8px 15px;
  }
}
/* Estilo para el visor de PDF */
.pdf-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Contenedor de navegación */
.navegacion {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between; /* Coloca los botones a los extremos */
  align-items: center;
}

/* Ajuste de los botones */
.navegacion button {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Botón izquierdo */
#prev {
  left: -58px;
}

/* Botón derecho */
#next {
  right: -58px;
}

/* Ajuste de las imágenes dentro de los botones */
.navegacion img {
  width: 50px;
}

/* Estilos responsivos para móviles */
@media (max-width: 768px) {
  .navegacion button {
      width: 40px; /* Reduce el tamaño de los botones */
  }

  .navegacion img {
      width: 35px;
  }
  .navegacion button {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
}
/* Botón izquierdo */
#prev {
  left: -42px;
}

/* Botón derecho */
#next {
  right: -35px;
}

}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ======== Carrusel ========= */
/* Contenedor principal */
.slide {
  max-width: 1350px;
  margin: 0 auto;
  position: relative;
  padding: 4.5em;
}

/* Configuración de swiper */
.swiper {
  width: 100%;   /* Asegura que ocupe el 100% del contenedor */
  height: 400px; /* Ajusta la altura según tus necesidades */
  border-radius: 30px;
}

/* Estilo de cada diapositiva */
.swiper-slide {
  text-align: center;
  background: #17181a;
  height: 300px;  /* Ajusta la altura a un valor adecuado */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo de la imagen en cada diapositiva */
.swiper-slide img {
  width: 100%;        
  height: 100%;       
  object-fit: cover;  
}
/* Estilo de la paginación activa */
.swiper-pagination-bullet-active {
  background: var(--accent);
}

.swiper {
  width: 100%;   /* Asegura que ocupe todo el ancho disponible */
  height: 400px; /* Ajusta la altura según tus necesidades */
}


@media only screen and (max-width: 767px) {
  .galeria-contenedor {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  .galeria-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
}


/* ===== Ajuste para mover texto e imágenes un poco a la derecha ===== */
@media (min-width: 768px) {
  .header-content {
    padding-left: 40px; /* mueve todo el conjunto a la derecha */
  }

  .header-text {
    margin-left: 20px; /* mueve solo el texto un poco más a la derecha */
  }

  .header-images {
    margin-left: 18px; /* mueve las imágenes un poco más a la derecha */
  }
}


/* ===== Fondo alterno para pantallas móviles ===== */
@media (max-width: 767px) {
  .inicio {
    background-image: url("./assets/img/TEXTURAS/fondoproduc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/* =======================================================
   SECCIÓN 360 PREMIUM ENERGAIN (VERSIÓN FINAL LIMPIA)
   ======================================================= */

.viewer360-section{
  position: relative;
  padding: 80px 0;
  background: url("/assets/img/TEXTURAS/TEXTURA3.png") center/cover no-repeat;
  overflow: hidden;
}

/* Overlay opcional del fondo */
.viewer360-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.00);
  pointer-events:none;
  z-index:0;
}

/* Quitar título superior */
.viewer360-title{
  display:none;
}

/* =======================================================
   TÍTULOS LATERALES (FUERA DE LA CARD)
   ======================================================= */

/* DERECHO */
.viewer360-section::after{
  content:"VISTA 360°";
  position:absolute;
  right: 2px;                /* 🔥 MÁS SEPARADO */
  top: 50%;
  transform: translateY(-50%) rotate(90deg);

  font-weight: 900;
  font-size: clamp(52px, 4vw, 95px);
  letter-spacing: .24em;
  text-transform: uppercase;

  color: rgba(10,10,10,.38);   /* 🔥 MÁS OSCURO */
  text-shadow: 0 0 22px rgba(0,0,0,.12);

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

/* IZQUIERDO */
.viewer360-side-left{
  position:absolute;
  left: 2px;                 /* 🔥 MÁS SEPARADO */
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);

  font-weight: 900;
  font-size: clamp(52px, 4vw, 95px);
  letter-spacing: .24em;
  text-transform: uppercase;

  color: rgba(10,10,10,.38);
  text-shadow: 0 0 22px rgba(0,0,0,.12);

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

/* =======================================================
   CARD 360
   ======================================================= */

.viewer360-wrap{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content:center;
  padding:0 20px;
}

.viewer360-card{
  width:min(100%, 1100px);
  border-radius:22px;
  overflow:hidden;
  background:#fff;

  border:1.5px solid rgba(57,255,136,.45);

  box-shadow:
    0 25px 70px rgba(0,0,0,.18),
    0 0 55px rgba(57,255,136,.30);

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.viewer360-card:hover{
  transform: translateY(-7px);
  border-color: rgba(57,255,136,.85);

  box-shadow:
    0 35px 100px rgba(0,0,0,.22),
    0 0 95px rgba(57,255,136,.55);
}

#viewer360-frame{
  width:100%;
  height:680px;
  border:0;
  display:block;
  background:#fff;
  border-radius:18px;
}

@media (max-width:768px){
  #viewer360-frame{ height:480px; }
}

/* Responsive */
@media (max-width: 900px){
  .viewer360-section::after,
  .viewer360-side-left{
    display:none;
  }
}