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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#111;
color:#fff;
text-align:center;
}



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

.header{

position:sticky;
top:0;

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

padding:10px 30px;

background:rgba(255, 255, 255, 0.8);

backdrop-filter:blur(10px);

box-shadow:0 2px 10px rgba(0,0,0,0.15);

z-index:1000;


}

.logo{
height:80px;
transition:0.3s;
}

.logo:hover{

transform:scale(1.05);

}
.navbar{
display:flex;
gap:30px;
}

.navbar a{

position:relative;

text-decoration:none;

color:#111;

font-weight:bold;

font-size:18px;

padding:8px 16px;

border-radius:6px;

transition:0.3s;

}

.navbar a:hover{

color:#e60023;

box-shadow:
0 0 8px rgba(230,0,35,0.6),
0 0 16px rgba(230,0,35,0.4);

}

.navbar a.active{

color:#e60023;

box-shadow:
0 0 10px rgba(230,0,35,0.8),
0 0 20px rgba(230,0,35,0.6);

}


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

.hero{

padding:80px 20px;

position:relative;

background:url("img/fondo-hero.jpg") center/cover no-repeat;

overflow:hidden;

}

.hero::before{

content:'';

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%);

animation:rotateBG 20s linear infinite;

z-index:0;

}

@keyframes rotateBG{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}

.hero-text{

position:relative;
z-index:1;

max-width:800px;

margin:auto;

margin-bottom:50px;

background:rgba(255, 2, 2, 0.15);

backdrop-filter:blur(10px);

border-radius:15px;

padding:25px;

}

.hero h1{

font-size:42px;

color:#111;

text-shadow:
0 2px 5px rgba(255,255,255,0.8),
0 0 10px rgba(255,255,255,0.5);

}

.hero p{

color:#222;

font-size:18px;

text-shadow:
0 1px 3px rgba(255,255,255,0.7);

}

.hero h2{

margin-top:40px;

color:#ff0000;

font-size:28px;

text-shadow:
0 2px 5px rgba(255,255,255,0.8);

}



/* =====================================
CARRUSEL
===================================== */

.carousel-container{

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

gap:40px;

}

.scene{

width:100%;
max-width:900px;

height:500px;

perspective:1200px;

position:relative;

}

.carousel{

width:100%;
height:100%;

position:absolute;

top:50%;
left:50%;

transform-style:preserve-3d;

transform:translate(-50%,-50%);

}

.item{

position:absolute;

width:220px;
height:360px;

left:50%;
top:50%;

margin-left:-110px;
margin-top:-180px;

transition:transform 0.6s cubic-bezier(.22,.61,.36,1);

}

.item img{

width:100%;
height:100%;

object-fit:contain;

border-radius:10px;

transition:.6s;

}

.item.active img{

transform:scale(1.05);

filter:brightness(1.2) drop-shadow(0 0 15px #ff1f3f);

}

.item:not(.active) img{

transform:scale(.9);

filter:brightness(.9);

}



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

.nav{

background:#e60023;

border:none;

color:white;

font-size:26px;

padding:14px 18px;

cursor:pointer;

border-radius:6px;

transition:.3s;

}

.nav:hover{

background:#ff1f3f;

transform:translateY(-3px);

}



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

.productos{

padding:80px 20px;

background:#111;

}

.productos h2{

font-size:32px;

margin-bottom:40px;

}

.productos-grid{

display:grid;

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

gap:25px;

}

.producto{

text-align:center;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(8px);

border-radius:15px;

padding:15px;

text-decoration:none;

color:white;

position:relative;

overflow:hidden;

transition:.35s;

}



/* HOLOGRAMA */

.producto::before{

content:"";

position:absolute;

inset:0;

border-radius:15px;

background:linear-gradient(120deg,transparent,rgba(255,0,80,0.4),transparent);

opacity:0;

transition:.4s;

}

.producto:hover::before{
opacity:1;
}



/* BORDE ENERGIA */

.producto::after{

content:"";

position:absolute;

inset:0;

border-radius:15px;

border:1px solid rgba(255,255,255,0.15);

box-shadow:0 0 0 rgba(255,0,80,0);

transition:.35s;

}

.producto:hover{

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

}

.producto:hover::after{

box-shadow:
0 0 10px rgba(255,0,80,0.5),
0 0 25px rgba(255,0,80,0.4);

}



.producto img{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

border-radius:10px;

}



.producto h3{

margin-top:10px;

font-size:18px;

}



/* DESCRIPCION */

.descripcion-producto{

color:#ccc;

font-size:14px;

margin-top:8px;

line-height:1.4;

opacity:0;

transform:translateY(20px);

transition:.6s;

}

.producto.reveal.active .descripcion-producto{

opacity:1;

transform:translateY(0);

}



/* TOUCH MOVIL */

.producto:active{

transform:scale(.96);

box-shadow:0 0 20px rgba(255,0,80,0.6);

}



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

.nosotros{

padding:80px 20px;

background:#111;

}

.nosotros-texto{

max-width:700px;

margin:auto;

margin-top:20px;

color:#ccc;

}

.mision-vision{

display:flex;

gap:40px;

justify-content:center;

margin-top:40px;

flex-wrap:wrap;

}

.card-info{

max-width:300px;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(8px);

border-radius:15px;

padding:20px;

transition:.3s;

}

.card-info:hover{

transform:scale(1.08);

box-shadow:0 20px 40px rgba(255,31,63,0.4);

}

.card-info h3{

color:#e60023;

margin-bottom:10px;

}



/* =====================================
ESTADISTICAS
===================================== */

.stats-container{

display:flex;

justify-content:center;

gap:40px;

margin-top:50px;

flex-wrap:wrap;

}

.stat-box{

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

padding:25px 35px;

border-radius:12px;

transition:.3s;

}

.stat-box:hover{

transform:translateY(-8px);

box-shadow:0 0 20px rgba(255,0,80,0.4);

}

.stat-box h3{

font-size:32px;

color:#ff1f3f;

margin-bottom:5px;

}

.stat-box p{

color:#ccc;

font-size:14px;

}



/* =====================================
UBICACION
===================================== */

.ubicacion{

padding:80px 20px;

background:#000;

}

.ubicacion-container{

display:grid;

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

gap:40px;

margin-top:50px;

align-items:center;

}

.ubicacion-info{

text-align:left;

color:#ccc;

line-height:1.6;

}

.mapa{

display:flex;

justify-content:center;

}

.mapa iframe{

width:100%;

max-width:320px;

height:250px;

border-radius:12px;

border:none;

box-shadow:0 0 20px rgba(255,0,80,0.3);

transition:.3s;

}

.mapa iframe:hover{

box-shadow:0 0 30px rgba(255,0,80,0.5);

}

.ubicacion-extra{

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

padding:25px;

border-radius:12px;

text-align:center;

}



/* BOTONES */

.btn-maps{

display:block;

margin-bottom:12px;

padding:10px;

text-align:center;

background:#4285F4;

color:white;

text-decoration:none;

border-radius:6px;

transition:.3s;

}

.btn-maps:hover{

background:#5a95ff;

transform:translateY(-2px);

}

.btn-consulta{

display:block;

padding:10px;

text-align:center;

background:#25D366;

color:white;

text-decoration:none;

border-radius:6px;

transition:.3s;

}

.btn-consulta:hover{

background:#2ee071;

transform:translateY(-2px);

}



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

.footer{

padding:20px;

background:#000;

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

font-size:14px;

}



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

.whatsapp{

position:fixed;

bottom:25px;
right:25px;

background:#25D366;

color:white;

width:60px;
height:60px;

display:flex;

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

font-size:28px;

border-radius:50%;

text-decoration:none;

box-shadow:0 0 10px rgba(0,0,0,0.4);

}



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

.reveal{

opacity:0;

transform:translateY(60px) scale(.95);

transition:.8s;

}

.reveal.active{

opacity:1;

transform:translateY(0) scale(1);

}



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

@media(max-width:900px){

.ubicacion-container{
grid-template-columns:1fr;
}

.ubicacion-info{
text-align:center;
}

.mapa iframe{
max-width:100%;
height:280px;
}

}

@media(max-width:768px){

.scene{
height:420px;
}

.item{

width:180px;
height:300px;

margin-left:-90px;
margin-top:-150px;

}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

}

.search-box{

display:flex;
align-items:center;

background:white;

border-radius:20px;

padding:4px 10px;

box-shadow:0 2px 8px rgba(0,0,0,0.1);

}

.search-box input{

border:none;
outline:none;

padding:6px;

font-size:14px;

}

.search-box button{

background:none;
border:none;

cursor:pointer;

font-size:16px;

}

/* =========================
TOP BAR
========================= */

.topbar{

background:#111;

color:white;

font-size:13px;

padding:6px 0;

overflow:hidden;

}

.topbar-container{

display:flex;

justify-content:center;

gap:40px;

white-space:nowrap;

}

.topbar-container{

display:flex;

gap:60px;

animation:scrollTopbar 18s linear infinite;

}

@keyframes scrollTopbar{

0%{
transform:translateX(100%);
}

100%{
transform:translateX(-100%);
}

}

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

@media (max-width:768px){

.header{
flex-direction:column;
gap:10px;
padding:10px;
}

.logo{
height:60px;
}

.navbar{
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.navbar a{
font-size:16px;
}

}

/* =========================
CARRUSEL CELULAR
========================= */

@media (max-width:768px){

.scene{
height:320px;
}

.item{
width:150px;
height:220px;
margin-left:-75px;
margin-top:-110px;
}

.hero h2{
font-size:22px;
}

.hero-text h1{
font-size:28px;
}

.hero-text p{
font-size:16px;
}

}

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

@media (max-width:768px){

.productos-grid{
grid-template-columns:1fr 1fr;
gap:15px;
}

.producto h3{
font-size:16px;
}

}

@media (max-width:768px){

.mapa iframe{
height:250px;
}

}


/* =========================
HEADER COMPACTO MOBILE
========================= */

@media (max-width:768px){

.header{
padding:8px 15px;
}

.logo{
height:45px;
}

.navbar{
gap:10px;
flex-wrap:wrap;
}

.navbar a{
font-size:14px;
padding:4px 6px;
}
.menu-toggle{
  display:none;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
}

}