/* Envoltorio del slider que oculta desbordamientos */
.slider-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 20px 20px;
    margin-top: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    background-image: url('/img/body_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom:10px solid transparent;
	
}

/* Ocultar barra de scroll estéticamente fea en algunos navegadores conservando la funcionalidad */
.slider-wrapper::-webkit-scrollbar { 
    height: 20px;
}
.slider-wrapper::-webkit-scrollbar-thumb {
    background-color: #cc65d3; /* Gris medio para el scroll */
	border:2px solid white;
    border-radius: 10px;
}
.slider-wrapper::-webkit-scrollbar-thumb:hover {
	cursor:pointer;
	}

/* Forzamos al contenedor principal a romper el límite de ancho */
.main-container, 
.camp-selection-section {
    max-width: 100% !important;  /* Elimina el tope de 1200px/1400px */
    width: 100% !important;
    padding-left: 0px !important;  /* Margen de cortesía para que no se pegue al borde físico del monitor */
    padding-right: 0px !important;
    box-sizing: border-box;
}

/* Contenedor flex que estira los carteles en línea */
.camp-slider {
    display: flex;
    gap: 25px;
    width: max-content; /* Obliga a los elementos a quedarse en una sola línea horizontal */
    padding-right: 20px; /* Margen final para el scroll */
}

/* Cartel individual (Camp Card) */
.camp-card {
    background: #ffffff;
    border: 1px solid #999999; /* Borde gris medio */
    border-radius: 12px;
    width: 280px; /* Ancho fijo para cada cartel en el slider (móviles/tablets) */
    padding: 15px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.camp-card:hover {
    transform: translateY(-5px);
    border-color: #cc65d3; /* Cambia al tono morado en hover */
    box-shadow: 0 10px 20px rgba(204, 101, 211, 0.1);
}

/* --- MODIFICACIÓN PARA MOSTRAR EL CARTEL COMPLETO (SIN RECORTES) --- */

.camp-image-placeholder {
    width: 100%;
    height: 400px;         /* Aumentamos la altura para que los carteles luzcan bien a alto completo */
    background-color: #fafafa; /* Un fondo gris muy limpio para los huecos laterales/verticales */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    border: 1px dashed #dbdbdb; /* Un borde punteado más fino y suave */
    overflow: hidden;
}

.camp-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* ¡Aquí está el cambio! Muestra el cartel 100% íntegro sin comerse nada */
}

/* Título debajo del cartel */
.camp-title {
    font-size: 1.3rem; /* Ajustado para que tenga mejor equilibrio */
    color: #333333; /* Gris oscuro */
    margin-bottom: 8px;
    font-weight: 700;
}

.form-section h1, .camp-selection-section h1 {
    font-size: 2.6rem;
    color: #333333; /* Gris oscuro */
}

.camp-description {
    font-size: 0.9rem;
    color: #666666;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-grow: 1; /* Empuja el botón hacia abajo para que todos queden alineados */
}

/* Botón seleccionar */
.btn-select {
    background-color: transparent;
    color: #cc65d3; /* Tono morado */
    border: 2px solid #cc65d3;
    width: 100%;
    padding: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
}

.btn-select:hover {
    background-color: #cc65d3;
    color: #ffffff;
}

/* Indicador de deslizar */
.swipe-indicator {
    text-align: center;
    color: #999999;
    font-size: 0.85rem;
    margin-top: 15px;
}


/* ==========================================================================
   MODIFICADO: OPTIMIZACIÓN INTELIGENTE PARA PANTALLAS GRANDES (>= 1200px)
   ========================================================================== */

@media (min-width: 1200px) {
    .main-container {
        max-width: 1400px; 
        padding: 40px 10px;
    }
	
	/* Forzamos a que el slider SIEMPRE permita scroll horizontal porque tienes 7 elementos */
    .slider-wrapper {
        overflow-x: auto !important;
        width: 100%;
    }

    .camp-slider {
        width: max-content !important; /* Permite que los 7 carteles se estiren horizontalmente sin límite */
        justify-content: flex-start !important; /* Alinea al inicio para empezar el scroll de izquierda a derecha */
        gap: 30px; /* Un poco más de separación ya que tenemos espacio de sobra */
    }

    /* Le damos un tamaño fijo excelente a cada tarjeta en pantallas gigantes */
    .camp-card {
        width: 320px !important; /* Ancho fijo ideal para que los carteles y textos se lean perfectos */
        flex-shrink: 0 !important; /* Evita radicalmente que el navegador intente encoger las tarjetas */
    }

    /* CASO A: SI HAY 5 CAMPAMENTOS O MENOS (Se ajustan y se centran sin scroll) */
    .camp-slider:not(:has(.camp-card:nth-child(6))) {
        width: 100%;
        justify-content: center;
        padding-right: 0;
    }
    .slider-wrapper:not(:has(.camp-card:nth-child(6))) {
        overflow-x: visible;
    }
    .camp-slider:not(:has(.camp-card:nth-child(6))) .camp-card {
        width: calc(20% - 20px); /* Reparte el espacio perfectamente al 20% cada una */
    }
    .camp-slider:not(:has(.camp-card:nth-child(6))) + .swipe-indicator {
        display: none; /* Oculta el texto de deslizar porque entran todos */
    }

    /* CASO B: SI HAY MÁS DE 5 CAMPAMENTOS (Como tus 7 actuales. Se activa el slider elegante) */
    .camp-slider:has(.camp-card:nth-child(6)) {
        width: max-content; /* Mantenemos la línea infinita para que funcione el scroll */
        justify-content: flex-start;
    }
    .slider-wrapper:has(.camp-card:nth-child(6)) {
        overflow-x: auto; /* Forzamos el scroll horizontal */
    }
    .camp-slider:has(.camp-card:nth-child(6)) .camp-card {
        /* Hacemos que midan el 18.5% del ancho de la pantalla de referencia (viewport width) 
           para garantizar que se vean 5 completas y asome un trozo de la sexta */
        width: 18.2vw; 
        min-width: 250px;
    }
    .camp-slider:has(.camp-card:nth-child(6)) + .swipe-indicator {
        display: block; /* Muestra el texto de deslizar porque hay contenido oculto */
    }
}