/* ==========================================================
   SURSUM VIAJES - STYLE.CSS (VERSION FINAL HÍBRIDA)
========================================================== */

/* 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 p { font-size:20px; margin-bottom:30px; }
.hero strong { color:#7C3AED; }

.search-box { background:white; border-radius:20px; padding:20px; width: 1200px; box-shadow: 0 20px 50px rgba(124,58,237,.25); }
.tabs { display:flex; gap:10px; margin-bottom:20px; }
.tabs button { border:0; padding:12px 20px; border-radius:10px; cursor:pointer; background:#f0eaff; color:#5b21b6; font-weight:bold; }
.tabs .active { background:#7C3AED; color:white; }
.fields { display:flex; gap:12px; align-items:end; }
.fields div { display:flex; flex-direction:column; flex:1; }
.fields label { font-size:12px; color:#666; margin-bottom:5px; }
.fields input, .fields select { padding:12px; border:1px solid #ddd; border-radius:10px; }
.btn-search { background:#7C3AED; color:white; border:0; padding:14px 22px; border-radius:12px; font-weight:bold; cursor:pointer; }

/* 5. BENEFICIOS */
.beneficios { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:50px 8%; background:white; }
.beneficios div { text-align:center; }
.beneficios span { font-size:28px; }
.beneficios h3 { margin-top:10px; font-size:15px; }

/* 6. OFERTAS INDEX GRID */
.ofertas { padding:40px 8%; }
.titulo { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.titulo h2 { font-size:25px; }
.titulo a { color:#7C3AED; text-decoration:none; font-weight:bold; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }

/* 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: 310px; }
.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; transition: background 0.3s ease, transform 0.2s ease; }
.card .btn-ws:hover { background: #1EBE5D; transform: translateY(-2px); }

/* 7. CARRUSEL HÍBRIDO DE OFERTAS (ofertas.php) */
.ofertas-completas { padding: 50px 4%; }
.titulo-origen { color: #7C3AED; margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid #f0eaff; padding-bottom: 10px; font-size: 22px; }



/* ===============================
   CARRUSEL CON FLEXBOX (Flechas seguras, sin superponerse)
================================ */

.carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 0px; /* Espacio perfecto entre flecha y tarjetas */
    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 (Flechas alineadas por Flexbox, nunca sobre las fotos) */
.btn-slider {
    flex-shrink: 0; /* Evita que la flecha se aplaste */
    background: white;
    color: #7C3AED;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.btn-slider:hover {
    background: #7C3AED;
    color: white;
}


/* 8. BANNER FINAL Y FOOTER */
.banner { margin:40px 8%; padding:40px; border-radius:25px; background: linear-gradient(120deg, #7C3AED, #C084FC); color:white; display:flex; justify-content:space-between; align-items:center; }
.banner h2 { font-size:32px; }
.banner-items { display:flex; gap:40px; text-align:center; }
.banner-items span { font-size:14px; }
footer { text-align:center; padding:30px; background:#21065c; color:white; }



/* ===============================
   RESPONSIVE MOBILE (INDEX Y OFERTAS)
================================ */
@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; }
    .header nav a { font-size: 16px; padding: 10px 0; border-bottom: 1px solid #f8fafc; width: 100%; }
    .login-mobile { display: block; }
    
    /* Hero y Buscador Adaptados */
    .hero { min-height: auto; padding: 40px 0; }
    .hero-content { margin: 0 5%; width: 90%; }
    .hero h1 { font-size: 32px; }
    
    .search-box { 
        width: 100% !important; 
        padding: 40px; 
    }
    
    .fields { 
        flex-direction: column !important; /* Apila los campos del buscador verticalmente */
        gap: 12px; 
    }
    
    .fields div { 
        width: 100% !important; 
    }
    
    .btn-search { 
        width: 100% !important; 
        margin-top: 5px; 
    }

    /* Beneficios en 2 columnas */
    .beneficios { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px; 
        padding: 30px 5%; 
    }

    /* Tarjetas del Index en 1 sola columna vertical */
    .cards { 
        grid-template-columns: 1fr !important; 
        gap: 20px; 
    }
    
    
    
    
        .slider-origen .card {
        min-width: 300px;
        max-width: 320px;
        scroll-snap-align: center;
        }
        
        
        
    
    .card { 
        width: 100% !important; 
        max-width: 100% !important; 
        min-width: auto !important; 
    }

    /* Banner y otros ajustes */
    .banner { 
        flex-direction: column; 
        gap: 20px; 
        text-align: center; 
        margin: 30px 5%;
        padding: 25px;
    }
    .banner-items { 
        flex-direction: column; 
        gap: 15px;
    }
}