/* ===================================
   BYTELOGIX DISTRIBUCIONES
   STYLE.CSS
=================================== */


/* VARIABLES */

:root {

--primary:#d81b60;

--dark:#20242c;

--gray:#667085;

--light:#f5f7fa;

--white:#ffffff;

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

--radius:18px;

}


/* RESET */

* {

margin:0;

padding:0;

box-sizing:border-box;

}


html {

scroll-behavior:smooth;

}



body {

font-family:
"Segoe UI",
Arial,
sans-serif;

color:var(--dark);

background:white;

line-height:1.6;

}



/* GENERAL */


.container {

width:90%;

max-width:1200px;

margin:auto;

}



h1,
h2,
h3 {

line-height:1.2;

}



h2 {

font-size:2.2rem;

margin-bottom:40px;

text-align:center;

}



p {

color:var(--gray);

}




/* HEADER */


.header {

background:white;

position:sticky;

top:0;

z-index:1000;

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

}



.nav {

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}



.logo {

height:65px;

width:auto;

}



.menu {

display:flex;

list-style:none;

gap:25px;

}



.menu a {

text-decoration:none;

color:var(--dark);

font-weight:600;

transition:.3s;

}



.menu a:hover {

color:var(--primary);

}



.menu-toggle {

display:none;

font-size:30px;

background:none;

border:none;

}





/* BOTONES */


.btn-primary {

background:var(--primary);

color:white;

padding:14px 28px;

border-radius:50px;

text-decoration:none;

font-weight:700;

display:inline-block;

border:none;

cursor:pointer;

transition:.3s;

}



.btn-primary:hover {

transform:translateY(-3px);

opacity:.9;

}



.btn-secondary {

background:white;

color:var(--primary);

border:2px solid var(--primary);

padding:12px 26px;

border-radius:50px;

text-decoration:none;

font-weight:700;

}





/* HERO */


.hero {

min-height:650px;

display:flex;

align-items:center;

background:

linear-gradient(
135deg,
#20242c,
#454b59
);

color:white;

}



.hero-content {

max-width:750px;

}



.hero h1 {

font-size:3.2rem;

margin-bottom:25px;

color:white;

}



.hero p {

font-size:1.25rem;

color:#e5e7eb;

margin-bottom:35px;

}



.hero-buttons {

display:flex;

gap:20px;

flex-wrap:wrap;

}





/* SECCIONES */


.intro,
.services,
.sectors {

padding:100px 0;

}



.intro p {

max-width:900px;

margin:auto;

text-align:center;

font-size:1.15rem;

}




/* TARJETAS */


.cards {

display:grid;

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

gap:30px;

}



.card {

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.3s;

}



.card:hover {

transform:translateY(-8px);

}



.card h3 {

color:var(--primary);

margin-bottom:15px;

}



/* SECTORES */


.sectors {

background:var(--light);

}



.sector-grid {

display:grid;

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

gap:25px;

}



.sector-card {

background:white;

padding:30px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

}



.sector-card h3 {

color:var(--primary);

margin-bottom:15px;

}





/* CTA */


.cta {

padding:90px 0;

background:var(--dark);

text-align:center;

color:white;

}



.cta h2 {

color:white;

}



.cta p {

margin-bottom:30px;

}





/* WHATSAPP */


.whatsapp-float {

position:fixed;

right:25px;

bottom:25px;

background:#25d366;

color:white;

padding:15px 25px;

border-radius:50px;

text-decoration:none;

font-weight:bold;

box-shadow:var(--shadow);

z-index:2000;

}





/* FOOTER */


footer {

background:#15171d;

color:white;

padding:40px 0;

text-align:center;

}


footer p {

color:#ddd;

margin:5px;

}



/* FORMULARIOS */

input,
textarea {

width:100%;

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:1rem;

}




/* RESPONSIVE BASICO */


@media(max-width:900px){


.menu {

display:none;

}

.menu.active {

display:flex;

}




.menu-toggle {

display:block;

}



.cards {

grid-template-columns:1fr;

}



.sector-grid {

grid-template-columns:1fr;

}



.hero h1 {

font-size:2.2rem;

}



.nav {

height:80px;

}


}