:root{

--gold:#C8A86B;
--bg:#F8F5F0;
--text:#333;
--white:#fff;
--aqua: #4ecdc4;
--verdemas: #19c6c2;
--whats: #25D366;
--grisclaro: #f4f4f4;
}

*{

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

}

body{

font-family:Poppins,sans-serif;
background:var(--bg);

}

.container{

width:92%;
max-width:1400px;
margin:auto;

}



header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.4s;

}

header.scrolled{

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

header.scrolled a{

color:#333;

}

header.scrolled i{

color:#333;

}

header .container{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

/*===hprod===*/
header2{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.3s;
background:#403000;
}


header2.scrolled{

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}


header2.scrolled a{

color:#333;

}

header2.scrolled i{

color:#333;

}

header2 .container{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}
/*===hprod===*/



.logo img{

height:80px;

}



nav ul{

display:flex;

list-style:none;

gap:45px;

}

nav a{

text-decoration:none;

color:white;

font-size:15px;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

nav a:hover::after{

width:100%;

}



.icons{

display:flex;

gap:22px;

font-size:18px;

color:white;

cursor:pointer;

}



#hamburger{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

#hamburger span{

width:28px;

height:3px;

background:white;

transition:.35s;

}



.hero{

height:100vh;

background:url("../img/hero.png") center/cover;

position:relative;

display:flex;

align-items:center;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(90deg,
rgba(0,0,0,.55),
rgba(0,0,0,.20),
rgba(0,0,0,.05));

}

.hero-content{

position:relative;

z-index:10;

width:90%;
max-width:1400px;
margin:auto;

color:white;

}

.subtitle{

letter-spacing:5px;

color:#D6BE8B;

}

.hero h1{

font-family:"Cormorant Garamond",serif;

font-size:80px;

margin:20px 0;

}

.hero p{

max-width:500px;

line-height:1.9;

font-size:18px;

}

.button{

display:inline-block;

margin-top:35px;

padding:18px 40px;

background:var(--gold);

border-radius:20px;

text-decoration:none;

color:white;

}


/*PR*/
.products{

padding:120px 0;

background:#faf9f7;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

letter-spacing:4px;

color:#b89a5d;

font-size:13px;

}

.section-title h2{

font-family:"Cormorant Garamond",serif;

font-size:52px;

margin:15px 0;

}

.section-title p{

max-width:700px;

margin:auto;

line-height:1.8;

color:#666;

}
/*nine*/
.product-grid{

display:grid;

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

gap:40px;

}
@media(max-width:800px){
.product-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:450px){
.product-grid{
grid-template-columns:repeat(1,1fr);
}
}
/*CARDONA*/
.product-card{

background:white;

border-radius:18px;

overflow:hidden;

transition:.35s;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.product-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}
/*IMOGEN THOMAS*/
.product-image{

overflow:hidden;

}

.product-image img{

width:100%;

display:block;

transition:.5s;

}

.product-card:hover img{

transform:scale(1.08);

}
/*INFERNO*/
.product-info{

padding:25px;

text-align:center;

}

.product-info h3{

font-size:20px;

margin-bottom:10px;

}

.product-info span{

display:block;

font-weight:600;

color:#b89a5d;

margin-bottom:18px;

}

.product-info a{

text-decoration:none;

color:#222;

border-bottom:2px solid #b89a5d;

padding-bottom:3px;

}

.product-detail{

display:grid;

grid-template-columns:50% 40%;

gap:80px;

padding:120px 0;
/*border: 1px solid #ffcc00;*/
width:100%;
margin:auto;

}
.product-detail{
padding-top:100px;
padding-left:10px;
padding-right:10px;
}

.buy{

display:inline-block;

margin-top:35px;

padding:10px 40px;

background:var(--gold);

border-radius:40px;

text-decoration:none;

color:white;

}



/*galeno*/



.gallery{

display:grid;

grid-template-columns:90px 1fr;

gap:25px;

/*border: 1px solid #bb0000;*/

}

.thumbs{

display:flex;

flex-direction:column;

gap:15px;

/*border: 1px solid #ffcc00;*/

}

.thumbs img{

width:90px;

border-radius:10px;

cursor:pointer;

border:2px solid transparent;

transition:.3s;

}

.thumbs img:hover{

border-color:#C8A86B;

}

.thumbs img.active{

border-color:#C8A86B;

}
.main-image{

border-radius:18px;

overflow:hidden;

background:#fafafa;

}

.main-image img{

width:100%;

display:block;

}
/*galeno*/

/*detinferno*/
.product-det-info{

padding:25px;

text-align:center;

}

.product-det-info h3{

font-size:20px;

margin-bottom:10px;

}

.product-det-info span{

display:block;

font-weight:600;

color:#b89a5d;

margin-bottom:18px;

}

.product-det-info a{

text-decoration:none;

color:#white;

border-bottom:2px solid #b89a5d;

padding-bottom:5px;

}
/*detinferno*/

/*movete*/
@media(max-width:768px){

.product-detail{

    display:block;

    padding-top:100px;

}

.gallery{

    width:100%;

}

.slider{

    overflow:hidden;

    position:relative;

}

.slide{

    width:100%;

    display:none;

    border-radius:15px;

}

.slide.active{

    display:block;

}

.dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:20px 0;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#CCC;

    cursor:pointer;

}

.dot.active{

    background:#C8A86B;

}

.product-det-info{

    text-align:center;

    padding:20px;

}

.product-det-info h1{

    font-size:34px;

    font-family:"Cormorant Garamond",serif;

}

.product-det-info h2{

    margin:15px 0;

    color:#C8A86B;

}

.product-det-info p{

    line-height:1.8;

    margin:25px 0;

}

/*.button{

    width:100%;

    display:block;

}*/

}

/*movete*/


.mobile-gallery{

    display:flex;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

}

.mobile-gallery img{

    min-width:100%;

    scroll-snap-align:center;

}

/*==========================
ABOUT
==========================*/

.about{

    padding:120px 0;

    background:#FFF;

}
.about{
padding-top:120px;
padding-left:10px;
padding-right:10px;
}


.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    margin-top:70px;

}

.about-image{

    overflow:hidden;

    border-radius:20px;

}

.about-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.05);

}

.about-content h3{

    font-family:"Cormorant Garamond", serif;

    font-size:44px;

    margin-bottom:25px;

}

.about-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:22px;

}

.about-content .button{

    margin-top:20px;

}

/*valiendo*/

.values{

    padding:90px 0;

    background:#F7F5F1;

}

.values .container{

    display:grid;

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

    gap:35px;

}

.value-card{

    background:white;

    padding:45px;

    border-radius:18px;

    text-align:center;

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.value-card i{

    font-size:42px;

    color:#C8A86B;

    margin-bottom:20px;

}

.value-card h4{

    font-family:"Cormorant Garamond", serif;

    font-size:32px;

    margin-bottom:15px;

}

.value-card p{

    color:#666;

    line-height:1.8;

}

/*quien responde*/

@media(max-width:992px){

.about-grid{

    grid-template-columns:1fr;

}

.about-content{

    text-align:center;

}

.values .container{

    grid-template-columns:1fr;

}

}

.icono-mexico {
  background: linear-gradient(90deg, #006847 33%, #ffffff 33%, #ffffff 66%, #ce1126 66%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*=========================
facultad
==========================*/

.faq{

    padding:120px 0;

    background:#F8F6F2;

}

.faq{
padding-top:120px;
padding-left:10px;
padding-right:10px;
}

.faq-container{

    max-width:900px;

    margin:70px auto 0;

}

.faq-item{

    background:#FFF;

    border-radius:14px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.faq-question{

    width:100%;

    padding:24px 30px;

    border:none;

    background:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

    font-weight:500;

}

.faq-question span{

    font-size:28px;

    color:#C8A86B;

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.4s ease;

}

.faq-answer p{

    padding:0 30px 25px;

    color:#666;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

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

/*.faq{

    padding:100px 0;

}*/

.faq-question{

    font-size:16px;

    padding:20px;

}

.faq-answer p{

    padding:0 20px 20px;

}

}

/*futbol*/
footer{

    background:#F4F1EB;
    padding:70px 0 25px;

    border-top:1px solid #e5e1d9;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    margin-bottom:50px;

}

.footer-logo img{

    width:170px;
    margin-bottom:20px;

}

.footer-logo p{

    color:#777;

    line-height:1.8;

    max-width:300px;

}

.footer-column h4{

    font-family:"Cormorant Garamond",serif;

    font-size:30px;

    margin-bottom:20px;

    color:#222;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    text-decoration:none;

    color:#666;

    transition:.3s;

}

.footer-column a:hover{

    color:#C8A86B;

    padding-left:6px;

}

.footer-social{

    display:flex;

    gap:18px;

    margin-top:10px;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #d7d1c6;

    border-radius:50%;

    color:#666;

    transition:.35s;

}

.footer-social a:hover{

    background:#C8A86B;

    color:white;

    border-color:#C8A86B;

    transform:translateY(-4px);

}

.footer-bottom{

    border-top:1px solid #DDD7CC;

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#777;

    font-size:14px;

}

.footer-payments{

    display:flex;

    gap:12px;

}

.footer-payments img{

    height:26px;

    opacity:.75;

    transition:.3s;

}

.footer-payments img:hover{

    opacity:1;

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

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

    text-align:center;

}

}

@media(max-width:600px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo p{

    margin:auto;

}

.footer-social{

    justify-content:center;

}

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

.footer-grid{

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

    text-align:center;

}

}

@media(max-width:600px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo p{

    margin:auto;

}

.footer-social{

    justify-content:center;

}

}