/* ============================================================
   TELBYTE TELECOMUNICACIONES — tema visual OSCURO
   Paleta tomada del logo principal:
     · negro profundo (fondo del logo)
     · azul eléctrico  #2480f0  → "Tel" y el icono
     · gris grafito    #6a6d73  → "byte"
     · azul claro      #a9c9ec  → "telecomunicaciones"
   ------------------------------------------------------------
   Este archivo SOLO cambia la apariencia. No contiene lógica.
   Para cambiar colores edita las variables de :root.
   (Se conservan los nombres de variables --azul, --azul-2, etc.
   porque otras páginas del sitio las usan.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --negro:        #000000;
    --fondo:        #060a11;
    --fondo-2:      #04070c;
    --tarjeta:      #0d1520;
    --tarjeta-2:    #142033;
    --borde:        #1b2a3f;
    --blanco:       #ffffff;
    --texto-2:      #aebbd0;
    --texto-3:      #7f8da3;

    /* Azul principal del logo */
    --acento:       #2b8cff;
    --acento-2:     #5aaeff;
    --acento-osc:   #1456c8;
    --sobre-acento: #ffffff;

    /* Azul claro (texto "telecomunicaciones") y gris ("byte") */
    --azul:         #7fb6f2;
    --azul-2:       #a9c9ec;
    --gris:         #6a6d73;
    --gris-osc:     #3b3e44;

    --verde-wa:     #25d366;

    --grad-azul:    linear-gradient(135deg, #2f93ff 0%, #1565d8 100%);
    --grad-azul-2:  linear-gradient(135deg, #5aaeff 0%, #2b82f0 100%);
    --grad-gris:    linear-gradient(135deg, #6f7278 0%, #3b3e44 100%);
    --grad-gris-2:  linear-gradient(135deg, #8a8e95 0%, #4a4d54 100%);
    --grad-logo:    linear-gradient(90deg, #2f93ff 0%, #1565d8 50%, #6a6d73 100%);
    --brillo-azul:  0 0 0 1px rgba(43, 140, 255, .35), 0 10px 30px rgba(21, 101, 216, .28);

    --fuente:       'Montserrat', 'Segoe UI', Arial, sans-serif;
    --fuente-pie:   'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

* { font-family: var(--fuente); }

body {
    background: var(--fondo) !important;
    color: var(--blanco);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente);
    font-weight: 700;
    color: var(--blanco);
    letter-spacing: .01em;
}

a { color: var(--acento); }
a:hover { color: var(--acento-2); }
::selection { background: var(--grad-azul); color: var(--sobre-acento); }

.text-muted, .text-secondary { color: var(--texto-3) !important; }

/* ---------- Botones Bootstrap ---------- */
.btn { font-weight: 500; letter-spacing: .04em; border-radius: 6px; }

.btn-dark, .btn-primary, .btn-warning {
    background: var(--grad-azul); border-color: var(--acento); color: var(--sobre-acento);
}
.btn-dark:hover, .btn-primary:hover, .btn-warning:hover,
.btn-dark:focus, .btn-primary:focus, .btn-warning:focus {
    background: var(--grad-azul-2); border-color: var(--acento-2); color: var(--sobre-acento);
}
.btn-outline-dark, .btn-outline-secondary { color: #fff; border-color: #3f5270; }
.btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--grad-azul); color: #fff; border-color: var(--acento); }
.btn-secondary { background: #1a2433; border-color: #26364d; color: #fff; }
.btn-secondary:hover { background: #26364d; border-color: var(--azul); color: #fff; }
.btn-success { background: var(--grad-gris); border-color: var(--azul); color: #fff; }
.btn-success:hover { background: var(--grad-gris-2); border-color: var(--azul-2); color: #fff; }

.form-control, .form-select, .form-control:disabled {
    background-color: #08101a; border-color: #26364d; color: #fff;
}
.form-control::placeholder { color: #6f7f95; }
.form-control:focus, .form-select:focus {
    background-color: #08101a; color: #fff;
    border-color: var(--acento); box-shadow: 0 0 0 .2rem rgba(36, 128, 240, .18);
}
.form-label, label { color: #ddd; }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }

.card { background: var(--tarjeta); border: 1px solid var(--borde); color: #fff; }
.alert-success { background: #12301c; border-color: #1f5a33; color: #9be0b0; }
.alert-danger  { background: #3a1616; border-color: #6b2525; color: #f1a6a6; }
.alert-warning { background: #3a3012; border-color: #6b5a1d; color: var(--acento-2); }

.badge.bg-warning { background: var(--grad-azul) !important; color: var(--sobre-acento) !important; }
.badge.bg-success { background: #1f5a33 !important; color: #b8f0c8 !important; }
.badge.bg-primary { background: var(--grad-gris) !important; color: #fff !important; }
.badge.bg-secondary { background: #34465e !important; color: #ddd !important; }

.table { --bs-table-bg: transparent; --bs-table-color: #fff; color: #fff; }
.table > :not(caption) > * > * { border-color: var(--borde); background-color: transparent; color: inherit; }
.table-dark, .table-dark > th, .table-dark > td { --bs-table-bg: #000; background: #000; color: var(--acento); }
.table-hover > tbody > tr:hover > * { background-color: rgba(36, 128, 240, .06) !important; }

.dropdown-menu { background: #08101a; border: 1px solid var(--borde); border-radius: 8px; }
.dropdown-item { color: #fff; }
.dropdown-item:hover { background: var(--grad-azul); color: var(--sobre-acento); }

hr { border-color: #34465e; opacity: 1; }

/* ============================================================
   NAVBAR (negro, logo blanco, enlaces en mayúscula)
   ============================================================ */
.topbar-telbyte { display: none !important; }

.navbar-claro-sticky, .navbar-claro {
    background: #000 !important;
    border-bottom: 1px solid #12202f !important;
    box-shadow: none;
    padding-top: 6px; padding-bottom: 6px;
}

.marca-telbyte { display: flex; align-items: center; padding: 2px 0; margin-right: 2.2rem; }
.marca-telbyte img { height: 64px; width: auto; display: block; transition: transform .3s; }
.marca-telbyte:hover img { transform: scale(1.03); }

.navbar-claro-sticky .nav-link, .navbar-claro .nav-link,
.navbar-claro .nav-link.text-dark, .navbar-claro .nav-link.text-danger {
    color: #fff !important;
    font-size: .92rem; font-weight: 400;
    text-transform: uppercase; letter-spacing: .02em;
    padding: .55rem 1.1rem !important;
    position: relative;
}
.navbar-claro-sticky .nav-link::after, .navbar-claro .nav-link::after {
    content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 2px;
    height: 2px; background: var(--grad-azul); transform: scaleX(0); transition: transform .25s;
}
.navbar-claro-sticky .nav-link:hover, .navbar-claro .nav-link:hover { color: var(--acento) !important; }
.navbar-claro-sticky .nav-link:hover::after, .navbar-claro .nav-link:hover::after,
.navbar-claro-sticky .nav-link.active::after, .navbar-claro .nav-link.active::after { transform: scaleX(1); }
.navbar-claro-sticky .nav-link.active, .navbar-claro .nav-link.active { color: var(--acento) !important; }

/* Buscador */
.buscador-centro .form-control {
    background: #08101a !important; border: 1px solid #243449 !important; color: #fff !important; border-radius: 6px !important;
}
.buscador-centro .form-control::placeholder { color: #6f7f95 !important; }
.buscador-centro .form-control:focus {
    background: #08101a !important; border-color: var(--acento) !important;
    box-shadow: 0 0 0 .2rem rgba(36, 128, 240, .15) !important;
}
.buscador-centro .btn-buscar {
    background: var(--grad-azul) !important; color: var(--sobre-acento) !important; border: 0 !important;
    border-radius: 6px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.buscador-centro .btn-buscar:hover { background: var(--grad-azul-2) !important; transform: none; }
.buscador-fijo { background: #000; border-bottom: 1px solid #12202f; }

/* Carrito flotante (azul, abajo a la derecha) */
.carrito-flotante {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--grad-gris); color: #fff !important; text-decoration: none;
    padding: 12px 22px; border-radius: 50px;
    font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    transition: transform .25s, background .25s;
}
.carrito-flotante:hover { background: var(--grad-gris-2); transform: translateY(-3px); color: #fff !important; }
.carrito-flotante .badge {
    background: #fff !important; color: #0b1626 !important; border-radius: 50px;
    min-width: 26px; font-size: .8rem; padding: 5px 8px;
}

/* WhatsApp flotante (sobre el carrito) */
.whatsapp {
    background: var(--verde-wa) !important; color: #fff !important;
    bottom: 84px !important; right: 22px !important;
    border-radius: 50px; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important;
}
.whatsapp:hover { background: #1ebc5a !important; }

/* ============================================================
   HERO / SLIDER
   ============================================================ */
.hero-franja { background: #000 !important; padding: 26px 0 0 !important; position: relative; }
.hero-franja::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-azul); }

.slider-banners {
    border-radius: 12px !important; margin-bottom: 30px !important;
    box-shadow: 0 0 0 1px #152033, 0 24px 60px rgba(0, 0, 0, .6) !important;
}
.slider-banners .carousel-indicators [data-bs-target] {
    background-color: var(--acento); width: 34px; height: 4px; border: 0; border-radius: 4px; opacity: .4;
}
.slider-banners .carousel-indicators .active { opacity: 1; }
.slider-banners .carousel-control-prev-icon, .slider-banners .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .65); border: 1px solid var(--acento);
    border-radius: 50%; background-size: 50%; width: 46px; height: 46px; filter: none;
}

.slide-telbyte {
    position: relative; min-height: 400px; display: flex; align-items: center; overflow: hidden; color: #fff;
    background:
        radial-gradient(circle at 82% 50%, rgba(36, 128, 240, .20), transparent 46%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 26px),
        linear-gradient(120deg, #000 0%, #0b1626 100%);
}
.slide-telbyte.slide-2 {
    flex-direction: row-reverse;
    background:
        radial-gradient(circle at 18% 50%, rgba(140, 180, 230, .22), transparent 44%),
        repeating-linear-gradient(65deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 26px),
        linear-gradient(240deg, #000 0%, #0b1626 100%);
}
.slide-telbyte.slide-3 {
    background: radial-gradient(circle at 50% 120%, rgba(36, 128, 240, .30), transparent 55%), linear-gradient(180deg, #000 0%, #0b1626 100%);
}
.slide-inner { position: relative; z-index: 2; flex: 1 1 55%; padding: 40px 6% 40px 84px; }
.slide-kicker {
    display: inline-block; font-size: .78rem; font-weight: 500; letter-spacing: .3em;
    color: var(--acento); border: 1px solid var(--acento); padding: 5px 14px; margin-bottom: 18px;
}
.slide-telbyte h2 {
    font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.03; font-weight: 900;
    text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.slide-telbyte h2 em { font-style: normal; color: var(--acento); }
.slide-telbyte p { max-width: 440px; color: #c3d0e2; font-size: 1.02rem; margin-bottom: 24px; }
.slide-btn {
    display: inline-block; background: var(--grad-azul); color: var(--sobre-acento) !important;
    font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .88rem;
    padding: 14px 34px; border-radius: 4px; text-decoration: none; transition: transform .25s, background .25s;
}
.slide-btn:hover { background: var(--grad-azul-2); transform: translateY(-3px); }
.slide-deco { position: relative; z-index: 1; flex: 1 1 45%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.slide-deco svg, .slide-deco img { width: min(100%, 330px); height: auto; filter: drop-shadow(0 20px 40px rgba(21, 101, 216, .45)); animation: flotar 5s ease-in-out infinite; }
.slide-3 .slide-inner { text-align: center; padding: 40px 84px; }
.slide-3 p { margin-left: auto; margin-right: auto; }
.slide-3 .slide-deco { display: none; }
@keyframes flotar { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(2deg); } }

/* ============================================================
   SOMOS TELBYTE + TIPOS
   ============================================================ */
.somos-telbyte { padding: 70px 0 30px; background: var(--fondo); }
.seccion-kicker { display: inline-block; font-size: .78rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--azul-2); margin-bottom: 10px; }
.somos-telbyte h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; text-transform: uppercase; margin-bottom: 18px; }
.somos-telbyte p { color: var(--texto-2); line-height: 1.8; }
.somos-telbyte .lema { color: #fff; font-weight: 700; border-left: 4px solid var(--acento); padding-left: 14px; margin-top: 22px; }
.tipos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tipo-card {
    position: relative; background: var(--tarjeta); color: #fff; border: 1px solid var(--borde); border-radius: 10px;
    padding: 34px 20px 20px; min-height: 120px; font-size: 1.05rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
    display: flex; align-items: flex-end; transition: transform .25s, border-color .25s;
}
.tipo-card span { position: absolute; top: 14px; left: 20px; color: var(--acento); font-size: .8rem; letter-spacing: .2em; font-weight: 700; }
.tipo-card:hover { transform: translateY(-5px); border-color: var(--azul); }

/* ============================================================
   CATÁLOGO: cabecera, filtros, secciones y tarjetas
   ============================================================ */
.catalogo-cabecera { text-align: center; padding: 50px 0 6px; }
.catalogo-cabecera h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.catalogo-cabecera h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 12px auto 0; background: var(--grad-azul); }
.catalogo-cabecera p { color: var(--texto-2); max-width: 560px; margin: 14px auto 0; }

.filtros-categoria { padding: 26px 0 8px !important; justify-content: center; }
.btn-filtro {
    background: var(--tarjeta) !important; border: 1px solid var(--borde) !important; color: #fff !important;
    font-size: .85rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 50px !important; padding: 8px 22px !important;
}
.btn-filtro:hover { border-color: var(--azul) !important; color: var(--azul-2) !important; background: var(--tarjeta) !important; }
.btn-filtro.active {
    background: var(--grad-azul) !important; border-color: var(--acento) !important; color: var(--sobre-acento) !important;
    font-weight: 700; box-shadow: none !important;
}

.seccion-categoria { padding: 6px 0 34px !important; background: transparent !important; }
.seccion-categoria:nth-of-type(even) { background: var(--fondo-2) !important; }
.categoria-titulo {
    color: #fff !important; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; border-left: 5px solid var(--acento) !important; padding-left: 14px !important;
}
.sin-resultados { color: var(--texto-3) !important; }

.card-producto, .card-producto.card {
    background: var(--tarjeta) !important; border: 1px solid #1e2c40 !important; border-radius: 10px !important;
    color: #fff; overflow: hidden; box-shadow: none !important;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card-producto:hover { transform: translateY(-6px); border-color: var(--azul) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important; }
.card-producto .card-body { padding: 16px 18px 20px; }

.img-wrap { display: block; position: relative; overflow: hidden; background: #08101a; }
.img-wrap img { display: block; width: 100%; height: 270px; object-fit: cover; border: 0 !important; background: #08101a !important; transition: opacity .45s, transform .6s; }
.img-wrap .img-hover { position: absolute; inset: 0; opacity: 0; }
.card-producto:hover .img-hover { opacity: 1; }
.card-producto:hover .img-principal { transform: scale(1.05); }

.card-cat { display: block; color: var(--azul); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.card-producto .card-title { font-size: 1.05rem !important; font-weight: 400 !important; color: #fff !important; text-transform: none; margin-bottom: 6px; }
.titulo-link, .card-producto .titulo-link { color: #fff !important; text-decoration: none; }
.titulo-link:hover { color: var(--acento) !important; }
.card-producto .precio { font-size: 1.3rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 4px; }
.card-producto .stock { color: var(--texto-3) !important; font-size: .8rem !important; }

.card-producto .btn-comprar {
    background: var(--grad-azul) !important; color: var(--sobre-acento) !important; border: 0 !important; border-radius: 6px !important;
    font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; padding: 11px 0 !important;
}
.card-producto .btn-comprar:hover { background: var(--grad-azul-2) !important; transform: none !important; }

/* Modal "producto no encontrado" */
body .modal-busqueda-overlay { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
body .modal-busqueda { background: var(--tarjeta); border: 1px solid var(--borde); border-top: 5px solid var(--acento); border-radius: 12px; color: #fff; }
body .modal-busqueda h2 { color: #fff; }
body .modal-busqueda p { color: var(--texto-2); }
body .btn-cerrar-busqueda { background: var(--grad-azul); color: var(--sobre-acento); font-weight: 700; letter-spacing: .12em; border: 0; border-radius: 6px; }
body .btn-cerrar-busqueda:hover { background: var(--grad-azul-2); color: var(--sobre-acento); opacity: 1; }

/* ============================================================
   PIE DE PÁGINA (3 columnas, como la referencia)
   ============================================================ */
.pie-telbyte {
    background: #000; color: #fff; font-family: var(--fuente-pie);
    padding: 70px 0 54px; border-top: 1px solid #12202f;
}
.pie-telbyte * { font-family: var(--fuente-pie); }
.pie-col { text-align: center; padding: 0 18px; }
.pie-cara { width: 118px; height: auto; margin-bottom: 18px; }
.pie-col p { color: #fff; font-size: 1.02rem; line-height: 1.55; margin-bottom: 14px; }
.pie-col p strong { font-weight: 700; }
.pie-col.pie-izq p.pie-lista { text-align: left; max-width: 340px; margin-left: auto; margin-right: auto; }

.pie-col.pie-centro { text-align: left; }
.pie-col.pie-centro h4 { font-size: 1.35rem; font-weight: 600; color: #fff; margin-bottom: 20px; }
.pie-col.pie-centro p { font-size: 1.12rem; margin-bottom: 4px; }
.pie-social { display: flex; gap: 26px; justify-content: center; margin: 24px 0 26px; }
.pie-social a { color: var(--azul); display: inline-flex; transition: transform .25s, color .25s; }
.pie-social a:hover { color: var(--azul-2); transform: translateY(-3px); }
.pie-social svg { width: 30px; height: 30px; fill: currentColor; }
.pie-wordmark { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }

.pie-wa-icono { width: 66px; height: 66px; margin-bottom: 8px; }
.pie-col.pie-der h4 { font-size: 1.35rem; font-weight: 600; color: #fff; margin-bottom: 14px; }
.btn-hablar {
    display: inline-block; background: var(--grad-azul); color: var(--sobre-acento) !important; text-decoration: none;
    font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem;
    padding: 18px 44px; margin-top: 12px; border-radius: 0; transition: background .25s, transform .25s;
}
.btn-hablar:hover { background: var(--grad-azul-2); transform: translateY(-3px); }

.pie-copy {
    background: #000; border-top: 1px solid #12202f; color: var(--texto-3);
    text-align: center; font-size: .82rem; padding: 18px 12px; font-family: var(--fuente-pie);
}
.pie-copy a, .footer a, .footer-claro a { color: var(--acento) !important; display: inline; padding: 0; text-decoration: none; }
.footer, .footer-claro { background: #000 !important; color: var(--texto-3) !important; border-top: 1px solid #12202f !important; padding: 18px 0 !important; text-align: center; }
.footer-claro .nav-link { display: inline; padding: 0; }

/* ============================================================
   PÁGINAS INTERNAS (carrito, pedidos, nosotros)
   ============================================================ */
body.pag-interna { background: var(--fondo) !important; color: #fff; }
body.pag-interna .title, body.pag-interna h2, body.pag-interna h1 { color: #fff; }
body.pag-interna .carrito-box, body.pag-interna .pedido-box {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; color: #fff; box-shadow: none;
}
body.pag-interna .table th { color: var(--texto-2); border-color: var(--borde); }
body.pag-interna .table td { color: #fff; border-color: var(--borde); }
body.pag-interna .producto, body.pag-interna .producto-link { color: #fff; }
body.pag-interna .producto-link:hover { color: var(--acento); }
body.pag-interna .carrito-img { background: #08101a; border: 1px solid var(--borde); }
body.pag-interna .badge-cantidad { background: var(--grad-gris); color: #fff; }
body.pag-interna .btn-delete { background: transparent; color: var(--texto-2); border: 1px solid #34465e; }
body.pag-interna .btn-delete:hover { background: #7a2020; border-color: #7a2020; color: #fff; }
body.pag-interna .total-box { background: #000; color: #fff; border: 1px solid var(--borde); border-bottom: 4px solid var(--acento); }
body.pag-interna .btn-finalizar { background: var(--grad-azul); color: var(--sobre-acento); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px; }
body.pag-interna .btn-finalizar:hover { background: var(--grad-azul-2); color: var(--sobre-acento); }
body.pag-interna .empty { color: var(--texto-3); }
body.pag-interna .pedido-header { color: #fff; border-color: var(--borde); }

.pagina-simple { padding: 50px 0 70px; }
.pagina-simple h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 16px; }
.pagina-simple h1::after { content: ""; display: block; width: 80px; height: 4px; background: var(--grad-azul); margin-top: 12px; }
.pagina-simple p { color: var(--texto-2); line-height: 1.85; font-size: 1.04rem; }
.pagina-simple .lema { color: #fff; font-weight: 700; border-left: 4px solid var(--acento); padding-left: 14px; }

/* ============================================================
   PRODUCTO (detalle) + LUPA
   ============================================================ */
.producto-detalle { padding-top: 28px; padding-bottom: 70px; }
.migas { font-size: .85rem; color: var(--texto-3); margin-bottom: 26px; }
.migas a { color: var(--texto-2); text-decoration: none; }
.migas a:hover { color: var(--acento); }
.migas span { margin: 0 8px; color: var(--acento); }

.galeria-principal {
    position: relative; background: #08101a; border: 1px solid var(--borde); border-radius: 12px;
    overflow: hidden; aspect-ratio: 1 / 1; cursor: zoom-in;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .12s ease-out; will-change: transform; user-select: none; }
.galeria-principal.zoom-activo img { transform: scale(2.4); }
.lupa-hint {
    position: absolute; left: 12px; bottom: 12px; z-index: 3; pointer-events: none;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, .72); color: #fff; font-size: .78rem; padding: 7px 12px; border-radius: 50px;
    border: 1px solid #34465e; transition: opacity .25s;
}
.lupa-hint svg { width: 16px; height: 16px; fill: none; stroke: var(--acento); stroke-width: 2.2; stroke-linecap: round; }
.galeria-principal.zoom-activo .lupa-hint { opacity: 0; }
.gal-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .7); color: var(--acento);
    border: 1px solid var(--acento); font-size: 1.6rem; line-height: 1; display: flex; align-items: center;
    justify-content: center; padding: 0 0 4px; cursor: pointer; transition: background .25s, color .25s;
}
.gal-flecha:hover { background: var(--grad-azul); color: var(--sobre-acento); }
.gal-prev { left: 12px; } .gal-next { right: 12px; }

.galeria-mini { display: flex; gap: 12px; margin-top: 14px; }
.galeria-mini .mini {
    width: 92px; height: 92px; padding: 0; border: 2px solid var(--borde); border-radius: 8px; overflow: hidden;
    background: #08101a; cursor: pointer; opacity: .6; transition: opacity .25s, border-color .25s, transform .25s;
}
.galeria-mini .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-mini .mini:hover { opacity: 1; transform: translateY(-3px); }
.galeria-mini .mini.activa { opacity: 1; border-color: var(--acento); }

/* Visor a pantalla completa */
.visor { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .94); display: none; align-items: center; justify-content: center; }
.visor.abierto { display: flex; }
.visor-marco { position: relative; width: min(92vw, 880px); height: min(88vh, 880px); overflow: hidden; border-radius: 10px; cursor: zoom-in; background: #000; }
.visor-marco img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .12s ease-out; user-select: none; }
.visor-marco.zoom-activo { cursor: zoom-out; }
.visor-marco.zoom-activo img { transform: scale(2.6); }
.visor-cerrar {
    position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--acento);
    background: rgba(0, 0, 0, .7); color: var(--acento); font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.visor-cerrar:hover { background: var(--grad-azul); color: var(--sobre-acento); }

.etiqueta-cat { display: inline-block; color: var(--azul); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.producto-titulo { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.1; margin-bottom: 12px; }
.producto-precio { font-size: 2.2rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.estado-stock { display: inline-block; font-size: .82rem; font-weight: 500; color: #9be0b0; background: #12301c; border-radius: 50px; padding: 4px 14px; }
.estado-stock.agotado { color: #f1a6a6; background: #3a1616; }
.producto-desc { margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.producto-desc h2 { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 10px; }
.producto-desc p { color: #dbe5f3; line-height: 1.8; margin: 0; }

.comprar-fila { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cantidad-box { display: flex; align-items: center; border: 1px solid #34465e; border-radius: 6px; overflow: hidden; background: #08101a; }
.cantidad-box button { width: 44px; border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; color: #fff; }
.cantidad-box button:hover { background: var(--grad-azul); color: var(--sobre-acento); }
.cantidad-box input { width: 48px; border: 0; text-align: center; font-weight: 700; font-size: 1.05rem; background: transparent; color: #fff; outline: 0; }
.btn-agregar-carrito {
    flex: 1; min-width: 200px; border: 0; background: var(--grad-gris); color: #fff; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; font-size: .88rem; padding: 14px 24px; border-radius: 6px; cursor: pointer; transition: background .25s;
}
.btn-agregar-carrito:hover { background: var(--grad-gris-2); }
.btn-comprar-ahora {
    display: block; text-align: center; text-decoration: none; background: var(--grad-azul); color: var(--sobre-acento) !important;
    font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; padding: 16px 24px; border-radius: 6px;
    transition: background .25s, transform .25s;
}
.btn-comprar-ahora:hover { background: var(--grad-azul-2); transform: translateY(-3px); }
.aviso-carrito { min-height: 24px; margin-top: 14px; font-size: .95rem; }
.aviso-carrito.ok { color: #9be0b0; font-weight: 500; }
.aviso-carrito.ok a { color: var(--acento); }
.aviso-carrito.error { color: #f1a6a6; }
.consultar-wa { display: inline-block; margin-top: 8px; color: #fff; font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--acento); }
.consultar-wa:hover { color: var(--acento); }
.beneficios { list-style: none; padding: 0; margin: 22px 0 0; color: var(--texto-2); font-size: .92rem; }
.beneficios li { padding: 5px 0 5px 22px; position: relative; }
.beneficios li::before { content: "✦"; color: var(--acento); position: absolute; left: 0; }

/* ============================================================
   LOGIN · REGISTRO · CHECKOUT
   ============================================================ */
body.pag-login, body.pag-registro {
    background: radial-gradient(circle at 20% 15%, rgba(36, 128, 240, .18), transparent 40%), #000 !important;
    min-height: 100vh;
}
body.pag-login .login-box, body.pag-registro .card {
    background: var(--tarjeta) !important; border: 1px solid var(--borde) !important; border-top: 5px solid var(--acento) !important;
    border-radius: 14px !important; color: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .7);
}
body.pag-login .logo img, body.pag-registro .logo-registro img { height: 74px; width: auto; max-width: 100%; }
body.pag-login .logo p { color: var(--texto-2); }
body.pag-login .input-group label, body.pag-registro label { color: #ddd; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
body.pag-login .input-group input { background: #08101a; border: 1px solid #26364d; color: #fff; }
body.pag-login .input-group input:focus { background: #08101a; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(36, 128, 240, .15); }
body.pag-login .input-group input::placeholder { color: #6f7f95; }
body.pag-login .btn-login { background: var(--grad-azul); color: var(--sobre-acento); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 6px; }
body.pag-login .btn-login:hover { background: var(--grad-azul-2); color: var(--sobre-acento); }
body.pag-login .options a, body.pag-login .footer, body.pag-login .footer a { color: var(--texto-2); }
body.pag-login .options a:hover, body.pag-login .footer a { color: var(--acento); }
body.pag-login .alert-error { background: #3a1616; color: #f1a6a6; border: 1px solid #6b2525; }
body.pag-login .footer { background: transparent !important; border: 0 !important; }
body.pag-registro h3 { color: #fff; text-transform: uppercase; letter-spacing: .04em; }
body.pag-registro .logo-registro { text-align: center; margin-bottom: 14px; }

body.pag-checkout {
    background: radial-gradient(circle at 15% 10%, rgba(36, 128, 240, .20), transparent 42%), #000 !important;
    background-attachment: fixed !important; color: #fff;
}
body.pag-checkout::before { background: radial-gradient(circle, rgba(36, 128, 240, .10), transparent 70%); }
body.pag-checkout .container {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
body.pag-checkout .container::before { height: 5px; background: var(--grad-azul); opacity: 1; }
body.pag-checkout .container::after { content: "TELBYTE TELECOMUNICACIONES  ·  TECNOLOGÍA EN CONEXIÓN"; color: var(--acento); letter-spacing: .3em; font-size: 12px; }
body.pag-checkout h1, body.pag-checkout h1.text-success { color: #fff !important; text-transform: uppercase; font-weight: 900; }
body.pag-checkout h3 { background: rgba(36, 128, 240, .1); border: 1px solid var(--acento); color: var(--acento) !important; }
body.pag-checkout .btn-success { background: var(--grad-azul) !important; color: var(--sobre-acento) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: none; }
body.pag-checkout .btn-success:hover { background: var(--grad-azul-2) !important; }
body.pag-checkout .btn-primary { background: transparent !important; color: #fff !important; border: 1px solid #3f5270 !important; text-transform: uppercase; letter-spacing: .1em; }
body.pag-checkout .btn-primary:hover { border-color: var(--azul) !important; color: var(--azul-2) !important; }

/* ============================================================
   PANEL DE ADMINISTRACIÓN
   ============================================================ */
body.pag-admin { background: var(--fondo) !important; color: #fff; }
body.pag-admin .navbar { background: #000 !important; border-bottom: 3px solid var(--acento); }
body.pag-admin .logo { color: #fff; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
body.pag-admin .logo span { color: var(--acento) !important; }
body.pag-admin .card-dashboard, body.pag-admin .card-panel, body.pag-admin .card-form, body.pag-admin .card {
    background: var(--tarjeta) !important; border: 1px solid var(--borde); border-top: 4px solid var(--acento); border-radius: 12px; color: #fff;
}
body.pag-admin .welcome, body.pag-admin .titulo, body.pag-admin .title, body.pag-admin h2 { color: #fff; font-weight: 900; text-transform: uppercase; }
body.pag-admin p, body.pag-admin .subtitle, body.pag-admin .text { color: var(--texto-2); }
body.pag-admin .btn-dashboard { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 8px; }
body.pag-admin .btn-dashboard.productos  { background: var(--grad-azul); color: var(--sobre-acento); }
body.pag-admin .btn-dashboard.categorias { background: var(--grad-gris); color: #fff; }
body.pag-admin .btn-dashboard.pedidos   { background: transparent; color: #fff; border: 2px solid #3f5270; }
body.pag-admin .btn-dashboard.salir     { background: #1a2433; color: #fff; }
body.pag-admin .btn-dashboard:hover { filter: brightness(1.12); box-shadow: none; }
body.pag-admin .btn-agregar, body.pag-admin .btn-guardar { background: var(--grad-azul); color: var(--sobre-acento); font-weight: 700; border: 0; letter-spacing: .1em; text-transform: uppercase; }
body.pag-admin .btn-agregar:hover, body.pag-admin .btn-guardar:hover { background: var(--grad-azul-2); color: var(--sobre-acento); }
body.pag-admin input[type="text"], body.pag-admin textarea, body.pag-admin select { background: #08101a !important; color: #fff !important; border-color: #26364d !important; }
body.pag-admin input[type="text"]:focus { border-color: var(--acento) !important; box-shadow: 0 0 0 3px rgba(36, 128, 240, .15) !important; }
body.pag-admin .categoria { background: var(--tarjeta); border-left: 5px solid var(--acento); color: #fff; }
body.pag-admin .back a, body.pag-admin .footer { color: var(--texto-2); }
body.pag-admin .table { background: var(--tarjeta); }
body.pag-admin .carousel img { border-radius: 12px; }

.foto-slot { background: #08101a; border: 1px dashed #3f5270; border-radius: 10px; padding: 10px; }
.foto-preview {
    aspect-ratio: 1 / 1; background: #000; border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px;
    overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--texto-3); font-size: .85rem;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .marca-telbyte img { height: 52px; }
    .slide-telbyte { min-height: 340px; }
    .pie-col { margin-bottom: 38px; }
    .pie-col.pie-centro { text-align: center; }
}
@media (max-width: 768px) {
    .slide-telbyte, .slide-telbyte.slide-2 { flex-direction: column-reverse; min-height: 0; padding: 26px 0 38px; text-align: center; }
    .slide-inner, .slide-3 .slide-inner { padding: 8px 8% 0; }
    .slide-telbyte p { margin-left: auto; margin-right: auto; }
    .slide-deco { padding: 6px; flex: 0 0 auto; }
    .slide-deco svg, .slide-deco img { width: 170px; }
    .hero-franja { padding-top: 14px !important; }
    .slider-banners { margin-left: 10px !important; margin-right: 10px !important; }
    .img-wrap img { height: 220px; }
    .galeria-mini .mini { width: 70px; height: 70px; }
    .carrito-flotante { right: 14px; bottom: 14px; padding: 10px 18px; }
    .whatsapp { right: 14px !important; bottom: 72px !important; padding: 10px 16px; font-size: .85rem; }
    .pie-telbyte { padding: 48px 0 20px; }
    .tipos-grid { grid-template-columns: 1fr 1fr; }
}

/* Menú móvil sobre fondo negro */
.navbar-toggler { border-color: #3f5270; }
.navbar-toggler-icon { filter: invert(1); }
.tipo-card p { color: var(--texto-2); }

.navbar-claro-sticky .nav-link, .navbar-claro .nav-link { white-space: nowrap; }
.buscador-centro .form-control { min-width: 180px; }


/* ============================================================
   RETOQUES TELBYTE (identidad del logo: azul → gris)
   ============================================================ */

/* Barras decorativas con el degradado azul → gris del logo */
.hero-franja::after,
.catalogo-cabecera h2::after,
.pagina-simple h1::after { background: var(--grad-logo); }

/* Navbar: negro puro (se funde con el fondo del logo) + línea azul */
.navbar-claro-sticky, .navbar-claro {
    border-bottom: 1px solid transparent !important;
    border-image: var(--grad-logo) 1;
    box-shadow: 0 6px 24px rgba(21, 101, 216, .12);
}
.navbar-claro-sticky .badge, .navbar-claro .badge {
    background: var(--grad-azul) !important; color: #fff !important;
}

/* Palabra destacada del slider con degradado azul */
.slide-telbyte h2 em {
    background: linear-gradient(90deg, #5aaeff, #2480f0);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.slide-kicker { background: rgba(36, 128, 240, .08); }

/* Botones: sombra azul sutil */
.btn-dark, .btn-primary, .btn-warning, .slide-btn, .btn-comprar-ahora,
.btn-hablar, .card-producto .btn-comprar, .buscador-centro .btn-buscar,
body.pag-interna .btn-finalizar, body.pag-login .btn-login {
    box-shadow: 0 6px 18px rgba(21, 101, 216, .30);
    border-color: transparent;
}
.btn-dark:hover, .btn-primary:hover, .btn-warning:hover, .slide-btn:hover,
.btn-comprar-ahora:hover, .btn-hablar:hover, .card-producto .btn-comprar:hover,
.buscador-centro .btn-buscar:hover { box-shadow: 0 10px 26px rgba(43, 140, 255, .42); }

/* Botón secundario / carrito: gris grafito del logo con borde azul */
.carrito-flotante {
    border: 1px solid rgba(90, 174, 255, .55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 3px rgba(36, 128, 240, .12);
}
.carrito-flotante .badge { background: var(--grad-azul) !important; color: #fff !important; }
.btn-success, .btn-agregar-carrito { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* Tarjetas: resplandor azul al pasar el mouse */
.card-producto:hover, .tipo-card:hover { box-shadow: var(--brillo-azul) !important; }
.card-producto, .tipo-card, .card { background: linear-gradient(180deg, #0f1826 0%, #0b121c 100%) !important; }
.card-cat, .etiqueta-cat, .seccion-kicker { color: var(--azul); }

/* Pie de página */
.pie-telbyte { background: radial-gradient(circle at 50% 0%, rgba(36, 128, 240, .12), transparent 55%), #000; border-top: 1px solid #12202f; }
.pie-copy { border-top: 1px solid #12202f; }

/* Tabla oscura del admin: encabezado azul claro */
.table-dark, .table-dark > th, .table-dark > td { color: var(--azul-2); background: #000; }

/* Alerta de advertencia (se mantiene ámbar por ser semántica) */
.alert-warning { background: #33290f; border-color: #6b5a1d; color: #f3d98b; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #04070c; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2b82f0, #3b3e44); border-radius: 8px; }

/* ---------- Ilustraciones SVG del slider (antes doradas) ---------- */
.slide-deco svg stop[stop-color="#fff0a0"] { stop-color: #bfe0ff; }
.slide-deco svg stop[stop-color="#f5d654"] { stop-color: #2b8cff; }
.slide-deco svg stop[stop-color="#b99a1f"] { stop-color: #1252c4; }
.slide-deco svg stop[stop-color="#3a3a3a"] { stop-color: #5b5f66; }
.slide-deco svg stop[stop-color="#121212"] { stop-color: #23262b; }
.slide-deco svg [stroke="#f5d654"] { stroke: #2b8cff; }
.slide-deco svg [stroke="#fff6c8"] { stroke: #d6ebff; }
.slide-deco svg [stroke="#8a7418"] { stroke: #0b3a8f; }
.slide-deco svg [fill="#ffe67f"]   { fill: #bfe0ff; }
.slide-deco svg [fill="#0b0b0b"]   { fill: #05080d; }