/*==================================================
  RECINTO MAYORISTA
  style.css
==================================================*/

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

:root{

    --primary:#C8102E;
    --secondary:#D4AF37;
    --dark:#111111;
    --dark2:#1E1E1E;
    --light:#FFFFFF;
    --gray:#F5F5F5;
    --text:#4F4F4F;

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

    --radius:14px;

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

}

/*==========================
  TITULOS
==========================*/

h1,h2,h3,h4,h5{

    color:var(--dark);

    font-weight:700;

    line-height:1.2;

}

p{

    font-size:17px;

    line-height:1.8;

}

.section-subtitle{

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

}

.section-title{

    font-size:46px;

    margin:15px 0 25px;

}

#sectores .section-title{
    color:#D4AF37 !important;
}

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

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:flex-start;
    padding-top:170px;
padding-bottom:80px;

    z-index:99999;

}

#loader img{

    width:120px;

}

/*==========================
  NAVBAR
==========================*/

.navbar{

    padding:18px 0;

    transition:.4s;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(12px);

}

.navbar .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
navbar-collapse{
    display: flex;
    justify-content: flex-end;
}

.navbar-nav{
    margin-left: 120px;
}

.navbar.scrolled{

    background:#111;

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

}

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

.navbar-brand{
    padding:0 !important;
}

.navbar-brand img{
    height:150px !important;
    width:auto !important;
    max-width:none !important;
    display:block !important;
}

.nav-link{

    color:#fff;

    font-weight:600;

    margin:0 12px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--secondary);

}

.nav-link.active{

    color:var(--secondary);

}

.btn-cotizar{

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    padding:13px 28px;

    font-weight:600;

    transition:.3s;

}

.btn-cotizar:hover{

    background:#A60020;

    color:#fff;

}

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

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:80px;   /* <-- Agrega esta línea */

    color:#fff;

    background:

    linear-gradient(rgba(0,0,0,.65),

    rgba(0,0,0,.65)),

    url("../img/hero/hero.jpg");

    background-size:cover;

    background-position:center;
}

.hero-text h1{

    font-size:70px;

    color:#fff;

    line-height:1.05;

    margin-bottom:25px;

}

.hero-text h1 span{

    color:var(--secondary);

}

.hero-text p{

    color:#f0f0f0;

    font-size:20px;

    margin-bottom:35px;

    max-width:650px;

}

.subtitle{

    display:inline-block;

    color:var(--secondary);

    letter-spacing:3px;

    margin-bottom:20px;

    font-weight:700;

}

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

.btn-primary-custom{

    background:var(--primary);

    color:#fff;

    border-radius:50px;

    padding:15px 35px;

    text-decoration:none;

    transition:.3s;

    display:inline-block;

    font-weight:600;

}

.btn-primary-custom:hover{

    background:#A0001F;

    color:#fff;

    transform:translateY(-3px);

}

.btn-outline-custom{

    border:2px solid #fff;

    color:#fff;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    margin-left:15px;

    transition:.3s;

}

.btn-outline-custom:hover{

    background:#fff;

    color:#111;

}

.hero-buttons{

    margin-bottom:45px;

}

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

.hero-features{

    display:grid;

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

    gap:25px;

}

.hero-features div{

    display:flex;

    align-items:center;

}

.hero-features i{

    font-size:34px;

    color:var(--secondary);

    margin-right:15px;

}

.hero-features span{

    font-weight:600;

}
/*==================================================
  NOSOTROS
==================================================*/

#nosotros{

    padding:100px 0;

    background:var(--gray);

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.about-image img:hover{

    transform:scale(1.02);

}

.about-content{

    padding-left:40px;

}

.about-content h2{

    margin-bottom:25px;

}

.about-content p{

    margin-bottom:20px;

}

.about-list{

    list-style:none;

    padding:0;

    margin-top:35px;

}

.about-list li{

    margin-bottom:18px;

    display:flex;

    align-items:center;

    font-weight:500;

}

.about-list i{

    color:var(--secondary);

    font-size:22px;

    margin-right:14px;

}

/*==================================================
  SOLUCIONES
==================================================*/

#soluciones{

    padding:110px 0;

    background:#ffffff;

}

.solution-card{

    background:#fff;

    border-radius:18px;

    padding:40px 30px;

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

    transition:all .35s ease;

    height:100%;

    border-top:5px solid transparent;

}

.solution-card:hover{

    transform:translateY(-12px);

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

    border-top:5px solid var(--primary);

}

.solution-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    background:rgba(200,16,46,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    transition:.35s;

}

.solution-card:hover .solution-icon{

    background:var(--primary);

}

.solution-icon i{

    font-size:36px;

    color:var(--primary);

    transition:.35s;

}

.solution-card:hover .solution-icon i{

    color:#fff;

}

.solution-card h4{

    margin-bottom:18px;

    font-size:24px;

}

.solution-card p{

    margin-bottom:0;

}

/*==================================================
  BOTÓN DE TARJETAS
==================================================*/

.solution-link{

    display:inline-flex;

    align-items:center;

    margin-top:25px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:.30s;

}

.solution-link i{

    margin-left:10px;

    transition:.30s;

}

.solution-link:hover{

    color:var(--secondary);

}

.solution-link:hover i{

    transform:translateX(8px);

}

/*==================================================
  EFECTOS GENERALES
==================================================*/

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

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

}

.rounded-xl{

    border-radius:18px;

}

.bg-light-custom{

    background:#fafafa;

}

.text-primary-custom{

    color:var(--primary);

}

.text-secondary-custom{

    color:var(--secondary);

}

/*==================================================
  ANIMACIONES
==================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.zoom{

    animation:zoom .8s ease forwards;

}

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.90);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
/*==================================================
  SECTORES
==================================================*/

#sectores{

    padding:110px 0;

    background:linear-gradient(180deg,#fafafa,#ffffff);

}

.sector-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.sector-card:hover{

    transform:translateY(-12px);

    box-shadow:0 22px 45px rgba(0,0,0,.16);

}

.sector-image{

    height:230px;

    overflow:hidden;

}

.sector-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.sector-card:hover .sector-image img{

    transform:scale(1.08);

}

.sector-content{

    padding:30px;

}

.sector-content h4{

    margin-bottom:15px;

}

.sector-content p{

    margin-bottom:0;

}

/*==================================================
  PROCESO
==================================================*/

#proceso{

    padding:110px 0;

    background:var(--dark);

    color:#fff;

}

#proceso h2{

    color:#D4AF37;

}

.process-card{

    text-align:center;

    padding:40px 25px;

    position:relative;

}

.process-number{

    width:75px;

    height:75px;

    border-radius:50%;

    background:var(--secondary);

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:28px;

    font-weight:700;

}

.process-card h4{

    color:#fff;

    margin-bottom:15px;

}

.process-card p{

    color:#d8d8d8;

}

.process-card::after{

    content:"";

    position:absolute;

    top:38px;

    right:-50%;

    width:100%;

    height:2px;

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

}

.process-card:last-child::after{

    display:none;

}

/*==================================================
  CTA
==================================================*/

.cta-section{

    background:linear-gradient(135deg,#9C7A1C,#D4AF37,#F4D35E);

    color:#fff;

    padding:90px 0;

}

.cta-section h2{

    color:#fff;

    font-size:48px;

    margin-bottom:20px;

}

.cta-section p{

    color:#f2f2f2;

    margin-bottom:0;

}

.cta-section .btn{

    border-radius:50px;

    padding:16px 36px;

    font-weight:600;

}

/*==================================================
  DIVISORES
==================================================*/

.section-divider{

    width:90px;

    height:5px;

    background:var(--secondary);

    border-radius:20px;

    margin:25px auto 45px;

}

/*==================================================
  EFECTOS PREMIUM
==================================================*/

.glass{

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

    backdrop-filter:blur(15px);

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

}

.border-gold{

    border-top:4px solid var(--secondary);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

/*==================================================
  TRANSICIONES GENERALES
==================================================*/

a,
button,
.card,
img{

    transition:all .35s ease;

}
/*=========================================
LOGO NAVBAR
=========================================*/

.navbar{
    min-height:120px;
    padding:10px 0;
}

.navbar-brand{
    display:flex;
    align-items:center;
}

.navbar-brand img{
    height:150px;
    width:auto;
    max-height:150px;
    display:block;
}
body{
    border:10px solid red !important;
}