﻿/* --- SEPARADOR DE SECCIÓN --- */
.section-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 40px 0 25px 0;
}

    .section-divider h2 {
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #444;
        margin: 0;
    }

.line-divider {
    flex-grow: 1;
    height: 1px;
    background-color: #eee;
}

/* ================================================================
   TARJETAS - ESTILO UNIFICADO (HOME Y TIENDA)
   ================================================================ */

/* OCULTAR por defecto descripción e iconos sociales */
.descripcion-scroll-tarjeta,
.group-social-icons {
    display: none !important;
}

/* CARD */
.card-publicacion-premium {
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 24px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0,0,0,.045) !important;
    transition: all .28s ease;
    height: 100%;
}

    .card-publicacion-premium:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 60px rgba(0,0,0,.09) !important;
    }

/* IMAGEN */
.contenedor-img-premium {
    height: auto;
    padding-top: 72%;
    background: #f6f3f8;
    border-bottom: none;
    position: relative;
}

.img-fit-premium,
.svg-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BADGES */
.badge-categoria {
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: .62rem;
    letter-spacing: .6px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    color: #ffffff !important;
    z-index: 10;
    text-transform: uppercase;
}

.badge-oferta {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #ff6f00 0%, #ff9800 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    animation: pulse-oferta 2s infinite;
}

    .badge-oferta i {
        font-size: 0.65rem;
        animation: rotate-star 3s linear infinite;
    }

@keyframes pulse-oferta {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes rotate-star {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cat-bg-1 {
    background-color: #5D4037 !important;
}
/* Alojamiento */
.cat-bg-2 {
    background-color: #8B1D1D !important;
}
/* Gastronomía */
.cat-bg-3 {
    background-color: #2E7D32 !important;
}
/* Aventura */
.cat-bg-4 {
    background-color: #455A64 !important;
}
/* Cultura */
.cat-bg-5 {
    background-color: #6A1B9A !important;
}
/* Enoturismo */
.cat-bg-6 {
    background-color: #0277BD !important;
}
/* Servicios */
.cat-bg-0 {
    background-color: #757575 !important;
}
/* Default */
/* ================================================================
   AJUSTES DE ESPACIADO - REEMPLAZAR EN home-feedcard.css
   Solo las secciones de BODY
   ================================================================ */

/* BODY */
.card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem !important;
}

    /* EMPRESA - 1 LINEA FIJA */
    .card-body .d-flex.align-items-center.gap-1.text-muted {
        height: 18px;
        font-size: .66rem !important;
        letter-spacing: .8px !important;
        color: #8B1D1D !important;
        margin-bottom: .25rem !important; /* ANTES: .35rem */
        text-transform: uppercase;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

/* TITULO - SIEMPRE 2 LINEAS */
.titulo-publicacion {
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 800;
    color: #1f2933;
    min-height: 2.55em;
    margin-bottom: .5rem !important; /* ANTES: .85rem */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* UBICACION / FECHA / VISTAS - 1 LINEA FIJA */
.info-linea-compacta {
    height: 24px;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 0 !important;
    margin-bottom: .6rem !important; /* ANTES: .95rem */
    border-bottom: none !important;
    justify-content: flex-start;
    overflow: hidden;
}

.info-item {
    font-size: .74rem;
    color: #7a7f87;
    font-weight: 500;
    gap: .35rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

    .info-item i {
        font-size: .72rem;
    }

.icono-dorado {
    color: #D4AF37 !important;
}

/* PRECIO - SIEMPRE 2 LINEAS */
.card-body .mb-2.mt-auto {
    min-height: 2.8em;
    margin: 0 0 .6rem !important; /* ANTES: .9rem */
}

.precio-tarjeta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #8B1D1D !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* BOTON - SIEMPRE ABAJO */
.card-body .d-flex.justify-content-between.align-items-center.pt-2.border-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-top: 1px solid #f1f1f1 !important;
    padding-top: .7rem !important; /* ANTES: .9rem */
    margin-top: auto !important;
    gap: 1rem;
}

.btn-outline-rioja {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: .74rem;
    font-weight: 600;
    background: #fff;
    color: #8B1D1D !important;
    border: none;
    letter-spacing: .3px;
    transition: all .25s ease;
    text-decoration: none;
    box-shadow: 0 2px 0 #8B1D1D, 0 4px 8px rgba(139, 29, 29, 0.15);
}

    .btn-outline-rioja:hover {
        background: #8B1D1D;
        color: #fff !important;
        transform: translateY(2px);
        box-shadow: 0 0 0 #8B1D1D, 0 2px 6px rgba(139, 29, 29, 0.2);
    }

    .btn-outline-rioja::before {
        content: "\f06e";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: .75rem;
    }

    .btn-outline-rioja:active {
        transform: translateY(2px);
    }
 
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .card-body {
        padding: .9rem !important;
    }

    .titulo-publicacion {
        font-size: .95rem;
    }

    .info-linea-compacta {
        gap: .65rem;
    }

    .info-item {
        font-size: .7rem;
    }

    .precio-tarjeta {
        font-size: .95rem !important;
    }

    .btn-outline-rioja {
        font-size: .64rem;
        padding: 7px 12px;
    }
}

@media (max-width: 576px) {
    .info-linea-compacta {
        flex-wrap: wrap;
        gap: .35rem;
        height: auto;
    }

    .info-item {
        font-size: .7rem;
    }
}
/* ================================================================
   MOBILE - TÍTULO "ÚLTIMAS PUBLICACIONES" MÁS CHICO + IMAGEN REDUCIDA
================================================================ */

@media (max-width: 768px) {

    /* Título de sección "Últimas Publicaciones" más compacto */
    .tab-content-home h2 {
        font-size: 0.75rem !important;
        letter-spacing: 0.6px !important;
        line-height: 1.2 !important;
    }

    /* Imagen de la tarjeta más baja (era 72% → ahora 55%) */
    .contenedor-img-premium {
        padding-top: 55% !important;
    }

    /* Badges un poco más chicos para acompañar */
    .badge-categoria,
    .badge-oferta {
        top: 10px;
        padding: 5px 10px;
        font-size: 0.6rem;
    }

    .badge-categoria {
        left: 10px;
    }

    .badge-oferta {
        right: 10px;
    }
}
