/* =========================================================
   PERFUMESIA — PREMIUM LANDING
========================================================= */

.pf-home {
    width: 100%;
    margin: 0;
}


/* =========================================================
   HERO
========================================================= */

.pf-home__hero {
    position: relative;

    width: 100%;
    max-width: 1920px;

    margin: 0 auto;

    overflow: hidden;

    background: #080808;

    border-radius: 16px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.pf-home__hero-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    user-select: none;
}


/* =========================================================
   CTA HOTSPOT
   Área interactiva situada sobre el botón dibujado
   "EXPLORAR PERFUMES" de la imagen.
========================================================= */

.pf-home__hero-cta {
    position: absolute;

    left: 6.2%;
    top: 65.5%;

    width: 26%;
    height: 8%;

    display: block;

    border-radius: 999px;

    cursor: pointer;

    transition:
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* Hover muy sutil para conservar el diseño original */

.pf-home__hero-cta:hover {
    background: rgba(211, 164, 92, .08);

    box-shadow:
        0 0 28px
        rgba(211, 164, 92, .18);

    transform: scale(1.01);
}


/* Accesibilidad por teclado */

.pf-home__hero-cta:focus-visible {
    outline: 2px solid #d3a45c;
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .pf-home__hero {
        border-radius: 12px;
    }

}


@media (max-width: 600px) {

    .pf-home__hero {
        border-radius: 8px;
    }

}