/*
=========================================
LuizaJuFit.com
Version: 1.0
Author: Carlos Avila & ChatGPT
=========================================
*/

/* =========================================
   GOOGLE FONTS
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* =========================================
   CSS VARIABLES
========================================= */

:root {

    /* Colors */
    --color-background: #050505;
    --color-surface: #101010;
    --color-copper: #B87333;
    --color-copper-hover: #CC8A4A;

    --color-text: #F5F5F5;
    --color-text-muted: #A7A7A7;

    --color-border: rgba(255,255,255,.08);

    /* Typography */

    --font-heading: "Bebas Neue", sans-serif;
    --font-body: "Montserrat", sans-serif;
    --font-script: "Allura", cursive;

    /* Layout */

    --container-width: 1280px;

    /* Spacing */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-xxl: 8rem;

    /* Radius */

    --radius: 12px;

    /* Shadows */

    --shadow: 0 20px 50px rgba(0,0,0,.35);

    /* Animation */

    --transition: .3s ease-in-out;
}

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================
   BASE
========================================= */

html{

    scroll-behavior:smooth;

}

body{

    background:var(--color-background);

    background:
    radial-gradient(circle at top right,
  rgba(184,115,51,.08),
    transparent 35%),
  #050505;

    color:var(--color-text);

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

    line-height:1.6;

    overflow-x:hidden;

}

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

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

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

    letter-spacing:.05em;

    font-weight:400;

}

p{

    color:var(--color-text-muted);

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

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

.container{

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

    margin-inline:auto;

}

section{

    padding:var(--space-xxl) 0;

}

/* =========================================
   BUTTONS
========================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2.5rem;

    border:1px solid var(--color-copper);

    color:var(--color-copper);

    background:transparent;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.82rem;

    transition:all .35s ease;

}

.btn:hover{

    background:var(--color-copper);

    color:var(--color-background);

    transform:translateY(-2px);

}

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

.text-center{

    text-align:center;

}

.accent{

    color:var(--color-primary);

}

.hidden{

    display:none;

}

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

header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    padding:2rem 0;

}

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

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

    font-size:2rem;

    letter-spacing:.08em;

    color:var(--color-text);

}

.nav-link{

    color:var(--color-text-muted);

    font-size:.9rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    transition:var(--transition);

}

.nav-link:hover{

    color:var(--color-copper);

}

/* =========================================
   HERO LAYOUT
========================================= */
#hero::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at top right,

rgba(184,115,51,.10),

transparent 45%

);

pointer-events:none;

}

.hero {

    min-height:100vh;

    padding-top:5rem;

    display:grid;

    grid-template-columns: 48% 52%;

    align-items:center;

    gap:2rem;

}

.hero__content{

    max-width:540px;

    z-index:10;

}

.hero__brand{

    color:var(--color-copper);

    text-transform:uppercase;

    letter-spacing:.35rem;

    margin-bottom:1rem;

}

.hero__title{

    font-size:clamp(5rem,11vw,9rem);

    line-height:.82;

    letter-spacing:.02em;

    margin-bottom:2rem;

}

.hero__title span{

    display:block;

    margin-left:3rem;

    margin-top:-.4rem;

    margin-bottom:-.6rem;

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

    font-size:4rem;

    color:var(--color-copper);

    text-transform:none;

}

.hero__description{

    max-width:450px;

    margin-bottom:2.5rem;

}

.hero__description{

    max-width:430px;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:3rem;

}

.hero__image{

    height:85vh;

    border:1px solid rgba(255,255,255,.06);

    background:

        radial-gradient(circle at center,
        rgba(184,115,51,.12),
        transparent 60%),

        linear-gradient(
            135deg,
            #101010,
            #1b1b1b
        );

}

.hero__image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,.90) 15%,
            rgba(5,5,5,.55) 35%,
            rgba(5,5,5,.05) 65%
        );

    z-index:1;

}

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

@media (max-width:900px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:6rem;

}

.hero__description{

margin-inline:auto;

}

.hero__image{

order:-1;

height:55vh;

}

}