@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;600&family=Lato:ital,wght@0,400;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400&display=swap');

body{
    font-family: sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #0b0b0b;
}

#menu a{
    /*font-family: serif; */
    color: white;
}

#hover:hover{
    border-bottom: 2px solid #fff;
}

header{
    background-color: #0b0b0b;
}
.logo {
    text-align: center;
}



@media (min-width: 768px){
    #principal  {
           margin-top: 2.5rem;
           display: grid;
           grid-template-columns: 50% 50%;
           max-width: 84%;
           font-size: 25px;
           line-height: 43px;
           text-align: left!important;
          padding-bottom: 2rem;
          margin-left: 7rem!important;
          margin-right: 7rem!important;
        color: white;
        }

    .home h1{
      padding: 0!important;
      font-size: 45px!important;
      border-top: none!important;
      max-width: 84%;
      font-family: 'Lato', sans-serif;
    font-family: 'Cabin', sans-serif; 
    line-height: 50px;
    }    
    .home p{
        padding-top: 2.9rem!important;
        font-size: 23px!important;
        line-height: 33px;
        
    }   
    
    .img-principal{
        text-align: center;
    }
    .img-principal img{
        width: 100%;
       
    }
   

}
@media (max-width: 768px){
.img-principal img{
    
 margin-top: 2rem;
 margin-bottom: 2rem;

}
}


.wave{
    width: 100%;
    left: 0;
    position: absolute;
}

/* Estilos para la sección de paquetes */
.sectCarru {
    padding: 5rem 0;
    background-color: rgb(7, 18, 43);
    position: relative;
  }
  
  .section-title-carr {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
  }
  
  .section-subtitle {
    text-align: center;
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 3rem;
    display: block;
  }
  
  .box {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  .dentroCard {
    padding: 2rem;
    flex-grow: 1;
  }
  
  .package-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
  }
  
  .package-header h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .package-price {
    font-size: 2rem;
    font-weight: 700;
    color: #3498db;
  }
  
  .package-price span {
    font-size: 1rem;
    font-weight: normal;
    color: #7f8c8d;
  }
  
  .listcards {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
  }
  
  .listcards li {
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.5;
  }
  
  .listcards li i {
    position: absolute;
    left: 5px;
    top: 4px;
    color: #2ecc71;
  }
  
  .package-features {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  .package-features i {
    margin-right: 0.5rem;
    color: #3498db;
  }
  
  .cardImg {
    background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .cardImg i {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .cardImg h1 {
    font-size: 1.5rem;
    margin: 0;
  }
  
  .package-btn {
    display: block;
    text-align: center;
    background: #3498db;
    color: white;
    padding: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .package-btn:hover {
    background: #2980b9;
  }
  
  .package-btn.highlighted {
    background: #e74c3c;
    position: relative;
  }
  
  .package-btn.highlighted:hover {
    background: #c0392b;
  }
  
  /* Estilos para el carrusel */
  .owl-carousel .item {
    padding: 0 15px;
  }
  
  .owl-nav {
    text-align: center;
    margin-top: 20px;
  }
  
  .owl-nav button {
    background: #3498db !important;
    color: white !important;
    margin: 0 10px;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .section-title {
      font-size: 2rem;
    }
    
    .dentroCard {
      padding: 1.5rem;
    }
  }
  
  @media (max-width: 576px) {
    .sectCarru {
      padding: 3rem 0;
    }
    
    .package-features {
      flex-direction: column;
      gap: 0.5rem;
    }
  }
/* nosotros */

.nos{
    background: url(../image/nosotros3.png) no-repeat center center;
    height: 100%;
    width: 100%;
   /* position: absolute; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*opacity: 0.7; */
   /* filter: grayscale(65%); */
 /*  -webkit-filter: grayscale(65%); */
   padding-bottom: 10rem
}

@media (max-width: 687px){
.p-nos{
    font-size: 13.6px;
    padding-top: 1rem;
}
}
.p-nos{
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 1.5rem;
}
.titulos{
    text-align: center;
    font-family: 'Lato', sans-serif;
    padding-top: 2rem;
    color: white;
    font-weight: bold;
    font-size: 2rem;
}

.displayr{
    padding-left: 4rem;
    padding-right: 4rem;
}

@media (min-width: 1300px){
.displayr{
    text-align: center;
    padding-left: 15rem;
   padding-right: 15rem;
}
}
.parrafo{
    width: 100%;
    height: 440px;
    background-image: linear-gradient(180deg, #ffffff 0, #ffffff 12.5%, #f6fafa 25%, #e5f3f2 37.5%, #d3ebeb 50%, #c1e3e5 62.5%, #afdbe1 75%, #9fd4de 87.5%, #91cddc 100%);
    font-size: 15px;
    border-radius: 2rem;
    font-size: 22px;
    text-align: center;
    padding-top: 1rem;
    box-shadow: 0px 0px 15px 15px #918984;
    -webkit-box-shadow: -7px 11px 9px 4px #312c29;
}

.parrafo p{
    color: black;
}


.foot{
    background-color: black;
}

.contac{
    color: #fff;
}

@media (min-width: 1300px){
   a .footed{
        display: none!important;
        text-align: center;
    }
    }

    /* contacto */
   .contaco{
    /* background-image: radial-gradient(circle at 87.5% 12.5%, #a0c1c4 0, #a0b9b9 12.5%, #9fb0af 25%, #9ea6a5 37.5%, #9c9c9c 50%, #999294 62.5%, #95888e 75%, #91808a 87.5%, #8c7987 100%);
   /*background-image: radial-gradient(circle at 87.5% 12.5%, #ffffff 0, #ffffff 12.5%, #f6f8f8 25%, #e6f1f1 37.5%, #d5eaea 50%, #c4e2e4 62.5%, #b4dbe0 75%, #a4d4dd 87.5%, #96cedb 100%); */
   /*background-color: #fff; */
   /*background-image: radial-gradient(circle at 87.5% 12.5%, #ffffff 0, #ffffff 12.5%, #f4ffff 25%, #e4fdf8 37.5%, #d2f6f1 50%, #c0eeec 62.5%, #aee7e9 75%, #9ee1e7 87.5%, #90dae7 100%); */
   background-color: rgb(7, 18, 43);
    text-align: center;
    padding-bottom: 1.3em;
   }

   @media (min-width: 768px){
   .dis{
    display: grid;
    grid-template-columns: 50% 50%;
   }

   }
   .form{
    background-color: white; 
    width: 90%;
    max-width: 400px;
    border-radius: 1em;
    padding: 3.5em 1.5em;
    margin: auto;
   }

   .form_container{
    width: 100%;
    display: grid;
    gap: 1em;
    grid-auto-columns: 100%;
   }

   .form_input{
    padding: .8em 1em;
   }
   .form_input--message{
    resize: none;
    padding: 1.8em 1em;
    margin-bottom: .5em;
   }
   .form_cta{
    background-color: #089FE0;
    font-size: 1rem;
    color: #fff;
    border: none;
    font-weight: 500;
    padding: .7em 0;
    border-radius: .2em;
    cursor: pointer;
   }

   .iopd{
    color: white;
    padding-top: 2em;
   }
   .iopd p{
    font-size: 20px;
   }
   .cdmx{
    padding-top: 5rem;
   }
   @media (min-width: 768px){
    .iopd{
        padding-top: 0em;
    }
   }

   .whats{
    width: 4%;
   }

   /* clientes */

   .clientes{
    background-color: white!important;
   }
   .tit-cli{
   color: #939393!important;
   }

   #salinas{
    background-image: url(../image/avit.jpg);
    background-size: 100% 100%;
   }
 #carrier{
    background-image: url(../image/bose.png);
    background-size: 100% 100%;
 }
 #york{
    background-image: url(../image/roma.png);
    background-size: 100% 100%;
 }
 #daikin{
    background-image: url(../image/coca.png);
    background-size: 100% 100%;
 }
   .marcas{
    width: 181px;
    height: 109px;
    margin: 42px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    display: inline-block;
}

@media (min-width: 888px){
.conte-clien{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
   text-align:  center;
}
}

.conte-clien{
    text-align: center;
}

.floatre{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.floatre:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:16px;
}


/* estilos a la pagina de exito */

.globaexi{
    background-color: rgb(7, 18, 43);
    text-align: center;
}

.globaexi h1{
   font-size: 2.4rem;
   color: white;
   padding-top: 12rem ;
}

.checkexi{
    color: #25d366;
    padding-top: 3rem;
   font-size: 5.5rem;
}

ul {
    list-style-type: none; /* Elimina las viñetas por defecto */
  }
  .listcards li {
    margin-bottom: 10px; /* Espacio entre cada ítem de la lista */
    padding-left: 25px; /* Asegura que haya espacio entre la viñeta y el texto */
    text-indent: -25px; /* Alinea el texto de las líneas posteriores con la primera */
  }
    
  .listcards li::before {
    margin-right: 10px; /* Espacio entre la palomita y el texto */
    color: green; /* Cambia el color de la palomita a verde */
    font-size: 1.5em; /* Puedes ajustar el tamaño de la palomita si lo deseas */
  }

/* ===== Sección de Productos ===== */
.productos-section {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #f9f9f9 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
  }
  
  .productos-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%23f1f1f1" d="M0,0 L100,0 L100,100 L0,100 Z" opacity="0.05"/></svg>');
    background-size: 30px 30px;
    z-index: 0;
  }
  
  .productos-section .container {
    position: relative;
    z-index: 1;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .section-subtitle {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }
  
  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.2;
  }
  
  .section-description {
    font-size: 1.1rem;
    color: #7f8c8d;
    line-height: 1.6;
  }
  
  .productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
  }
  
  .producto-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
  }
  
  .producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }
  
  .producto-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #e74c3c;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
  }
  
  .producto-badge::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    70% {
      transform: scale(1.4);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  
  .producto-imagen-container {
    position: relative;
    overflow: hidden;
    height: 200px;
  }
  
  .producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .producto-card:hover .producto-imagen {
    transform: scale(1.05);
  }
  
  .producto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .producto-card:hover .producto-overlay {
    opacity: 1;
  }
  
  .quick-view-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
  }
  
  .quick-view-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .quick-view-btn i {
    margin-right: 0.5rem;
  }
  
  .producto-content {
    padding: 1.5rem;
  }
  
  .producto-category {
    font-size: 0.8rem;
    color: #3498db;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .producto-titulo {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }
  
  .producto-descripcion {
    font-size: 0.95rem;
    color: #7f8c8d;
    margin-bottom: 1.25rem;
    line-height: 1.5;
  }
  
  .producto-rating {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
  }
  
  .producto-rating i {
    color: #f1c40f;
    font-size: 0.9rem;
    margin-right: 0.15rem;
  }
  
  .rating-count {
    font-size: 0.8rem;
    color: #95a5a6;
    margin-left: 0.5rem;
  }
  
  .producto-precio-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .producto-precio {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
  }
  
  .producto-precio-original {
    font-size: 1rem;
    color: #95a5a6;
    text-decoration: line-through;
  }
  
  .producto-descuento {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    background-color: #2ecc71;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
  }
  
  .producto-actions {
    display: flex;
    gap: 0.75rem;
  }
  
  .producto-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #3498db;
    color: white;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .producto-btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  }
  
  .wishlist-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    color: #95a5a6;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .wishlist-btn:hover {
    color: #e74c3c;
    background-color: #fef0f0;
  }
  
  .section-footer {
    text-align: center;
    margin-top: 2rem;
  }
  
  .view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #3498db;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  .view-all-btn:hover {
    color: #2980b9;
    background-color: rgba(52, 152, 219, 0.1);
  }
  
  /* ===== Responsive Design ===== */
  @media (max-width: 1200px) {
    .productos-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    .section-title {
      font-size: 2rem;
    }
    
    .section-description {
      font-size: 1rem;
    }
    
    .productos-grid {
      gap: 1.5rem;
    }
  }
  
  @media (max-width: 576px) {
    .productos-section {
      padding: 3rem 0;
    }
    
    .section-title {
      font-size: 1.75rem;
    }
    
    .producto-actions {
      flex-direction: column;
    }
    
    .wishlist-btn {
      width: 100%;
    }
  }


 /* Sección del producto */
.producto-detalle {
    background-color: #ffffff;
   /*  height: calc(100vh - 100px - -140px); /* 100vh - altura del header y footer */
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* Alineamos al inicio para más espacio en la parte inferior */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding-top: 105px; /* Aseguramos espacio arriba para que no se superponga con el header */

}


/* Contenedor de la sección */
.producto-detalle .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

/* Sección de imágenes del producto */
.producto-detalle .producto-imagenes {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 30px; /* Aseguramos un buen espacio entre la imagen y la info del producto */
    padding-right: 20px;
}

/* Imagen principal */
.producto-detalle .producto-imagen-principal {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.producto-detalle .producto-imagen-principal:hover {
    transform: scale(1.05);
}

/* Sección de imágenes secundarias */
.producto-detalle .producto-imagenes-secundarias {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes se acomoden en varias filas */
    justify-content: center;
    margin-top: 20px;
    gap: 10px; /* Añadimos un espacio entre las imágenes secundarias */
}

/* Estilo de las imágenes secundarias */
.producto-detalle .producto-imagen-secundaria {
    width: 80px;
    height: auto;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex-grow: 0; /* Evita que las imágenes crezcan */
    flex-shrink: 1; /* Permite que se encojan si es necesario */
    flex-basis: 80px; /* Tamaño base para las imágenes secundarias */
    margin-bottom: 10px; /* Añadir un pequeño margen inferior */
    margin-top: 15px;
}

.producto-detalle .producto-imagen-secundaria:hover {
    transform: scale(1.1);
}

/* Información del producto */
.producto-detalle .producto-info {
    flex: 1 1 50%;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}

.producto-detalle .producto-titulo {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.producto-detalle .producto-descripcion {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
}

.producto-detalle .producto-caracteristicas {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.producto-detalle .producto-caracteristicas li {
    font-size: 1rem;
    color: #777;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.producto-detalle .producto-caracteristicas li:before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color:  green;
    font-size: 1.2rem;
}

.producto-detalle .producto-precio {
    font-size: 2rem;
    font-weight: bold;
    color: #f05a28;
    margin: 20px 0;
    letter-spacing: 1px;
    text-align: center;
}

/* Botón de compra */
.producto-detalle .producto-btn {
    background-color:  #3498db;
    color: white;
    border: none;
    padding: 20px 40px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
 
}

.producto-detalle .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px; /* Añadimos espacio de padding */
}

.producto-detalle .producto-btn:hover {
    background-color: #105786;
    transform: translateY(-2px);
}

/* Responsividad: En pantallas pequeñas, se organizan los elementos en columna */
@media (max-width: 768px) {
    .producto-detalle .container {
        flex-direction: column;
        align-items: center;
    }
    .producto-detalle {
        height: calc(100vh - 70px - -220px); /* 100vh - altura del header y footer */}

    .producto-detalle .producto-imagenes,
    .producto-detalle .producto-info {
        max-width: 100%;
        margin-bottom: 30px;

    }

    .producto-detalle .producto-imagen-principal {
        max-width: 100%;
        box-shadow: none;
    }

    .producto-detalle .producto-imagenes-secundarias {
        justify-content: center;
        margin-top: 20px;
        gap: 10px; /* Añadir un poco de espacio entre las imágenes */
    }

    .producto-detalle .producto-imagen-secundaria {
        width: 90px; /* Ajusta el tamaño de las miniaturas */
        margin: 5px;
        flex-basis: 90px; /* Asegura que las imágenes se ajusten bien en filas */
    }

    .producto-detalle .producto-info {
        padding-left: 0;
    }

}
.producto-detalle .producto-imagen-principal {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 20px; /* Separación de la imagen principal con las secundarias */
}


/* Contenedor de la imagen imagen completa */
/* Contenedor del carrusel */
.producto-imagen-expandida {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* Mostrar la imagen expandida */
.producto-imagen-expandida.show {
    display: flex;
}

/* Contenedor del carrusel */
.carousel-container {
    position: relative;
    width: 80%;
    max-width: 900px;
}

/* Carrusel de imágenes */
.carousel {
    display: flex;
    transition: transform 0.3s ease;
}

/* Ocultar las imágenes secundarias fuera del área visible */
.carousel-image {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: none;
}

/* Mostrar solo la imagen activa */
.carousel-image.active {
    display: block;
}

/* Estilo para los botones del carrusel */
.carousel-buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.carousel-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}






/* Estilos generales para la sección FAQ */
.faq {
    background-color: #f9f9f9; /* Fondo gris suave */
    padding: 40px 0; /* Espaciado superior e inferior */
}

.faq .container {
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 0 20px; /* Espaciado lateral */
}

.faq .section-title {
    font-weight: bold;
    margin-bottom: 30px;
    color: #060606; /* Azul rey para el título */
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 2rem; /* Tamaño de fuente más grande */
    padding-top: 2rem; /* Espaciado superior */
}

/* Estilos para cada ítem de la FAQ */
.faq-item {
    margin-bottom: 20px; /* Espaciado entre los ítems */
    border-bottom: 2px solid #e5e5e5; /* Línea de separación entre ítems */
}

/* Estilo de las preguntas */
.faq-question {
    width: 100%;
    background-color: #1a5a99; /* Azul rey para las preguntas */
    color: white;
    padding: 15px;
    text-align: left;
    border: none;
    font-size: 1.2rem; /* Tamaño de fuente más grande */
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover para las preguntas */
.faq-question:hover {
    background-color: #145b8f; /* Azul más oscuro al hacer hover */
    transform: scale(1.05); /* Ligeramente agrandar al pasar el mouse */
}

/* Estilo de las respuestas */
.faq-answer {
    display: none; /* Ocultar las respuestas por defecto */
    margin-top: 10px;
    padding: 15px;
    background-color: #f2f7fc; /* Fondo blanco roto para las respuestas */
    color: #1a5a99; /* Azul rey para el texto */
    font-size: 1rem; /* Tamaño de fuente de las respuestas */
    border-radius: 8px; /* Bordes redondeados */
    transition: opacity 0.3s ease, max-height 0.5s ease-out; /* Transiciones suaves */
    opacity: 0; /* Inicialmente opaca */
    max-height: 0; /* Inicialmente altura 0 */
}

/* Cuando la respuesta se muestra */
.faq-answer.show {
    display: block;
    opacity: 1; /* Respuesta visible */
    max-height: 200px; /* Altura máxima para el deslizamiento */
    transition: opacity 0.3s ease, max-height 0.5s ease-in; /* Transiciones para visibilidad */
}

/* Estilo para las preguntas activas */
.faq-item.active .faq-question {
    font-weight: bold; /* Negrita para las preguntas activas */
    background-color: #0e8ab3; /* Azul más brillante para las preguntas activas */
}

/* Estilo del contenedor FAQ en dispositivos pequeños */
@media (max-width: 768px) {
    .faq-question {
        font-size: 1rem; /* Reducir el tamaño de la fuente en pantallas pequeñas */
    }

    .faq-answer {
        font-size: 0.9rem; /* Reducir el tamaño de la fuente de las respuestas */
    }
}







/* Estilo para el Spinner */
#loading-spinner {
    display: none; /* Asegura que esté oculto inicialmente */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 20px;
    z-index: 9999;
    pointer-events: none;
  }
  
  .spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Formulario de pago */
#payment-form-container {
    background-color: white;
    padding: 40px;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.input-field {
    margin-bottom: 20px;
}

.input-field label {
    font-size: 14px;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.input-field input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

#card-element {
    margin-bottom: 20px;
}

.submit-button {
    background-color: #28a745;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 5px;
    width: 100%;
    font-size: 18px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #218838;
}

#error-message {
    color: red;
    font-size: 14px;
    text-align: center;
}


#form-message {
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 10px;
    font-weight: bold;
    display: none;
  }
  
  #form-message.success {
    color: green;
    background-color: #d4edda;
    border: 1px solid #28a745;
  }
  
  #form-message.error {
    color: red;
    background-color: #f8d7da;
    border: 1px solid #dc3545;
  }

  /* Mensaje de confirmación oculto inicialmente */
#mensajeConfirmacion {
    display: none;
    color: #28a745;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  #zoomModal .modal-dialog {
    max-width: 90vw; /* ancho máximo 90% de la ventana */
    max-height: 90vh; /* alto máximo 90% de la ventana */
  }
  
  #zoomModal .modal-body {
    position: relative;
    padding: 0; /* quita padding para que la imagen ocupe todo */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  #zoomedImage {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain; /* que la imagen mantenga proporción y no se distorsione */
    border-radius: 8px;
  }
  #prevBtn, #nextBtn {
    font-size: 2rem;
    opacity: 0.7;
  }
  
  #prevBtn:hover, #nextBtn:hover {
    opacity: 1;
  }
  
  
  /* Añade esto al final de tu archivo CSS */

/* Ajustes para móviles */
@media (max-width: 768px) {
    .producto-detalle {
        height: auto; /* Cambia de altura fija a automática */
        padding-top: 80px; /* Reduce el padding superior */
        padding-bottom: 20px; /* Añade padding inferior */
    }

    .producto-testimonios {
        margin-top: 30px !important; /* Reduce el margen superior */
        padding-bottom: 20px; /* Añade padding inferior */
    }

    .producto-testimonios .row {
        flex-direction: column; /* Apila los testimonios verticalmente */
    }

    .producto-testimonios .col-md-4 {
        width: 100%; /* Ocupa todo el ancho */
        margin-bottom: 15px; /* Espacio entre testimonios */
    }

    .producto-imagenes, 
    .producto-info {
        padding-right: 0 !important; /* Elimina padding derecho */
        padding-left: 0 !important; /* Elimina padding izquierdo */
    }

    /* Reduce el tamaño de la imagen principal en móviles */
    .producto-imagen-principal {
        max-width: 100%;
        margin-bottom: 15px;
    }

    /* Ajusta el tamaño de las miniaturas */
    .producto-imagen-secundaria {
        width: 70px;
        height: 70px;
    }

    /* Reduce el tamaño del título */
    .producto-titulo {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    /* Ajusta el padding del contenedor principal */
    .producto-detalle .container {
        padding: 0 15px;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 576px) {
    .producto-titulo {
        font-size: 1.5rem;
    }

    .producto-descripcion {
        font-size: 1rem;
    }

    .producto-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .producto-testimonios h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    /* Reduce aún más las miniaturas */
    .producto-imagen-secundaria {
        width: 60px;
        height: 60px;
    }
}