*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:'Montserrat',sans-serif;
    background-color:#c85c11;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


header{
    background-color:#c85c11;
    padding:15px;
    text-align:center;
}


.main-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
}

.main-header img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
    max-height: 120px; /* tamaño máximo en desktop */
    object-fit: contain;
}

/* Ajuste específico para móviles */
@media (max-width: 768px) {
    .main-header img {
        max-height: 70px;
    }
}

/* 🔹 Buscador */
.buscador{
    background-color:#fff;
    max-width:1100px;
    margin:-30px auto 0;
    border-radius:16px;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding:20px;
    gap:15px;

}
.campo{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:150px;
}
.campo label{
    font-size:0.8rem;
    font-weight:600;
    margin-bottom:4px;
    color:#c85c11;
}
.campo select,
.campo input[type="date"]{
    border:1px solid #ddd;
    border-radius:8px;
    background:#f9f9f9;
    padding:12px;
    font-size:1rem;
    outline:none;
    appearance:none;
}

/* Fecha estilizada */
.campo-date {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.campo-date input[type="date"] {
    width:100%;
    padding-left:40px;
    border:1px solid #c85c11;
    background:#fff8f3;
    color:#333;
    font-weight:500;
    border-radius:8px;
}
.campo-date i {
    position:absolute;
    top:50%;
    left:15px;
    transform:translateY(-50%);
    color:#c85c11;
    pointer-events:none;
}

.swap{
    align-self:flex-end;
    background:#f3f3f3;
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#c85c11;
    transition:background 0.3s;
}
.swap:hover{background:#e9e9e9;}
.btn-buscar{
    background:#f38f2c;
    color:#fff;
    border:none;
    padding:14px 30px;
    border-radius:12px;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 0 #c85c11;
    transition:background 0.3s;
}
.btn-buscar:hover{background:#e47f1f;}

footer{
    text-align:center;
    padding:15px;
    margin-top:auto;
    color: #fff;
}

/* 🔹 Responsive */
@media (max-width:900px){
    .buscador{
        flex-direction:column;
        align-items:stretch;
    }
    .campo, .campo-date, .btn-buscar{
        width:100%;
    }
    .swap{
        margin:5px auto;
    }
    .btn-buscar{
        width:100%;
        text-align:center;
    }
}

/* 🔹 Contenedor resultados */
.container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 20px;
    width: 100%;
    background-color: #fff8f3;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}
.container.visible {
    display: block;
}
@media (max-width:768px){
    .container {
        padding: 20px 15px;
    }
}

h1{
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:5px;
    text-align:center;
}

/* 🔹 tarjeta de viaje */
.card{
    position:relative;
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    padding:15px 20px;
    margin-bottom:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    transition: box-shadow 0.2s, transform 0.15s;
}
.card:hover{
    box-shadow:0 6px 20px rgba(200,92,17,0.18);
    transform: translateY(-4px) scale(1.03);
    z-index:2;
}
.badge{
    position:absolute;
    top:-10px;
    left:-10px;
    background:#3b82f6;
    color:#fff;
    font-size:0.7rem;
    padding:3px 8px;
    border-radius:8px;
    font-weight:600;
}
.info{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.empresa{
    font-weight:700;
    font-size:1rem;
}
.ruta{
    font-size:0.85rem;
    color:#555;
}
.horario{
    font-size:0.9rem;
    font-weight:600;
    color:#333;
}
.icons{
    font-size:0.8rem;
    color:#888;
}
.right{
    display:flex;
    align-items:center;
    gap:12px;
}
.precio{
    font-weight:700;
    color:#c85c11;
    font-size:1rem;
}
.btn{
    background:#0d1d3c;
    color:#fff;
    border:none;
    padding:8px 18px;
    border-radius:25px;
    font-size:0.85rem;
    cursor:pointer;
    transition:all 0.3s;
}
.btn:hover{background:#1b305d;}

@media (max-width:768px){
    .card{
        flex-direction:column;
        align-items:flex-start;
    }
    .right{
        width:100%;
        justify-content:space-between;
    }
}

/**para los detinos**/
.titulo-seccion {
    text-align: center;
    margin: 20px 0;
    font-size: 1.8rem;
    color: white;
    font-weight:bold;
}

#listaitinerarios {
    position: relative;
    width: 100%;
    min-height: 400px;
    
}

#listaitinerarios::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1); /* oscurece */
}

#listaitinerarios > * {
    position: relative;
    z-index: 2;
}

.destinos {
   
    margin: 0 auto 50px;
    position: relative;
    padding: 0 20px;
}

.slider-destinos {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.slides-container {
    display: flex;
    transition: transform 0.4s ease-in-out;
}



.slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    background: #fff;
}
.slide img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}
.slide h3 {
    margin: 12px 0 8px;
    font-size: 1.4rem;
    color: #0d1d3c;
}
.slide p {
    font-size: 1rem;
    color: #555;
}

/* Botones flechas */
.btn-prev, .btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    font-size: 2rem;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}
.btn-prev:hover, .btn-next:hover {
    background: rgba(0,0,0,0.6);
}
.btn-prev { left: 10px; }
.btn-next { right: 10px; }

/* Responsive */
@media (max-width: 768px) {
    .slide img {
        max-height: 200px;
    }
    .titulo-seccion {
        font-size: 1.4rem;
    }
}

/*** secciones con los destinos ***/
.destinos-destacados {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    background: #fff;
}

.titulo-destacados {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: bold;
}

.grid-destinos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.destino-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.destino-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.destino-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.destino-item h3 {
    margin: 15px;
    font-size: 1.4rem;
    color: #0d1d3c;
}

.destino-item p {
    margin: 0 15px 15px;
    font-size: 0.95rem;
    color: #555;
}

/* Responsivo: en pantallas más pequeñas ajustar columnas */
@media (max-width: 992px) {
    .grid-destinos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .grid-destinos {
        grid-template-columns: 1fr;
    }
    .destino-item img {
        height: 200px;
    }
}