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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Arial, Helvetica, sans-serif;

background:
linear-gradient(
180deg,
#031a17 0%,
#042924 100%
);

color:white;

overflow-x:hidden;

}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}
body{

font-family:Arial, Helvetica, sans-serif;

background:

radial-gradient(
circle at top,
#063a31 0%,
#031a17 40%,
#021210 100%
);

color:white;

overflow-x:hidden;

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

.catalogo-hero{

min-height:100vh;

background:

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

url("img/catalogo-bg.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

position:relative;

}

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

.menu{

width:92%;
max-width:1500px;

margin:auto;

padding-top:35px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo-menu{

width:170px;

}

.menu-links{

display:flex;
align-items:center;
gap:55px;

}

.menu-links a{

color:white;

font-size:1.15rem;

font-weight:700;

transition:.3s;

position:relative;

}

.menu-links a:hover{

color:#32d25f;

}

.menu-links a::after{

content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:#32d25f;

transition:.3s;

}

.menu-links a:hover::after{

width:100%;

}

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

.catalogo-hero-contenido{

max-width:1400px;

margin:auto;

text-align:center;

padding-top:90px;

padding-left:30px;
padding-right:30px;

}

.catalogo-hero-contenido span{

display:block;

color:#32d25f;

font-weight:700;

letter-spacing:10px;

margin-bottom:30px;

}

.catalogo-hero-contenido h1{

font-size:4.8rem;

font-weight:800;

line-height:1.1;

max-width:1200px;

margin:auto;

margin-bottom:35px;

}

.catalogo-hero-contenido p{

font-size:1.15rem;

line-height:1.8;

max-width:850px;

margin:auto;

color:#d7dddd;

}
/* ===================================
   CATEGORÍAS PREMIUM
=================================== */

.catalogo{

padding:120px 8%;

position:relative;

}

.catalogo h2{

text-align:center;

font-size:4.5rem;

font-weight:800;

margin-bottom:80px;

}

.categorias-grid{

display:grid;

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

gap:35px;

max-width:1500px;

margin:auto;

}

.categoria-card{

position:relative;

padding:45px;

border-radius:28px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(10px);

overflow:hidden;

transition:.35s;

min-height:240px;

display:flex;

flex-direction:column;

justify-content:center;

}

.categoria-card::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#32d25f;

transform:scaleX(0);

transition:.4s;

}

.categoria-card:hover::before{

transform:scaleX(1);

}

.categoria-card:hover{

transform:translateY(-10px);

border-color:#32d25f;

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

.categoria-card h3{

font-size:2.2rem;

font-weight:800;

margin-bottom:20px;

}

.categoria-card p{

font-size:1.15rem;

line-height:1.8;

color:#cfd8d7;

}

/* efecto premium */

.categoria-card::after{

content:'→';

position:absolute;

right:35px;

bottom:30px;

font-size:2rem;

color:#32d25f;

opacity:.4;

transition:.3s;

}

.categoria-card:hover::after{

opacity:1;

transform:translateX(5px);

}
/* ===================================
   PRODUCTOS PREMIUM
=================================== */

.categoria-seccion{

padding:140px 8%;

position:relative;

}

.categoria-seccion h2{

text-align:center;

font-size:5rem;

font-weight:800;

margin-bottom:80px;

letter-spacing:-2px;

}
.catalogo-grid{

display:grid;

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

gap:45px;

max-width:1600px;

margin:auto;

}
.tarjeta-producto{

position:relative;

overflow:hidden;

}

.tarjeta-producto::after{

content:'';

position:absolute;

top:-100%;

left:-100%;

width:200%;

height:200%;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.05),
transparent
);

transition:.8s;

}

.tarjeta-producto:hover::after{

top:100%;
left:100%;

}

.tarjeta-producto{

background:

linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

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

border-radius:30px;

overflow:hidden;

transition:.35s;

position:relative;

backdrop-filter:blur(12px);

}

.tarjeta-producto:hover{

transform:translateY(-12px);

border-color:#32d25f;

box-shadow:

0 25px 60px rgba(0,0,0,.40);

}

.tarjeta-producto img{

width:100%;

height:380px;

object-fit:contain;

padding:35px;

transition:.4s;

}

.tarjeta-producto:hover img{

transform:scale(1.05);

}

.tarjeta-producto h3{

text-align:center;

padding:30px;

font-size:2rem;

font-weight:700;

color:white;

}

/* línea premium */

.tarjeta-producto::before{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#32d25f;

transform:scaleX(0);

transition:.35s;

}

.tarjeta-producto:hover::before{

transform:scaleX(1);

}
/* ===================================
   CTA INDUSTRIAL
=================================== */

.cta-industrial{

position:relative;

padding:180px 8%;

background:

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

url("img/catalogo-bg.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

text-align:center;

overflow:hidden;

}

.cta-overlay{

max-width:1200px;

margin:auto;

}

.cta-industrial span{

display:block;

color:#32d25f;

font-size:1rem;

font-weight:700;

letter-spacing:12px;

margin-bottom:25px;

}

.cta-industrial h2{

font-size:5rem;

font-weight:800;

line-height:1.1;

margin-bottom:35px;

}

.cta-industrial p{

font-size:1.5rem;

line-height:1.8;

max-width:1000px;

margin:auto;

color:#d8dddd;

margin-bottom:50px;

}
.btn-contacto-premium{

display:inline-block;

padding:20px 55px;

background:#32d25f;

color:white;

font-size:1.15rem;

font-weight:700;

border-radius:18px;

transition:.35s;

box-shadow:

0 10px 30px rgba(50,210,95,.25);

}

.btn-contacto-premium:hover{

transform:translateY(-5px);

box-shadow:

0 20px 40px rgba(50,210,95,.35);

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

.contacto-premium{

padding:140px 8%;

}

.contacto-card{

max-width:1500px;

margin:auto;

padding:80px;

border-radius:40px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(12px);

text-align:center;

}

.contacto-card h2{

font-size:4rem;

font-weight:800;

margin-bottom:25px;

}

.empresa{

font-size:2rem;

line-height:1.5;

margin-bottom:60px;

}

.contacto-info{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

margin-bottom:60px;

}

.info-box{

padding:45px;

border-radius:25px;

background:

rgba(255,255,255,.04);

}

.info-box h3{

font-size:2rem;

margin-bottom:20px;

}

.info-box p{

font-size:1.2rem;

line-height:2;

color:#d8dddd;

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

.footer-premium{

padding:90px 8%;

text-align:center;

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

background:#021412;

}

.footer-premium img{

width:130px;

margin:auto;

margin-bottom:30px;

}

.footer-premium h3{

font-size:2rem;

margin-bottom:15px;

}

.footer-premium p{

color:#c8d0cf;

margin-bottom:15px;

}

.footer-premium span{

color:#32d25f;

font-weight:700;

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

.footer-premium{

padding:90px 8%;

text-align:center;

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

background:#021412;

}

.footer-premium img{

width:130px;

margin:auto;

margin-bottom:30px;

}

.footer-premium h3{

font-size:2rem;

margin-bottom:15px;

}

.footer-premium p{

color:#c8d0cf;

margin-bottom:15px;

}

.footer-premium span{

color:#32d25f;

font-weight:700;

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

.footer-premium{

padding:90px 8%;

text-align:center;

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

background:#021412;

}

.footer-premium img{

width:130px;

margin:auto;

margin-bottom:30px;

}

.footer-premium h3{

font-size:2rem;

margin-bottom:15px;

}

.footer-premium p{

color:#c8d0cf;

margin-bottom:15px;

}

.footer-premium span{

color:#32d25f;

font-weight:700;

}
/* ===================================
   WHATSAPP
=================================== */

.whatsapp-float{

position:fixed;

right:30px;
bottom:30px;

width:75px;
height:75px;

border-radius:50%;

background:#32d25f;

display:flex;

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

box-shadow:
0 10px 30px rgba(50,210,95,.35);

z-index:9999;

transition:.3s;

}

.whatsapp-float:hover{

transform:translateY(-5px);

box-shadow:
0 20px 40px rgba(50,210,95,.45);

}

.whatsapp-float img{

width:40px;
height:40px;

}
/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:991px){

.menu{

flex-direction:column;

gap:25px;

}

.menu-links{

flex-wrap:wrap;

justify-content:center;

gap:25px;

}

.catalogo-hero-contenido{

padding-top:120px;

}

.catalogo-hero-contenido h1{

font-size:3.5rem;

}

.catalogo-hero-contenido p{

font-size:1.2rem;

}

.catalogo h2,
.categoria-seccion h2,
.contacto-card h2{

font-size:3rem;

}

.contacto-info{

grid-template-columns:1fr;

}

.cta-industrial h2{

font-size:3rem;

}

}

@media(max-width:768px){

.logo-menu{

width:120px;

}

.catalogo-hero{

min-height:90vh;

}

.catalogo-hero-contenido h1{

font-size:2.6rem;

}

.catalogo-grid{

grid-template-columns:1fr;

}

.categorias-grid{

grid-template-columns:1fr;

}

.tarjeta-producto img{

height:260px;

}

.whatsapp-float{

width:65px;
height:65px;

}

.whatsapp-float img{

width:35px;
height:35px;

}

}
/* ===================================
   ANIMACIONES SCROLL
=================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:

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

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
/* ===================================
   MOBILE CONTACTO
=================================== */

@media(max-width:768px){

.contacto-premium{

padding:70px 6%;

}

.contacto-premium .titulo-seccion{

margin-bottom:40px;

}

.contacto-premium .titulo-seccion h2{

font-size:2.2rem;

}

.contacto-grid{

grid-template-columns:1fr;

gap:20px;

}

.contacto-card{

padding:25px;

min-height:auto;

height:auto;

border-radius:20px;

}

.contacto-card h3{

font-size:1.6rem;

margin-bottom:12px;

}

.contacto-card p{

font-size:1rem;

line-height:1.7;

}

.whatsapp-float{

width:55px;

height:55px;

right:10px;

bottom:10px;

}

.whatsapp-float img{

width:26px;

height:26px;

}

}