/* ==========================================================
   COMERCIALIZADORA DUPLAS
   STYLES.CSS
   PARTE 1/3
   Variables - Reset - Header - Hero - Buttons
========================================================== */

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

:root{

    --red:#C1121F;
    --red-dark:#9B0D18;

    --black:#111111;
    --white:#FFFFFF;

    --gray:#F6F6F6;
    --gray-2:#EFEFEF;
    --gray-dark:#6B7280;

    --success:#198754;

    --radius:12px;
    --radius-lg:18px;

    --shadow:0 10px 30px rgba(0,0,0,.08);
    --shadow-lg:0 18px 45px rgba(0,0,0,.15);

    --transition:.30s ease;

    --max-width:1200px;

}

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

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:var(--black);
    background:var(--white);
    line-height:1.6;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:90%;
    max-width:var(--max-width);
    margin:auto;

}

/* =========================
   UTILIDADES
========================= */

.text-center{

    text-align:center;

}

.mt-2{

    margin-top:2rem;

}

.mt-4{

    margin-top:4rem;

}

.mb-4{

    margin-bottom:4rem;

}

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

.header{

    position:sticky;
    top:0;
    left:0;

    z-index:9999;

    background:var(--white);

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

    box-shadow:0 4px 20px rgba(0,0,0,.1);

}

.navbar{

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:95px;

}

.logo img{

    height:70px;
    width:auto;

}

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

.nav{

    display:flex;
    align-items:center;

}

.nav-links{

    display:flex;
    align-items:center;

    gap:2.5rem;

}

.nav-links>li{

    position:relative;

}

.nav-links a{

    color:var(--black);

    font-weight:600;

    letter-spacing:0.5px;

    transition:var(--transition);

    position:relative;

}

.nav-links a::after{

    content:'';

    position:absolute;

    bottom:-4px;

    left:0;

    width:0;

    height:2px;

    background:var(--red);

    transition:width 0.3s ease;

}

.nav-links a:hover{

    color:var(--red);

}

.nav-links a:hover::after{

    width:100%;

}

/* =========================
   SUBMENU
========================= */

.submenu{

    position:absolute;

    left:0;
    top:100%;

    width:280px;

    background:white;

    display:none;

    border-radius:0 0 12px 12px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.dropdown:hover .submenu{

    display:block;

}

.submenu li a{

    display:block;

    padding:14px 18px;

    color:#444;

    transition:var(--transition);

}

.submenu li a:hover{

    background:var(--gray);

    color:var(--red);

}

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

.menu-btn{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    font-size:1.8rem;

}

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

.hero{

    position:relative;

    height:720px;

    overflow:hidden;

    background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)),
                url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 1s;

}

.slide.active{

    opacity:1;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:transparent;

    display:flex;

    align-items:center;

    z-index:10;

}

.hero-content{

    color:white;

    max-width:720px;

}

.hero-tag{

    display:inline-block;

    color:#ddd;

    margin-bottom:18px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.90rem;

}

.hero-content h1{

    font-size:3.8rem;

    line-height:1.08;

    margin-bottom:25px;

}

.hero-content p{

    font-size:1.15rem;

    color:#eee;

    margin-bottom:35px;

}

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

.hero-actions{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.btn{

    display:inline-block;

    padding:16px 30px;

    border-radius:8px;

    transition:var(--transition);

    font-weight:700;

}

.btn-primary{

    background:var(--red);

    color:white;

}

.btn-primary:hover{

    background:var(--red-dark);

    transform:translateY(-2px);

}

.btn-outline{

    color:white;

    border:2px solid white;

}

.btn-outline:hover{

    background:white;

    color:var(--black);

}

/* =========================
   SECCIONES
========================= */

section{

    padding:90px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--red);

    font-weight:700;

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-heading h2{

    margin-top:10px;

    font-size:2.6rem;

    color:var(--black);

}

.section-description{

    max-width:760px;

    margin:20px auto 0;

    color:var(--gray-dark);

    font-size:1.05rem;

    line-height:1.8;

    text-align:justify;

    text-align-last:center;

}

/* ==========================================================
   PARTE 2/3
   Nosotros - Misión - Visión
   Productos
   Certificaciones
   Contacto
========================================================== */


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

.about{

    background:var(--gray);

}

.about-intro{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

    color:var(--gray-dark);

    font-size:1.08rem;

}

.about-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2.5rem;

}

.about-card{

    background:white;

    padding:2.5rem;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.about-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.products section h3{

    font-size:2rem;

    font-weight:700;

    color:var(--red);

    text-align:center;

    margin:3rem 0 2rem;

    letter-spacing:0.5px;

    position:relative;

    padding-bottom:1rem;

}

.products section h3::after{

    content:'';

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:80px;

    height:3px;

    background:var(--red);

    border-radius:2px;

}

.products section:first-child h3{

    margin-top:0;

}

.about-card h3{

    color:var(--red);

    margin-bottom:1rem;

    font-size:1.5rem;

}

.about-card p{

    color:var(--gray-dark);

}

/* =========================
   PRODUCTOS
========================= */

.products{

    background:white;

}

.products-banner{

    background:linear-gradient(rgba(193, 18, 31, 0.75), rgba(0, 0, 0, 0.8)), 
                url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    padding:5rem 0;

    position:relative;

    overflow:hidden;

}

.products-banner::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>');

    background-size:100px 100px;

    opacity:0.3;

}

.banner-content{

    text-align:center;

    color:white;

    position:relative;

    z-index:1;

}

.banner-content h2{

    font-size:2.5rem;

    margin:0 0 1rem;

    font-weight:700;

}

.banner-content p{

    font-size:1.2rem;

    opacity:0.95;

    max-width:700px;

    margin:0 auto;

    line-height:1.6;

}

.categories-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:2.5rem;

    margin-top:3rem;

}

.category-card{

    background:white;

    border-radius:var(--radius-lg);

    padding:2.5rem;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    border:2px solid transparent;

    text-decoration:none;

    color:inherit;

}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:var(--red);

}

.category-icon{

    font-size:3.5rem;

    margin-bottom:1.5rem;

}

.category-image{

    width:120px;

    height:120px;

    margin:0 auto 1.5rem;

    border-radius:12px;

    overflow:hidden;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

}

.category-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:10px;

}

.category-card h3{

    color:var(--black);

    margin-bottom:1rem;

    font-size:1.4rem;

}

.category-card p{

    color:var(--gray-dark);

    line-height:1.7;

    margin-bottom:1.5rem;

    text-align:justify;

    text-align-last:center;

}

.category-link{

    color:var(--red);

    font-weight:700;

    font-size:0.95rem;

    transition:var(--transition);

}

.category-card:hover .category-link{

    color:var(--red-dark);

}

.category{

    margin-top:5rem;

}

.category:first-child{

    margin-top:0;

}

.category-title{

    position:relative;

    margin-bottom:2.5rem;

    padding-bottom:12px;

    font-size:2rem;

    color:var(--black);

}

.category-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:90px;

    height:4px;

    background:var(--red);

    border-radius:10px;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:2.5rem;

}

/* El componente ocupa todo el ancho */

product-card{

    display:block;

}

/* =========================
   CERTIFICACIONES
========================= */

.certifications{

    background:linear-gradient(
        180deg,
        white,
        var(--gray)
    );

}

.certifications-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2.5rem;

}

.certifications-banner{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:3rem;

    margin-top:4rem;

    flex-wrap:wrap;

    padding:2rem;

    background:white;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.certifications-banner img{

    height:80px;

    width:auto;

    object-fit:contain;

    max-width:150px;

}

.cert-card{

    background:white;

    border-radius:var(--radius-lg);

    padding:2.5rem;

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.cert-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.cert-icon{

    width:80px;

    height:80px;

    margin:auto auto 20px;

    border-radius:50%;

    background:var(--red);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:2rem;

}

.cert-card h3{

    margin-bottom:1rem;

    color:var(--red);

}

.cert-card p{

    color:var(--gray-dark);

    line-height:1.8;

    text-align:justify;

}

image-carousel{

    display:block;

    margin:0 auto 2rem;

}

.whatsapp-float{

    position:fixed;

    bottom:30px;

    right:30px;

    width:60px;

    height:60px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 15px rgba(0,0,0,.3);

    z-index:10000;

    transition:transform .3s ease, box-shadow .3s ease;

}

.whatsapp-float:hover{

    transform:scale(1.1);

    box-shadow:0 6px 20px rgba(0,0,0,.4);

}

/* =========================
   CONTACTO
========================= */

.contact{

    background:white;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:3rem;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.contact-box{

    background:var(--gray);

    border-radius:var(--radius);

    padding:2rem;

    transition:var(--transition);

}

.contact-box:hover{

    background:white;

    box-shadow:var(--shadow);

}

.contact-box h3{

    color:var(--red);

    margin-bottom:10px;

}

.contact-box p{

    color:var(--gray-dark);

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:1rem;

    border:1px solid #DDD;

    border-radius:8px;

    font-size:1rem;

    transition:var(--transition);

}

.contact-form textarea{

    resize:vertical;

    min-height:170px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:0 0 0 4px rgba(193,18,31,.08);

}

.contact-form button{

    width:fit-content;

}

/* =========================
   MAPA (por si después agregas uno)
========================= */

.map{

    margin-top:3rem;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow);

}

.map iframe{

    width:100%;

    height:420px;

    border:0;

}

/* ==========================================================
   PARTE 3/3
   Footer
   Responsive
   Animaciones
   Utilidades
========================================================== */


/* =========================
   FOOTER
========================= */

footer{

    background:var(--black);

    color:white;

    padding:3rem 0 1rem;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:2rem;

}

.footer-grid h3{

    color:var(--red);

    margin-bottom:0.8rem;

    font-size:1rem;

}

.footer-grid p{

    color:#CCCCCC;

    margin-bottom:0.5rem;

}

.footer-grid p a{

    color:#CCCCCC;

    text-decoration:none;

    transition:var(--transition);

}

.footer-grid p a:hover{

    color:white;

}

.footer-grid ul{

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.footer-grid ul li a{

    color:#CCCCCC;

    transition:var(--transition);

}

.footer-grid ul li a:hover{

    color:white;

    padding-left:6px;

}

.footer-logo{

    max-width:180px;

    margin-bottom:1.5rem;

}

.footer-contact p{

    display:flex;

    align-items:center;

    gap:10px;

}

.social{

    display:flex;

    gap:1rem;

    margin-top:1.5rem;

}

.social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:white;

    transition:var(--transition);

}

.social a:hover{

    background:var(--red);

    transform:translateY(-4px);

}

.copyright{

    margin-top:2rem;

    padding-top:1.5rem;

    text-align:center;

    color:#999;

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

    font-size:0.85rem;

}

.powered-by{

    margin-top:0.5rem;

    padding-bottom:1rem;

    text-align:center;

    font-size:0.75rem;

    color:#777;

}

.powered-by a{

    color:var(--red);

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.powered-by a:hover{

    color:var(--red-dark);

    text-decoration:underline;

}


/* =========================
   REVEAL ANIMATION
========================= */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EFEFEF;

}

::-webkit-scrollbar-thumb{

    background:var(--red);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--red-dark);

}


/* =========================
   SELECTION
========================= */

::selection{

    background:var(--red);

    color:white;

}


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

img{

    transition:var(--transition);

}

img:hover{

    transform:scale(1.01);

}

a{

    transition:var(--transition);

}


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

@media(max-width:992px){

    .hero{

        height:620px;

    }

    .hero-content h1{

        font-size:2.8rem;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .certifications-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:768px){

    .menu-btn{

        display:block;

    }

    .nav{

        position:absolute;

        top:85px;

        left:0;

        width:100%;

        background:white;

        display:none;

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

    }

    .nav.active{

        display:block;

    }

    .nav-links{

        flex-direction:column;

        gap:0;

        padding:1rem;

        align-items:flex-start;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links li a{

        display:block;

        width:100%;

        padding:14px;

    }

    .submenu{

        position:static;

        width:100%;

        display:none;

        box-shadow:none;

        border-radius:0;

        background:#FAFAFA;

    }

    .dropdown.active .submenu{

        display:block;

    }

    .submenu li a{

        padding-left:30px;

    }

    .hero{

        height:560px;

    }

    .hero-content{

        text-align:center;

        margin:auto;

    }

    .hero-content h1{

        font-size:2.1rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-actions{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .section-description{

        font-size:1rem;

        text-align:left;

        text-align-last:left;

    }

    .category-title{

        font-size:1.6rem;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

    .categories-grid{

        grid-template-columns:1fr;

    }

    .category-card{

        padding:2rem;

    }

    .category-icon{

        font-size:3rem;

    }

    .category-image{

        width:100px;

        height:100px;

    }

    .category-image img{

        padding:8px;

    }

    .category-card h3{

        font-size:1.2rem;

    }

    .category-card p{

        text-align:left;

        text-align-last:left;

    }

    .footer-grid{

        text-align:center;

    }

    .social{

        justify-content:center;

    }

}


/* =========================
   SMALL DEVICES
========================= */

@media(max-width:480px){

    section{

        padding:70px 0;

    }

    .hero{

        height:520px;

    }

    .hero-content h1{

        font-size:1.8rem;

    }

    .hero-tag{

        font-size:.75rem;

    }

    .section-heading h2{

        font-size:1.8rem;

    }

    .about-card,

    .cert-card,

    .contact-box{

        padding:1.5rem;

    }

}


/* =========================
   UTILIDADES
========================= */

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

.bg-gray{

    background:var(--gray);

}

.bg-white{

    background:white;

}

.text-red{

    color:var(--red);

}

.text-gray{

    color:var(--gray-dark);

}

.w-100{

    width:100%;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.hide{

    display:none;

}

.show{

    display:block;

}


/* =========================
   CERTIFICACIONES
========================= */

.certifications{

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

    text-align:center;

}

.section-description{

    max-width:760px;

    margin:20px auto 0;

    color:var(--gray-dark);

    font-size:1.05rem;

}

.certifications-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:2.5rem;

}

.cert-card{

    background:white;

    padding:3rem;

    border-radius:18px;

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

    transition:.35s;

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

}

.cert-card:hover{

    transform:translateY(-10px);

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

}

.cert-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:var(--red);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2.2rem;

    font-weight:bold;

}

.cert-card h3{

    margin-bottom:20px;

    font-size:1.5rem;

    color:var(--black);

}

.cert-card p{

    color:var(--gray-dark);

    line-height:1.8;

}


.about{

    background:#f8f8f8;

}

.about-company{

    display:grid;

    /* grid-template-columns:450px 1fr; */

    /* gap:60px; */

    align-items:center;

    margin-bottom:70px;

}


/* .about-image img{

    border-radius:20px;

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

} */

.about-content h3{

    color:var(--red);

    margin-bottom:20px;

    font-size:1.8rem;

}

.about-content p{

    color:#666;

    margin-bottom:18px;

    line-height:1.9;

    text-align:justify;

}

.about-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2.5rem;

}

.about-card{

    background:white;

    border-radius:18px;

    padding:40px;

    text-align:center;

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

    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);

}

.about-card .icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:var(--red);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.about-card h3{

    margin-bottom:15px;

}

.about-card p{

    color:#666;

    line-height:1.8;

    text-align:justify;

}

.form-grid{

    display:grid;

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

    gap:1rem;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:16px;

    border:1px solid #DDD;

    border-radius:10px;

    font-size:15px;

    transition:.3s;

    background:#FFF;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--red);

    box-shadow:0 0 0 4px rgba(193,18,31,.08);

}

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

.contact-form button{

    margin-top:10px;

    width:220px;

}

@media(max-width:768px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .contact-form button{

        width:100%;

    }

}