/* Estilos base del proyecto y paleta de colores */
:root{
    --c-1: #031926; /* oscuro */
    --c-2: #468189;
    --c-3: #77ACA2;
    --c-4: #9DBEBB;
    --c-5: #F4E9CD; /* claro */
    --nav-height: 70px;
}

body{
    background-color: var(--c-5);
    padding-top: var(--nav-height); /* espacio para navbar fijo */
    color: #072022;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.container{
    max-width: 960px;
}

/* Navbar / Header común */
.site-navbar{
    height: var(--nav-height);
    background: linear-gradient(90deg, var(--c-1) 0%, var(--c-2) 25%, var(--c-3) 50%, var(--c-4) 75%, var(--c-5) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.navbar .navbar-brand{
    display: flex;
    align-items: center;
    gap: .6rem;
    color: white;
}

.logo-placeholder{
    width:70px;
    height:70px;
    border-radius:10px;
    background: url('../img/index/logo1.png') center/contain no-repeat;
    display:inline-block;
    flex-shrink:0;
    border: none;
    background-color: transparent;
}

.site-title{
    font-family: 'Blacksword', 'Times New Roman', serif;
    font-weight:400;
    color: #fff;
    letter-spacing: .12px;
    font-size: clamp(1.45rem, 2.8vw, 1.95rem);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Ajustes para el offcanvas (menu móvil) */
.offcanvas{
    background: linear-gradient(180deg, var(--c-3), var(--c-5));
}
.offcanvas .nav-link{
    color: #072022;
}
.offcanvas .nav-link.active{
    font-weight:700;
}

/* Contenido principal */
main.container{
    background: rgba(255,255,255,0.8);
    padding: 2rem;
    border-radius: 8px;
}

/* Carrusel */
.site-carousel{
    margin-bottom: 1.5rem;
}
.site-carousel .carousel-inner img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:8px;
}

@media (max-width: 576px){
    .site-carousel .carousel-inner img{ height:220px; }
}

/* Frase destacada (CTA) al final de la página */
.site-cta{
    background: linear-gradient(90deg, rgba(3,25,38,0.03), rgba(151,189,180,0.03));
    border-radius: 10px;
}
.site-cta .display-6{
    color: #031926;
}
.site-cta .lead{
    color: #274747;
}

/* Frase destacada debajo de "Qué podés encontrar" */
.site-tip{
    padding: 2rem 1rem 1.5rem;
}

.tip-title{
    font-family: 'Blacksword', 'Times New Roman', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: #031926;
    line-height: 1.2;
}

.tip-subtitle{
    font-size: 1.1rem;
    color: #274747;
}

/* Bloques destacados de inicio */
.section-kicker{
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
    color: #4b5b63;
    font-weight: 700;
}

.highlight-card{
    border-radius: 14px;
    border: 1px solid rgba(7,22,34,0.08);
    box-shadow: 0 10px 26px rgba(7,22,34,0.08);
    overflow: hidden;
    background: #fff;
}

.highlight-img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.highlight-card .card-body{
    padding: 14px 16px 16px;
}

.tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(73,129,138,0.12);
    color: #1f4850;
    font-size: .82rem;
    border: 1px solid rgba(3,25,38,0.05);
}

.service-card{
    border-radius: 12px;
    border: 1px solid rgba(7,22,34,0.08);
    background: #fff;
    box-shadow: 0 8px 18px rgba(7,22,34,0.07);
}

.service-icon{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.publish-cta{
    padding: 1.6rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(70,129,137,0.08), rgba(244,233,205,0.8));
    border: 1px solid rgba(7,22,34,0.08);
    box-shadow: 0 12px 24px rgba(7,22,34,0.08);
}

/* Carruseles de destacados */
.carousel-wrapper{
    position: relative;
}
.carousel-wrapper .carousel-item{
    padding: .25rem;
}
.carousel-wrapper .carousel-control-prev,
.carousel-wrapper .carousel-control-next{
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(3,25,38,0.6);
    border-radius: 50%;
}
.carousel-wrapper .carousel-control-prev-icon,
.carousel-wrapper .carousel-control-next-icon{
    filter: invert(1) grayscale(100%);
}

/* Insignia y borde para elementos destacados (cabañas, servicios, restaurantes) */
.destacado-card{
    position: relative;
    border: 2px solid #f6c343;
    box-shadow: 0 14px 46px rgba(246, 195, 67, 0.25);
}

.badge-destacada{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f6c343;
    color: #031926;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* Estilos para las etiquetas */
.etiquetas {
    margin-top: 10px;
}

.etiquetas .badge {
    font-size: 0.9rem;
    padding: 0.5em 0.75em;
    border-radius: 0.5rem;
}

/* Estilos para el modal y el carrusel */
.modal .carousel-item img {
    max-height: 500px;
    object-fit: cover;
}

.modal .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.modal .btn {
    margin: 0 5px;
}

/* Pequeños ajustes responsivos */
@media (max-width: 576px){
    .logo-placeholder{width:40px;height:40px}
    :root{ --nav-height: 64px }
}

/* Añade más estilos según vayas avanzando */

/* Ajustes para el botón "Ver Foto" */
.listado-cabanas .btn-ver-foto {
    font-size: 0.875rem;
    padding: 0.25rem 0.6rem;
    background-color: #0f4fbf;
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.listado-cabanas .btn-ver-foto:hover {
    background-color: #0c3f99;
}

/* Ajustes para los destacados en restaurantes */
.listado-cabanas .cabana-card.destacada {
    border: 2px solid #f6c343;
    box-shadow: 0 14px 46px rgba(246, 195, 67, 0.35);
}

.listado-cabanas .cabana-card .badge-destacada {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Etiquetas de restaurantes */
.etiquetas-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 4px;
}

.etiquetas-row .badge-tag {
    border: 1px solid var(--line);
    background: #f8fafc;
    color: var(--text);
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 10px;
}

/* Modal de fotos compacto */
.photo-modal {
    max-width: 640px;
}

/* Bandera para negocios en servicios */
.flag-negocio {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.78rem;
    background: #0f4fbf;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Bandera para delivery en restaurantes */
.flag-delivery {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.78rem;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-left: 8px;
}

.flag-resto {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.78rem;
    background: #0f4fbf;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-left: 8px;
}

.flag-rotiseria {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.78rem;
    background: #ff9800;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-left: 8px;
}

.flag-bar {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.78rem;
    background: #9c27b0;
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-left: 8px;
}

.filtro-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(7,22,34,0.06);
    position: sticky;
    top: calc(var(--nav-height) + 12px);
    min-width: 200px;
    max-width: 240px;
}

.filtro-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filtro-label {
    margin: 0;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.92rem;
}

.filtro-panel .form-label {
    font-size: 0.9rem;
    color: #4a5568;
}

.filtro-panel .form-check {
    padding-left: 1.4rem;
}

.filtro-panel .form-check-input {
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.18rem;
}

.filtro-panel .form-select.form-select-sm,
.filtro-panel select,
.filtro-panel input[type="search"],
.filtro-panel input[type="text"],
.filtro-panel input[type="number"] {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .filtro-panel {
        position: static;
        max-width: 100%;
        width: 100%;
        margin-bottom: 1rem;
    }

    .filtro-panel .form-check {
        padding-left: 1.2rem;
    }

    .filtro-panel .form-check-input {
        width: 1rem;
        height: 1rem;
    }
}

    /* Pie de página */
    .site-footer {
        background: rgba(255,255,255,0.9);
        border-top: 1px solid #e2e8f0;
        padding: 0.9rem 0;
        color: #274747;
        font-size: 0.9rem;
    }

    .footer-brand {
        font-weight: 700;
        color: #031926;
    }

    .footer-link {
        color: #274747;
        text-decoration: none;
        font-weight: 500;
    }

    .footer-link:hover {
        color: #0f4fbf;
        text-decoration: underline;
    }

/* Ajustes para el botón "Ver Foto" */
.listado-cabanas .btn-ver-foto {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--c-3);
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.listado-cabanas .btn-ver-foto:hover {
    background-color: var(--c-2);
}

/* Ajustes para los destacados */
.listado-cabanas .card.destacado {
    border: 2px solid var(--c-3);
    position: relative;
}

.listado-cabanas .card.destacado .star {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--c-3);
    font-size: 1.5rem;
}