/* ============================
   JAPX – Estilos globales modernos (Index + Productos)
   ============================ */

/* ---------- Variables de tema ---------- */
:root{
  --bg-1:#0b0f14;
  --bg-2:#0f1722;
  --card:#101826cc;        /* glass */
  --border:rgba(255,255,255,.08);
  --text:#e7edf6;
  --muted:#9fb2c9;
  --primary:#00a3ff;
  --primary-2:#2dd4ff;
  --accent:#7c3aed;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Reset ligero ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:70px; /* navbar fija */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1800px 800px at 120% -10%, #1c2740 0%, transparent 60%),
    radial-gradient(1200px 500px at -20% 10%, #112034 0%, transparent 60%),
    linear-gradient(0deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Tipografía de títulos ---------- */
h1,h2,h3,.navbar-brand{font-family:'Orbitron', sans-serif; letter-spacing:.02em}
h1{font-size:clamp(2rem,3vw,3rem)}
h2{font-size:clamp(1.5rem,2.2vw,2.25rem)}
.text-muted{color:var(--muted)!important}

/* ---------- Navbar (translúcida + blur) ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:linear-gradient(180deg, rgba(15,22,33,.85), rgba(15,22,33,.6));
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
  transition:transform .3s ease, background .3s ease;
}
.navbar-brand{font-weight:700; color:#fff !important}
.navbar .nav-link{
  color:var(--muted)!important; position:relative; padding:.75rem 1rem!important; transition:color .2s ease;
}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#fff!important}
.navbar .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.35rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}
.navbar-hidden{transform:translateY(-100%)}

/* ---------- Secciones / contenedores ---------- */
main.container{max-width:1100px}
.section{padding:4rem 0}
hr{border-color:var(--border)}
.bg-light{background:rgba(255,255,255,.04)!important}

/* =====================================================
   INDEX
   ===================================================== */

/* ---------- HERO con video ---------- */
.hero-section{
  position:relative; height:100vh; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:#fff;
}
.hero-section video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:contrast(1.05) saturate(1.05);
}
.hero-section::after{
  /* gradiente para legibilidad */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(0,0,0,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.7) 100%);
}
.hero-content{
  background:linear-gradient(180deg, rgba(16,24,38,.65), rgba(16,24,38,.5));
  border:1px solid var(--border);
  backdrop-filter:blur(8px) saturate(120%);
  padding:2rem 2.25rem; border-radius:14px; box-shadow:var(--shadow);
  max-width:800px; margin:0 1rem;
}
.hero-content h1{
  margin-bottom:.75rem;
  background:linear-gradient(90deg,#fff,var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-content .lead{color:#e9f3ff; opacity:.9}

/* ---------- “Quiénes Somos” (icon cards) ---------- */
.icon-box{
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  text-align:center; padding:2rem 1.5rem; height:100%;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.icon-box:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.14); box-shadow:0 14px 40px rgba(0,0,0,.45)}
.icon-box i{
  display:inline-grid; place-items:center; font-size:2rem; width:56px; height:56px; border-radius:12px; margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(0,163,255,.2), rgba(45,212,255,.18));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 0 24px rgba(0,163,255,.15);
  color:#cfeaff;
}

/* ---------- Misión & Visión con bg ---------- */
#mision-vision{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(0deg, rgba(12,18,28,.65), rgba(12,18,28,.65));
}
#mision-vision::before{
  content:""; position:absolute; inset:-4px; z-index:-1;
  background:url('../Imagenes/test.jpg') center/cover no-repeat;
  filter:brightness(.35) saturate(1.05);
}
#mision-vision .icon-box{background:rgba(16,24,38,.7)}

/* ---------- Contacto ---------- */
#contacto .container{
  max-width:900px;
}
.contact-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:2rem; margin-inline:auto;
}
.contact-item{display:flex; align-items:flex-start; gap:.75rem; justify-content:center}
.contact-item i{margin-top:.15rem; color:var(--primary)}
.footer-icon{font-size:1.5rem; margin:0 .4rem; opacity:.9; transition:transform .2s ease, color .2s ease}
.footer-icon:hover{ color:var(--primary)!important; transform:translateY(-2px) }

/* =====================================================
   PRODUCTOS (cards + clientes)
   ===================================================== */

#productos h1{
  text-align:center; margin-bottom:2rem;
  background:linear-gradient(90deg,#fff, var(--primary-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Cards base (glass) reutilizadas */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Grids */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem;
}
.client-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; align-items:stretch;
}

/* Product card */
.product-card{position:relative; aspect-ratio:1/1; display:flex; isolation:isolate}
.product-card img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.95) contrast(1.05);
  transform:scale(1.02);
  transition:transform .35s ease, filter .35s ease;
}
.product-card::before{content:""; position:absolute; inset:0; z-index:1; border:1px solid var(--border); border-radius:14px; pointer-events:none}
.product-card::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(145deg, transparent 40%, rgba(255,255,255,.06) 60%, transparent 85%); opacity:0; transition:opacity .35s ease}
.product-card:hover img{transform:scale(1.06); filter:saturate(1.05) contrast(1.1)}
.product-card:hover::after{opacity:1}
.product-info{
  position:absolute; inset:auto 0 0 0; z-index:2;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 55%);
  color:#fff; text-align:center; padding:1rem .75rem; font-weight:600; letter-spacing:.5px;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
}
.product-card:hover .product-info{opacity:1; transform:translateY(0)}
@media (hover:none){.product-info{opacity:1; transform:none}}

/* Clientes */
.client-card{display:flex; align-items:center; justify-content:center}
.client-card .card{display:flex; align-items:center; justify-content:center; aspect-ratio:1/1}
.client-card img{max-width:88%; max-height:88%; filter:grayscale(40%) opacity(.9); transition:filter .25s ease, transform .25s ease}
.client-card .card:hover img{filter:grayscale(0%) opacity(1); transform:scale(1.03)}

/* Banner para páginas de producto */
.banner-container{
  position:relative; height:380px; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.banner-container img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(1.05); transform:scale(1.03);
}
.banner-overlay{
  position:absolute; inset:auto 0 0 0; height:40%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.7));
}

/* ---------- Utilidades ---------- */
.rounded-12{border-radius:12px}
.text-center-important{text-align:center!important}

/* ---------- Accesibilidad / Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}