@charset "UTF-8";
:root{
      --bg:#ffffff;
      --primary:#0A2540;
      --accent:#004ea8;
      --muted:#6b7280;
      --gap:24px;
      --radius:12px;
      --shadow: 0 6px 24px rgba(10,37,64,0.08);
      --card-shadow:0 8px 30px rgba(10,37,64,0.06);
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
   *{box-sizing:border-box}
html,body{
	height:100%;
	margin:0;
	background:var(--bg);
	color:var(--primary)
}
a{
	color:inherit;
	text-decoration:none
}
header{
	position:fixed;
	left:0;
	right:0;
	top:0;
	height:72px;
	background:rgba(255,255,255,0.9);
	backdrop-filter: blur(6px);
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 20px;
	z-index:60;
	border-bottom:1px solid rgba(10,37,64,0.04)
}
.brand{
	display:flex;
	align-items:center;
	gap:20px;
	font-weight:600
}
.logo{
	width:42px;
	height:42px;
	border-radius:8px;
	background:linear-gradient(180deg,var(--primary),#123856);
	display:flex;
	align-items:center;
	justify-content:center;
	color:white;font-weight:700
}
nav{
	display:flex;
	gap:18px;
	align-items:center
}
nav a{
	padding:8px 12px;
	border-radius:8px;
	color:var(--muted);
	font-size:15px
}
nav a:hover{
	color:var(--primary);
	background:rgba(10,37,64,0.03)
}
.quote-btn{
	background:linear-gradient(90deg,var(--accent),#036fdb);
	padding:10px 14px;
	border-radius:10px;
	color:white;
	font-weight:600;
	border:none;
	cursor:pointer
}
main{
	padding:92px 18px 24px;
	max-width:1200px;
	margin:0 auto;
}

/* =========================
   SLIDER 
   ========================= */
.hero {
  height: 80vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Crucial: oculta los slides que quedan fuera de la pantalla */
  overflow: hidden; 
  /* Añadimos padding superior para que no quede oculto bajo tu header fijo (72px) */
  padding-top: 10px; 
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
  /* Activa la aceleración por hardware (GPU) para que no se trabe en celulares */
  will-change: transform; 
}

.slide {
  /* Usar flex-basis en lugar de min-width */
  flex: 0 0 100%; 
  width: 100%;
  position: relative; 
  display: flex;
  align-items: center;
  padding: 0;
}

.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,1.00) 15%,
    rgba(255,255,255,0.50) 50%,
    rgba(255,255,255,0.25) 60%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
  /* Evita que el gradiente invisible bloquee los clics en los botones */
  pointer-events: none; 
}

.hero-left {
  z-index: 2;
  max-width: 480px;
  margin-left: 5vw; /* Usar % de la ventana es más adaptable que px fijos */
  padding: 0 20px;
  /* Nos aseguramos de que el contenido izquierdo sí reciba clics */
  pointer-events: auto; 
}

.hero-right {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero h1 {
  font-size: 25px;
  margin: 0 0 14px;
}

.hero p {
  color: #111827;
  margin: 0 0 18px;
}

.sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  max-width: 420px;
  line-height: 1.4;
}

.cta {
  background: var(--accent);
  border: none;
  color: white;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 3; /* Asegura que el botón esté por encima de todo */
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* Elimina el espacio blanco fantasma que los navegadores agregan bajo las imágenes */
  display: block; 
}


    /* Featured */
.section{
	padding:52px 18px;
	max-width:1200px;
	margin:0 auto
}
.section h2{
	margin:0 0 18px
}
.featured{
	display:flex;
	gap:18px;
	overflow:auto;
	padding-bottom:8px
}
.card{
	flex:0 0 320px;
	background:white;
	border-radius:12px;
	padding:12px;
	box-shadow:var(--shadow);
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:flex-start
}
.card .img{
	width:100%;
	aspect-ratio:5/5;
	border-radius:10px;
	overflow:hidden;
	display:block
}
.card img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease
}
.card:hover img{
	transform:scale(1.16)
}
.card .meta{
	display:flex;
	width:100%;
	justify-content:space-between;
	align-items:center
}
.small-btn{
	padding:8px 10px;
	border-radius:8px;
	border:none;
	background:rgba(10,37,64,0.06);
	cursor:pointer
}
.add-quote{
	background:var(--accent);
	color:white;
	border:none;
	padding:8px 12px;
	border-radius:8px;
	cursor:pointer
}

/* =========================
   PROVEEDORES (CARRUSEL INFINITO)
   ========================= */
.vendors {
  overflow: hidden; /* Oculta todo lo que sale de la pantalla */
  width: 100%;
  position: relative;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.vendors-track {
  display: flex;
  width: max-content; /* Permite que el contenedor crezca a lo ancho según los logos */
  gap: 30px; /* Separación entre logos */
  animation: scroll-vendors 25s linear infinite; /* 25s es la velocidad, ajústala a tu gusto */
}

/* Pausa al pasar el mouse (o tocar en celular) */
.vendors-track:hover {
  animation-play-state: paused;
}

.vendor {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  font-weight: 500;
}

.vendor:hover {
  transform: scale(1.05); /* Pequeño zoom al interactuar */
  color: var(--accent); /* Cambia el texto al azul de SC Iluminación */
}

@keyframes scroll-vendors {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 15px)); } 
}

/* En celulares mantenemos el carrusel, solo ajustamos los tamaños */
@media (max-width: 768px) {
  .vendor img {
    height: 28px !important; /* Logos ligeramente más pequeños */
  }
  .vendor {
    font-size: 14px;
  }
}

    /* contacto / quienes somos */
.rowsplit{
	display:flex;
	gap:20px;
	align-items:center
}
.about .img{
	flex:1
}
.about .content{
	flex:1
}
.contact {
    display: flex;
    flex-wrap: wrap; /* Para que en móviles el mapa se ponga arriba del formulario */
    gap: 40px;
    align-items: flex-start;
}
.map {
    flex: 1; /* El mapa toma el espacio disponible */
    min-width: 300px; /* Ancho mínimo para que no se vea muy delgado */
    height: 450px; /* Altura del mapa */
    border-radius: 12px;
    overflow: hidden; /* Para que las esquinas del mapa sigan el borde redondeado */
    box-shadow: var(--shadow);
}
form{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:10px
}
#contactForm {
    flex: 1;
    min-width: 300px;
}
/* En pantallas pequeñas, el mapa ocupa todo el ancho */
@media (max-width: 768px) {
    .map {
        width: 100%;
        height: 300px; /* Más bajito en móviles */
    }
}

input,textarea,select{
	padding:12px;
	border-radius:10px;
	border:1px solid rgba(10,37,64,0.08)
}
.footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:18px 0;
	color:var(--muted);
	font-size:14px
}

    /* Slide cart */
.cart-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.4);
	opacity:0;
	visibility:hidden;
	transition:opacity .28s;
	z-index:80
}
.cart-overlay.show{
	opacity:1;
	visibility:visible
}
.cart-item{
	display:flex;
	gap:10px;
	align-items:center
}
.cart-item img{
	width:72px;
	height:72px;
	object-fit:cover;
	border-radius:8px
}

#cartOverlay.show {
  opacity: 1 !important;
  pointer-events: all !important;
}

.toast{
	position:fixed;
	right:18px;
	bottom:18px;
	background:#111827;
	color:white;
	padding:10px 14px;
	border-radius:10px;
	opacity:0;
	transform:translateY(8px);
	transition:all .28s;
	z-index:100
}
.toast.show{
	opacity:1;
	transform:translateY(0)
}

/* productos-html */
.layout{
	display:flex;
	gap:18px
}
.filters{
	width:300px;
	background:white;
	padding:14px;
	border-radius:12px;
	box-shadow:0 6px 20px rgba(10,37,64,0.04)
}
.search{
	display:flex;
	gap:8px;
	margin-bottom:12px
}
input{
	padding:10px;
	border-radius:10px;
	border:1px solid rgba(10,37,64,0.08);
	width:100%
}
.chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:12px
}
.clear-btn{
	background:linear-gradient(90deg,var(--accent),#036fdb);
	color:white;
	border:none;
	padding:10px;
	border-radius:10px;
	cursor:pointer;
	width:100%
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}

.img{
	aspect-ratio:4/5;
	border-radius:10px;
	overflow:hidden
}
.img img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s
}
.badgestatus{
	background:transparent;
	color:var(--accent);
	font-weight:600
}
.actions{
	display:flex;
	gap:8px
}
.filters h3{
	margin:6px 0
}
.active-filters{
	margin:8px 0
}
.filter-list{
	display:flex;
	flex-direction:column;
	gap:8px
}
/* Ajuste para el contenedor de los logos en el filtro */
.provider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;       /* Ocupa el ancho del dropdown */
    height: 150px;      /* Altura fija para que todos se alineen igual */
    padding: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.provider img {
    max-width: 80%;    /* Que no toque los bordes */
    max-height: 45px;  /* Altura máxima uniforme */
    object-fit: contain; /* Evita que el logo se estire o deforme */
    display: block;
}

/* Ocultar el checkbox pero mantenerlo funcional */
.provider input[type="checkbox"] {
    display: none; 
}

footer{
	padding:18px;
	color:var(--muted);
	text-align:center
}

/* catalogos.html */
/* Estilos específicos para las tarjetas de catálogo */
    .catalog-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 20px;
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      background: white;
      transition: transform 0.2s ease;
    }
    .catalog-card:hover {
      transform: translateY(-5px);
    }
.catalog-thumb {
  height: 240px; /* La altura fija para todas las cajas */
  width: 100%;
  background: #ffffff; /* Color gris claro de fondo #f0f4f8 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.catalog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* <--- Esto ajusta la imagen sin recortarla */
  padding: 10px; /* Opcional: deja un pequeño margen alrededor */
}
    .catalog-info h3 {
      margin: 0 0 8px 0;
      color: var(--primary);
    }
    .catalog-info p {
      color: var(--muted);
      font-size: 14px;
      margin: 0;
    }
    .catalog-actions {
      display: flex;
      gap: 10px;
      margin-top: auto;
      padding-top: 15px;
    }
    .btn-view {
      flex: 1;
      text-align: center;
      background: rgba(10,37,64,0.06);
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
    }
    .btn-download {
      flex: 1;
      text-align: center;
      background: var(--accent);
      color: white;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
    }

/* paneladmin-html */
.topbar-left{
	display:flex;
	align-items:center;
	gap:12px
}
.wrap{
	max-width:1200px;
	margin:92px auto 24px;
	padding:18px;
	display:grid;
	grid-template-columns:240px 1fr;
	gap:18px
}
.tabs{
	background:white;
	border-radius:12px;
	padding:12px;
	box-shadow:0 10px 30px rgba(10,37,64,0.04);
	display:flex;
	flex-direction:column;
	gap:8px
}
.tab-btn{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px;
	border-radius:10px;
	border:none;
	background:transparent;
	cursor:pointer;
	color:var(--muted);
	text-align:left
}
.tab-btn.active{
	background:linear-gradient(90deg,rgba(10,37,64,0.03),rgba(10,37,64,0.01));
	color:var(--primary);
	font-weight:700;
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)
}
.panel{
	background:white;
	border-radius:12px;
	padding:16px;
	box-shadow:0 10px 30px rgba(10,37,64,0.04);
	min-height:420px;
	overflow:auto
}
.panel-categorias{
	background:white;
	border-radius:12px;
	padding:16px;
	box-shadow:0 10px 30px rgba(10,37,64,0.04);
	min-height:100px;
	overflow:auto
}
.panel-proveedores{
	background:white;
	border-radius:12px;
	padding:16px;
	box-shadow:0 10px 30px rgba(10,37,64,0.04);
	min-height:100px;
	overflow:auto
}
.panel-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:12px
}
.grid-admin{
	display:grid;
	grid-template-columns:1fr 340px;
	gap:18px
}

    /* form */
.form-row{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:10px
}
input,select,textarea,button{
	font-family:inherit
}
input,select,textarea{
	padding:10px;
	border-radius:8px;
	border:1px solid rgba(10,37,64,0.06);
	width:100%
}
textarea{
	min-height:80px
}
.images-preview{
	display:flex;
	gap:8px;
	flex-wrap:wrap
}
.imgprev{
	width:80px;
	height:80px;
	background:#eee;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden
}
.btn{
	padding:10px;
	border-radius:8px;
	border:none;
	cursor:pointer
}
.btn-primary{
	background:var(--accent);
	color:white
}
.small{
	padding:8px;
	border-radius:8px;
	border:none;
	background:rgba(10,37,64,0.06);
	cursor:pointer
}
.list{
	max-height:420px;
	overflow:auto;
	border-radius:8px;
	padding:8px;
	background:linear-gradient(180deg,#fff,#fbfbfb)
}
.list .row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px;
	border-radius:8px
}
.meta-preview{
	border-radius:12px;
	padding:12px;
	background:linear-gradient(90deg,rgba(10,37,64,0.02),rgba(10,37,64,0.01))
}
.thumbs{
	display:flex;
	gap:8px;
	margin-top:8px
}
.chip{
	display:inline-block;
	padding:6px 10px;
	border-radius:999px;
	background:rgba(10,37,64,0.04);
	font-size:13px;
	margin-right:6px
}
    /* Tabs content visibility */
.tab-panel{
	display:none
}
.tab-panel.active{
	display:block;
	animation:fadeIn .18s ease
}

	/* SKU-html */
.banner {
    height: 300px;
    /* --- Aquí agregamos la imagen --- */
    background-image: url('https://sciluminacion.com/img/bannerSku.png'); /* Reemplaza con la ruta de tu foto */
    background-size: cover; /* Hace que la foto cubra todo el cuadro sin deformarse */
    background-position: center; /* Centra la imagen para que no se corte una parte importante */
    background-repeat: no-repeat; /* Evita que la foto se repita como mosaico */
    /* -------------------------------- */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 18px;
}
.gallery{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:8px
}
.gallery .thumbs{
	display:flex;
	gap:8px
}
.gallery img{
	width:100%;
	border-radius:10px;
	object-fit:cover
}
.meta{
	flex:1
}
.status{
	color:var(--accent);
	font-weight:700;
	margin-bottom:8px
}
.btn{
	background:var(--accent);
	color:white;border:none;
	padding:12px;
	border-radius:10px;
	cursor:pointer
}
.download{
	background:transparent;
	border:1px solid var(--primary);
	color:var(--primary);
	padding:10px;
	border-radius:8px;
	cursor:pointer
}

	/* cotizacion-html */
.list{
	display:flex;
	flex-direction:column;
	gap:12px
}
.item{
	display:flex;
	gap:12px;
	align-items:center;
	padding:12px;
	border-radius:12px;
	background:white;
	box-shadow:0 8px 30px rgba(10,37,64,0.06)
}
.item img{
	width:96px;
	height:96px;
	object-fit:cover;
	border-radius:10px
}
.qty{
	display:flex;
	align-items:center;
	gap:8px
}
.send{
	background:linear-gradient(90deg,var(--accent),#036fdb);
	color:white;
	border:none;
	padding:12px 18px;
	border-radius:10px;
	cursor:pointer
}
.empty{
	color:var(--muted)
}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    /* responsive */
@media (max-width:900px){
      .rowsplit{flex-direction:column}
      .hero{height:56vh}
      .cart-panel{width:100%;right:-100%}
      .cart-panel.open{transform:translateX(-5%);right:0}
}

/* =========================================
   MENÚ HAMBURGUESA Y RESPONSIVE
   ========================================= */

/* 1. Ocultar el botón en PC */
.menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--primary);
    padding: 5px;
}

/* 2. Reglas solo para celulares (pantallas menores a 768px) */
@media (max-width: 768px) {
    /* Mostramos el botón de hamburguesa */
    .menu-btn {
        display: block;
    }

    /* Modificamos el nav para que sea un menú desplegable */
    #mainNav {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: 72px; /* Empieza justo debajo del header */
        left: 0;
        width: 100%;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        gap: 15px;
        align-items: center; /* Centra los textos */
    }

    /* Esta clase aparecerá cuando le demos clic con JavaScript */
    #mainNav.active {
        display: flex; 
    }
}

/* Asegura que el panel de cotización responda a la clase 'open' */
.cart-panel {
    position: fixed;
    top: 0;
    right: -400px; /* Escondido a la derecha */
    width: 360px;
    height: 100%;
    background: white;
    z-index: 100;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

.cart-panel.open {
    right: 0 !important; /* Lo muestra al activarse */
}

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.cart-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================
   MODAL DE AVISO DE PRIVACIDAD
   =========================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 90%;
    max-width: 600px;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.modal-box.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.modal-content {
    max-height: 60vh;
    overflow-y: auto;
    color: var(--primary);
    line-height: 1.6;
    padding-right: 10px; /* Espacio para el scrollbar */
}

.modal-content h4 {
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--accent);
}

/* Efecto de fondo para el texto del slider en móviles */
@media (max-width: 768px) {
    .hero-left {
        background: rgba(255, 255, 255, 0.4); /* Fondo blanco semi-transparente */
        backdrop-filter: blur(8px);           /* El efecto de desenfoque */
        -webkit-backdrop-filter: blur(8px);    /* Compatibilidad para Safari en iPhone */
        padding: 20px;                        /* Espacio interno para que el texto no toque los bordes */
        border-radius: 15px;                  /* Bordes redondeados para que se vea moderno */
        margin: 0 15px;                       /* Separación de los bordes laterales del cel */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra muy suave */
    }

    /* Ajuste para que el título no sea tan grande en el cuadro */
    .hero h1 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    /* Ajuste del subtítulo */
    .sub {
        font-size: 13px;
        margin-bottom: 15px;
    }
}

/* Contenedor individual de cada marca */
.provider-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 8px;
    cursor: pointer;
}

/* El cuadro donde vive el logo */
.logo-container {
    width: 100%;
    height: 60px;         /* Altura fija para TODOS */
    display: flex;
    align-items: center;  /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    transition: all 0.2s;
}

.logo-container:hover {
    border-color: var(--accent);
    background: #f0f7ff;
}

/* Regla de oro para la imagen */
.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  /* Evita que se estire o se deforme */
}

/* Cuando el checkbox interno está marcado */
.provider-item input:checked + .logo-container {
    border: 2px solid var(--accent);
    background: #eef6ff;
}