/*==================================================
CENTRAL DE INGENIERÍA
STYLE.CSS
==================================================*/

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

:root{

--naranja:#ff7a00;
--naranja-hover:#ff922e;

--negro:#111111;
--gris:#1d1d1d;
--gris-claro:#f5f5f5;

--blanco:#ffffff;

--verde:#25D366;

--texto:#444444;

--sombra:0 10px 35px rgba(0,0,0,.12);

--radio:18px;

--transicion:.35s;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}

body{

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

background:#fff;

color:var(--texto);

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

button{

cursor:pointer;

border:none;

outline:none;

font-family:inherit;

}

.container{

width:min(92%,1400px);

margin:auto;

}

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

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

color:var(--naranja);

font-weight:700;

letter-spacing:2px;

margin-bottom:10px;

text-transform:uppercase;

}

.section-title h2{

font-size:2.7rem;

color:var(--naranja);

margin-bottom:20px;

}

.section-title p{

max-width:850px;

margin:auto;

font-size:1.05rem;

line-height:1.8;

color:#333;

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

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

backdrop-filter:blur(14px);

transition:.35s;

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

}

.header-scroll{

padding:8px 0;

background:#111;

}

.header-container{

display:flex;

justify-content:space-between;

align-items:center;

min-height:90px;

gap:35px;

}

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

.logo img{

width:210px;

transition:.45s;

}

.logo img:hover{

transform:scale(1.08);

}

/*==================================================
MENÚ
==================================================*/

.navbar{

display:flex;

align-items:center;

gap:35px;

}

.navbar a{

color:#fff;

font-weight:600;

font-size:.95rem;

position:relative;

transition:.3s;

}

.navbar a:hover{

color:var(--naranja);

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--naranja);

transition:.35s;

border-radius:20px;

}

.navbar a:hover::after{

width:100%;

}

/*==================================================
BUSCADOR
==================================================*/

.header-search{

display:flex;

align-items:center;

background:#fff;

border-radius:50px;

overflow:hidden;

box-shadow:var(--sombra);

}

.header-search input{

width:240px;

padding:13px 18px;

border:none;

outline:none;

font-size:.95rem;

}

.header-search button{

width:55px;

height:50px;

background:var(--naranja);

color:#fff;

font-size:18px;

transition:.3s;

}

.header-search button:hover{

background:#ff922e;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.hero-banner{

position:absolute;

inset:0;

z-index:1;

}

.hero-media{

width:100%;

height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(

90deg,

rgba(0,0,0,.82),

rgba(0,0,0,.45)

);

z-index:2;

}

.hero-content{

position:relative;

z-index:3;

max-width:760px;

color:#fff;

}

.hero-top{

display:inline-block;

padding:8px 18px;

background:rgba(255,122,0,.18);

border:1px solid rgba(255,122,0,.45);

border-radius:40px;

margin-bottom:20px;

color:#fff;

font-weight:600;

letter-spacing:1px;

}

.hero-content h1{

font-size:3.8rem;

line-height:1.15;

margin-bottom:25px;

color:#fff;

}

.hero-content p{

font-size:1.1rem;

line-height:1.9;

margin-bottom:40px;

color:#e5e5e5;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary{

background:var(--naranja);

color:#fff;

}

.btn-primary:hover{

transform:translateY(-4px);

background:#ff922e;

box-shadow:0 15px 35px rgba(255,122,0,.35);

}

.btn-secondary{

background:transparent;

border:2px solid #fff;

color:#fff;

}

.btn-secondary:hover{

background:#fff;

color:#111;

}
/*==================================================
EMPRESA
==================================================*/

.empresa{

background:#ffffff;

}

.empresa-grid{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:70px;

align-items:center;

}

.empresa-imagen{

border-radius:25px;

overflow:hidden;

box-shadow:var(--sombra);

}

.empresa-imagen img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.empresa-imagen:hover img{

transform:scale(1.05);

}

.empresa-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-box{

display:flex;

align-items:flex-start;

gap:20px;

padding:25px;

background:#fff;

border-radius:18px;

box-shadow:var(--sombra);

transition:.35s;

border-left:5px solid var(--naranja);

}

.info-box:hover{

transform:translateY(-8px);

}

.info-box i{

font-size:34px;

color:var(--naranja);

min-width:45px;

}

.info-box h3{

margin-bottom:10px;

color:var(--naranja);

font-size:1.2rem;

}

.info-box p{

color:#333;

line-height:1.7;

}

.empresa-botones{

display:flex;

gap:20px;

margin-top:20px;

flex-wrap:wrap;

}

/*==================================================
ESTADÍSTICAS
==================================================*/

.stats{

background:#111;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#1b1b1b;

padding:45px 20px;

text-align:center;

border-radius:20px;

transition:.35s;

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

}

.stat-card:hover{

transform:translateY(-10px);

border-color:var(--naranja);

}

.stat-card i{

font-size:45px;

color:var(--naranja);

margin-bottom:20px;

}

.stat-card h2{

font-size:2.7rem;

color:#fff;

margin-bottom:10px;

}

.stat-card p{

color:#d5d5d5;

}

/*==================================================
CATÁLOGO
==================================================*/

.catalogo{

background:#f8f8f8;

}

.catalogo-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:45px;

}

.catalogo-header h3{

font-size:2rem;

color:var(--naranja);

}

.catalogo-arrow{

width:65px;

height:65px;

border-radius:50%;

background:var(--naranja);

color:#fff;

font-size:24px;

transition:.35s;

box-shadow:var(--sombra);

}

.catalogo-arrow:hover{

transform:scale(1.08);

background:#ff922e;

}
.catalogo-top{



position:relative;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:50px;

}



.categoria-centro{

flex:1;

text-align:center;

}

.categoria-centro h2{

font-size:2rem;

color:var(--naranja);

margin-bottom:8px;

}

.categoria-centro span{

font-size:1rem;

color:#555;

}

.catalogo-arrow{

position:absolute;

top:240px;

transform:translateY(-50%);

width:65px;

height:65px;

border-radius:50%;

background:var(--naranja);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

cursor:pointer;

transition:.35s;

box-shadow:var(--sombra);

z-index:10;

}
/*==================================================
PÁGINAS DEL CATÁLOGO
==================================================*/

.catalogo-page{



display:none;

grid-template-columns:repeat(4,300px);

justify-content:center;

gap:30px;

margin-top:40px;

}



.catalogo-page.active{

display:grid;

}

/*==================================================
MARKETPLACE
==================================================*/

.marketplace-wrapper{

display:flex;

align-items:center;

gap:20px;

}

.marketplace-container{

overflow:hidden;

width:100%;

}

.marketplace-track{

display:grid;

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

gap:25px;

}

.producto-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:var(--sombra);

transition:.35s;

}

.producto-card:hover{

transform:translateY(-10px);

}

.producto-imagen{

height:250px;

overflow:hidden;

position:relative;

}

.producto-imagen img{

width:100%;

height:100%;

object-fit:cover;

transition:.45s;

}

.producto-card:hover img{

transform:scale(1.08);

}

.producto-badge{

position:absolute;

top:15px;

left:15px;

background:var(--naranja);

color:#fff;

padding:6px 14px;

border-radius:30px;

font-size:.8rem;

font-weight:600;

}

.producto-info{




display:flex;

flex-direction:column;

padding:25px;

height:100%;




}

.producto-info small{

color:#777;

display:block;

margin-bottom:10px;

}

.producto-info h3{

color:var(--naranja);

margin-bottom:15px;

font-size:1.3rem;

}

.producto-info p{

color:#333;

line-height:1.7;

margin-bottom:20px;

min-height:95px;

}

.producto-buttons{

display:flex;

gap:12px;

}

.producto-buttons .btn{

flex:1;

justify-content:center;

}
/*==================================================
GALERÍA
==================================================*/

.galeria{

background:#ffffff;

}

.galeria-grid{

display:grid;

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

gap:25px;

}

.galeria-item{

overflow:hidden;

border-radius:20px;

box-shadow:var(--sombra);

cursor:pointer;

}

.galeria-item img{

width:100%;

height:280px;

object-fit:cover;

transition:.5s;

}

.galeria-item:hover img{

transform:scale(1.08);

}

/*==================================================
MARCAS
==================================================*/

.marcas{

background:#111;

}

.marcas .section-title h2{

color:var(--naranja);

}

.marcas .section-title p{

color:#ffffff;

}

.marcas-grid{

display:grid;

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

gap:30px;

align-items:center;

}

.marcas-grid img{

width:100%;

padding:20px;

background:#fff;

border-radius:15px;

transition:.35s;

}

.marcas-grid img:hover{

transform:translateY(-8px);

}

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

.cta{

background:linear-gradient(135deg,#ff7a00,#ff9d00);

text-align:center;

color:#fff;

}

.cta h2{

font-size:2.6rem;

margin-bottom:20px;

}

.cta p{

max-width:700px;

margin:auto;

margin-bottom:35px;

line-height:1.8;

}

.cta .btn{

background:#111;

color:#fff;

}

.cta .btn:hover{

background:#fff;

color:#111;

}

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

.contacto{

background:#f5f5f5;

}

.contacto-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}

.contacto-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-item{

display:flex;

gap:20px;

padding:25px;

background:#fff;

border-radius:18px;

box-shadow:var(--sombra);

}

.info-item i{

font-size:30px;

color:var(--naranja);

min-width:35px;

}

.info-item h3{

margin-bottom:8px;

color:var(--naranja);

}

.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--sombra);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--naranja);

outline:none;

}

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

.footer{

background:#111;

color:#fff;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer-logo 
   .footer-logo{
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 20px;

}



.footer h3{

color:var(--naranja);

margin-bottom:20px;

}

.footer a{

display:block;

margin-bottom:12px;

transition:.3s;

}

.footer a:hover{

color:var(--naranja);

padding-left:8px;

}

.social-icons{

display:flex;

gap:15px;

margin-top:20px;

}

.social-icons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#222;

border-radius:50%;

font-size:18px;

transition:.35s;

}

.social-icons a:hover{

background:var(--naranja);

color:#fff;

transform:translateY(-5px);

}

.footer-bottom{

margin-top:50px;

padding-top:20px;

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

text-align:center;

font-size:.95rem;

color:#ccc;

}

/*==================================================
BOTÓN WHATSAPP
==================================================*/

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

border-radius:50%;

z-index:999;

box-shadow:0 10px 30px rgba(37,211,102,.35);

transition:.35s;

}

.floating-whatsapp:hover{

transform:scale(1.12);

}

/*==================================================
VOLVER ARRIBA
==================================================*/

#backToTop{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

background:var(--naranja);

color:#fff;

font-size:20px;

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:var(--sombra);

}

#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:translateY(-5px);

}
.btn-vermas{



margin-top:auto;

align-self:flex-start;



}
.producto-card{

display:flex;

flex-direction:column;

height:100%;

min-height:560px;

}
#btnAnterior{

left:-90px;

}

#btnSiguiente{

right:-90px;

}

/*==================================================
BANNER SUPERIOR CIEM
CLASE EXCLUSIVA - NO AFECTA OTROS ELEMENTOS
==================================================*/

.banner-superior-ciem {

    width: 420px;
    height: 70px;

    overflow: hidden;

    border-radius: 0 !important;

    margin: 0;
    padding: 0;

    flex-shrink: 0;

    cursor: pointer;

    box-shadow: none !important;

    border: none !important;

}

.banner-superior-ciem img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 0 !important;

    border: none !important;

    box-shadow: none !important;

    transition: transform .45s ease;

}

.banner-superior-ciem {
    width: 480px;
    height: 85px;

    overflow: hidden;

    flex-shrink: 0;

    margin: 0;
    padding: 0;

    background: transparent;

    border: none;
    border-radius: 0;

    box-shadow: none;

    cursor: pointer;
}

.banner-superior-ciem img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 0;

    box-shadow: none;

    transition: transform 0.4s ease;
}

.banner-superior-ciem:hover img {
    transform: scale(1.04);
}
/*==================================================
  IDENTIDAD EMPRESARIAL
  MISIÓN - VISIÓN - POLÍTICAS DE CALIDAD
==================================================*/

.identidad-empresa{

    width:100%;

    padding:100px 0;

    background:#f8f8f8;

}


/*==================================================
  CONTENEDOR
==================================================*/

.identidad-contenedor{

    width:90%;

    max-width:1200px;

    margin:0 auto;

}


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

.identidad-titulo{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}

.identidad-titulo span{

    display:block;

    margin-bottom:12px;

    color:var(--naranja);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

}

.identidad-titulo h2{

    margin:0 0 18px;

    color:#222;

    font-size:2.4rem;

    font-weight:700;

}

.identidad-titulo p{

    margin:0;

    color:#666;

    font-size:1rem;

    line-height:1.8;

}


/*==================================================
  MISIÓN / VISIÓN
==================================================*/

.mision-vision-grid{

    display:grid;

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

    gap:30px;

    margin-bottom:100px;

}


/*==================================================
  TARJETAS MISIÓN Y VISIÓN
==================================================*/

.identidad-card{

    position:relative;

    display:flex;

    gap:25px;

    padding:40px;

    background:#fff;

    border-radius:18px;

    box-shadow:var(--sombra);

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

    overflow:hidden;

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

}

.identidad-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:5px;
    height:100%;

    background:var(--naranja);

}

.identidad-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}


/*==================================================
  ICONOS MISIÓN / VISIÓN
==================================================*/

.identidad-icono{

    width:58px;
    height:58px;

    min-width:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--naranja);

    color:#fff;

    border-radius:50%;

    font-size:21px;

}

.identidad-card-contenido{

    flex:1;

}

.identidad-etiqueta{

    display:block;

    margin-bottom:8px;

    color:var(--naranja);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:1.5px;

}

.identidad-card-contenido h3{

    margin:0 0 18px;

    color:#222;

    font-size:1.8rem;

}

.identidad-card-contenido p{

    margin:0 0 15px;

    color:#555;

    font-size:.95rem;

    line-height:1.8;

}

.identidad-card-contenido p:last-child{

    margin-bottom:0;

}


/*==================================================
  POLÍTICAS DE CALIDAD
==================================================*/

.politicas-calidad{

    margin-top:20px;

}

.politicas-titulo{

    text-align:center;

    max-width:700px;

    margin:0 auto 50px;

}

.politicas-titulo span{

    display:block;

    margin-bottom:10px;

    color:var(--naranja);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

}

.politicas-titulo h2{

    margin:0 0 15px;

    color:#222;

    font-size:2.2rem;

}

.politicas-titulo p{

    margin:0;

    color:#666;

    line-height:1.7;

}


/*==================================================
  GRID DE POLÍTICAS
==================================================*/

.politicas-grid{

    display:grid;

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

    gap:20px;

}


/*==================================================
  TARJETA DE POLÍTICA
==================================================*/

.politica-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:28px;

    background:#fff;

    border-radius:15px;

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

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

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

}

.politica-card:hover{

    transform:translateY(-5px);

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

}


/*==================================================
  ICONOS POLÍTICAS
==================================================*/

.politica-icono{

    width:48px;
    height:48px;

    min-width:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#222;

    color:var(--naranja);

    border-radius:12px;

    font-size:18px;

    transition:
        background .3s ease,
        color .3s ease;

}

.politica-card:hover .politica-icono{

    background:var(--naranja);

    color:#fff;

}


/*==================================================
  TEXTO POLÍTICAS
==================================================*/

.politica-card h3{

    margin:0 0 10px;

    color:#222;

    font-size:1.05rem;

}

.politica-card p{

    margin:0;

    color:#666;

    font-size:.9rem;

    line-height:1.7;

}


/*==================================================
  POLÍTICA DESTACADA
==================================================*/

.politica-card-destacada{

    grid-column:1 / -1;

    max-width:600px;

    width:100%;

    margin:0 auto;

}


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

@media(max-width:900px){

    .identidad-empresa{

        padding:80px 0;

    }

    .mision-vision-grid{

        grid-template-columns:1fr;

        margin-bottom:80px;

    }

    .politicas-grid{

        grid-template-columns:1fr;

    }

    .politica-card-destacada{

        grid-column:auto;

        max-width:none;

    }

}


/*==================================================
  RESPONSIVE MÓVIL
==================================================*/

@media(max-width:600px){

    .identidad-empresa{

        padding:65px 0;

    }

    .identidad-contenedor{

        width:92%;

    }

    .identidad-titulo{

        margin-bottom:40px;

    }

    .identidad-titulo h2{

        font-size:1.9rem;

    }

    .identidad-card{

        flex-direction:column;

        padding:28px;

    }

    .identidad-icono{

        width:52px;
        height:52px;

        min-width:52px;

    }

    .identidad-card-contenido h3{

        font-size:1.5rem;

    }

    .politicas-titulo h2{

        font-size:1.8rem;

    }

    .politica-card{

        padding:22px;

        gap:15px;

    }

}