/* ========================================
  CAROUSEL STYLES
======================================== */

:root{
 --car-carousel-bg:royalblue;
}

.car-carousel-section{
 padding:80px 0;
 background:var(--car-carousel-bg);
 color:white;
}

.car-container{
 max-width:1200px;
 margin:0 auto;
 padding:0 10px;
}

.car-carousel-container{
 position:relative;
 max-width:900px;
 margin:0 auto;
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);
}

.car-carousel-wrapper{
 position:relative;
 width:100%;
 height:500px;
 overflow:hidden;
 z-index:1;
}

/* Transition effect buttons */
button[onclick^="setTransitionEffect"]{
 cursor:pointer;
 margin:5px;
 padding:10px 15px;
 background:#667eea;
 color:white;
 border:none;
 border-radius:5px;
 transition:background 0.3s ease;
}

button[onclick^="setTransitionEffect"]:hover{
 background:#5a67d8;
}
.car-carousel-slide{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 opacity:0;
 transform:translateX(100%);
 transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
 display:flex;
 flex-direction:column;
 background:linear-gradient(45deg, #667eea, #764ba2);
 z-index:1;
 backface-visibility:hidden;
}

.car-carousel-slide.car-active{
 opacity:1;
 transform:translateX(0);
 z-index:2;
}

.car-carousel-slide.car-prev{
 transform:translateX(-100%);
 z-index:1;
}

/* Fallback for first slide visibility */
.car-carousel-slide:first-child{
 opacity:1;
 transform:translateX(0);
 z-index:2;
}

/* Slide transition (default) */
.car-carousel-wrapper.car-slide-transition .car-carousel-slide{
 transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

/* Fade transition */
.car-carousel-wrapper.car-fade-transition .car-carousel-slide{
 transition:opacity 0.6s ease-in-out;
 transform:translateX(0) !important;
}

.car-carousel-wrapper.car-fade-transition .car-carousel-slide.car-active{
 opacity:1;
 z-index:2;
}

.car-carousel-wrapper.car-fade-transition .car-carousel-slide:not(.car-active){
 opacity:0;
 z-index:1;
}

.car-carousel-wrapper.car-fade-transition .car-carousel-slide.car-prev{
 transform:translateX(0) !important;
 opacity:0;
}

/* Fold transition */
.car-carousel-wrapper.car-fold-transition .car-carousel-slide{
 transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
 transform-origin:center left;
 backface-visibility:hidden;
}

.car-carousel-wrapper.car-fold-transition .car-carousel-slide.car-active{
 opacity:1;
 transform:perspective(800px) rotateY(0deg);
}

.car-carousel-wrapper.car-fold-transition .car-carousel-slide:not(.car-active):not(.car-prev){
 transform:perspective(800px) rotateY(90deg);
}

.car-carousel-wrapper.car-fold-transition .car-carousel-slide.car-prev{
 transform:perspective(800px) rotateY(-90deg);
}

/* Vertical slide transition */
.car-carousel-wrapper.car-vertical-transition .car-carousel-slide{
 transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
 transform:translateY(100%);
}

.car-carousel-wrapper.car-vertical-transition .car-carousel-slide.car-active{
 opacity:1;
 transform:translateY(0);
}

.car-carousel-wrapper.car-vertical-transition .car-carousel-slide.car-prev{
 transform:translateY(-100%);
}

/* Diagonal slide transition */
.car-carousel-wrapper.car-diagonal-transition .car-carousel-slide{
 transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
 transform:translate(100%, 100%);
}

.car-carousel-wrapper.car-diagonal-transition .car-carousel-slide.car-active{
 opacity:1;
 transform:translate(0, 0);
}

.car-carousel-wrapper.car-diagonal-transition .car-carousel-slide.car-prev{
 transform:translate(-100%, -100%);
}

.car-carousel-slide.car-prev{
 transform:translateX(-100%);
}

.car-carousel-slide img{
 width:100%;
 height:84%; /* Adjust to leave space for caption */
 object-fit:cover;
 position:relative;
 z-index:1;
}

.car-slide-caption{
 height:16%; /* Allocate space for caption */
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 background:#1e3a8a; /* Blue background */
 color:white;
 padding:1px 1px; /* Reduced padding */
 text-align:center;
 z-index:2;
 gap:1px; /* Reduced gap between title and description */
}

.car-caption-title{
 font-size:1.2rem; /* Slightly smaller font */
 font-weight:bold;
 margin:0; /* Removed margin */
}

.car-caption-description{
 font-size:0.8rem; /* Slightly smaller font */
 color:#f0f0ff;
 margin:0; /* Removed margin */
}

/* Botones de navegación */
.car-carousel-btn{
 position:absolute;
 top:40%; /* Adjusted position */
 transform:translateY(-50%);
 background:rgba(255, 255, 255, 0.2);
 color:white;
 border:none;
 font-size:2rem;
 padding:12px 16px; /* Adjusted padding */
 cursor:pointer;
 border-radius:50%;
 transition:all 0.3s ease;
 z-index:3;
 backdrop-filter:blur(10px);
}

.car-carousel-btn:hover{
 background:rgba(255, 255, 255, 0.3);
 transform:translateY(-50%) scale(1.5);
}

.car-prev-btn{
 left:20px;
}

.car-next-btn{
 right:20px;
}

/* Indicadores de puntos */
.car-carousel-dots{
 position:absolute;
 bottom:5px; /* Raised slightly to avoid overlap */
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:12px; /* Slightly reduced gap */
 z-index:3;
}

.car-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.5);
 cursor:pointer;
 transition:all 0.3s ease;
}

.car-dot.car-active{
 background:white;
 transform:scale(1.2);
}

.car-dot:hover{
 background:rgba(255, 255, 255, 0.8);
}

/* Animaciones de scroll */
.car-fade-in{
 opacity:0;
 transform:translateY(30px);
 transition:all 0.6s ease;
}

.car-fade-in.car-visible{
 opacity:1;
 transform:translateY(0);
}

/* Responsive para carrusel */
@media (max-width:768px){
 .car-carousel-wrapper{
 height:400px;
 }
 
 .car-carousel-slide img{
 height:80%; /* Adjust for caption space */
 }
 
 .car-slide-caption{
 height:20%; /* Allocate space for caption */
 padding:1px 1px; /* Further reduced padding */
 gap:1px; /* Minimal gap */
 }
 
 .car-caption-title{
 font-size:1.0rem;
 margin:0;
 }
 
 .car-caption-description{
 font-size:0.6rem;
 color:cyan;
 margin:0;
 }
 
 .car-carousel-btn{
 padding:8px 12px; /* Reduced button size */
 font-size:1.3rem;
 }
 
 .car-prev-btn{
 left:5px;
 }
 
 .car-next-btn{
 right:5px;
 }
}

@media (max-width:480px){
 .car-carousel-wrapper{
 height:350px;
 }
 
 .car-carousel-section{
 padding:60px 0;
 }
 
 .car-carousel-slide img{
 height:70%; /* Adjust for caption space */
 }
 
 .car-slide-caption{
 height:30%; /* Allocate more space for caption on small screens */
 padding:2px 5px;
 gap:1px;
 }
 
 .car-caption-title{
 font-size:0.9rem;
 margin:0;
 }
 
 .car-caption-description{
 font-size:0.75rem;
 margin:0;
 }
 
 .car-carousel-btn{
 padding:6px 10px;
 font-size:1.2rem;
 }
 
 .car-prev-btn{
 left:3px;
 }
 
 .car-next-btn{
 right:3px;
 }
}

/* Override to ensure carousel is visible */
.car-carousel-container{
  opacity:1 !important;
  transform:translateY(0) !important;
}

.car-carousel-slide.car-active{
  opacity:1 !important;
  transform:translateX(0) !important;
}