/* marca.css - estilado por componentes para la página de marca */

/* -----------------------
   Component: Gallery
   ----------------------- */
.gallery-section {
    max-width: 1000px;
    margin: 0 auto;
}

.carousel-flex-layout {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* CAROUSEL ENGINE */
.custom-scroll-container {
    display: flex !important;
    overflow: hidden;
    scroll-behavior: smooth;
    width: 100%;
    padding: 20px 0;
}

.no-smooth {
    scroll-behavior: auto !important;
}

.custom-item {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

@media(min-width: 768px) {
    .custom-item {
        flex: 0 0 33.333%;
        min-width: 33.333%;
    }
}

/* -----------------------
   Component: Profile Card
   ----------------------- */
.profile-card-custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #0A100D !important; /* requested profile card color */
    color: #D6D5C9;
    border: var(--border) !important;
    border-radius: 18px;
    padding: 1rem;
}

.profile-card-custom a {
    text-decoration: none !important;
    color: inherit !important;
}
.profile-card-custom a:hover,
.profile-card-custom a:focus {
    text-decoration: none !important;
    color: inherit !important;
}


/* -----------------------
   Component: Gallery Cards
   ----------------------- */
.card-gallery {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

.img-container-rel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

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

.texto-traslucido {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    backdrop-filter: blur(8px);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.img-mini-overlay {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.texto-detalle {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.banda-inferior {
    background: #ffffff;
    color: #333;
    padding: 15px;
    border-top: 1px solid #eee;
    text-align: center;
}

/* -----------------------
   Component: Navigation Buttons
   ----------------------- */
.nav-btn {
    background: #222;
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.nav-btn:hover {
    background: #000;
    transform: scale(1.1);
}
.arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
}
.right { transform: rotate(-45deg); }
.left { transform: rotate(135deg); }

/* -----------------------
   Component: Rating (stars)
   ----------------------- */
.rating-static {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    margin: 5px 0;
}
.rating-static svg { width: 1.1rem; height: 1.1rem; fill: #e8e8e8; }
.rating-static .gold { fill: #ffca08; filter: drop-shadow(0 0 2px rgba(255, 202, 8, 0.3)); }

/* -----------------------
   Component: Modals
   ----------------------- */
.modal-content {
    background: #0A100D !important;
    color: #D6D5C9 !important;
    border: var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}
.modal-header,
.modal-body,
.modal-footer { background: transparent !important; border: none !important; color: #D6D5C9 !important; }
.modal-header .modal-title { color: #D6D5C9 !important; font-weight: 700; }
.modal .btn-close { filter: invert(1) brightness(0.9) !important; opacity: 0.9; }
.modal .form-control.bg-light { background: rgba(255,255,255,0.06) !important; color: #D6D5C9 !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.modal .form-control::placeholder { color: rgba(214,213,201,0.6) !important; }

.modal .btn, .modal .btn.btn-primary, .modal .btn.btn-secondary { padding: 0.5rem 1rem !important; height: 42px !important; min-width: 140px; font-size: 0.95rem !important; border-radius: 18px !important; box-shadow: none !important; }