@charset "UTF-8";

/* Fonts */

/* Font Luna */
@font-face {
    font-family: luna;
    src: url(../fontLuna/Luna.ttf);
}

/* Font HeyComic */
@font-face {
    font-family: heyComic;
    src: url(../fontHeyComic/heyComic.ttf);
}

/* Root: Styles, Light Theme by default */
:root{
    /* Test Colors */

    --test-red: rgba(255, 0, 0, 0.1);
    --test-green: rgba(0, 255, 0, 0.1);
    --test-blue: rgba(0, 0, 255, 0.1);

    /* White Colors */
    --white: rgb(235, 247, 255);
    --white-100: #ffffff;
    --white-90: rgba(255, 255, 255, 0.90);
    --white-75: rgba(255, 255, 255, 0.75);
    --white-50: rgba(255, 255, 255, 0.50);
    --white-25: rgba(255, 255, 255, 0.25);

    /* Black Colors */
    --black:rgb(5, 0, 45);
    --pure-black: #000000;
    --black-75: rgba(5, 0, 45,0.75);
    --black-50: rgba(5, 0, 45,0.50);
    --black-25: rgba(5, 0, 45,0.25);

    /* Hanshyn Colors 2025 */

    /* Pink Hanshyn */
    --whitePink: rgb(255, 198, 223);
    --lightPink: rgb(255, 125, 181);
    --pink: rgb(252, 26, 150);
    --darkPink: rgb(139, 8, 48);
    --blackPink: rgb(58, 3, 19);

    /* Purple */
    --whitePurple: rgb(235, 216, 255);
    --lightPurple: rgb(203, 155, 255);
    --purple: rgb(173, 31, 255);
    --darkPurple: rgb(87, 6, 134);
    --blackPurple: rgb(41, 1, 78);

    /* Yellow */
    --whiteYellow: rgb(255, 244, 227);
    --lightYellow: rgb(250, 200, 124);
    --yellow: rgb(255, 153, 0);
    --darkYellow: rgb(173, 70, 1);
    --blackYellow: rgb(88, 21, 0);

    /* Green */
    --whiteGreen: rgb(222, 255, 227);
    --lightGreen: rgb(169, 255, 180);
    --green: rgb(9, 161, 29);
    --darkGreen: rgb(4, 70, 13);
    --blackGreen: rgb(2, 27, 5);

    /* Blue */
    --whiteBlue: rgb(175, 206, 253);
    --lightBlue: rgb(99, 158, 247);
    --blue: rgb(32, 98, 238);
    --darkBlue: rgb(12, 44, 114);
    --blackBlue: rgb(4, 8, 46);

    /* Cyan */
    --cyan: rgb(0, 255, 252);

    /* Other Colors */
    --transparent: rgba(255,255,255,0);

    --text-color: rgb(48, 71, 97);

    --shadowcolor: rgba(120, 174, 211);
    --shadowcolorPag: rgb(124, 161, 184);
    --shadowcolor2: rgb(104, 135, 153);
    
    --gradientBg1: rgb(201, 227, 253);
    --gradientBg2: rgb(219, 242, 255);

    /* Gradients */
    --hanshyn-gradient: linear-gradient(45deg, rgb(247, 33, 97) 0%, rgb(173, 31, 255) 50%, rgb(0, 255, 252) 100%);

    /* Text */
    --title: 1.8em;
    --subtitle: 1.6em;
    --button-txt: 1.1em;
    --p-normal: 1em;
    --p-disclaimer: 0.8em;
    --p-primary: 1.1em;

    --font-general: Verdana, sans-serif;

    /* Sizes */
    --logo-size: 160px;
    --icon-size: 55px;

    /* Border Radius */
    --border-full: 9999px;
    --border: 10px;

    --test-border: 1px solid #000000;

    /* Spaces, Margins and Paddings */
    --margin-small: 12px;
    --margin-space: 22px;
    --margin-large: 44px;
    --margin-fixed: 2%;

    --padding-small: 9px;
    --padding-box: 18px;
    --padding-large: 36px;

    --gap-space: 12px;
    --gap-small: 8px;

    --transition: all 0.15s;
    --transition-thumb: all 0.2s;

    /* For Buttons */
    --border-button: 3px;
    --boxshadow-button: 0px 4px;

    --size-selection-border: 6px;
}

/* General Styles Rules */

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    /* Important! Border Box */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body{
    width: 100%;
    height: 100%;
    display: block;
}

body{
    font-family: var(--font-general);
    background: linear-gradient(90deg, var(--gradientBg1) 0%, var(--gradientBg2) 100%);
}

img{
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button:hover{
    cursor: pointer;
}

ul, 
ol{
    list-style-position: inside;
}

/* Custom Styles */

/* No Display */
.no-display{
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Container & Wrapper */
.container,
.wrapper-full,
.wrapper-1344,
.wrapper-960{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.container{
    padding-left: 4%;
    padding-right: 4%;

    /* Flex Box */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    /*background-color: var(--test-blue);*/
}

.wrapper-full,
.wrapper-1344,
.wrapper-960{
    min-width: 1px;
    display: block;

    /*background-color: var(--test-red);*/
}

.wrapper-full{
    max-width: 100%;
}
.wrapper-1344{
    max-width: 1344px;
}
.wrapper-960{
    max-width: 960px;
}

/* Flex Rules */
.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* Grid Rules */
.grid{
    /* Grid Display */
    display: -ms-grid;
    display: grid;

    /* rules for Firefox (prevent overlap) */
    min-width: 0;
    min-height: 0;
}

/* Logo Hanshyn (Header & Footer) */
a.logo-container{
    width: var(--logo-size);
    height: auto;
    display: block;
}

a.logo-container > img{
    width: 100%;
    min-width: 1px;
    height: auto;
}

/* Icon Social Media Rules */
a.icon-social{
    width: var(--icon-size);
    height: auto;
    display: block;
}
a.icon-social img{
    width: 100%;
    height: auto;
}

/* Nav > Ul Styles (Main Header & Footer) */
ul.nav-general{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
ul.nav-general > li{
    list-style: none;
}

/* Buttons */
.button{
    display: inline-block;

    text-align: center; 
    text-decoration: none;
    font-size: var(--button-txt);
    font-family: heyComic;
    letter-spacing: 0.06em;
    white-space: nowrap;

    border: var(--border-button) solid;
    padding: var(--padding-small) var(--padding-box);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

.button:hover{
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

/* Button Color Pink */
.button-pink{
    color: var(--whitePink);
    background: var(--pink);
    border-color: var(--darkPink);
    box-shadow: var(--boxshadow-button) var(--darkPink);
}
.button-pink:hover{
    color: var(--lightPink);
    background: var(--darkPink);
    border-color: var(--blackPink);
    box-shadow: var(--boxshadow-button) var(--blackPink);
}

/* Button Color Purple */
.button-purple{
    color: var(--whitePurple);
    background: var(--purple);
    border-color: var(--darkPurple);
    box-shadow: var(--boxshadow-button) var(--darkPurple);
}
.button-purple:hover{
    color: var(--lightPurple);
    background: var(--darkPurple);
    border-color: var(--blackPurple);
    box-shadow: var(--boxshadow-button) var(--blackPurple);
}

/* Button Color Blue */
.button-blue{
    color: var(--whiteBlue);
    background: var(--blue);
    border-color: var(--darkBlue);
    box-shadow: var(--boxshadow-button) var(--darkBlue);
}
.button-blue:hover{
    color: var(--lightBlue);
    background: var(--darkBlue);
    border-color: var(--blackBlue);
    box-shadow: var(--boxshadow-button) var(--blackBlue);
}

/* Button Color Yellow */
.button-yellow{
    color: var(--whiteYellow);
    background: var(--yellow);
    border-color: var(--darkYellow);
    box-shadow: var(--boxshadow-button) var(--darkYellow);
}
.button-yellow:hover{
    color: var(--lightYellow);
    background: var(--darkYellow);
    border-color: var(--blackYellow);
    box-shadow: var(--boxshadow-button) var(--blackYellow);
}

/* Button Color Green */
.button-green{
    color: var(--whiteGreen);
    background: var(--green);
    border-color: var(--darkGreen);
    box-shadow: var(--boxshadow-button) var(--darkGreen);
}
.button-green:hover{
    color: var(--lightGreen);
    background: var(--darkGreen);
    border-color: var(--blackGreen);
    box-shadow: var(--boxshadow-button) var(--blackGreen);
}

/* Button Download */
.button-download{
    color: var(--whiteGreen);
    background: var(--green);
    border-color: var(--darkGreen);
    box-shadow: var(--boxshadow-button) var(--darkGreen);
}
.button-download:hover{
    color: var(--lightGreen);
    background: var(--darkGreen);
    border-color: var(--blackGreen);
    box-shadow: var(--boxshadow-button) var(--blackGreen);
}

/* Buttons Header General Base */
.button-header-base{
    background: var(--gradientBg2);
    border-color: var(--shadowcolor);
    box-shadow: var(--boxshadow-button) var(--shadowcolor);
}

/* Button Header Pink */
.button-header-pink{
    color: var(--pink);
}
.button-header-pink:hover{
    color: var(--whitePink);
    background: var(--pink);
    border-color: var(--darkPink);
    box-shadow: var(--boxshadow-button) var(--darkPink);
}

/* Button Header Purple */
.button-header-green{
    color: var(--green);
}
.button-header-green:hover{
    color: var(--whiteGreen);
    background: var(--green);
    border-color: var(--darkGreen);
    box-shadow: var(--boxshadow-button) var(--darkGreen);
}

/* Button Header Purple */
.button-header-purple{
    color: var(--purple);
}
.button-header-purple:hover{
    color: var(--whitePurple);
    background: var(--purple);
    border-color: var(--darkPurple);
    box-shadow: var(--boxshadow-button) var(--darkPurple);
}

/* Button Header Yellow */
.button-header-yellow{
    color: var(--yellow);
}
.button-header-yellow:hover{
    color: var(--whiteYellow);
    background: var(--yellow);
    border-color: var(--darkYellow);
    box-shadow: var(--boxshadow-button) var(--darkYellow);
}

/* Button Header Blue */
.button-header-blue{
    color: var(--blue);
}
.button-header-blue:hover{
    color: var(--whiteBlue);
    background: var(--blue);
    border-color: var(--darkBlue);
    box-shadow: var(--boxshadow-button) var(--darkBlue);
}

/* Button Prev and Next */
.button-prev{
    color: var(--white);
    background: var(--purple);
    border-color: var(--darkPurple);
    box-shadow: var(--boxshadow-button) var(--darkPurple);
}
.button-next{
    color: var(--white);
    background: var(--pink);
    border-color: var(--darkPink);
    box-shadow: var(--boxshadow-button) var(--darkPink);
}

.button-prev:hover{
    color: var(--lightPurple);
    background: var(--darkPurple);
    border-color: var(--blackPurple);
    box-shadow: var(--boxshadow-button) var(--blackPurple);
}
.button-next:hover{
    color: var(--lightPink);
    background: var(--darkPink);
    border-color: var(--blackPink);
    box-shadow: var(--boxshadow-button) var(--blackPink);
}

/* Button Pagination */
.button-page-number{
    font-family: var(--font-general);
    font-size: var(--p-normal);
    font-weight: 700;

    color: var(--shadowcolorPag);
    background: var(--gradientBg2);
    border-color: var(--shadowcolor);
    box-shadow: var(--boxshadow-button) var(--shadowcolor);
}
.button-page-number:hover{
    color: var(--text-color);
    background: var(--gradientBg1);
    border-color: var(--text-color);
    box-shadow: var(--boxshadow-button) var(--text-color);
}

.button-first-last-page{
    color: var(--white);
    background: var(--shadowcolor2);
    border-color: var(--text-color);
    box-shadow: var(--boxshadow-button) var(--text-color);
}

.active{
    color: var(--darkYellow);
    background: var(--yellow);
    border-color: var(--darkYellow);
    box-shadow: var(--boxshadow-button) var(--darkYellow);
    
}
.active:hover{
    color: var(--yellow);
    background: var(--darkYellow);
    border-color: var(--blackYellow);
    box-shadow: var(--boxshadow-button) var(--blackYellow);
}

.pagination-dots {
    margin: 0 var(--margin-small);
    font-size: var(--p-normal);
    font-weight: 700;
    color: var(--text-color);
}

/* Up Button */
#up-button{
    /* No Display */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    position: fixed;
    z-index: 12;
    right: 0;
    bottom: 0;

    margin: auto var(--margin-fixed) var(--margin-fixed) auto;

    transition: all 0.3s ease;
}
#up-button.showUpButton{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Box Style Color Themes */
.box-stylized{
    height: auto;
    display: block;

    text-align: center; 
    text-decoration: none;
    font-size: var(--button-txt);
    font-family: heyComic;
    letter-spacing: 0.06em;
    white-space: nowrap;

    border: var(--border-button) solid;
    padding: var(--padding-small) var(--padding-box);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

.box-pink{
    color: var(--whitePink);
    background: var(--pink);
    border-color: var(--darkPink);
    box-shadow: var(--boxshadow-button) var(--darkPink);
}
.box-purple{
    color: var(--whitePurple);
    background: var(--purple);
    border-color: var(--darkPurple);
    box-shadow: var(--boxshadow-button) var(--darkPurple);
}
.box-blue{
    color: var(--whiteBlue);
    background: var(--blue);
    border-color: var(--darkBlue);
    box-shadow: var(--boxshadow-button) var(--darkBlue);
}
.box-yellow{
    color: var(--whiteYellow);
    background: var(--yellow);
    border-color: var(--darkYellow);
    box-shadow: var(--boxshadow-button) var(--darkYellow);
}
.box-green{
    color: var(--whiteGreen);
    background: var(--green);
    border-color: var(--darkGreen);
    box-shadow: var(--boxshadow-button) var(--darkGreen);
}

.box-noBg{
    height: auto;
    display: block;

    border: var(--border-button) solid;
    padding: var(--padding-box);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

.box-noBg-pink{
    border-color: var(--pink);
    box-shadow: var(--boxshadow-button) var(--pink);
}
.box-noBg-purple{
    border-color: var(--purple);
    box-shadow: var(--boxshadow-button) var(--purple);
}
.box-noBg-yellow{
    border-color: var(--yellow);
    box-shadow: var(--boxshadow-button) var(--yellow);
}
.box-noBg-blue{
    border-color: var(--blue);
    box-shadow: var(--boxshadow-button) var(--blue);
}
.box-noBg-green{
    border-color: var(--green);
    box-shadow: var(--boxshadow-button) var(--green);
}

.box-white{
    padding: var(--padding-box);
    background-color: var(--white-50);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
}

/* Font & Text */
section p,
section ul,
section ol {
    color: var(--text-color);
    font-size: var(--p-normal);
    line-height: 1.45em;
}

.title{
    font-family: Luna;
    font-size: var(--title);
    font-weight: 700;
    text-align: center;

    margin-bottom: var(--margin-space);
}

.subtitle{
    font-family: heyComic;
    font-size: var(--subtitle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.p-normal{
    font-size:var(--p-normal);
    font-weight: 400;
}

.legal-disclaimer{
    font-size: var(--p-disclaimer);
    font-weight: 400;
    text-align: center;
}
.legal-disclaimer strong{
    font-weight: 700;
    color: var(--black);
}

/* Order List Legal */
.list-legal{
    counter-reset: section;
}
.list-legal li{
    counter-increment: section;
    position: relative; /* clave para que ::before se posicione respecto al li */
    list-style-type: none;
    margin-bottom: var(--margin-space);
}
.list-legal li:last-child{
    margin-bottom: 0px;
}
.list-legal li::before{
    content: counters(section, ".") ". ";
    color: var(--pink);
    font-size: 1.2em;
    font-weight: 700;
}
.list-legal li ol > li{
    margin-top: var(--margin-space);
    margin-left: 2.4em;
}
.list-legal strong{
    font-weight: 700;
    color: var(--black);
}
.list-legal  a{
    font-weight: 700;
}

/* Color Txt */
.txtColor-pink{
    color: var(--pink);
}
.txtColor-purple{
    color: var(--purple);
}
.txtColor-yellow{
    color: var(--yellow);
}
.txtColor-blue{
    color: var(--blue);
}
.txtColor-green{
    color: var(--green);
}
.txtColor-txt{
    color: var(--text-color);
}

/* Boxed Text */
.boxed-text{
    width: fit-content;
    height: auto;
    display: block;

    padding: var(--padding-small);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

.boxed-text-pink{
    color: var(--white);
    background-color: var(--pink);
}
.boxed-text-purple{
    color: var(--white);
    background-color: var(--purple);
}
.boxed-text-yellow{
    color: var(--blackYellow);
    background-color: var(--yellow);
}
.boxed-text-blue{
    color: var(--white);
    background-color: var(--blue);
}
.boxed-text-green{
    color: var(--white);
    background-color: var(--green);
}

/* Glass Effect */
.glass{
    background: var(--white-75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(10px); /* Soporte Safari */
}

/* Copy Alert */
#alert{
    display: none;
    pointer-events: none;
    
    position: fixed;
    z-index: 12;
    bottom: 0;
    left: 0;

    margin-bottom: var(--margin-fixed);
    margin-left: var(--margin-fixed);
}

/* Main Header (Header Site) */
header#header-main{
    width: 100%;
    height: auto;

    margin-top: var(--margin-small);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    position: fixed;
    z-index: 11; /* Z Index 9 */
    top: 0;
    left: 0;
    right: 0;

    /*background-color: var(--test-green);*/
}

#header-main-container{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: var(--gap-space);

    padding: var(--margin-small) var(--margin-space);

    position: relative;
    z-index: inherit; /* Z Index 9 de #main-header */

    -webkit-border-radius: var(--border-full);
    -moz-border-radius: var(--border-full);
    border-radius: var(--border-full);

    box-shadow: 0px 6px 20px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 6px 20px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 6px 20px 1px var(--shadowcolor);
}

/* Header Container Border: Gradient Border Trick */
#header-main-container::before {
    content: "";

    position: absolute;

    inset: 0; /* Cover the hole element */
    padding: 2px; /* Border Size */
    border-radius: inherit; /* The same radius of the container */
    background: var(--hanshyn-gradient);

    /* Masks: standar version + prefix */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none; /* Doesn't block actions */
    z-index: 8; /* It's behind the content */
}

/* Header (Main) 1: Logo */
#header-main-1{
    order: 1;
    /*background-color: var(--test-blue);*/
}


/* Header (Main) 2: Nav */
#header-main-2{
    order: 2;
    /*background-color: var(--test-green);*/
}

/* Nav Main (Header) */
ul#header-nav-main{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: var(--gap-space);
}

/* Header (Main) 3: Menu */
#header-main-3{
    order: 3;
    /*background-color: var(--test-red);*/
}

/* Menu Styles */
#menu{
    /* IMPORTANT! NO EREASE RULE */
    display: none;
    height: auto;
    position: fixed;
    z-index: 999;
    left: auto;

    /* Safe Rules */
    margin-top: var(--margin-space);
    margin-right: 0;
    padding: var(--padding-box);
    border: 1px solid var(--white-100);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    background-color: var(--white-90);

    box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
}


/* Menu List Styles */
#menu-list{
    flex-flow: column nowrap;
    gap: var(--gap-space);
}

ul#menu-list > li:nth-child(1),
ul#menu-list > li:nth-child(2),
ul#menu-list > li:nth-child(3),
ul#menu-list > li:nth-child(4),
ul#menu-list > li:nth-child(5) {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Header (Main) 4: Extra Button */
#header-main-4{
    order: 4;
    margin-left: auto;
    /*background-color: var(--test-blue);*/
}

/* Main & Sections */
main{
    width: 100%;
    height: auto;
    display: block;

    padding-top: 100px;
    padding-bottom: var(--margin-space);

    /*background-color: var(--test-green);*/
}
section{
    width: 100%;
    height: auto;

    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-space);
    padding: var(--padding-box);

    border: 1px solid var(--white-75);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    background-color: var(--white-75);
}
section:last-child{
    margin-bottom: 0px;
}

/* Section > Sub-Box */
.sub-box{
    width: 100%;
    height: auto;
    margin-bottom: var(--margin-space);
    /*background-color: var(--test-red);*/
}
.sub-box:last-child{
    margin-bottom: 0;
}

/* Gallery Section */
.gallery{
    grid-template-columns:  repeat(6, 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap-space);
}

/* Welcome Home Image */
.home-image{
    width: 100%;
    max-width: 280px;
    min-width: 1px;
    margin: 0 auto;
    display: block;
}

/* Home Buttons */
.home-buttons{
    width: 100%;
    min-width: 1px;

    margin: 0 auto;

    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Form: Search Bar */
.search-wrapper{
    width: 100%;
    max-width: 580px;

    margin: 0 auto;

    position: relative;
    z-index: 10;

    /*background-color: var(--test-red);*/
}

form#search-form{
    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;

    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    gap: var(--gap-space);

    /*background-color: var(--test-blue);*/
}

/* Search Bar > Input */

input.searchbar{
    order: 1;

    width: 100%;
    max-width: none;
    min-width: 1px;

    margin: 0;

    padding: var(--padding-small) var(--padding-box);

    overflow: hidden;
    outline: none;

    border: var(--border-button) solid var(--shadowcolor);
    box-shadow: var(--boxshadow-button) var(--shadowcolor);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}
input[type=text].searchbar{
    font-size: max(var(--button-txt), 16px);
    color: var(--text-color);
}
input.searchbar:hover{
    border: var(--border-button) solid var(--purple);
    box-shadow: var(--boxshadow-button) var(--purple);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}
input.searchbar:focus-visible{
    border: var(--border-button) solid var(--pink);
    box-shadow: var(--boxshadow-button) var(--pink);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

/* Search Bar > Button */
button#button-search{
    order: 2;
}

/* Suggestions */
ul#suggestions{
    width: 100%;
    max-width: inherit;
    min-width: 1px;
    height: auto;

    display: none;

    list-style-type: none;

    margin-top: var(--margin-small);
    padding: var(--padding-small) var(--padding-box);

    position: absolute;
    top: 100%;   /* justo debajo del form */
    left: 0;

    border: 3px solid var(--shadowcolor);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    background: var(--gradientBg2);

}

#suggestions li a,
#suggestions li span {
    display: block;
    width: fit-content;
}

#suggestions li {
    cursor: pointer;
    padding: var(--padding-small);
}

#suggestions li:hover {
    color: var(--white);
    border: none;
    outline: none;
    background-color: var(--shadowcolor);
}

#suggestions li.activeSug {
    color: var(--white);
    border: none;
    outline: none;
    background-color: var(--shadowcolor);
}

/* Thumbnails */
.thumbnail{
    width: 100%;
    height: auto;
    display: block;

    position: relative;
    overflow: hidden;

    text-decoration: none;
    break-inside: avoid;

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    box-shadow: 0px 10px 25px 1px var(--transparent);
    -webkit-box-shadow: 0px 10px 25px 1px var(--transparent);
    -moz-box-shadow: 0px 10px 25px 1px var(--transparent);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

.thumbnail::before{
    content: "";
    position: absolute;
    inset: 0; /* cubre todo el elemento */
    padding: var(--size-selection-border); /* grosor del borde */
    border-radius: inherit; /* mismo radio que el contenedor */
    background: var(--transparent);

    /* Máscaras: versión estándar + prefijo */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none; /* no bloquear interacciones */
    z-index: 1; /* coloca detrás del contenido */

    -webkit-transition: var(--transition-thumb);
    -moz-transition: var(--transition-thumb); 
    -o-transition: var(--transition-thumb); 
    transition: var(--transition-thumb);
}

.thumbnail:hover{
    box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 10px 25px 1px var(--shadowcolor);

    -webkit-transition: var(--transition-thumb);
    -moz-transition: var(--transition-thumb); 
    -o-transition: var(--transition-thumb); 
    transition: var(--transition-thumb);
}

.thumbnail:hover::before{
    background: var(--hanshyn-gradient);

    -webkit-transition: var(--transition-thumb);
    -moz-transition: var(--transition-thumb); 
    -o-transition: var(--transition-thumb); 
    transition: var(--transition-thumb);
    
}

/* Thumbnail > Span R18 Tag */
.thumbnail > span.r18{
    display: block;

    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;

    margin-top: var(--margin-small);
    margin-right: var(--margin-small);

    padding: 0px var(--padding-small);

    font-size: var(--p-disclaimer);

    color: var(--white);
    background-color: var(--pink);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

/* Thumbnail > H3 Title (Don't show) */
.thumbnail > h3{
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Pagination */
.pagination{
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: var(--gap-space);

    position: relative;
    z-index: 2;

    /*background-color: var(--test-red);*/
}

/* Thumbnail > Image Thumb */
img.thumb-img{
    width: 100%;
    height: auto;
    overflow: hidden;

    -webkit-transition: var(--transition-thumb);
    -moz-transition: var(--transition-thumb); 
    -o-transition: var(--transition-thumb); 
    transition: var(--transition-thumb);
}

img.thumb-img:hover{
    -moz-transform: scale(1.1); /* Mozilla */
    -o-transform: scale(1.1); /* Opera */
    -ms-transform: scale(1.1); /* Internet Explorer */
    transform: scale(1.1);

    filter: saturate(1.5);

    -webkit-transition: var(--transition-thumb);
    -moz-transition: var(--transition-thumb); 
    -o-transition: var(--transition-thumb); 
    transition: var(--transition-thumb);
}

/* Post */
.post-container{
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: var(--gap-space);

    /*background-color: var(--test-blue);*/
}

/* Post Information Styles (Left Block) */
.post-info{
    order: 1;

    width: 100%;
    max-width: 350px;
    min-width: 1px;

    color: var(--text-color);
    /*background-color: var(--test-green);*/
}

/* Post Box (Container for Post Info) */
.post-box{
    width: 100%;
    max-width: 100%;
    min-width: 1px;
    height: auto;

    padding: var(--padding-box);
    margin-bottom: var(--margin-small);

    border: 1px solid var(--white-100);
    background-color: var(--white-50);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
}
.post-box:last-child{
    margin-bottom: 0px;
}

/* Post > Header (Title Post) */
.post-box > header#header-post{
    margin-bottom: var(--margin-small);
    display: block;
    /*background-color: var(--test-red);*/
}

.post-box > header#header-post > h1{
    font-size: var(--subtitle);
    font-family: heyComic;
    font-weight: 700;
    text-align: left;
    color: var(--pink);
}

/* Post > Header > Next & Prev Buttons*/
#nexPrevButtons{
    flex-flow: row wrap;
    justify-content: space-between;
    gap: var(--gap-space);
    /*background-color: var(--test-blue);*/
}

/* Post > Text Styles */
.post-box > p{
    font-size: var(--p-normal);
    text-align: left;
    color: var(--text-color);
}
.post-box p > strong{
    color: var(--pink);
    font-weight: 700;
}
.post-box > p.subtitle{
    font-family: heyComic;
    font-size: var(--subtitle);
    text-align: left;
    color: var(--pink);
    
    margin-bottom: var(--margin-small);
}

/* Permanent Link Style */
.copylink{
    width: 100%;
    max-width: 100%;
    min-width: 1px;
    height: auto;
    display: block;
    overflow: hidden;

    margin: var(--margin-small) auto 0 auto;
    padding: var(--padding-small);

    font-size: var(--p-disclaimer);
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-wrap: normal;
    white-space: nowrap;
    color: var(--shadowcolorPag);

    border: 4px dashed var(--shadowcolor);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}
.copylink:hover{
    cursor: pointer;
    color: var(--blue);
    border: 4px dashed var(--lightBlue);
    background-color: var(--gradientBg2);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

/* Post > Social Media Icons (Also Available) */
.socialIcons-post{
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--gap-space);
    margin-bottom: var(--margin-space);
}
.socialIcons-post:last-child{
    margin-bottom: 0px;
}

/* Post > Related Thumbs Styles */
#relatedThumbs-container{
    grid-template-columns:  repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap-space);
}

/* Post > Tag Styles */
.tag-container{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: var(--gap-small);
}

a.tag{
    width: fit-content;
    max-width: 300px;
    min-width: 1px;
    height: auto;
    display: block;
    overflow: hidden;/* Oculta el texto que excede el contenedor */

    padding: 6px 16px;

    font-size: var(--p-disclaimer);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap; /* Evita que el texto haga un salto de línea */
    text-overflow: ellipsis; /* Muestra los puntos suspensivos */

    -webkit-border-radius: var(--border-full);
    -moz-border-radius: var(--border-full);
    border-radius: var(--border-full);
}

a.tag > strong{
    background: var(--white-25);
}

/* Tag Rating */
.tag-rating{
    color: var(--white);
    background-color: var(--pink);
}
.tag-rating:hover{
    color: var(--lightPink);
    background-color: var(--darkPink);
}

/* Tag Meta */
.tag-meta{
    color: var(--white);
    background-color: var(--yellow);
}
.tag-meta:hover{
    color: var(--lightYellow);
    background-color: var(--darkYellow);
}

/* Tag General */
.tag-general{
    color: var(--white-75);
    background-color: var(--text-color);
}
.tag-general:hover{
    color: var(--white-90);
    background-color: var(--black);
}

/* Tag Copyright */
.tag-copyright{
    color: var(--white);
    background-color: var(--purple);
}
.tag-copyright:hover{
    color: var(--lightPurple);
    background-color: var(--darkPurple);
}

/* Tag Character */
.tag-character{
    color: var(--white);
    background-color: var(--blue);
}
.tag-character:hover{
    color: var(--lightBlue);
    background-color: var(--darkBlue);
}


/* Post Picture/Video Styles (Right Block) */
.post-pictures{
    order: 2;

    width: 100%;
    height: auto;
    margin: 0 auto;

    flex-flow: column wrap;
    justify-content: flex-start;

    /* background-color: var(--test-red); */
}

.post-pictures > a{
    width: 100%;
    max-width: 100%;
    min-width: 1px;
    height: auto;
    display: block;
    overflow: hidden;
    cursor: pointer;

    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-space);

    border: 1px solid var(--white);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -o-transition: var(--transition); 
    transition: var(--transition);

    box-shadow: 0px 10px 25px 1px var(--transparent);
    -webkit-box-shadow: 0px 10px 25px 1px var(--transparent);
    -moz-box-shadow: 0px 10px 25px 1px var(--transparent);
}

.post-pictures > a:last-child{
    margin-bottom: 0px;
}

.post-pictures > a:hover{
    border: 1px solid var(--transparent);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -o-transition: var(--transition); 
    transition: var(--transition);
    box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -webkit-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
    -moz-box-shadow: 0px 10px 25px 1px var(--shadowcolor);
}
.post-pictures > a > img,
.post-pictures > a > video{
    width: 100%;
    max-width: 100%;
    min-width: 1px;
    height: auto;
    display: block;
}

/* General Sections (Commission, About & Legal) */

p.primary-txt{
    width: 80%;
    margin: 0 auto;

    font-family: heyComic;
    font-size: var(--p-primary);
    font-weight: 400;
    text-align: center;

    color: var(--text-color);
}
p.primary-txt > strong{
    font-weight: 700;
    color: var(--pure-black);
}

/* Comm Tiers */
#tiers-container{
    flex-flow: row nowrap;
    justify-content: center;
    gap: var(--gap-space);
}

.box-tier{
    width: 100%;
    max-width: 33%;
    display: block;

    overflow: hidden;

    margin: 0;
    padding: var(--padding-box);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}
.box-tier:hover{
    scale: 1.05;
}

/* Box Tier > Subtitle */
.box-tier > .subtitle-comm{
    font-family: heyComic;
    font-size: var(--subtitle);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-large);
    padding: var(--padding-small) var(--padding-box);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

.box-tier > ul > li{
    width: 90%;

    list-style: none;
    font-size: var(--p-normal);
    font-weight: 700;
    text-align: center;

    margin-bottom: var(--margin-small);
    margin-left: auto;
    margin-right: auto;
    padding: var(--padding-small);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}
.box-tier > ul > li:last-child{
    margin-bottom: 0px;
}

/* Price for Tiers */
p.price-tiers{
    width: max-content;
    display: block;

    padding: var(--padding-small) var(--padding-box);
    margin: 0 auto var(--margin-space) auto;

    font-size: var(--title);
    font-weight: 700;
    text-align: center;

    background-color: var(--white-90);

    -webkit-border-radius: var(--border-full);
    -moz-border-radius: var(--border-full);
    border-radius: var(--border-full);
}

/* Tiers */

/* Tier: Single Character */
@property --c1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffa069;
}
@property --c2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffae00;
}
#single-tier{
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    transition: --c1 0.2s ease, --c2 0.2s ease, all 0.2s;
}
#single-tier > .subtitle-comm{
    color: var(--whiteYellow);
    box-shadow: 1px 6px 12px var(--darkYellow);
    background-color: var(--blackYellow);
}
#single-tier > ul > li{
    color: var(--whiteYellow);
    background-color: #aa3e00;
}

#single-tier > .price-tiers{
    color: var(--blackYellow);
}
#single-tier:hover {
    --c1: #ff481a;
    --c2: #fccc30;
}

/* Tier: Couples */
@property --c3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff48f0;
}
@property --c4 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff6d92;
}
#couple-tier{
    background: linear-gradient(135deg, var(--c3) 0%, var(--c4) 100%);
    transition: --c3 0.2s ease, --c3 0.2s ease, all 0.2s;
}
#couple-tier > .subtitle-comm{
    color: var(--white);
    box-shadow: 1px 6px 12px var(--darkPink);
    background-color: var(--blackPink);
}
#couple-tier > ul > li{
    color: var(--white);
    background-color: #97005d;
}
#couple-tier > .price-tiers{
    color: var(--blackPink);
}
#couple-tier:hover{
    --c3: #d81ac8;
    --c4: #ff4372;
}

/* Tier: Variants */
@property --c5 {
    syntax: '<color>';
    inherits: false;
    initial-value: #b05efd;
}
@property --c6 {
    syntax: '<color>';
    inherits: false;
    initial-value: #585bfc;
}
#variant-tier{
    background: linear-gradient(135deg, var(--c5) 0%, var(--c6) 100%);
    transition: --c5 0.2s ease, --c6 0.2s ease, all 0.2s;
}
#variant-tier > .subtitle-comm{
    color: var(--whitePurple);
    box-shadow: 1px 6px 12px var(--darkPurple);
    background-color: var(--blackPurple);
}
#variant-tier > ul > li{
    color: var(--white);
    background-color: #5400a3;
}
#variant-tier > .price-tiers{
    color: var(--blackPurple);
}
#variant-tier:hover{
    --c5: #ac00fc;
    --c6: #4a7afd;
}

/* Comm Tiers: What you Get */
#you-get > .subtitle{
    text-align: center;
    margin-bottom: var(--margin-space);
}

#you-get > ul {
    font-size: var(--p-normal);
    flex-flow: row wrap;
    justify-content: center;
    list-style: none;
    gap: var(--gap-space);
}
#you-get > ul > li{
    font-size: var(--p-normal);
    padding: var(--padding-small) var(--padding-box);
    
    color: var(--white);
    background-color: var(--black-75);

    -webkit-border-radius: var(--border-full);
    -moz-border-radius: var(--border-full);
    border-radius: var(--border-full);
}
#you-get > ul > li > strong{
    font-weight: 700;
    color: var(--lightPink);
}
#you-get > ul > li > a{
    color: var(--cyan);
}

/* Comm Extras */
#extras-container{
    flex-flow: row nowrap;
    justify-content: center;
    gap: var(--gap-space);
}

#comm-extras,
#comm-promos{
    width: 40%;
}

#comm-extras .subtitle,
#comm-promos .subtitle{
    text-align: center;
    margin-bottom: var(--margin-space);
}

ul.extras-ul{
    list-style-type: none;

    margin-bottom: var(--space-margin-small);
    padding: var(--padding-small);
}

li.comm-item{
    height: auto;

    margin-bottom: var(--margin-small);
    padding: var(--padding-small) var(--padding-box);

    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;

    font-size: var(--button-txt);
    font-family: heyComic;
    letter-spacing: 0.06em;
    

    border: var(--border-button) solid;

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

/*span.itemText-comm{}*/

span.price-comm{
    font-weight: 700;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

li.general-item{
    color: var(--blue);
    background: var(--white);
    border-color: var(--darkBlue);
    box-shadow: var(--boxshadow-button) var(--darkBlue);
}
li.general-item > span.price-comm{
    color: var(--darkBlue);
}

li.super-cherry-item{
    color: var(--blackYellow);
    background: var(--yellow);
    border-color: var(--darkYellow);
    box-shadow: var(--boxshadow-button) var(--darkYellow);
}
li.ultra-cherry-item{
    color: var(--whitePurple);
    background: var(--purple);
    border-color: var(--darkPurple);
    box-shadow: var(--boxshadow-button) var(--darkPurple);
}

/* Additional Info Comm */
#additional-info{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/* Paypal Image */
#additional-info > img{
    width: 100%;
    max-width: 150px;
    min-width: 1px;

    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-space);
}

#additional-info > p{
    font-size: var(--p-disclaimer);
    text-align: center;
    color: var(--text-color);
}

#additional-info > hr {
    width: 100%;
    max-width: 480px;
    min-width: 1px;
    margin: var(--margin-space) auto;
    border: 1px dashed var(--black-25);
}

/* Queue List Comm Section */
.queue-list-box{
    width: 100%;
    max-width: 760px;
    min-width: 1px;
    height: auto;
    display: block;
    
    margin: 0 auto;
    padding: var(--padding-box);
}
.queue-list-box > h4.subtitle{
    text-align: center;
    margin-bottom: var(--margin-space);
}

/* Space (Lugar) */
.l-space{
    width: 80%;
    min-width: 1px;
    height: auto;
    display: flex;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--margin-small);
    padding: var(--padding-small) var(--padding-box);

    font-size: var(--p-normal);

    border: 1px solid;
    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}

/* Status Display (Done, Waiting, Available, "Working") */
.status-display{
    font-weight: 700;
}
.l-status-done,
.l-status-waiting,
.l-status-available{
    flex-flow: row nowrap;
    justify-content: space-between;
}

/* Status Done */
.l-status-done{
    color: var(--black-50);
    border-color: var(--gradientBg1);
    background-color: var(--gradientBg2);
}

/* Status Working */
.l-status-working{
    flex-flow: row wrap;
    justify-content: space-between;

    color: var(--white);
    border-color: var(--pink);
    background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
}
/* Progress Container */
.progress-container{
    width: 100%;
    height: 25px;
    order: 3;
    flex-grow: 1;
    padding: 6px;
    margin-top: var(--margin-small);
    background-color: var(--white);
    position: relative;
    -webkit-border-radius: var(--border-full);
    -moz-border-radsius: var(--border-full);
    border-radius: var(--border-full);
    overflow: hidden;
}
/* Progress Bar */
.progress-bar {
    height: 100%;
    width: var(--progress-width);
    border-radius: inherit;
    background: repeating-linear-gradient(
        -45deg,
        var(--lightPink),/* verde claro */
        var(--lightPink) 10px,
        var(--pink) 10px,
        var(--pink) 20px
    );
}

/* Status Waiting */
.l-status-waiting{
    color: var(--blackYellow);
    border-color: var(--yellow);
    background-color: var(--lightYellow);
}

/* Status Available */
.l-status-available{
    color: var(--blue);
    border-color: var(--blue);
    background-color: var(--white-50);
}

/* Setps Comm Section (How to Order) */
#steps-container{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: var(--gap-space);
}

.box-step h4.subtitle{
    margin-bottom: var(--margin-space);
}
.box-step a{
    color: var(--blue);
    font-weight: 700;
}
.box-step p{
    margin-bottom: var(--margin-small);
}
.box-step p:last-child{
    margin-bottom: 0px;
}
.box-step > p > strong{
    color: var(--black);
    font-weight: 700;
}

.box-step ul{
    margin-left: var(--margin-space);
}
.box-step > ul > li{
    margin-bottom: var(--margin-small);
}
.box-step > ul > li:last-child{
    margin-bottom: 0px;
}
.box-step > ul > li > strong{
    font-weight: 700;
    color: var(--pink);
}

#step1{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}
#step4{
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
}

/* Rules Comm Section (I do and don't) */
#rules-container{
    margin: 0 auto;

    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    gap: var(--gap-space);
}
#rules-container > .box-rule{
    width: 50%;
    max-width: 450px;
}
/* Rules Subtitle Styles */
.box-rule > h4.subtitle{
    text-align: center;
    margin: 0 auto var(--margin-space) auto;
}

/* Ul List Rules (Both) */
ul.rules-lists{
    list-style-position: outside;
    list-style: none;
    text-align: left;
    font-size: var(--p-normal);

}
ul.rules-lists > li{
    margin-bottom: var(--margin-small);
}
ul.rules-lists > li:last-child{
    margin-bottom: 0px;
}

/* Ul list Accept */
ul.ruleList-do{
    color: var(--darkGreen);
}
ul.ruleList-do > li > i{
    color: var(--green);
}

/* Ul list Dont Accept */
ul.ruleList-dont{
    color: var(--darkPink);
}
ul.ruleList-dont > li > i{
    color: var(--pink);
}

/* About */
img.img-profile{
    width: 100%;
    max-width: 180px;
    min-width: 1px;
    margin: 0 auto;
    overflow: hidden;

    -webkit-border-radius: var(--border-full);
    -moz-border-radius: var(--border-full);
    border-radius: var(--border-full);
}

.subtitle-about{
    text-align: center;

    margin-bottom: var(--margin-space);
}

ul.lists-about{
    list-style-type: none;

    flex-flow: row wrap;
    justify-content: center;
    gap: var(--gap-space);
}

li.box-item-about{
    font-size: var(--p-normal);

    padding: var(--padding-small) var(--padding-box);

    border: var(--border-button) solid var(--whiteBlue);
    background-color: var(--gradientBg1);
    box-shadow: var(--boxshadow-button) var(--whiteBlue);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);
}


li.box-item-about > span{
    font-weight: 700;
    color: var(--pink);
}

li.box-item-about > a{
    font-weight: 700;
    color: var(--blue);
}
li.box-item-about > a:hover{
    color: var(--purple);
}

a.social-about-item{
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: var(--margin-small);
}
a.social-about-item > span{
    width: 100%;
    max-width: 200px;
    min-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.social-about-item > img{
    width: 100%;
    max-width: 25px;
    min-width: 1px;
    height: auto;
    margin: 0 auto;
}

/* Footer */
footer{
    width: 100%;
    height: auto;
    display: block;
    /*background-color: var(--test-red);*/
}

#footer-1,
#footer-2{
    width: 100%;
    height: auto;
    display: block;
}

/* Footer-1 (Up) */
#footer-1{
    padding: var(--padding-small) 0;
    background: linear-gradient(90deg, var(--lightPink) 0%, var(--lightPurple) 50%, var(--lightBlue) 100%); 
}

/* Footer 1 Container */
#footer-1-container{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    gap: var(--gap-space);

}

/*.f1-box{}*/

/* F1 Box-1: Logo Footer */
/*#f1-box-1{
    background-color: var(--test-blue);
}*/

/* F1 Box-2: Mail Button */
/*#f1-box-2{
    background-color: var(--test-green);
}*/

/* F1 Box-2: Social Icons */
#f1-box-3{
    margin-left: auto;
    /*background-color: var(--test-red);*/
}

/* Footer Social Icons Container */
#footer-social-icons-container{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: var(--gap-space);
}

/* Footer-2 (Down) */
#footer-2{
    padding: var(--padding-large) 0;

    background: 
        url(../imgs/image_for_footer_bg.webp),
        linear-gradient(45deg, var(--blackPurple) 0%, var(--pink) 100%);
    background-size: contain; /* Ajusta la imagen para que no se corte */
    background-position: right;
    background-repeat: no-repeat;
    background-blend-mode: color-dodge; /* Mezcla la imagen con el color de fondo */
}

/* Footer 2 Container */
#footer-2-container{
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: var(--margin-space);
}

.f2-box{
    width: fit-content;
    display: block;
}

/* F2 Box-1: Site Map */
#f2-box-1{
    order: 1;
    /*background-color: var(--test-blue);*/
}

/* Ul Nav Footer */
ul#nav-footer{
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: var(--gap-space);
}


/* F2 Box-2: Address */
#f2-box-2{
    order: 2;
    /*background-color: var(--test-green);*/
}

address{
    width: fit-content;
    height: auto;
    display: block;
    padding: var(--padding-small) var(--padding-box);

    font-size: var(--p-disclaimer);
    color: var(--white-75);
    
    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    background-color: var(--black-50);
}
address > strong,
address > a{
    font-weight: 700;
    color: var(--white);
}

/* F2 Box-2: Legal Site Map */
#f2-box-3{
    order: 3;
    /*background-color: var(--test-red);*/
}

ul#legal-map-nav{
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: var(--gap-space);
}

ul#legal-map-nav li a{
    padding: var(--padding-small);

    font-size: var(--p-disclaimer);
    font-weight: 700;
    color: var(--white-75);

    background-color: var(--black-50);

    -webkit-border-radius: var(--border);
    -moz-border-radius: var(--border);
    border-radius: var(--border);

    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

ul#legal-map-nav li a:hover{
    color: var(--purple);
    text-decoration: none;

    background-color: var(--blackPurple);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition); 
    -o-transition: var(--transition); 
    transition: var(--transition);
}

/* Styles: 1344px */
@media only screen and (max-width: 1344px){

    /* Header (Main) 2: Nav */
    /* Nav Main (Header) */
    ul#header-nav-main > li:nth-child(4){
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Menu List Styles */
    ul#menu-list > li:nth-child(4) {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* Post */
    .post-container{
        flex-flow: row nowrap;
        justify-content: space-between;
        gap: var(--gap-space);

        /*background-color: var(--test-blue);*/
    }

    /* Post */
    /* Post Information Styles (Left Block) */
    .post-info{
        max-width: 320px;
    }

}

/* Styles: 1080px */
@media only screen and (max-width: 1080px){
    
    /* Header (Main) 2: Nav */
    /* Nav Main (Header) */
    ul#header-nav-main > li:nth-child(3){
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Menu List Styles */
    ul#menu-list > li:nth-child(3) {
        display: block;
        opacity: 1;
        visibility: visible;
    } 

    /* Gallery Section */
    .gallery{
        grid-template-columns:  repeat(5, 1fr);
    }

    /* Post */
    /* Post Information Styles (Left Block) */
    .post-info{
        max-width: 280px;
    }
}

/* Styles: 960px */
@media only screen and (max-width: 960px){

    /* Root: Styles, Light Theme by default */
    :root{
        /* Text */
        --title: 1.6em;
        --subtitle: 1.4em;
        --button-txt: 1em;
        --p-normal: 0.9em;
        --p-disclaimer: 0.7em;
        --p-primary: 1em;

        /* Sizes */
        --logo-size: 140px;
        --icon-size: 45px;

        /* Border Radius */
        --border: 8px;

        /* Spaces, Margins and Paddings */
        --margin-small: 10px;
        --margin-space: 20px;
        --margin-large: 40px;

        --padding-small: 7px;
        --padding-box: 16px;
        --padding-large: 34px;

        --gap-space: 10px;
        --gap-small: 6px;

        /* For Buttons */
        --border-button: 2px;
        --boxshadow-button: 0px 3px;

        --size-selection-border: 5px;
    }

    /* Order List Legal */
    .list-legal li::before{
        font-size: 1.1em;
    }
    .list-legal li ol > li{
        margin-left: 2em;
    }

    /* Buttons */
    /* Button Download */
    .button-download{
        width: fit-content;
        margin: 0 auto;
        display: block;
    }

    /* Header (Main) 2: Nav */
    /* Nav Main (Header) */
    ul#header-nav-main > li:nth-child(2){
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Menu List Styles */
    ul#menu-list > li:nth-child(2) {
        display: block;
        opacity: 1;
        visibility: visible;
    } 
    
    /* Main & Sections */
    main{
        padding-top: 90px;
    }

    /* Gallery Section */
    .gallery{
        grid-template-columns:  repeat(4, 1fr);
    }


    /* Post */
    .post-container{
        flex-flow: column wrap;
        justify-content: flex-start;
        gap: var(--gap-space);
    }

    /* Post Information Styles (Left Block) */
    .post-info{
        order: 2;

        width: 100%;
        max-width: 100%;
    }

    /* Post Box (Container for Post Info) */

    /* Post > Header (Title Post) */
    
    .post-box > header#header-post > h1{
        text-align: center;
    }

    /* Post > Header > Next & Prev Buttons*/
    #nexPrevButtons{
        flex-flow: row wrap;
        justify-content: center;
        gap: var(--gap-space);
        /*background-color: var(--test-blue);*/
    }

    /* Post > Text Styles */
    .post-box > p{
        text-align: center;
    }
    .post-box > p.subtitle{
        text-align: center;
    }

    /* Permanent Link Style */
    .copylink{
        max-width: 450px;

        text-align: center;

        border: 3px dashed var(--shadowcolor);
    }

    /* Post > Social Media Icons (Also Available) */
    .socialIcons-post{
        justify-content: center;
    }

    /* Post > Related Thumbs Styles */
    #relatedThumbs-container{
        grid-template-columns:  repeat(4, 1fr);
    }

    /* Post > Tag Styles */
    .tag-container{
        flex-flow: row wrap;
        justify-content: center;
    }
    .tag-container > a.tag{
        max-width: 280px;

        padding: 5px 14px;
    }

    /* Post Picture/Video Styles (Right Block) */
    .post-pictures{
        order: 1;

        width: 100%;
        height: auto;
        margin: 0 auto;

        flex-flow: column wrap;
        justify-content: flex-start;
    }

    /* General Sections (Commission, About & Legal) */
    p.primary-txt{
        width: 90%;
    }

    /* Comm Tiers */
    #tiers-container{
        flex-flow: row wrap;
        justify-content: center;
    }

    .box-tier{
        max-width: 48%;
    }

    .box-tier > ul > li{
        width: 100%;
    }

    /* Comm Extras */
    #extras-container{
        flex-flow: row wrap;
    }

    li.comm-item{
        flex-flow: row wrap;
        justify-content: center;
        gap: var(--gap-space);
    }

    span.itemText-comm{
        width: 100%;
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    span.price-comm{
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    #comm-extras,
    #comm-promos{
        width: 100%;
    }

    /* Paypal Image */
    #additional-info > img{
        max-width: 140px;
    }

    /* Queue List Comm Section */
    /* Space (Lugar) */
    .l-space{
        width: 90%;
    }

    /* Status Display (Done, Waiting, Available, "Working") */
    .l-status-done,
    .l-status-waiting,
    .l-status-available{
        flex-flow: row wrap;
        justify-content: space-between;
    }

    /* Progress Container */
    .progress-container{
        height: 24px;
        padding: 5px;
    }

    /* Setps Comm Section (How to Order) */
    #steps-container{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
    }

    .box-step h4.subtitle{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #step1{
        grid-column-start: auto;
        grid-column-end: auto;
        grid-row-start: auto;
        grid-row-end: auto;    
    }
    #step4{
        grid-column-start: auto;
        grid-column-end: auto;
        grid-row-start: auto;
        grid-row-end: auto;
    }

    /* Rules Comm Section (I do and don't) */
    #rules-container{
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
    }
    #rules-container > .box-rule{
        width: 100%;
        max-width: 100%;
    }

    /* About */
    img.img-profile{
        max-width: 160px;
    }

    a.social-about-item{
        flex-flow: row nowrap;
    }

    /* Footer */
    /* Footer 1 Container */
    #footer-1-container{
        justify-content: center;
    }

    /* F1 Box-2: Social Icons */
    #f1-box-3{
        margin-left: 0;
    }

    /* Footer-2 (Down) */
    #footer-2{
        background-size: cover; /* Ajusta la imagen para que no se corte */
        background-position: center;
    }

    /* Footer 2 Container */
    #footer-2-container{
        flex-flow: column wrap;
        justify-content: center;
    }

    .f2-box{
        margin: 0 auto;
    }

    /* Ul Nav Footer */
    ul#nav-footer{
        justify-content: center;
    }

    /* F2 Box-2: Address */
    #f2-box-2{
        order: 2;
    }

    address{
        text-align: center;
        background-color: var(--black-75);
    }

    /* F2 Box-2: Legal Site Map */
    ul#legal-map-nav{
        justify-content: center;
    }

    ul#legal-map-nav li a{
        background-color: var(--black-75);
    }

}

/* Styles: 705px */
@media only screen and (max-width: 705px){

    /* Header (Main) 2: Nav */
    /* Header (Main) 2: Nav */
    #header-main-2{
        order: 0;
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    /* Nav Main (Header) */
    ul#header-nav-main > li:nth-child(1){
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Header (Main) 3: Menu */
    #header-main-3{
        order: 2;
        margin-left: auto;
    }
    /* Menu List Styles */
    #menu{
        /* IMPORTANT! NO EREASE RULE */
        left: auto;
        right: 0;
    }

    /* Menu List Styles */
    ul#menu-list > li {
        margin-left: auto;
        margin-right: 0;
    } 

    ul#menu-list > li:nth-child(1) {
        display: block;
        opacity: 1;
        visibility: visible;
    } 
    /* Header (Main) 4: Extra Button */
    #header-main-4{
        order: 0;
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    /* Gallery Section */
    .gallery{
        grid-template-columns:  repeat(3, 1fr);
    }

    /* Post > Related Thumbs Styles */
    #relatedThumbs-container{
        grid-template-columns:  repeat(3, 1fr);
    }

    /* General Sections (Commission, About & Legal) */

    .box-tier{
        max-width: 100%;
    }

    /* Queue List Comm Section */
    /* Space (Lugar) */
    .l-space{
        width: 100%;
    }

    /* Progress Container */
    .progress-container{
        height: 22px;
        padding: 4px;
    }

    /* Footer Social Icons Container */
    #footer-social-icons-container{
        justify-content: center;
    }
}

/* Styles: 450px */
@media only screen and (max-width: 450px){

    /* Root: Styles, Light Theme by default */
    :root{
        /* Text */
        --title: 1.4em;
        --subtitle: 1.2em;
        --button-txt: 0.95em;
        --p-normal: 0.85em;
        --p-disclaimer: 0.6em;
        --p-primary: 0.95em;

        /* Sizes */
        --logo-size: 120px;
        --icon-size: 40px;

        /* Border Radius */
        --border: 6px;

        /* Spaces, Margins and Paddings */
        --margin-small: 8px;
        --margin-space: 18px;
        --margin-large: 38px;

        --padding-small: 5px;
        --padding-box: 14px;
        --padding-large: 32px;

        --gap-space: 8px;
        --gap-small: 4px;

        --size-selection-border: 4px;
    }

    /* Order List Legal */
    .list-legal li::before{
        font-size: 1em;
    }
    .list-legal li ol > li{
        margin-left: 1.8em;
    }

    /* Meny List Styles */
    ul#menu-list > li:nth-child(5) {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    /* Main & Sections */
    main{
        padding-top: 80px;
    }

    /* Gallery Section */
    .gallery{
        grid-template-columns:  repeat(2, 1fr);
    }


    /* Permanent Link Style */
    .copylink{
        max-width: 350px;

        border: 2px dashed var(--shadowcolor);
    }

    /* Post > Related Thumbs Styles */
    #relatedThumbs-container{
        grid-template-columns:  repeat(2, 1fr);
    }

    /* Post > Tag Styles */
    .tag-container > a.tag{
        max-width: 260px;

        padding: 4px 12px;
    }

    /* General Sections (Commission, About & Legal) */
    p.primary-txt{
        width: 100%;
    }

    /* Paypal Image */
    #additional-info > img{
        max-width: 120px;
    }

    /* About */
    img.img-profile{
        max-width: 140px;
    }
}