:root {
    --brand: #db049f;
    --brand-dark: #aa037b;
    --navbar-h: 74px;
    /* ajusta si tu navbar es más alto */
}

/* Compensar navbar fijo */
body {
    padding-top: var(--navbar-h);
}




/* ===== NAVBAR (fondo con background2.jpg) ===== */
.navbar-bg {
    background: url('/Assets/images/background2.jpg') top/cover no-repeat;
}

.navbar-bg::before {
    /* Menos velo = textura más visible + un toque de contraste */
    background: linear-gradient(0deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .58));
    backdrop-filter: saturate(160%) blur(3px) contrast(1.05);
}

/* --- LOGO EN NAVBAR: fuerza tamaño visible --- */
.navbar-brand .logo {
    height: clamp(38px, 5vw, 64px);
    /* visible y responsive */
    width: auto;
    max-width: none;
    /* evita límites heredados */
    display: block;
    /* evita colapsos en inline */
}
 
/* Asegura layout de la marca y separación vertical del nav */
.navbar .navbar-brand {
    display: flex;
    align-items: center;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* El overlay del navbar no debe cubrir el contenido */
.navbar-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.navbar-bg::before {
    z-index: 0;
}

.navbar-bg>.container-xxl,
.navbar-bg .navbar-brand,
.navbar-bg .navbar-collapse,
.navbar-bg .navbar-toggler {
    position: relative;
    z-index: 1;
}

/* (Por si alguna regla global toca todas las imágenes) */
img.logo {
    max-width: none !important;
}

.navbar-nav .nav-link {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    /* cambia a uppercase si quieres */
    padding: .55rem 1rem;
    border-radius: 999px;
    /* pill look */
    transition: color .15s, background-color .15s, box-shadow .15s;
}

/* Hover */
.navbar-nav .nav-link:hover {
    color: var(--brand);
    background: rgba(219, 4, 159, .08);
}

/* Estado activo */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
    color: #fff;
    background-image: linear-gradient(90deg, var(--brand), var(--brand-dark));
    box-shadow: 0 6px 16px rgba(219, 4, 159, .25);
}



/* ===== BANNER FULL-BLEED ===== */
.hero-bleed {
    margin-top: .5rem;
}

/* leve respiro bajo el navbar */
.hero-bleed .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.hero-banner {
    background: url('/Assets/images/background2.jpg') center/cover no-repeat;
    /* sin bordes redondeados ni margen */
    min-height: clamp(300px, 42vw, 560px);
    position: relative;
}

.hero-banner .mask {
    position: absolute;
    inset: 0;
    /* velo leve para realzar logo y botones (muy sutil) */
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04));
}

/* ===== Parallax en desktop (CSS-only) ===== */
.hero-banner.parallax,
.footer-hero.parallax {
    background: url('/Assets/images/background2.jpg') center / cover no-repeat fixed;
    will-change: background-position;
}

/* Si ya tenías background en estas clases, esta regla lo sobrescribe */

@media (max-width: 991.98px) {

    /* En móviles desactivamos el fixed y dejamos cover normal;
     el JS (abajo) simulará el parallax con transform. */
    .hero-banner.parallax,
    .footer-hero.parallax {
        background-attachment: scroll;
        background-position: center center;
    }
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 100%;
    padding: 5.5rem;
}

.hero-logo {
    width: clamp(320px, 80vw, 720px);
    height: auto;
}

/* CTAs en el banner */
.cta-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 2;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-pill {
    border-radius: 999px;
}

.btn-gradient {
    background-image: linear-gradient(90deg, var(--brand), var(--brand-dark));
    color: #fff;
    border: 0;
}

.btn-gradient:hover {
    filter: brightness(1.05);
    color: #fff;
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
}

.btn-outline-light:hover {
    background: #fff;
    color: #000;
}

/* ===== BLOQUE DE TEXTO BAJO EL BANNER ===== */
.section-copy {
    padding: 2.25rem 1rem;
}

.brand-gradient {
    /* color de texto con degradado fucsia → gris */
    background: linear-gradient(90deg, var(--brand) 0%, #666 60%, #999 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Sombras/efectos opcionales */
.shadow-xsoft {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.hover-lift {
    transition: transform .2s, box-shadow .2s;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}

/* ===== PRELOADER (restaurado) ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f9f9f9 url('/Assets/images/ring-spinner.gif') center no-repeat;
}



/* Responsive ajustes menores */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        padding: .5rem .75rem;
    }

    .logo {
        max-width: 160px;
    }
}

@media (max-width: 575.98px) {
    .hero-logo {
        width: clamp(240px, 55vw, 420px);
    }
    .navbar {
        --bs-navbar-padding-y: 0.8rem !important;
    }
    .hero-bleed {
        margin-top: -.2rem;
    }
    .navbar-collapse,
        ul {
        margin-top: 15px;
    }
    .hero-inner {
        padding: 1.5rem;
    }
}

/* ===== FOOTER con background2.jpg ===== */
.site-footer {
    position: relative;
}

/* Bloque superior “ligero” con la seda de fondo */
.footer-hero {
    background: url('/Assets/images/background2.jpg') center/cover no-repeat;
}

.footer-hero::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .78));
}

.footer-hero>.container-xxl {
    position: relative;
    z-index: 1;
}

/* Enlaces con chevron fucsia como viñeta */
.footer-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer-links li {
    position: relative;
    padding-left: 1.1rem;
    margin: .4rem 0;
}

.footer-links li::before {
    content: "\203A";
    /* › */
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.2;
    color: var(--brand);
    font-weight: 700;
}

.footer-links a {
    color: #2c2c2c;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Iconos sociales */
.footer-social {
    color: #2c2c2c;
}

.footer-social:hover {
    color: var(--brand);
}

/* Barra inferior oscura */
.footer-bar {
    background: #585f66;
    /* gris profundo, como la 1ª imagen */
    color: #fff;
}

.footer-bar a {
    color: #e5e5e5;
}

.footer-bar a:hover {
    color: #fff;
}

/* Back to Top (ya lo tenías; lo mantenemos) */
.cd-top {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand) url('/Assets/images/cd-top-arrow.svg') no-repeat center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, transform .3s;
    transform: translateY(8px);
    z-index: 1040;
}

.cd-top.cd-top--show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===== Título de sección (tipo “AND MORE…”) ===== */
.section-title {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
}

/* ===== Grid de productos ===== */
.card.product {
    border: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

/* Marco de la imagen */
.product-thumb {
    border: 4px solid transparent;
    /* base */
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
    background: #fff;
}

/* Hover en la foto: zoom + leve sombra interior */
.product-thumb:hover img {
    transform: scale(1.04);
}

.product-thumb:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}

/* Producto NUEVO: borde rojo y glow sugerente */
.product.is-new .product-thumb {
    border-color: #ef3d4f;
    /* rojo vivo */
    box-shadow: 0 0 0 0 rgba(239, 61, 79, .35);
    animation: newGlow 1.9s ease-in-out infinite;
}

@keyframes newGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 61, 79, .35);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 61, 79, .12);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 61, 79, .0);
    }
}

/* Badge NUEVO (si lo usas) un poco más elegante */
.badge-new {
    background: #ef3d4f;
    color: #fff;
    font-weight: 700;
    border-radius: .5rem;
    padding: .35rem .5rem;
    box-shadow: 0 4px 10px rgba(239, 61, 79, .25);
}

/* Nombre de producto */
.product .card-title {
    font-weight: 700;
    margin-bottom: .25rem;
}

/* Ocultamos precios por ahora */
.product .price-wrap {
    display: none !important;
}

/* ======= BADGE NUEVO (moderno) ======= */
.badge-new-modern {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #ff5a7a, #ef3d4f);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(239, 61, 79, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
    transform: translateZ(0);
    /* evita blurry en algunos navegadores */
}

.badge-new-modern::before {
    content: "✦";
    font-size: .9rem;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .6));
}

.badge-new-modern::after {
    /* brillo diagonal */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: shine 2.2s ease-in-out infinite;
}

@keyframes shine {

    0%,
    100% {
        opacity: .35;
        transform: translateX(-8%) rotate(0.01deg);
    }

    50% {
        opacity: .85;
        transform: translateX(8%) rotate(0.01deg);
    }
}

/* halo suave detrás */
.badge-new-halo {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    width: 100px;
    height: 36px;
    translate: 18px -6px;
    background: radial-gradient(40px 18px at 50% 50%, rgba(239, 61, 79, .35), transparent 60%);
    filter: blur(8px);
    pointer-events: none;
    animation: halo 2.2s ease-in-out infinite;
}

@keyframes halo {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: .8;
    }
}

/* ======= OPCIONAL: cinta en esquina ======= */
.ribbon-new {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 0;
    height: 0;
    border-top: 56px solid #ef3d4f;
    border-left: 56px solid transparent;
}

.ribbon-new::after {
    content: "NUEVO";
    position: absolute;
    top: -46px;
    right: -6px;
    transform: rotate(45deg);
    color: #fff;
    font-weight: 800;
    font-size: .7rem;
}

/* ======= Imagen/producto (hover) ======= */
.product-thumb {
    border: 4px solid transparent;
    border-radius: .75rem;
    overflow: hidden;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
    background: #fff;
}

.product-thumb:hover img {
    transform: scale(1.04);
}

.card.product {
    border: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transition: transform .2s, box-shadow .2s;
}

.card.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

/* ======= Título de sección con tipografía estilo “AND MORE…” ======= */
.section-title {
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 800;
}

/* Toggler: hamburguesa ↔ X */
.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler .toggler-icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: opacity .15s ease, transform .2s ease;
}

/* por defecto muestra barras */
.navbar-toggler .toggler-x {
    display: none;
}

/* cuando el colapso está abierto (aria-expanded=true), muestra la X */
.navbar-toggler[aria-expanded="true"] .toggler-bars {
    display: none;
}

.navbar-toggler[aria-expanded="true"] .toggler-x {
    display: inline-block;
}

/* elimina el bg-image de .navbar-toggler-icon default de BS (por si quedó) */
.navbar-toggler .navbar-toggler-icon {
    background-image: none !important;
}

.navbar-bg::before {
    z-index: 0;
}

/* Efecto sutil adicional: oscurece/aplana un poco para legibilidad (opcional) */
.hero-banner.parallax::after,
.footer-hero.parallax::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .15));
    pointer-events: none;
}