/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    --corporate: #e40078;
    --corporate-hover: #8c2b71;
    --corporate-secondary: #e400783b;
    --background-light: #e5e5e5;
    --background-light-secondary: #f6f6f6;
    --background-light-hover: #cdcdcd;
    --background-light-static: #191919;
    --text-light: #717171;
    --picture-background: #ebf4ff;
    --picture-background-secondary: #242424;
}

@view-transition {
    navigation: auto;
}

/* .transition-page {
    view-transition-name: page;
}

::view-transition-old(page) {
    animation: fade 0.2s linear forwards;
}

::view-transition-new(page) {
    animation: fade 0.3s linear reverse;
} 

@keyframes fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
} */

hr.thin {
    flex: 1;
    border: 0px;
    height: 1px;
    background-color: #000000;
}

/** Begin style: Scroll animations **/

/* .navigation-menu {
    animation: navigation-menu-scroll auto linear;
    animation-timeline: scroll(root); 
}

@keyframes navigation-menu-scroll {
    0% {
        bottom: 3rem;
    }
    20% {
        bottom: 3rem;
    }
    25% {
        bottom: 0.75rem;
    }
    30% {
        bottom: 0.75rem;
    }
    100% {
        bottom: 0.75rem;
    }
}*/

.description {
    font-size: clamp(0.6rem, 1.8vw, 0.9rem);
    color: #ffffff;
    max-width: 725px;
}

.keyword { //Remove if not needed
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1;
    color: #ffffff;
    font-weight: 500;
}

#keyword-second {
    opacity: 0;
    animation: keyword-second-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes keyword-second-scroll {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

#keyword-third {
    opacity: 0;
    animation: keyword-third-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes keyword-third-scroll {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.title-box {
    width: 280px;
    height: 120px;
    padding: 24px;
    border-radius: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 24px;
    color: black;
    background-color: #ffffff8f;
    backdrop-filter: blur(15px);
}

#slogan {
    animation: slogan-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes slogan-scroll {
    10% { opacity: 0 }
    15% { opacity: 1 }
    100% { opacity: 1 }
}

#main-image-zoom {
    transform: scale(2.9);
    animation: main-image-zoom-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes main-image-zoom-scroll {
    0% {
        transform: scale(2.9);
    }
    20% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1.3);
    }
}

#hero {
    animation: hero-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes hero-scroll {
    /* 0% { transform: translateY(0%) }
    20% { transform: translateY(0%) }
    30% { transform: translateY(-100%) }
    100% { transform: translateY(-100%) } */
    0% {
        opacity: 1;
        display: block;
    }
    20% {
        opacity: 1;
        display: block;
    }
    25% { opacity: 0;
        display: none;
    }
    30% { opacity: 0;
        display: none;
    }
    100% { opacity: 0;
        display: none;
    }
}

#features {
    animation: features-scroll auto linear;
    animation-timeline: scroll(root);
}

@keyframes features-scroll {
    /* 0% { transform: translateY(100dvh)}
    20% { transform: translateY(100dvh) }
    30% { transform: translateY(0dvh) }
    100% { transform: translateY(0dvh) } */
    0% {
        opacity: 0;
        display: none;
    }
    20% {
        opacity: 0;
        display: block;
    }
    25% {
        opacity: 0;
        display: block;
    }
    30% {
        opacity: 1;
        display: block;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

/** End style: Scroll animations **/

/** Begin style: Testimonials **/

.first-carousel-container {
    position: relative;
}

.first-carousel-container:before, .first-carousel-container:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 5;
}

.first-carousel-container:before {
    left: 0;
    background: linear-gradient(to left, #ffffff00, #ffffff);
}
.first-carousel-container:after {
    right: 0;
    background: linear-gradient(to right, #ffffff00, #ffffff);
}

@media (pointer: fine) {
    .first-carousel-container:hover {
        .testimonials-first-carousel {
            animation-play-state: paused;
        }
    }
    .second-carousel-container:hover {
        .testimonials-second-carousel {
            animation-play-state: paused;
        }
    }
}

.testimonials-first-carousel {
    animation: first-carousel-slide linear infinite;
}

.second-carousel-container {
    position: relative;
}

.second-carousel-container:before, .second-carousel-container:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 5;
}

.second-carousel-container:before {
    left: 0;
    background: linear-gradient(to left, #ffffff00, #ffffff);
}
.second-carousel-container:after {
    right: 0;
    background: linear-gradient(to right, #ffffff00, #ffffff);
}

.testimonials-second-carousel {
    animation: second-carousel-slide linear infinite;
}

@keyframes first-carousel-slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes second-carousel-slide {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

@media (max-width: 640px) {
    .first-carousel-container:before, .first-carousel-container:after {
        width: 50px;
    }
    .second-carousel-container:before, .second-carousel-container:after {
        width: 50px;
    }
}

/** End style: Testimonials **/

/** Begin style: Form input text **/

.placeholder {
    position: absolute;
    z-index: 20;
    top: -0.55rem;
    left: 1.5rem;
    border-radius: 3px;
    color: #00000080;
    font-size: 0.75rem;
    padding: 0rem 0.5rem;
    background: white;
    transition: top 0.3s, left 0.3s, font-size 0.3s, color 0.3s, z-index 0.3s;
}

.input-text-form:placeholder-shown {
    + div {
        top: 10px;
        left: 10px;
        z-index: 5;
        font-size: 0.9rem;
    }
}

.input-text-form:not(:placeholder-shown) {
    /* border: 1px solid var(--corporate-hover);
    + div {
        color: var(--corporate-hover);
    } */
}

.input-text-form:user-invalid {
    border: 1px solid red;
    animation: shake 0.2s;
    + div {
        color: red;
        animation: shake 0.2s;
    }
}

.input-text-form:user-invalid:placeholder-shown {
    border: 1px solid #00000040;
    animation: none;
    + div {
        color: #00000080;
        animation: none;
    }
}

.input-text-form:focus {
    border: 1px solid var(--corporate-hover) !important;
    animation: none !important;
    + div {
        top: -0.55rem;
        left: 1.5rem;
        z-index: 20;
        font-size: 0.75rem;
        color: var(--corporate-hover);
        animation: none !important;
    }
}

.input-text-form:focus:user-invalid:placeholder-shown {
    border: 1px solid var(--corporate-hover);
    + div {
        color: var(--corporate-hover);
    }
}


@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    } 
    20%, 40%, 60%, 80% {
        transform: translateX(-2%);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(2%);
    }
}

.input-text-query:placeholder-shown {
    + div {
        top: 10px;
        left: 10px;
        z-index: 5;
        font-size: 0.9rem;
    }
}

.input-text-query:focus {
    border: 1px solid var(--corporate-hover) !important;
    animation: none !important;
    + div {
        top: -0.55rem;
        left: 1.5rem;
        z-index: 20;
        font-size: 0.75rem;
        color: var(--corporate-hover);
        animation: none !important;
    }
}

.input-text-query:not(:placeholder-shown) {
    /* border: 1px solid var(--corporate-hover);
    + div {
        color: var(--corporate-hover);
    } */
}

/** End style: Form input text **/

/** Begin style: Navigation menu **/

.navigation-static-menu {
    //position: fixed;
    display: flex;
    //bottom: 8px;
    //z-index: 50;
    justify-content: center;
    //margin-left: 8px;
    //margin-right: 8px;
    //width: calc(100% - 16px);
    width: 100%;
    height: 52px;
    /* animation: navigation-static-menu-scroll auto linear;
    animation-timeline: scroll(root); */
}

@keyframes navigation-static-menu-scroll {
    100% {
        bottom: 0rem;
    }
}

.navigation-static-menu-ul {
    /* animation: navigation-static-menu-ul-scroll auto linear;
    animation-timeline: scroll(root); */
}

@keyframes navigation-static-menu-ul-scroll {
    100% {
        width: 100%;
        border-radius: 0px;
    }
}

.navigation-menu {
    //position: fixed;
    display: flex;
    //bottom: 8px;
    //z-index: 50;
    justify-content: center;
    //margin-left: 8px;
    //margin-right: 8px;
    //width: calc(100% - 16px);
    width: 100%;
    //animation: navigation-menu-hide 3s;
    animation-fill-mode: forwards;
}

@keyframes navigation-menu-hide {
    0% {
        bottom: 25px;
    }
    90% {
        bottom: 25px;
    }
    100% {
        bottom: -25px;
    }
}

/** End style: Navigation menu **/

/** Begin style: FAQS **/

details::details-content {
    block-size: 0;
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition:
        block-size 0.3s ease-in-out,
        content-visibility 0.3s ease-in-out;
        
    transition-behavior: allow-discrete;
}

details[open]::details-content {
    block-size: auto;
}

/** End style: FAQS **/

/** Begin style: Side menu **/

#side_menu.sidemenu-large {
    display: block;
    z-index: 0;
    position: static;
    height: 100%;
    width: 224px;
    transition: width 0.3s ease-in-out;
    container-type: inline-size;
    container-name: sidemenu;
}

/* Si el estado es colapsado (detectado desde la cookie en el <head>) */
html.sidemenu-collapsed #side_menu.sidemenu-large {
    width: 60px !important;

    .footer-nav-toggle {
        transform: rotate(180deg);
    }
}

/* Si el estado es expandido */
html.sidemenu-expanded #side_menu.sidemenu-large {
    width: 224px !important;

    .footer-nav-toggle {
        transform: rotate(0deg);
    }
}

.footer-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    margin-top: 24px;
    padding-right: 8px;
}

.footer-plan {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    color: #ffffff;
    border-radius: 8px;
    height: 48px;
}

.footer-nav-submenu {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--background-light-secondary);
    justify-content: space-between;
    align-items: center;
}

.nav-scroll {
    overflow-y: auto;
    scrollbar-color: #000000 var(--background-light);
    height: 100%;
    padding-right: 8px;
    margin-top: 16px;
}

.sidemenu-mobile {
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    height: 60px;
}

.item-selected-filter {
    filter: invert(20%) sepia(96%) saturate(4763%) hue-rotate(316deg) brightness(98%) contrast(116%);
}

.side-menu-title {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.side-menu-section {
    display: flex;
    gap: 8px;
    padding: 2px;
    justify-content: start;
    align-items: center;
    opacity: 1;
}

.side-menu-ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px;
    margin-top: 0px
}

.side-menu-home {
    width: 100%;
}

@container sidemenu (width < 80px) {
    .sidemenu-large .side-menu-title {
        display: none;
    }

    .sidemenu-large .side-menu-section {
        justify-content: start;
        width: 16px;
    }

    .sidemenu-large .text-nav-section {
        display: none;
    }

    .side-menu-ul {
        width: 36px;
    }

    .side-menu-home {
        width: 48px;
    }

    .nav-scroll {
        width: fit-content;
        padding-right: 0px;
    }

    .footer-nav {
        width: 52px;
        padding-right: 0px;
    }

    .footer-plan {
        display: none;
    }

    .footer-nav-submenu {
        flex-direction: column-reverse;
        padding-left: 0px;
        padding-right: 0px;
    }
}

/** End style: Side menu **/

/** Begin style: Grid collections **/

.grid-collections {
    display: grid;
    height: fit-content;
    max-height: calc(100% - 80px);
    grid-template-columns: repeat(auto-fill, minmax(224px, 0fr));
    gap: 2rem;
    padding: 3rem;
    padding-top: 2rem;
    justify-content: center;
    overflow-y: auto;
    scrollbar-color: #000000 #ffffff;
}

.grid-pictures {
    display: grid;
    width: 100%;
    height: fit-content;
    max-height: calc(100% - 80px);
    grid-template-columns: repeat(auto-fill, minmax(252px, 0fr));
    gap: 2rem;
    padding: 1rem;
    justify-content: center;
    overflow-y: auto;
    scrollbar-color: #000000 #ffffff;
    //scroll-timeline-name: --my-list-scroller;
}

.perspective {
    transition: all 0.5s ease-in-out;
}

.perspective:hover {
    transform:
        perspective(5000px)
        rotateY(20deg)
        rotateX(20deg);
}

/** End style: Grid collections **/

/** Begin style: Modal **/

.modal-window[open] {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;

    @starting-style {
        opacity: 0;
    }
}

.modal-window {
    z-index: 100;
    border-radius: 12px;
    background-color: transparent;
    padding: 10px;
    opacity: 0;
}

.modal-window::backdrop {
    background-color: #00000020;
    transition: background-color 0.3s ease-in-out;

    @starting-style {
        background-color: #00000000;
    }
}

#uploading-files-container[open] {
    .icon-toggle {
        transform: rotate(180deg);
    }
}

/** End style: Modal **/

/** Begin style: Button **/

.select-option-button {
    span {
        translate: 0px 0px;
        transition: translate 0.3s, color 0.3s;
    }
    span img {
        transition: filter 0.3s;
    }
}

.select-option-button:hover {
    span {
        translate: 0px -5px;
        color: var(--corporate);
    }
    span img {
        filter: invert(20%) sepia(96%) saturate(4763%) hue-rotate(316deg) brightness(98%) contrast(116%);
    }
}

.floating-add-button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    gap: 4px;
    padding: 8px;
    background-color: black;
    color: white;
    transition: background-color 0.3s ease-in-out;
    border-radius: 9999px;
    /* animation: floating-add-button-scroll auto linear;
    animation-timeline: --my-list-scroller; */

    img {
        width: 20px;
        height: 20px;
        filter: invert(100%);
    }

    span {
        
    }
}

.floating-add-button:hover {
    background-color: var(--corporate-hover);
}

@keyframes floating-add-button-scroll {
    
    0% {
        display: block;
    }
    
    5% {
        background-color: var(--corporate-hover);
        display: none;
    }
}

/** End style: Button **/

/** Begin style: Tables **/

/** End style: Tables **/

/** Begin style: Loader **/

.loader {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mascara {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0 0 100% 100%;
    overflow: hidden;
}

/** End style: Loader **/

/** Begin style: Private collections **/
.upper-wave-container {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    clip-path: polygon(100% 0%, 0% 0% , 0.00% 86.62%, 2.00% 85.74%, 4.00% 84.92%, 6.00% 84.19%, 8.00% 83.54%, 10.00% 83.00%, 12.00% 82.57%, 14.00% 82.26%, 16.00% 82.07%, 18.00% 82.00%, 20.00% 82.06%, 22.00% 82.24%, 24.00% 82.55%, 26.00% 82.98%, 28.00% 83.51%, 30.00% 84.15%, 32.00% 84.88%, 34.00% 85.69%, 36.00% 86.57%, 38.00% 87.50%, 40.00% 88.47%, 42.00% 89.47%, 44.00% 90.47%, 46.00% 91.47%, 48.00% 92.45%, 50.00% 93.38%, 52.00% 94.26%, 54.00% 95.08%, 56.00% 95.81%, 58.00% 96.46%, 60.00% 97.00%, 62.00% 97.43%, 64.00% 97.74%, 66.00% 97.93%, 68.00% 98.00%, 70.00% 97.94%, 72.00% 97.76%, 74.00% 97.45%, 76.00% 97.02%, 78.00% 96.49%, 80.00% 95.85%, 82.00% 95.12%, 84.00% 94.31%, 86.00% 93.43%, 88.00% 92.50%, 90.00% 91.53%, 92.00% 90.53%, 94.00% 89.53%, 96.00% 88.53%, 98.00% 87.55%, 100.00% 86.62%);
}

.lower-wave-container {
    width: 100%;
    height: 500px;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    clip-path: polygon(100% 100%, 0% 100% , 0.00% 5.62%, 2.00% 4.74%, 4.00% 3.92%, 6.00% 3.19%, 8.00% 2.54%, 10.00% 2.00%, 12.00% 1.57%, 14.00% 1.26%, 16.00% 1.07%, 18.00% 1.00%, 20.00% 1.06%, 22.00% 1.24%, 24.00% 1.55%, 26.00% 1.98%, 28.00% 2.51%, 30.00% 3.15%, 32.00% 3.88%, 34.00% 4.69%, 36.00% 5.57%, 38.00% 6.50%, 40.00% 7.47%, 42.00% 8.47%, 44.00% 9.47%, 46.00% 10.47%, 48.00% 11.45%, 50.00% 12.38%, 52.00% 13.26%, 54.00% 14.08%, 56.00% 14.81%, 58.00% 15.46%, 60.00% 16.00%, 62.00% 16.43%, 64.00% 16.74%, 66.00% 16.93%, 68.00% 17.00%, 70.00% 16.94%, 72.00% 16.76%, 74.00% 16.45%, 76.00% 16.02%, 78.00% 15.49%, 80.00% 14.85%, 82.00% 14.12%, 84.00% 13.31%, 86.00% 12.43%, 88.00% 11.50%, 90.00% 10.53%, 92.00% 9.53%, 94.00% 8.53%, 96.00% 7.53%, 98.00% 6.55%, 100.00% 5.62%);
    margin-top: -87px
}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 8px;
    color: white;
    height: 100%;
    div {
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;

        img {
            opacity: 0.85;
        }
    }
}
    
.div2 {
    grid-row: span 4 / span 4;
}

.div3 {
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 5;
}

.div4 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 1;
}

.div5 {
    grid-row: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 4;
}

.div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 4;
}

.div9 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
    grid-row-start: 1;
}

.div10 {
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 5;
}

.div12 {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 6;
}

.div13 {
    grid-row: span 7 / span 7;
    grid-column-start: 4;
    grid-row-start: 1;
}
    
.collage-div1 {
    grid-row: span 4 / span 4;
}

.collage-div2 {
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
}

.collage-div3 {
    grid-row: span 4 / span 4;
    grid-column-start: 5;
}

.favorite-icon {
    width: 20px;
    height: 20px;
}

.favorite-unselected {
    filter: invert(100%);
}

.favorite-liked {
    filter: invert(59%) sepia(48%) saturate(1222%) hue-rotate(132deg) brightness(106%) contrast(102%);
}

.favorite-loved {
    filter: invert(80%) sepia(5%) saturate(350%) hue-rotate(140deg) brightness(110%) contrast(110%);
}

.card-catalog-default {
    img {
        opacity: 0.7;
        transition: opacity 0.3s ease-in-out;
    }
}

.card-catalog-default:hover {
    img {
        opacity: 0.9;
    }
}

.cover-carousel {
    --slideW: min(100%, 750px);
    width: 100%;
    height: auto;
    max-height: 500px;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    container-type: inline-size;
    container-name: carousel-size;
}

.cover-carousel-track {
    display: flex;
    height: 100%;
    // width: calc(100% * 15); /* 15 imágenes */
    width: calc(var(--slideW) * 15);
    margin-left: max(0px, calc((100% - 750px) / 2)); /* centrado dinámico */
    animation: scroll-bounce-carousel 31.5s infinite;
    //animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    transform: translateX(-6.6667%); /* empieza en imagen 2 (1/15) */
    will-change: transform;
}

.cover-carousel-track img {
    width: calc(100% / 15);
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

    /* 15 imágenes: 1 previa + 7 originales + 7 duplicadas */
@keyframes scroll-bounce-carousel {
    0%       { transform: translateX(-6.6667%); }
    12.698%  { transform: translateX(-6.6667%); }
    14.285%  { transform: translateX(-13.3333%); }

    26.983%  { transform: translateX(-13.3333%); }
    28.571%  { transform: translateX(-20%); }

    41.269%  { transform: translateX(-20%); }
    42.857%  { transform: translateX(-26.6667%); }

    55.555%  { transform: translateX(-26.6667%); }
    57.143%  { transform: translateX(-33.3333%); }

    69.841%  { transform: translateX(-33.3333%); }
    71.429%  { transform: translateX(-40%); }

    84.127%  { transform: translateX(-40%); }
    85.714%  { transform: translateX(-46.6667%); }

    98.412%  { transform: translateX(-46.6667%); }
    100%     { transform: translateX(-53.3333%); }
}

@container carousel-size (min-width: 751px) {
    .cover-carousel::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;

        /* Creamos una máscara para dejar transparente la banda central */
        -webkit-mask-image: linear-gradient(to right,
            black 0,
            black calc((100% - 750px)/2),
            transparent calc((100% - 750px)/2),
            transparent calc((100% + 750px)/2),
            black calc((100% + 750px)/2),
            black 100%
        );
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-image: linear-gradient(to right,
            black 0,
            black calc((100% - 750px)/2),
            transparent calc((100% - 750px)/2),
            transparent calc((100% + 750px)/2),
            black calc((100% + 750px)/2),
            black 100%
        );
        mask-repeat: no-repeat;
        mask-size: 100% 100%;

        /* Filtro aplicado a las zonas enmascaradas (laterales) */
        backdrop-filter: grayscale(1);
    }
}


/** End style: Private collections **/

/** Begin style: Previewer **/
.parent-previewer {
    container-type: inline-size;
    container-name: previewer;

    .navigation-private-menu-top {
        position: sticky;
        top: 20px;
        right: 0;
        left: 0;
        margin: 0 auto;
        width: fit-content;
        display: flex;
        justify-content: center;
        z-index: 25;
        height: 52px;
        transition-duration: 0.3s;

        .li--shiftable {
            display: block;
        }
    }

    .navigation-static-menu-ul {
        width: auto;
        border-radius: 9999px;
        gap: 8px;
    }

    .navigation-private-menu-bottom {
        display: none;
        z-index: 25;
        width: 100%;
        justify-content: center;
        height: 52px;
    }

    .box-previewer {
        width: 100%;
        height: 100%;
        padding: 8px;
        margin-top: -52px;
        
        .cover-composition {
            aspect-ratio: 16 / 6;
        }

        .cover-title {
            position: absolute;
            top: 96px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            padding: 0 20px;
            text-align: center;
            color: white;
        }

        .collage-composition {
            flex-direction: row;

            .first-collage-composition {
                width: 80%;
                height: 100%;
                display: flex;
                flex-direction: row;
                gap: 2px;

                .three-in-a-row {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    width: 25%;
                    height: 100%;
                }

                .cover-image {
                    position: relative;
                    background-color: black;
                    overflow: hidden;
                    width: 75%;
                    height: 100%;
                }
            }
            .second-collage-composition {
                width: 20%;
                height: 100%;
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .one-of-three {
                width: 100%;
                height: 33.33333%;
                background-color: black;
                overflow: hidden;
            }
        }
        
    }
}



@container previewer (width < 768px) {
    .parent-previewer {
        .mask-previewer {
            border-radius: 0px;
        }
        
        .scroll-previewer {
            scrollbar-width: none;
        }
        
        .navigation-private-menu-top {
            top: 0;
            width: 100%;
            .li--shiftable {
                display: none;
            }
        }

        .navigation-static-menu-ul {
            width: 100%;
            border-radius: 0px;
            gap: 16px;
        }

        .navigation-private-menu-bottom {
            display: flex;
            position: sticky;
            bottom: 0;
        }

        .box-previewer {
            .cover-composition {
                aspect-ratio: 16 / 14;
            }

            .cover-title {
                top: 32px;
            }

            .collage-composition {
                flex-direction: column;

                .first-collage-composition {
                    width: 100%;
                    height: 80%;
                    flex-direction: column-reverse;

                    .three-in-a-row {
                        flex-direction: row;
                        width: 100%;
                        height: 25%;
                    }

                    .cover-image {
                        width: 100%;
                        height: 75%;
                    }
                }
                .second-collage-composition {
                    width: 100%;
                    height: 20%;
                    flex-direction: row;
                }

                .one-of-three {
                    width: 33.33333%;
                    height: 100%;
                }
            }
        }
    }
}

/** End style: Previewer **/

/** Begin style: Settings **/

.access-status {
    border: 1px solid #0f9d58;
    padding: 4px 16px;
    border-radius: 9999px;
}

.pending-status {
    border-color: #e48000a6;
    background-color: #e4800012;
    color: #e48000a6;
}

.active-status {
    border-color: #02b07fa6;
    background-color: #02b07f12;
    color: #02b07fa6;
}

.rejected-status {
    border-color: #ff0f0fa6;
    background-color: #ff0f0f12;
    color: #ff0f0fa6;
}

.revoked-status {
    border-color: #000000a6;
    background-color: #00000012;
    color: #000000a6;
}