/* FLAVORZ PACK — CSS depurado */
/* RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    min-height: 100%;
    background: #0678d9;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* FONDO GENERAL */
.site {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: url("assets/bg-desktop.webp") center top / cover no-repeat fixed;
}

.site::before,
.site::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
}

.site::before {
    top: 0;
    height: 180px;
    background: linear-gradient(to bottom,
            rgba(6, 120, 217, .88), rgba(6, 120, 217, .40) 45%, transparent);
}

.site::after {
    bottom: 0;
    height: 160px;
    background: linear-gradient(to top,
            rgba(6, 120, 217, .70), rgba(6, 120, 217, .50) 45%, transparent);
}

/* HERO Y HEADER */
.hero {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 30px 50px 0;
}

.header {
    position: absolute;
    top: 35px;
    left: 45px;
    right: 45px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

.brand {
    display: block;
    width: clamp(150px, 13vw, 220px);
}

.brand img {
    width: 100%;
    height: auto;
}

.socials {
    display: flex;
    align-items: center;
}

.socials--desktop {
    gap: 20px;
}

.socials--desktop img,
.socials--mobile img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, opacity .25s ease;
}

.socials a:hover {
    transform: translateY(-4px);
    opacity: .75;
}

.socials--mobile {
    display: none;
}

/* CONTENIDO CENTRAL */
.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vh;
    width: 100%;
    max-width: 1450px;
    height: 100%;
    margin: 0 auto;
}

.cover {
    width: clamp(250px, 22vw, 460px);
    aspect-ratio: 1;
    flex-shrink: 1;
}

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .30),
        0 4px 12px rgba(0, 0, 0, .20);
}

/* CHOCOLATINA INTERACTIVA — POSICIONES REFERIDAS AL CENTRO */
.platforms {
    position: relative;
    display: block;
    width: 55%;
    max-width: 1050px;
    aspect-ratio: 2170 / 500;
    flex-shrink: 0;
}

.platforms__art,
.platforms__art img {
    display: block;
    width: 100%;
    height: 100%;
}

.platforms__art img {
    object-fit: fill;
}

.platform {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.9908%;
    /* 130 / 2170 */
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transition: transform .22s ease, filter .22s ease;
}

.platform img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hundimiento visual: más oscuro y ligeramente más pequeño */
.platform:hover,
.platform:focus-visible {
    transform: translate(-50%, -50%) scale(.93);
    filter: brightness(.65);
}

.platform[data-platform="spotify"] {
    left: 36.728%;
    top: 50.712%;
}

.platform[data-platform="apple"] {
    left: 47.267%;
    top: 50.712%;
}

.platform[data-platform="amazon"] {
    left: 58.051%;
    top: 50.712%;
}

.platform[data-platform="soundcloud"] {
    left: 69.365%;
    top: 50.712%;
}

.platform[data-platform="deezer"] {
    left: 80.314%;
    top: 50.712%;
}

.platform[data-platform="tidal"] {
    left: 91.666%;
    top: 50.712%;
}

.platforms__listen {
    position: absolute;
    left: 87.3733%;
    top: 13.398%;
    width: 19.8618%;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* FOOTER */
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 65px;
    padding: 15px 30px;
    background: transparent;
}

.privacy {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: opacity .25s ease;
}

.privacy:hover {
    opacity: .7;
}

.seo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* DESKTOP DE POCA ALTURA */
@media (min-width: 768px) and (max-height: 850px) {
    .hero {
        padding-top: 20px;
        padding-bottom: 0;
    }

    .header {
        top: 25px;
        left: 35px;
        right: 35px;
    }

    .brand {
        width: clamp(135px, 11vw, 180px);
    }

    .socials--desktop {
        gap: 17px;
    }

    .socials--desktop img {
        width: 20px;
        height: 20px;
    }

    .cover {
        width: min(23vw, 370px);
    }

    .footer {
        height: 55px;
        padding: 10px 30px;
    }

    .privacy {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-height: 700px) {
    .hero {
        padding-top: 15px;
    }

    .header {
        top: 20px;
    }

    .brand {
        width: 140px;
    }

    .socials--desktop img {
        width: 18px;
        height: 18px;
    }

    .cover {
        width: min(21vw, 310px);
    }

    .footer {
        height: 48px;
    }

    .privacy {
        font-size: 11px;
    }
}

/* MÓVIL */
@media (max-width: 767px) {

    html,
    body {
        min-height: 100dvh;
        background: url("assets/bg-mobile.webp") center top / cover no-repeat #0678d9;
    }

    .site {
        background-image: url("assets/bg-mobile.webp");
        background-attachment: scroll;
        /* Compatibilidad Safari iOS */
    }

    .hero {
        flex: 1 1 auto;
        height: 100%;
        padding: 0 20px;
    }

    .header {
        top: 4vh;
        left: 20px;
        right: 20px;
        justify-content: center;
    }

    .brand {
        width: clamp(145px, 43vw, 190px);
    }

    .socials--desktop {
        display: none;
    }

    .hero__content {
        position: absolute;
        top: max(155px, calc(env(safe-area-inset-top, 0px) + 110px));
        bottom: calc(105px + env(safe-area-inset-bottom, 0px));
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 0;
        justify-content: space-evenly;
        gap: 14px;
    }

    .cover {
        width: min(66vw, 30dvh, 270px);
        aspect-ratio: 1;
        flex-shrink: 0;
    }

    .platforms {
        width: min(86vw, 34dvh, 360px);
        max-width: none;
        aspect-ratio: 1125 / 1398;
        height: auto;
        flex-shrink: 0;
    }

    .platform {
        width: 11.5556%;
    }

    /* 130 / 1125 */
    .platform[data-platform="spotify"] {
        left: 25.903%;
        top: 19.437%;
    }

    .platform[data-platform="apple"] {
        left: 50.270%;
        top: 19.437%;
    }

    .platform[data-platform="amazon"] {
        left: 75.775%;
        top: 19.437%;
    }

    .platform[data-platform="soundcloud"] {
        left: 25.903%;
        top: 39.594%;
    }

    .platform[data-platform="deezer"] {
        left: 50.270%;
        top: 39.594%;
    }

    .platform[data-platform="tidal"] {
        left: 75.775%;
        top: 39.594%;
    }

    .platforms__listen {
        display: none;
    }

    .footer {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 10px 20px max(16px, env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        justify-content: flex-end;
        gap: 12px;
        z-index: 4;
    }

    .socials--mobile {
        display: flex;
        gap: 24px;
        margin: 0;
    }

    .privacy {
        font-size: 12px;
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    .header {
        top: max(52px, calc(env(safe-area-inset-top, 0px) + 10px));
    }

    .brand {
        width: 145px;
    }

    .hero__content {
        top: max(125px, calc(env(safe-area-inset-top, 0px) + 85px));
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }

    .cover {
        width: min(60vw, 23dvh, 220px);
    }

    .platforms {
        width: min(82vw, 30dvh, 320px);
    }

    .footer {
        gap: 8px;
        padding-top: 5px;
    }

    .socials--mobile img {
        width: 20px;
        height: 20px;
    }
}

/* DULCES FLOTANTES — capas detrás del contenido */
.floating-candies {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.candy {
    position: absolute;
    display: block;
    width: var(--candy-size);
    max-width: none;
    height: auto;
    object-fit: contain;
    user-select: none;
    will-change: transform;
    transform-origin: center;
    animation: candy-float var(--duration, 9s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}

@keyframes candy-float {
    0%, 100% {
        transform: translate(0, 0) rotate(-3deg);
    }

    25% {
        transform: translate(8px, -14px) rotate(0deg);
    }

    50% {
        transform: translate(-5px, -22px) rotate(3deg);
    }

    75% {
        transform: translate(-10px, -8px) rotate(1deg);
    }
}

/* Las posiciones se refieren al viewport del hero */
.candy--lollipop-pink {
    --candy-size: clamp(170px, 19vw, 330px);
    --duration: 10s;
    --delay: -3s;
    left: -9%;
    top: 18%;
}

.candy--licorice-cross {
    --candy-size: clamp(175px, 20vw, 350px);
    --duration: 12s;
    --delay: -6s;
    right: -1%;
    top: 5%;
}

.candy--licorice-chocolate {
    --candy-size: clamp(180px, 19vw, 340px);
    --duration: 11s;
    --delay: -2s;
    left: -5%;
    bottom: 1%;
}

.candy--lollipop-green {
    --candy-size: clamp(170px, 18vw, 320px);
    --duration: 13s;
    --delay: -7s;
    right: -2%;
    bottom: 0%;
}

.candy--chocolate-shards {
    --candy-size: clamp(130px, 15vw, 270px);
    --duration: 9s;
    --delay: -4s;
    left: 7%;
    top: 42%;
}

.candy--chocolate-bar {
    --candy-size: clamp(130px, 14vw, 260px);
    --duration: 14s;
    --delay: -8s;
    right: 6%;
    top: 49%;
}

@media (max-width: 1100px) and (min-width: 768px) {

    .candy--chocolate-shards,
    .candy--chocolate-bar {
        display: none;
    }
}

@media (max-width: 767px) {
    .candy--lollipop-pink {
        --candy-size: 50vw;
        left: -20%;
        top: 10%;
    }

    .candy--licorice-cross {
        --candy-size: 40vw;
        right: -10%;
        top: 33%;
    }

    .candy--licorice-chocolate {
        --candy-size: 44vw;
        left: -15%;
        bottom: 32%;
    }

    .candy--lollipop-green {
        --candy-size: 45vw;
        right: -12%;
        bottom: 5%;
    }

    .candy--chocolate-shards,
    .candy--chocolate-bar {
        display: none;
    }
}

@media (max-width: 767px) and (max-height: 700px) {

    .candy--licorice-chocolate,
    .candy--lollipop-green {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .candy {
        animation: none;
    }
}