/* ==========================================================
   SURSUM VIAJES - STYLE.CSS (VERSION DEFINITIVA)
========================================================== */

/* 1. RESET Y BASE */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Arial', sans-serif; }
body { background:#F8FAFC; color:#21145f; }

/* 2. HEADER */
.header { height:90px; background:white; display:flex; align-items:center; justify-content:space-between; padding:0 8%; position:relative; z-index:10; box-shadow:0 5px 20px rgba(0,0,0,.05); }
.logo img { width:150px; }
.header nav { display:flex; gap:30px; }
.header nav a { text-decoration:none; color:#3b276f; font-size:14px; font-weight:600; }
.header nav a:hover { color:#7C3AED; }
.login { background:#7C3AED; color:white; border:0; padding:12px 22px; border-radius:30px; cursor:pointer; font-weight:bold; }

/* 3. MENÚ MÓVIL BASE */
.btn-menu { display: none; background: none; border: none; font-size: 28px; color: #3b276f; cursor: pointer; }
.login-mobile { display: none; width: 100%; margin-top: 10px; padding: 15px; }
.titulo-centrado { text-align: center; margin-bottom: 50px; display: block; }

/* 4. HERO Y BUSCADOR */
.hero { min-height:550px; background: linear-gradient(90deg, rgba(248,250,252,.95), rgba(216,180,226,.35)), url("../img/hero-avion.jpg"); background-size:cover; background-position:center; display:flex; align-items:center; }
.hero-content { margin-left:8%; width:800px; }
.hero h1 { font-size:48px; line-height:1.1; color:#28126f; margin-bottom:20px; }
.hero strong { color:#7C3AED; }
.search-box { background:white; border-radius:20px; padding:20px; width:780px; box-shadow: 0 20px 50px rgba(124,58,237,.25); }
.fields { display:flex; gap:12px; align-items:end; }
.fields div { display:flex; flex-direction:column; flex:1; }
.btn-search { background:#7C3AED; color:white; border:0; padding:14px 22px; border-radius:12px; font-weight:bold; cursor:pointer; }

/* 5. TARJETAS (CARD) */
.card { background:white; border-radius:18px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); position:relative; min-width: 320px; max-width: 320px; }
.card img { width:100%; height:160px; object-fit:cover; }
.card .tipo { position:absolute; top:15px; left:15px; background:#7C3AED; color:white; padding:6px 12px; border-radius:20px; font-size:12px; }
.card h3 { padding:15px 15px 5px; font-size:20px; }
.card p { padding:0 15px; color:#777; }
.card strong { display:block; padding:15px; color:#7C3AED; font-size:20px; }
.card .fecha-vuelo { padding: 5px 15px 0; color: #7C3AED; font-size: 14px; font-weight: bold; }
.card .btn-ws { display: block; text-align: center; background: #25D366; color: white; text-decoration: none; padding: 12px; margin: 15px; border-radius: 12px; font-size: 15px; font-weight: bold; }

/* 6. CARRUSEL DE OFERTAS (EL QUE QUERÍAS) */
.ofertas-completas { padding: 50px 8%; }
.titulo-origen { color: #7C3AED; margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid #f0eaff; padding-bottom: 10px; font-size: 22px; }

/* Contenedor que obliga a ver una sola tarjeta */


/* ===============================
   CARRUSEL HÍBRIDO (PC: Scrollbar / Móvil: Snap)
================================ */

.carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 20px 0 40px 0;
}

.slider-origen {
    display: flex;
    overflow-x: auto; /* Permite scroll en PC */
    gap: 25px;
    padding: 10px 0;
    width: 100%;
    scroll-behavior: smooth;
}

/* Tarjetas */
.slider-origen .card {
    min-width: 320px; 
    max-width: 320px;
    flex-shrink: 0;
}

/* Botones flotantes (Flechas) */
.btn-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: white;
    color: #7C3AED;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.btn-slider.prev { left: -20px; }
.btn-slider.next { right: -20px; }









/* 7. FOOTER Y OTROS */
footer { text-align:center; padding:30px; background:#21065c; color:white; }

/* 8. RESPONSIVE MOBILE */
@media(max-width:900px){
    .header { padding:20px; }
    .btn-menu { display: block; }
    .login-desktop { display: none; }
    .header nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px 8%; box-shadow: 0 10px 20px rgba(0,0,0,0.05); gap: 15px; z-index: 99; }
    .header nav.activo { display: flex; }
    .login-mobile { display: block; }
    
    /* Forzamos el contenedor a mostrar UNA tarjeta */
    .carousel-wrapper {
        max-width: 320px; 
        margin: 20px auto 40px auto; /* Centrado */
    }

    .slider-origen {
        scroll-snap-type: x mandatory; /* Bloquea el scroll a 1 por 1 */
        scrollbar-width: none; /* Oculta scrollbar en Firefox */
    }
    
    .slider-origen::-webkit-scrollbar {
        display: none; /* Oculta scrollbar en Chrome/Safari */
    }

    .slider-origen .card {
        scroll-snap-align: center; /* Centra la tarjeta */
    }

    /* Flechas un poco más pequeñas en móvil */
    .btn-slider {
        width: 35px;
        height: 35px;
    }
    .btn-slider.prev { left: -15px; }
    .btn-slider.next { right: -15px; }
}