/*=========================================================
PRACCHEM
Style.css
=========================================================*/

:root{

--primary:#F28C28;
--primary-dark:#D97516;

--secondary:#1F2937;

--dark:#111827;

--gray:#6B7280;

--light:#F8FAFC;

--white:#FFFFFF;

--border:#E5E7EB;

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

--radius:18px;

--transition:.35s ease;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

line-height:1.7;

color:var(--secondary);

background:#FFF8F2;

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

}

.container{

width:min(92%,1280px);

margin:auto;

}

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

#header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:#1F2937;

backdrop-filter:blur(14px);

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

transition:.35s;

}

.header-container{

height:92px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:300px;

}

.nav-links{

display:flex;

gap:40px;

align-items:center;

}

.nav-links a{

font-size:15px;

font-weight:500;

color:#FFFFFF;

position:relative;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--primary);

transition:.3s;

}

.nav-links a:hover::after{

width:100%;

}

.btn-header{

background:var(--primary);

color:#fff;

padding:14px 28px;

border-radius:50px;

font-weight:600;

box-shadow:var(--shadow);

}

.btn-header:hover{

background:var(--primary-dark);

transform:translateY(-3px);

}

.menu-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:30px;

height:3px;

background:var(--dark);

margin:6px 0;

}

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

#hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:
linear-gradient(rgba(17,24,39,.82),
rgba(17,24,39,.82)),
url("../img/hero/hero.webp");

background-size:cover;

background-position:center;

color:#fff;

overflow:hidden;

}

.hero-container{

display:flex;

align-items:center;

min-height:100vh;

}

.hero-content{

max-width:760px;

}

.hero-tag{

display:inline-block;

padding:10px 20px;

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

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

border-radius:40px;

font-size:14px;

letter-spacing:1px;

margin-bottom:28px;

}

.hero-content h1{

font-size:72px;

line-height:1.08;

font-weight:800;

margin-bottom:30px;

}

.hero-content p{

font-size:20px;

color:rgba(255,255,255,.82);

margin-bottom:40px;

max-width:700px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

border-radius:60px;

background:var(--primary);

color:#fff;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-4px);

box-shadow:0 18px 35px rgba(242,140,40,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

border-radius:60px;

border:2px solid rgba(255,255,255,.35);

color:#fff;

font-weight:600;

}

.btn-secondary:hover{

background:#fff;

color:var(--secondary);

}

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

section{

padding:110px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

color:var(--primary);

font-weight:700;

letter-spacing:2px;

font-size:14px;

margin-bottom:18px;

}

.section-title h2{

font-size:48px;

font-weight:700;

line-height:1.2;

max-width:780px;

margin:auto;

color:var(--dark);

}

.section-subtitle{

display:inline-block;

font-weight:700;

color:var(--primary);

margin-bottom:18px;

letter-spacing:2px;

font-size:14px;

}
/*=========================================================
INDICADORES
=========================================================*/

#numbers{

background:var(--dark);

padding:80px 0;

}

.numbers-grid{

display:grid;

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

gap:35px;

text-align:center;

}

.numbers-grid article{

padding:20px;

}

.numbers-grid h2{

font-size:56px;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

.numbers-grid span{

font-size:15px;

letter-spacing:1px;

color:rgba(255,255,255,.75);

text-transform:uppercase;

}

/*=========================================================
DIVISIONES
=========================================================*/

.division-grid{

display:grid;

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

gap:30px;

}

.division-card{

position:relative;

overflow:hidden;

border-radius:var(--radius);

background:#fff;

box-shadow:var(--shadow);

transition:.4s;

}

.division-card:hover{

transform:translateY(-14px);

}

.division-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.division-card:hover img{

transform:scale(1.08);

}

.division-content{

padding:35px 28px;

}

.division-content i{

font-size:40px;

color:var(--primary);

margin-bottom:20px;

}

.division-content h3{

font-size:25px;

margin-bottom:18px;

color:var(--dark);

}

.division-content p{

color:var(--gray);

}

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

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

overflow:hidden;

border-radius:26px;

box-shadow:var(--shadow);

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.about-image:hover img{

transform:scale(1.05);

}

.about-content h2{

font-size:48px;

line-height:1.2;

margin-bottom:28px;

color:var(--dark);

}

.about-content p{

margin-bottom:22px;

color:var(--gray);

}

.about-features{

display:grid;

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

gap:18px;

margin-top:35px;

}

.about-features div{

display:flex;

align-items:center;

gap:14px;

padding:18px 22px;

background:#fff;

border-radius:16px;

box-shadow:var(--shadow);

font-weight:600;

}

.about-features i{

color:var(--primary);

font-size:20px;

}

/*=========================================================
WHY
=========================================================*/

#why{

background:var(--light);

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-grid article{

background:#fff;

padding:45px 35px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.why-grid article:hover{

transform:translateY(-12px);

}

.why-grid i{

font-size:48px;

color:var(--primary);

margin-bottom:24px;

}

.why-grid h3{

font-size:24px;

margin-bottom:18px;

color:var(--dark);

}

.why-grid p{

color:var(--gray);

}

/*=========================================================
SERVICIOS
=========================================================*/

.services-grid{

display:grid;

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

gap:30px;

}

.service-card{

padding:45px 35px;

border-radius:22px;

background:#fff;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid transparent;

}

.service-card:hover{

transform:translateY(-12px);

border-color:rgba(242,140,40,.25);

}

.service-card i{

font-size:46px;

color:var(--primary);

margin-bottom:25px;

}

.service-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--dark);

}

.service-card p{

color:var(--gray);

}

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

.division-card,
.service-card,
.why-grid article,
.about-features div{

transition:.35s cubic-bezier(.2,.8,.2,1);

}

.division-card:hover,
.service-card:hover,
.why-grid article:hover,
.about-features div:hover{

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

::selection{

background:var(--primary);

color:#fff;

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

#process{

background:#fff;

}

.process-grid{

display:grid;

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

gap:30px;

margin-top:20px;

}

.process-grid article{

position:relative;

padding:45px 35px;

background:#fff;

border-radius:22px;

box-shadow:var(--shadow);

overflow:hidden;

transition:.35s;

}

.process-grid article:hover{

transform:translateY(-12px);

}

.process-grid article::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:var(--primary);

}

.process-grid .number{

width:72px;

height:72px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

margin-bottom:28px;

box-shadow:0 15px 35px rgba(242,140,40,.35);

}

.process-grid h3{

font-size:24px;

margin-bottom:18px;

color:var(--dark);

}

.process-grid p{

color:var(--gray);

}

/*=========================================================
COBERTURA
=========================================================*/

#coverage{

background:var(--light);

}

.coverage-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

}

.coverage-content h2{

font-size:48px;

line-height:1.2;

margin-bottom:28px;

color:var(--dark);

}

.coverage-content p{

margin-bottom:30px;

color:var(--gray);

}

.coverage-content ul{

display:grid;

gap:18px;

}

.coverage-content li{

display:flex;

align-items:center;

gap:15px;

font-size:17px;

font-weight:500;

}

.coverage-content li i{

color:var(--primary);

font-size:20px;

}

.coverage-image{

display:flex;

justify-content:center;

}

.coverage-image img{

max-width:100%;

transition:.5s;

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

}

.coverage-image img:hover{

transform:scale(1.03);

}

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

#cta{

padding:130px 0;

background:
linear-gradient(rgba(17,24,39,.90),
rgba(17,24,39,.90)),
url("../img/hero/hero2.webp");

background-size:cover;

background-position:center;

text-align:center;

color:#fff;

}

.cta-box{

max-width:900px;

margin:auto;

}

.cta-box span{

display:inline-block;

padding:12px 22px;

border-radius:40px;

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

margin-bottom:25px;

font-size:15px;

letter-spacing:1px;

}

.cta-box h2{

font-size:58px;

line-height:1.15;

margin-bottom:28px;

}

.cta-box p{

font-size:20px;

color:rgba(255,255,255,.82);

margin-bottom:45px;

}

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

.contact-grid{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:60px;

align-items:start;

}

.contact-info{

display:grid;

gap:25px;

}

.contact-item{

display:flex;

gap:22px;

padding:30px;

border-radius:20px;

background:#fff;

box-shadow:var(--shadow);

}

.contact-item i{

font-size:34px;

color:var(--primary);

margin-top:6px;

}

.contact-item h4{

font-size:20px;

margin-bottom:10px;

color:var(--dark);

}

.contact-item p{

color:var(--gray);

line-height:1.8;

}

.contact-form{

background:#fff;

padding:45px;

border-radius:25px;

box-shadow:var(--shadow);

}

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

width:100%;

padding:18px 22px;

margin-bottom:20px;

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

border-radius:14px;

font-family:inherit;

font-size:15px;

outline:none;

transition:.3s;

background:#fafafa;

}

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

border-color:var(--primary);

background:#fff;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form button{

border:none;

cursor:pointer;

width:100%;

}

/*=========================================================
MAPA
=========================================================*/

#map{

padding:0;

}

#map iframe{

width:100%;

height:520px;

border:0;

display:block;

}

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

footer{

background:#101827;

color:#fff;

padding-top:90px;

}

.footer-grid{

display:grid;

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

gap:60px;

padding-bottom:60px;

}

.footer-logo{.footer-logo{
    width:220px;
    height:auto;
    display:block;
    margin-bottom:25px;


}

.footer-grid p{

color:rgba(255,255,255,.70);

line-height:1.9;

}

.footer-grid h4{

font-size:22px;

margin-bottom:25px;

}

.footer-grid ul{

display:grid;

gap:14px;

}

.footer-grid a{

color:#F28C28;
    transition:.3s;

}

.footer-grid a:hover{

 color:#FFFFFF;
    padding-left:6px;

}

.social-links{
    display:flex;
    gap:16px;
    margin-top:30px;
}

.social-links a{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:20px;
    transition:.3s;

}

.social-links a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

.copyright{

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

padding:28px 0;

text-align:center;

font-size:14px;

color:rgba(255,255,255,.60);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

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

#header.scrolled{

height:78px;

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

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

}

#header.scrolled .header-container{

height:78px;

}

#header.scrolled .logo img{

height:58px;

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

.hero-content{

animation:fadeLeft 1s ease;

}

.about-image{

animation:fadeLeft .9s ease;

}

.about-content{

animation:fadeRight .9s ease;

}

.section-title{

animation:fadeUp .8s ease;

}

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

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

.loader-circle{

width:80px;

height:80px;

border-radius:50%;

border:5px solid #ececec;

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

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

body.loaded #loader{

opacity:0;

visibility:hidden;

}

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

.whatsapp{

position:fixed;
    right:30px;
    bottom:30px;
    width:78px;
    height:78px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:42px;
    box-shadow:0 18px 35px rgba(0,0,0,.18);
    z-index:900;
    transition:.35s;
}

.whatsapp:hover{

transform:translateY(-8px) scale(1.08);

}

/*=========================================================
BOTÓN ARRIBA
=========================================================*/

#toTop{

position:fixed;

left:30px;

bottom:40px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:900;

}

#toTop.show{

opacity:1;

visibility:visible;

}

#toTop:hover{

transform:translateY(-6px);

background:var(--primary-dark);

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*=========================================================
HOVER GLOBAL
=========================================================*/

img{

transition:.5s;

}

img:hover{

transform:scale(1.02);

}

button{

font-family:inherit;

}

input,
textarea{

font-family:inherit;

}

.btn-primary,
.btn-secondary,
.btn-header{

cursor:pointer;

}

/*=========================================================
GRADIENTE CORPORATIVO
=========================================================*/

.orange-gradient{

background:linear-gradient(135deg,#F28C28,#D97516);

}

.dark-gradient{

background:linear-gradient(135deg,#111827,#1F2937);

}

/*=========================================================
SEPARADORES
=========================================================*/

section{

position:relative;

}

section::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:120px;

height:3px;

background:rgba(242,140,40,.08);

}

footer::after{

display:none;

}

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

.text-center{

text-align:center;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:var(--radius);

}

.hidden{

display:none;

}