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

            FELIPE LUGO
            PRECISIÓN VISUAL

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


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

:root{

--black:#111111;
--black-light:#181818;
--black-card:#202020;

--bronze:#A87432;
--bronze-light:#C08A45;

--crimson:#8D1B2A;
--crimson-light:#B42A3D;

--white:#F5F5F5;
--gray:#B8B8B8;
--gray-dark:#6C6C6C;

--transition:.4s ease;
--radius:18px;
--shadow:0 20px 60px rgba(0,0,0,.35);

--container:1280px;

}


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

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

html{

scroll-behavior:smooth;

}

body{

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

font-family:'Montserrat',sans-serif;

overflow-x:hidden;

}


img{

width:100%;
display:block;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:inherit;
cursor:pointer;
border:none;

}

ul{

list-style:none;

}

.container{

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

margin:auto;

}


/*==========================
        SCROLL
===========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--bronze);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--crimson);

}


/*==========================
        LOADER
===========================*/

#loader{

position:fixed;

inset:0;

background:#111;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:.8s;

}

.loader-logo{

width:130px;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(.9);

opacity:.6;

}

50%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(.9);

opacity:.6;

}

}


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

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 0;

z-index:999;

transition:.4s;

}

.header.active{

background:rgba(17,17,17,.94);

backdrop-filter:blur(14px);

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

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

width:150px;

}

.navbar ul{

display:flex;

gap:50px;

}

.navbar a{

font-size:.92rem;

letter-spacing:1px;

font-weight:600;

position:relative;

transition:.3s;

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--bronze);

transition:.4s;

}

.navbar a:hover{

color:var(--bronze);

}

.navbar a:hover::after{

width:100%;

}

.menu-toggle{

display:none;

font-size:1.8rem;

cursor:pointer;

}


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

.btn-primary{

display:inline-flex;

padding:18px 38px;

background:var(--bronze);

color:#fff;

border-radius:100px;

font-weight:700;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-6px);

background:var(--crimson);

}

.btn-secondary{

display:inline-flex;

padding:18px 38px;

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

border-radius:100px;

transition:.4s;

margin-left:20px;

}

.btn-secondary:hover{

background:var(--bronze);

}


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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;

}

.hero-gradient{

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,var(--crimson),transparent);

filter:blur(160px);

opacity:.15;

right:-250px;

top:-100px;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.hero-top{

color:var(--bronze);

letter-spacing:6px;

font-size:.9rem;

margin-bottom:25px;

}

.hero h1{

font-size:7rem;

line-height:.9;

font-weight:900;

margin-bottom:20px;

}

.hero h1 span{

color:var(--bronze);

display:block;

}

.hero h2{

font-size:1.4rem;

font-weight:500;

color:var(--gray);

margin-bottom:35px;

line-height:2;

}

.hero-description{

font-size:1.05rem;

line-height:2;

max-width:620px;

color:#d6d6d6;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-bottom:70px;

}

.hero-data{

display:flex;

gap:70px;

}

.hero-data h3{

font-size:2.4rem;

color:var(--bronze);

margin-bottom:8px;

}

.hero-data p{

color:var(--gray);

}

.hero-right{

position:relative;

display:flex;

justify-content:center;

}

.hero-image{

width:520px;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

}

.hero-image img{

height:700px;

object-fit:cover;

}

.hero-card{

position:absolute;

padding:14px 22px;

background:#1b1b1b;

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

border-radius:50px;

backdrop-filter:blur(10px);

}

.hero-card span{

font-size:.9rem;

font-weight:600;

}

.hero-card-01{

top:60px;

left:20px;

}

.hero-card-02{

right:10px;

top:260px;

}

.hero-card-03{

bottom:40px;

left:80px;

}

.scroll-down{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

}

.scroll-down span{

display:block;

width:2px;

height:70px;

background:var(--bronze);

animation:scroll 1.8s infinite;

}

@keyframes scroll{

0%{

transform:translateY(0);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:translateY(30px);

opacity:0;

}

}


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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto auto 45px;

}

.hero-buttons{

justify-content:center;

}

.hero-data{

justify-content:center;

}

.hero-image{

margin-top:70px;

}

}

@media(max-width:768px){

.navbar{

display:none;

}

.menu-toggle{

display:block;

}

.hero h1{

font-size:4rem;

}

.hero-image{

width:100%;

}

.hero-image img{

height:500px;

}

.hero-buttons{

flex-direction:column;

gap:20px;

}

.btn-secondary{

margin-left:0;

}

.hero-data{

flex-direction:column;

gap:30px;

}

}

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

                ABOUT

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

.about{

padding:180px 0;

background:#141414;

position:relative;

}

.about-grid{

display:grid;

grid-template-columns:500px 1fr;

gap:100px;

align-items:center;

}

.about-image{

position:relative;

overflow:hidden;

border-radius:24px;

box-shadow:0 25px 70px rgba(0,0,0,.45);

}

.about-image img{

height:700px;

object-fit:cover;

transition:.6s;

}

.about-image:hover img{

transform:scale(1.05);

}

.about-badge{

position:absolute;

left:30px;

bottom:30px;

padding:16px 30px;

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

border-left:4px solid var(--bronze);

backdrop-filter:blur(20px);

}

.about-badge span{

font-size:.85rem;

letter-spacing:3px;

font-weight:700;

color:var(--bronze);

}

.about-content h2{

font-size:4rem;

line-height:1.1;

margin:20px 0 40px;

font-weight:800;

max-width:700px;

}

.about-content p{

font-size:1.05rem;

line-height:2;

color:#d0d0d0;

margin-bottom:30px;

}

.about-info{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin:60px 0;

}

.info-box{

padding:35px;

background:#1b1b1b;

border-radius:20px;

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

transition:.45s;

}

.info-box:hover{

transform:translateY(-10px);

border-color:var(--bronze);

}

.info-box h3{

font-size:1.2rem;

margin-bottom:15px;

color:var(--bronze);

}

.info-box p{

margin:0;

line-height:1.8;

font-size:.95rem;

color:#bcbcbc;

}



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

            SECTION HEADER

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

.section-header{

text-align:center;

margin-bottom:90px;

max-width:900px;

margin-inline:auto;

}

.section-tag{

display:inline-block;

color:var(--bronze);

font-size:.9rem;

letter-spacing:5px;

font-weight:700;

margin-bottom:20px;

}

.section-header h2{

font-size:3.5rem;

font-weight:800;

margin-bottom:25px;

}

.section-header p{

font-size:1.05rem;

line-height:2;

color:#bdbdbd;

}



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

            UNIVERSO

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

.universe{

padding:180px 0;

background:#101010;

}

.universe-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:90px;

}

.universe-card{

background:#1a1a1a;

padding:45px;

border-radius:24px;

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

transition:.45s;

display:flex;

flex-direction:column;

justify-content:space-between;

min-height:280px;

position:relative;

overflow:hidden;

}

.universe-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:radial-gradient(circle,var(--bronze),transparent);

right:-120px;

top:-120px;

opacity:.08;

transition:.5s;

}

.universe-card:hover::before{

opacity:.18;

transform:scale(1.2);

}

.universe-card:hover{

transform:translateY(-12px);

border-color:var(--bronze);

}

.number{

font-size:3rem;

font-weight:900;

color:#333;

margin-bottom:35px;

}

.universe-card h3{

font-size:1.5rem;

margin-bottom:18px;

color:var(--white);

}

.universe-card p{

line-height:1.9;

color:#bdbdbd;

font-size:.96rem;

}

.special-card{

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:linear-gradient(135deg,#222,var(--bronze));

}

.special-card h4{

font-size:2rem;

font-weight:700;

margin-bottom:20px;

}

.special-card i{

font-size:2rem;

margin-top:20px;

}



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

            PORTFOLIO

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

.portfolio{

padding:180px 0;

background:#141414;

}

.portfolio-category{

margin-bottom:140px;

}

.portfolio-title{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:50px;

gap:50px;

}

.portfolio-title h2{

font-size:3rem;

font-weight:900;

color:var(--bronze);

letter-spacing:2px;

}

.portfolio-title p{

max-width:500px;

line-height:1.9;

color:#bdbdbd;

font-size:1rem;

}



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

            SWIPER

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

.swiper{

width:100%;

padding-bottom:70px;

overflow:visible;

}

.swiper-slide{

border-radius:22px;

overflow:hidden;

background:#222;

transition:.5s;

cursor:pointer;

}

.swiper-slide:hover{

transform:translateY(-12px);

}

.swiper-slide img{

width:100%;

height:620px;

object-fit:cover;

transition:.7s;

}

.swiper-slide:hover img{

transform:scale(1.08);

}

.swiper-pagination-bullet{

background:#777;

opacity:1;

}

.swiper-pagination-bullet-active{

background:var(--bronze);

}



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

        RESPONSIVE

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

@media(max-width:1100px){

.about-grid{

grid-template-columns:1fr;

}

.about-image{

max-width:550px;

margin:auto;

}

.about-content{

text-align:center;

}

.about-info{

grid-template-columns:1fr;

}

.universe-grid{

grid-template-columns:repeat(2,1fr);

}

.portfolio-title{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:768px){

.about{

padding:120px 0;

}

.about-content h2{

font-size:2.5rem;

}

.section-header h2{

font-size:2.4rem;

}

.universe-grid{

grid-template-columns:1fr;

}

.portfolio-title h2{

font-size:2.2rem;

}

.swiper-slide img{

height:420px;

}

}

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

                SERVICES

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

.services{

    padding:180px 0;
    background:#101010;

}

.services-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:80px;

}

.service-card{

    background:#181818;
    padding:60px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.05);
    transition:.45s;
    position:relative;
    overflow:hidden;

}

.service-card::before{

    content:"";
    position:absolute;

    width:300px;
    height:300px;

    background:radial-gradient(circle,var(--crimson),transparent);

    right:-170px;
    top:-170px;

    opacity:.08;

    transition:.6s;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:var(--bronze);

}

.service-card:hover::before{

    opacity:.18;

}

.service-number{

    display:block;

    font-size:4rem;

    font-weight:900;

    color:#2c2c2c;

    margin-bottom:30px;

}

.service-card h3{

    font-size:2rem;

    margin-bottom:20px;

}

.service-card p{

    color:#bfbfbf;

    line-height:2;

}



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

                SMARTFILMS

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

.smartfilms{

    padding:180px 0;

    background:#141414;

}

.smartfilms .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.smartfilms-content h2{

    font-size:4rem;

    margin:20px 0;

}

.smartfilms-content h3{

    color:var(--bronze);

    margin-bottom:30px;

    font-size:1.6rem;

}

.smartfilms-content p{

    color:#c9c9c9;

    line-height:2;

    margin-bottom:45px;

}

.smartfilms-video{

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.4);

}

.smartfilms video{

    width:100%;

    display:block;

}



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

                CONTACT

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

.contact{

    padding:180px 0;

    background:#101010;

}

.contact-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:80px;

    margin-top:80px;

}

.contact-info{

    background:#181818;

    border-radius:24px;

    padding:45px;

}

.contact-info h3{

    margin-bottom:35px;

    color:var(--bronze);

    font-size:2rem;

}

.contact-info p{

    margin-bottom:18px;

    color:#d0d0d0;

}

.contact-form{

    display:grid;

    gap:25px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    background:#181818;

    color:#fff;

    border:none;

    border-radius:16px;

    padding:20px 24px;

    font-size:1rem;

    outline:none;

    transition:.4s;

}

.contact-form textarea{

    min-height:220px;

    resize:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

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

}

.contact-form button{

    width:240px;

}



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

                FOOTER

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

.footer{

    padding:90px 0;

    background:#080808;

    text-align:center;

}

.footer-logo{

    width:120px;

    margin:auto;

    margin-bottom:30px;

}

.footer h3{

    font-size:2.2rem;

    margin-bottom:10px;

}

.footer p{

    color:#9f9f9f;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:35px;

    margin:40px 0;

}

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    color:var(--bronze);

}

.copyright{

    margin-top:40px;

    font-size:.9rem;

    color:#666;

}



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

            ANIMACIONES

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

.fade-up{

    opacity:0;

    transform:translateY(80px);

}

.fade-left{

    opacity:0;

    transform:translateX(-80px);

}

.fade-right{

    opacity:0;

    transform:translateX(80px);

}

.scale{

    opacity:0;

    transform:scale(.8);

}



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

            HOVER IMAGES

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

img{

    transition:.7s;

}

img:hover{

    transform:scale(1.02);

}



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

            SELECTION

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

::selection{

    background:var(--bronze);

    color:#fff;

}



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

            RESPONSIVE

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

@media(max-width:1200px){

.services-grid{

grid-template-columns:1fr;

}

.smartfilms .container{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.services{

padding:120px 0;

}

.smartfilms{

padding:120px 0;

}

.contact{

padding:120px 0;

}

.service-card{

padding:40px;

}

.service-card h3{

font-size:1.6rem;

}

.smartfilms-content h2{

font-size:2.8rem;

}

.footer-social{

flex-wrap:wrap;

gap:20px;

}

.contact-form button{

width:100%;

}

}



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

            EFECTO GLASS

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

.glass{

background:rgba(255,255,255,.03);

backdrop-filter:blur(12px);

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

}



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

            SOMBRAS

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

.shadow{

box-shadow:

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

}



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

            TRANSICIONES

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

section{

transition:.6s;

}

button,

a,

.card,

.service-card,

.universe-card{

transition:.45s ease;

}

.smartfilms-video{

    width:100%;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.smartfilms-video iframe{

    width:100%;
    aspect-ratio:16/9;
    border:none;
    display:block;

}