/*==================================================
PERRO SOLAR
Style Sheet
====================================================*/


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

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

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

}

html{

    scroll-behavior:smooth;

}

img{

    display:block;
    max-width:100%;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    border:none;
    background:none;
    font:inherit;
    cursor:pointer;

}


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

:root{

    /* Colores */

    --negro:#090909;

    --negro-profundo:#050505;

    --gris:#b5b5b5;

    --gris-claro:#d6d6d6;

    --blanco:#f7f7f7;

    --dorado:#c89a4a;

    --dorado-claro:#e2bc70;

    /* Tipografía */

    --titulo:'Cinzel',serif;

    --texto:'Inter',sans-serif;

    /* Espaciados */

    --space-xs:8px;

    --space-sm:16px;

    --space-md:32px;

    --space-lg:64px;

    --space-xl:96px;

    --space-xxl:140px;

    /* Sombras */

    --shadow-soft:

        0 20px 50px rgba(0,0,0,.30);

    --shadow-gold:

        0 0 35px rgba(200,154,74,.30);

}


/*==================================================
GENERAL
====================================================*/

body{

    background:

        radial-gradient(

            circle at bottom,

            rgba(200,154,74,.06),

            transparent 60%

        ),

        linear-gradient(

            180deg,

            #070707 0%,

            #090909 45%,

            #050505 100%

        );

    color:var(--blanco);

    font-family:var(--texto);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

section{

    position:relative;

}

.container{

    width:min(1200px,90%);

    margin:auto;

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 60px;

    background:rgba(6,6,6,.45);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(200,154,74,.10);

    z-index:1000;

    transition:

        background .35s ease,

        padding .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}


/*==============================
LOGO
==============================*/

.logo{

    display:flex;

    align-items:center;

}
.logo a{

    display:inline-block;

}

.logo img{

    width:210px;

    height:auto;

    display:block;

    cursor:pointer;

    transition:

        width .35s ease,

        transform .35s ease,

        opacity .35s ease;

}

.logo:hover img{

    transform:scale(1.03);

    opacity:.9;

}


/*==============================
NAVEGACIÓN
==============================*/

nav{

    display:flex;

    align-items:center;

    gap:42px;

}

nav a{

    position:relative;

    color:var(--blanco);

    font-size:.90rem;

    font-weight:500;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:

        color .35s ease,

        opacity .35s ease;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--dorado);

    transition:width .35s ease;

}

nav a:hover{

    color:var(--dorado);

}

nav a:hover::after{

    width:100%;

}


/*==============================
HEADER AL HACER SCROLL
==============================*/

header.scrolled{

    padding:16px 60px;

    background:rgba(8,8,8,.92);

    border-bottom:1px solid rgba(200,154,74,.18);

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

header.scrolled .logo img{

    width:175px;

}
/*==================================================
HERO
====================================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    text-align:center;

}


/*==============================
IMAGEN
==============================*/

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    filter:
        brightness(.72)
        contrast(1.03)
        saturate(1);

    animation:heroMove 32s ease-in-out infinite alternate;
    opacity:0;

    animation:

        heroFade 1.6s ease forwards,

        heroMove 32s ease-in-out 1.6s infinite alternate;


}


/*==============================
CAPAS DE LUZ
==============================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(

            rgba(0,0,0,.08),

            rgba(0,0,0,.35)

        );

    z-index:1;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at center,

            transparent 45%,

            rgba(0,0,0,.18) 100%

        );

    z-index:1;

}

/*==============================
CONTENIDO
==============================*/

.hero-content{

    position:relative;

    z-index:2;

    width:min(900px,90%);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


/*==============================
INFORMACIÓN
==============================*/

.hero-info{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-bottom:34px;

    flex-wrap:wrap;

}

.hero-location{

    color:#8d8d8d;

    font-size:.82rem;

    letter-spacing:5px;

    text-transform:uppercase;

}

.hero-divider{

    width:70px;

    height:1px;

    background:rgba(200,154,74,.45);

}

.hero-subtitle{

    color:var(--dorado);

    font-size:.90rem;

    font-weight:600;

    letter-spacing:7px;

    text-transform:uppercase;

}


/*==============================
TÍTULO
==============================*/

.hero h1{

    font-family:var(--titulo);

    font-size:clamp(4.5rem,9vw,7rem);

    font-weight:600;

    line-height:.90;

    letter-spacing:1px;

    margin-bottom:28px;

    text-shadow:

        0 10px 35px rgba(0,0,0,.55);

}


/*==============================
DESCRIPCIÓN
==============================*/

.hero p{

    max-width:700px;

    color:#d0d0d0;

    font-size:1.25rem;

    line-height:1.9;

    font-weight:300;

    margin:auto;

}


/*==============================
BOTONES
==============================*/

.hero .botones{

    margin-top:45px;

}
.botones{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

}

.btn-principal{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 42px;

    border-radius:50px;

    background:linear-gradient(
        180deg,
        #e7c26d 0%,
        #c89a4a 100%
    );

    color:#111;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;

    box-shadow:
        0 12px 35px rgba(200,154,74,.35);

    transition:
        all .35s ease;

}

.btn-principal:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(200,154,74,.45);

}

.btn-secundario{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 42px;

    border:2px solid rgba(200,154,74,.75);

    border-radius:50px;

    color:white;

    font-weight:600;

    transition:all .35s ease;

}

.btn-secundario:hover{

    background:rgba(200,154,74,.10);

    border-color:var(--dorado);

}
/*==============================
HERO CINEMÁTICO
==============================*/

@keyframes heroMove{

    0%{

        transform:
            scale(1)
            translate3d(0,0,0);

    }

    50%{

        transform:
            scale(1.03)
            translate3d(-0.8%, -0.5%,0);

    }

    100%{

        transform:
            scale(1.06)
            translate3d(0.8%,0.5%,0);

    }

}
@keyframes heroFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*==================================================
RESPONSIVE
==================================================*/

.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:7px;

    width:42px;

    cursor:pointer;

    z-index:1100;

}

.menu-toggle span{

    width:100%;

    height:2px;

    background:#fff;

    transition:.35s;

}

@media(max-width:1199px){

header{

    padding:20px 40px;

}

.logo img{

    width:180px;

}

nav{

    gap:28px;

}

}
@media(max-width:768px){

header{

    padding:18px 24px;

}

.logo img{

    width:165px;

}

.menu-toggle{

    display:flex;

}

nav{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:#090909;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    transition:.45s;

}

nav.active{

    right:0;

}

nav a{

    font-size:1rem;

}
/*==============================
HERO MOBILE
==============================*/

.hero{

    min-height:100svh;

    padding:110px 20px 40px;

}

.hero-content{

    width:100%;

}

.hero-info{

    gap:10px;

    margin-bottom:12px;

}

.hero-location{

    font-size:.70rem;

    letter-spacing:3px;

}

.hero-divider{

    width:40px;

}

.hero-subtitle{

    font-size:.72rem;

    letter-spacing:2px;

}

.hero h1{

    font-size:3rem;

    line-height:.90;

    margin-bottom:18px;

}

.hero p{

    font-size:1rem;

    line-height:1.6;

    max-width:95%;

}

.hero .botones{

    margin-top:18px;

}

.botones{

    flex-direction:column;

    width:100%;

    gap:16px;

}

.btn-principal,
.btn-secundario{

    width:100%;

    max-width:300px;

    min-width:0;

}
}