/*==================================================

    MIRLO FILMS v2
    BASE DESIGN SYSTEM

    Version : 2.0
    Author  : Franz Cahuana
    Studio  : Mirlo Films
    Website : https://mirlofilms.pe

==================================================*/


/*==================================================
    RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;
	
	max-width:100%;

    background:var(--color-background);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:16px;

    font-weight:400;

    line-height:1.8;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}


/*==================================================
    DESIGN TOKENS
==================================================*/

:root{

/*==================================================
    COLORS
==================================================*/

    --color-white:#FFFFFF;

    --color-black:#151515;

    --color-text:#555555;

    --color-light:#8A8A8A;

    --color-gold:#C8A45D;

    --color-background:#FFFFFF;

    --color-border:#ECECEC;


/*==================================================
    TYPOGRAPHY
==================================================*/

    --font-title:"Cormorant Garamond",serif;

    --font-body:"Montserrat",sans-serif;


/*==================================================
    FONT SIZE SCALE
==================================================*/

    --fs-100:.75rem;

    --fs-200:.875rem;

    --fs-300:1rem;

    --fs-400:1.125rem;

    --fs-500:1.375rem;

    --fs-600:1.75rem;

    --fs-700:2.5rem;

    --fs-800:3.5rem;

    --fs-900:5rem;


/*==================================================
    FONT WEIGHT
==================================================*/

    --fw-light:300;

    --fw-regular:400;

    --fw-medium:500;

    --fw-semibold:600;


/*==================================================
    LAYOUT
==================================================*/

    --container:1200px;

    --editorial-width:1320px;

    --width-reading:760px;

    --width-section:900px;

    --width-text:700px;

    --header-height:82px;

    --section-padding:120px;


/*==================================================
    SPACING
==================================================*/

    --space-4:4px;

    --space-8:8px;

    --space-12:12px;

    --space-16:16px;

    --space-20:20px;

    --space-24:24px;

    --space-32:32px;

    --space-40:40px;

    --space-48:48px;

    --space-64:64px;

    --space-80:80px;

    --space-96:96px;

    --space-120:120px;

    --space-section:180px;

    --space-story:180px;


/*==================================================
    BORDER RADIUS
==================================================*/

    --radius-sm:4px;

    --radius-md:8px;

    --radius-lg:12px;

    --radius-xl:16px;

    --radius-round:999px;


/*==================================================
    SHADOWS
==================================================*/

    --shadow-sm:0 5px 15px rgba(0,0,0,.05);

    --shadow-md:0 12px 35px rgba(0,0,0,.08);

    --shadow-lg:0 20px 60px rgba(0,0,0,.12);


/*==================================================
    ANIMATION
==================================================*/

    --duration-fast:.35s;

    --duration-normal:.8s;

    --duration-slow:6s;

    --duration-hero:9s;


/*==================================================
    EASING
==================================================*/

    --ease-standard:ease;

    --ease-smooth:cubic-bezier(.22,.61,.36,1);


/*==================================================
    TRANSITIONS
==================================================*/

    --transition-fast:.2s var(--ease-standard);

    --transition:.35s var(--ease-smooth);

    --transition-slow:.6s var(--ease-smooth);


/*==================================================
    Z-INDEX
==================================================*/

    --z-base:1;

    --z-menu:200;

    --z-overlay:300;

    --z-header:400;

    --z-modal:500;

    --z-loader:999;

}

/*==================================================
    TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-title);

    font-weight:var(--fw-regular);

    color:var(--color-black);

    line-height:1.08;

    letter-spacing:.02em;

}

h1{

    font-size:clamp(3.5rem,7vw,var(--fs-900));

}

h2{

    font-size:clamp(2.5rem,5vw,var(--fs-800));

}

h3{

    font-size:clamp(1.75rem,3vw,var(--fs-700));

}

h4{

    font-size:var(--fs-600);

}

h5{

    font-size:var(--fs-500);

}

h6{

    font-size:var(--fs-400);

}


/*==================================================
    PARAGRAPHS
==================================================*/

p{

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

    font-size:var(--fs-300);

    line-height:1.9;

    color:var(--color-text);

}

p:last-child{

    margin-bottom:0;

}

strong{

    font-weight:var(--fw-semibold);

}

small{

    font-size:var(--fs-200);

}


/*==================================================
    SECTION HEADER
==================================================*/

.section-header{

    max-width:var(--width-reading);

    margin:0 auto var(--space-64);

    text-align:center;

}

.section-subtitle{

    display:inline-block;

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

    font-family:var(--font-body);

    font-size:var(--fs-200);

    font-weight:var(--fw-medium);

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.section-title{

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

}

.section-description{

    max-width:var(--width-text);

    margin-inline:auto;

    font-size:var(--fs-400);

    line-height:1.9;

    color:var(--color-light);

}


/*==================================================
    DIVIDER
==================================================*/

.divider{

    width:80px;

    height:2px;

    margin:var(--space-32) auto;

    background:var(--color-gold);

}

/*==================================================
    LINKS
==================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==================================================
    IMAGES
==================================================*/

img{

    display:block;

    width:100%;

    height:auto;

}

picture{

    display:block;

}

/*==================================================
    LISTS
==================================================*/

ul,
ol{

    list-style:none;

}

/*==================================================
    LAYOUT
==================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

section{

    padding:var(--section-padding) 0;

}

/*==================================================
    BUTTON SYSTEM
==================================================*/

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:240px;

    height:60px;

    padding:0 42px;

    border:1px solid transparent;

    border-radius:var(--radius-round);

    cursor:pointer;

    font-family:var(--font-body);

    font-size:.85rem;

    font-weight:var(--fw-medium);

    letter-spacing:.18em;

    text-transform:uppercase;

    transition:

        background-color var(--transition),

        color var(--transition),

        border-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:active{

    transform:translateY(0);

}

/*==================================================
    PRIMARY BUTTON
==================================================*/

.btn-primary{

    background:var(--color-gold);

    border-color:var(--color-gold);

    color:var(--color-black);

}

.btn-primary:hover{

    background:var(--color-black);

    border-color:var(--color-black);

    color:var(--color-white);

}

/*==================================================
    OUTLINE BUTTON
==================================================*/

.btn-outline{

    background:transparent;

    border-color:var(--color-white);

    color:var(--color-white);

}

.btn-outline:hover{

    background:var(--color-gold);

    border-color:var(--color-gold);

    color:var(--color-black);

}

/*==================================================
    OUTLINE DARK
==================================================*/

.btn-outline-dark{

    background:transparent;

    border-color:var(--color-black);

    color:var(--color-black);

}

.btn-outline-dark:hover{

    background:var(--color-black);

    border-color:var(--color-black);

    color:var(--color-white);

}

/*==================================================
    UTILITIES
==================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.hidden{

    display:none !important;

}

.d-flex{

    display:flex;

}

.flex-column{

    flex-direction:column;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.mt-0{

    margin-top:0 !important;

}

.mb-0{

    margin-bottom:0 !important;

}


/*==================================================
    ACCESSIBILITY
==================================================*/

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

:focus-visible{

    outline:2px solid var(--color-gold);

    outline-offset:4px;

}


/*==================================================
    TEXT SELECTION
==================================================*/

::selection{

    background:var(--color-gold);

    color:var(--color-white);

}


/*==================================================
    SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-background);

}

::-webkit-scrollbar-thumb{

    background:var(--color-gold);

    border-radius:var(--radius-round);

}

::-webkit-scrollbar-thumb:hover{

    background:#B8924E;

}


/*==================================================
    REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none !important;

        transition:none !important;

    }

}


/*==================================================
    MOBILE WIDTH FIX - TEST
==================================================*/

@media (max-width:900px){

    html,
    body{

        width:100%;

        max-width:100%;

        min-width:0;

    }

    .main{

        width:100%;

        max-width:100%;

        min-width:0;

        margin:0;

        padding:0;

    }

    .hero{

        width:100%;

        max-width:100%;

        min-width:0;

    }

}

/*==================================================
    MOBILE SPACING
==================================================*/

@media (max-width:768px){

    :root{

        --space-section:100px;

        --space-story:110px;

    }

}