/* ============================================================ Z1VERSO — Tema oscuro "glass" con la paleta del logotipo ------------------------------------------------------------ Fondo oscuro con luces difusas rojo/cian (colores del logo) y paneles de vidrio esmerilado (translúcidos con desenfoque). Rojo coral → botones y acentos de acción Cian → precios, enlaces y detalles Este archivo se comparte entre TODAS las páginas del sistema. Requiere y Bootstrap 5.3. ============================================================ */ :root { --z1-rojo: #f0455a; --z1-rojo-osc: #d32f44; --z1-rojo-claro: #ff6b7c; --z1-cian: #58c2de; --z1-cian-claro: #a5e0ef; --z1-grad: linear-gradient(135deg, #f0455a, #58c2de); --z1-fondo: #0b0e14; /* Paneles translúcidos (efecto vidrio) */ --z1-panel: rgba(23, 28, 39, .55); --z1-panel-2: rgba(44, 52, 70, .45); --z1-borde: rgba(255, 255, 255, .09); --z1-borde-hover: rgba(165, 224, 239, .4); --z1-blur: blur(16px) saturate(1.5); --z1-texto: #e9edf3; --z1-texto-suave: #9aa3b2; } /* ----- Base Bootstrap en modo oscuro ----- */ [data-bs-theme=dark] { --bs-body-bg: var(--z1-fondo); --bs-body-color: var(--z1-texto); --bs-border-color: var(--z1-borde); --bs-secondary-bg: var(--z1-panel-2); --bs-tertiary-bg: var(--z1-panel); --bs-primary: var(--z1-rojo); --bs-primary-rgb: 240, 69, 90; --bs-link-color: var(--z1-cian); --bs-link-hover-color: var(--z1-cian-claro); --bs-link-color-rgb: 88, 194, 222; --bs-link-hover-color-rgb: 165, 224, 239; } ::selection { background: rgba(240, 69, 90, .45); } /* ----- Fondo del sitio: luces difusas con los colores del logo ----- */ [data-bs-theme=dark] body { position: relative; } [data-bs-theme=dark] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(720px 480px at 12% -8%, color-mix(in srgb, var(--z1-rojo) 17%, transparent), transparent 62%), radial-gradient(820px 540px at 88% -12%, color-mix(in srgb, var(--z1-cian) 15%, transparent), transparent 62%), radial-gradient(700px 700px at 78% 82%, color-mix(in srgb, var(--z1-rojo) 8%, transparent), transparent 60%), radial-gradient(640px 640px at 8% 92%, color-mix(in srgb, var(--z1-cian) 8%, transparent), transparent 60%), var(--z1-fondo); } /* Franja degradada de marca (bajo la barra de navegación) */ .z1-strip { height: 3px; background: var(--z1-grad); box-shadow: 0 1px 10px rgba(240, 69, 90, .35); } /* Utilidad: panel de vidrio */ .z1-glass { background: var(--z1-panel); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 14px; } /* ----- Barra de navegación: vidrio oscuro ----- */ [data-bs-theme=dark] .navbar.bg-dark, [data-bs-theme=dark] .navbar[class*=bg-dark] { background-color: rgba(7, 9, 13, .68) !important; -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border-bottom: 1px solid var(--z1-borde); } /* ----- Botones ----- */ .btn { border-radius: 10px; } .btn-primary { --bs-btn-bg: var(--z1-rojo); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--z1-rojo-osc); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--z1-rojo-osc); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--z1-rojo); --bs-btn-disabled-border-color: transparent; --bs-btn-focus-shadow-rgb: 240, 69, 90; box-shadow: 0 4px 18px rgba(240, 69, 90, .3); } .btn-success { box-shadow: 0 4px 18px rgba(25, 135, 84, .25); } .btn-outline-primary { --bs-btn-color: var(--z1-cian); --bs-btn-border-color: rgba(88, 194, 222, .5); --bs-btn-hover-bg: var(--z1-cian); --bs-btn-hover-border-color: var(--z1-cian); --bs-btn-hover-color: #0b0e14; --bs-btn-active-bg: var(--z1-cian); --bs-btn-active-border-color: var(--z1-cian); --bs-btn-active-color: #0b0e14; --bs-btn-focus-shadow-rgb: 88, 194, 222; } [data-bs-theme=dark] .btn-dark { --bs-btn-bg: var(--z1-panel-2); --bs-btn-border-color: var(--z1-borde); --bs-btn-hover-bg: rgba(60, 70, 92, .55); --bs-btn-hover-border-color: var(--z1-borde-hover); } [data-bs-theme=dark] .btn-outline-dark, [data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--z1-texto); --bs-btn-border-color: var(--z1-borde); --bs-btn-hover-bg: var(--z1-panel-2); --bs-btn-hover-border-color: var(--z1-borde-hover); --bs-btn-hover-color: var(--z1-texto); --bs-btn-active-bg: var(--z1-panel-2); --bs-btn-active-border-color: var(--z1-borde-hover); --bs-btn-active-color: var(--z1-texto); } [data-bs-theme=dark] .btn-light { --bs-btn-bg: rgba(255, 255, 255, .88); --bs-btn-border-color: transparent; } /* ----- Colores utilitarios re-mapeados ----- */ [data-bs-theme=dark] .text-primary { color: var(--z1-cian) !important; } .bg-primary { background: var(--z1-grad) !important; } [data-bs-theme=dark] .bg-light { background-color: var(--z1-panel-2) !important; } [data-bs-theme=dark] .bg-light.text-dark { color: var(--z1-texto) !important; } [data-bs-theme=dark] .badge.bg-light { color: var(--z1-texto-suave); } .badge { border-radius: 8px; } /* ----- Tarjetas y paneles: vidrio esmerilado ----- */ [data-bs-theme=dark] .card { background-color: var(--z1-panel); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); } [data-bs-theme=dark] .card .card-header, [data-bs-theme=dark] .card .card-footer { background: rgba(255, 255, 255, .03); } [data-bs-theme=dark] .modal-content { background-color: rgba(20, 25, 35, .82); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid var(--z1-borde); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } [data-bs-theme=dark] .modal-header, [data-bs-theme=dark] .modal-footer { border-color: var(--z1-borde); } [data-bs-theme=dark] .modal-header.bg-dark { background-color: rgba(255, 255, 255, .04) !important; } [data-bs-theme=dark] .dropdown-menu { background-color: rgba(20, 25, 35, .85); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); border-radius: 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, .55); } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus { background: rgba(255, 255, 255, .06); } /* ----- Formularios: campos translúcidos ----- */ [data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .input-group-text { background-color: rgba(255, 255, 255, .055); border-color: var(--z1-borde); border-radius: 10px; } [data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus { background-color: rgba(255, 255, 255, .08); border-color: var(--z1-cian); box-shadow: 0 0 0 .25rem rgba(88, 194, 222, .18); } [data-bs-theme=dark] .form-control::placeholder { color: rgba(233, 237, 243, .38); } /* Opciones de los desplegables legibles en tema oscuro (fondo sólido) */ [data-bs-theme=dark] select option, [data-bs-theme=dark] select optgroup { background-color: #161c27; color: #e9edf3; } .form-check-input:checked { background-color: var(--z1-rojo); border-color: var(--z1-rojo); } [data-bs-theme=dark] .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: var(--z1-borde); } /* ----- Tablas y listas: transparentes para que se vea el vidrio ----- */ [data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); --bs-table-border-color: var(--z1-borde); } [data-bs-theme=dark] .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--z1-borde); --bs-list-group-action-hover-bg: rgba(255, 255, 255, .05); } /* ----- Alertas de marca ----- */ [data-bs-theme=dark] .alert { border-radius: 14px; } [data-bs-theme=dark] .alert-primary { background: linear-gradient(135deg, rgba(240, 69, 90, .16), rgba(88, 194, 222, .16)); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); border: 1px solid var(--z1-borde); color: var(--z1-texto); } [data-bs-theme=dark] .alert-info { background: rgba(88, 194, 222, .14); border: 1px solid rgba(88, 194, 222, .40); color: var(--z1-texto); } /* Texto e iconos legibles dentro de CUALQUIER alert en tema oscuro (evita texto claro sobre fondo claro) */ [data-bs-theme=dark] .alert { color: var(--z1-texto); } [data-bs-theme=dark] .alert a { color: var(--z1-cian-claro); } [data-bs-theme=dark] .alert-info strong, [data-bs-theme=dark] .alert-info .bi { color: var(--z1-cian-claro); } /* ----- Cintillo "Exclusivo" (productos propios de la tienda) ----- */ .cinta-exclusivo { position: absolute; top: 14px; right: -40px; transform: rotate(45deg); background: var(--z1-grad); color: #fff; font-weight: 800; font-size: .64rem; letter-spacing: .6px; text-transform: uppercase; padding: 4px 44px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); z-index: 4; pointer-events: none; } /* ----- Pestañas tipo píldora ----- */ .nav-pills { --bs-nav-pills-link-active-bg: var(--z1-rojo); --bs-nav-link-color: var(--z1-cian); --bs-nav-link-hover-color: var(--z1-cian-claro); } .nav-pills .nav-link { border-radius: 10px; } .nav-pills .nav-link.active { box-shadow: 0 4px 16px rgba(240, 69, 90, .35); } /* ----- Paginación ----- */ .pagination { --bs-pagination-active-bg: var(--z1-rojo); --bs-pagination-active-border-color: transparent; --bs-pagination-color: var(--z1-cian); --bs-pagination-hover-color: var(--z1-cian-claro); } [data-bs-theme=dark] .pagination { --bs-pagination-bg: var(--z1-panel); --bs-pagination-border-color: var(--z1-borde); --bs-pagination-hover-bg: var(--z1-panel-2); --bs-pagination-hover-border-color: var(--z1-borde); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--z1-borde); } /* ----- Barras de progreso ----- */ [data-bs-theme=dark] .progress { background-color: rgba(255, 255, 255, .08); } [data-bs-theme=dark] .progress-bar { background: var(--z1-grad); } /* ----- Barra de desplazamiento sutil ----- */ [data-bs-theme=dark] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-bs-theme=dark] ::-webkit-scrollbar-track { background: transparent; } [data-bs-theme=dark] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 5px; } [data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); } /* ============================================================ NUESTRAS PC — showcase de equipos armados (megashop-style) ============================================================ */ .npc-page { max-width: 1180px; } .npc-eyebrow { color: var(--z1-cian); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; font-size: .8rem; display: inline-flex; align-items: center; gap: .5rem; } .npc-eyebrow::before, .npc-eyebrow::after { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, transparent, var(--z1-cian)); } .npc-eyebrow::after { background: linear-gradient(90deg, var(--z1-cian), transparent); } .npc-title { font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); margin: .3rem 0 .4rem; background: linear-gradient(90deg, #fff 30%, var(--z1-cian-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; } .npc-sub { color: var(--z1-texto); opacity: .7; max-width: 640px; margin: 0 auto; } .npc-seccion { margin: 2.4rem 0; } .npc-seccion-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .npc-seccion-head h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--z1-cian); margin: 0; white-space: nowrap; } .npc-linea { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--z1-borde), transparent); } .npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; } .npc-card { position: relative; display: flex; flex-direction: column; padding: 1.1rem; background: var(--z1-panel); border: 1px solid var(--z1-borde); border-radius: 18px; backdrop-filter: blur(var(--z1-blur, 10px)); transition: transform .18s, border-color .18s, box-shadow .18s; overflow: hidden; } .npc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--z1-cian), transparent); opacity: .5; } .npc-card:hover { transform: translateY(-4px); border-color: var(--z1-borde-hover); box-shadow: 0 14px 40px rgba(0,0,0,.45); } .npc-card.npc-destacada { border-color: rgba(240, 69, 90, .45); } .npc-card.npc-destacada::before { background: linear-gradient(90deg, var(--z1-rojo), var(--z1-cian)); opacity: 1; height: 4px; } .npc-tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .28rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #1a1010; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .npc-foto { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; margin-bottom: .9rem; background: radial-gradient(circle at 50% 40%, rgba(88,194,222,.14), rgba(0,0,0,.25)); display: flex; align-items: center; justify-content: center; } .npc-foto img { width: 100%; height: 100%; object-fit: cover; } .npc-foto-vacia { color: var(--z1-cian); opacity: .5; font-size: 3rem; } .npc-nombre { font-size: 1.02rem; font-weight: 800; color: #fff; margin: 0 0 .8rem; line-height: 1.25; } .npc-specs { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .45rem; } .npc-specs li { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; background: var(--z1-panel-2); border: 1px solid var(--z1-borde); border-radius: 10px; font-size: .86rem; color: var(--z1-texto); } .npc-specs li i { color: var(--z1-cian); font-size: 1rem; } .npc-specs .npc-lbl { opacity: .6; } .npc-specs strong { color: #fff; font-weight: 700; } .npc-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; } .npc-precio { font-size: 1.7rem; font-weight: 800; color: var(--z1-cian); line-height: 1; } .npc-precio span { display: block; font-size: .62rem; letter-spacing: .18em; color: var(--z1-texto); opacity: .55; font-weight: 700; margin-bottom: .2rem; } .npc-comprar { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-decoration: none; color: #fff; background: linear-gradient(120deg, var(--z1-rojo), var(--z1-cian)); border: none; box-shadow: 0 6px 18px rgba(240,69,90,.28); transition: transform .15s, box-shadow .15s, filter .15s; white-space: nowrap; } .npc-comprar:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(88,194,222,.35); color: #fff; } /* Bloque de destacadas en el inicio del catálogo */ .npc-home { margin-bottom: 1.6rem; } .npc-home-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .npc-home-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: #fff; } .npc-home-head h2 i { color: var(--z1-cian); } .npc-vertodas { color: var(--z1-cian); font-weight: 700; text-decoration: none; white-space: nowrap; } .npc-vertodas:hover { color: var(--z1-cian-claro); } @media (max-width: 576px) { .npc-grid { grid-template-columns: 1fr; } } /* ---- PC del Mes: card grande a todo el ancho ---- */ .npc-hero{position:relative;display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:1.6rem; align-items:center;padding:1.6rem;margin-bottom:1.8rem;border-radius:22px; background:var(--z1-panel);border:1px solid var(--z1-borde);backdrop-filter:blur(var(--z1-blur,10px)); overflow:hidden;} .npc-hero::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:22px; background:linear-gradient(120deg,var(--z1-rojo),var(--z1-cian),var(--z1-rojo)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;} .npc-hero-badge{position:absolute;top:1.1rem;left:1.1rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem; padding:.4rem .9rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.05em;color:#1a1010; background:linear-gradient(120deg,#ffd43b,#ffb03b);box-shadow:0 6px 18px rgba(0,0,0,.4);} .npc-hero-foto{aspect-ratio:4/3;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 40%,rgba(88,194,222,.16),rgba(0,0,0,.35));} .npc-hero-foto img{width:100%;height:100%;object-fit:cover;} .npc-hero-eyebrow{color:var(--z1-cian);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.82rem;} .npc-hero-nombre{font-weight:800;font-size:clamp(1.5rem,3vw,2.3rem);color:#fff;margin:.3rem 0 1rem;line-height:1.1;} .npc-hero-specs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.2rem;} .npc-hero-spec{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:var(--z1-panel-2); border:1px solid var(--z1-borde);border-radius:10px;font-size:.9rem;color:var(--z1-texto);} .npc-hero-spec i{color:var(--z1-cian);} .npc-hero-spec span{opacity:.6;} .npc-hero-spec strong{color:#fff;} .npc-hero-pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-top:1px solid var(--z1-borde);padding-top:1rem;} .npc-precio-lg{font-size:2.4rem;} .npc-comprar-lg{padding:.8rem 1.6rem;font-size:.95rem;} @media (max-width:768px){ .npc-hero{grid-template-columns:1fr;} .npc-hero-specs{grid-template-columns:1fr;} } /* Enlace "Cotizar / pagos a meses" en las tarjetas de PC */ .npc-cotizar{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;font-size:.82rem;font-weight:600; color:var(--z1-cian);text-decoration:none;border-top:1px solid var(--z1-borde);padding-top:.7rem;} .npc-cotizar:hover{color:var(--z1-cian-claro);} .npc-hero .npc-cotizar{border-top:none;padding-top:0;margin-top:.2rem;} /* ============================================================ NUESTRAS PC — EFECTOS (movimiento y vida en las fichas) Respeta la paleta institucional: rojo #f0455a / cian #58c2de ============================================================ */ /* --- 1. Entrada escalonada al cargar --- */ @keyframes npc-entrada { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } } .npc-grid .npc-card { animation: npc-entrada .55s cubic-bezier(.22,.9,.3,1) both; } .npc-grid .npc-card:nth-child(1) { animation-delay: .05s; } .npc-grid .npc-card:nth-child(2) { animation-delay: .13s; } .npc-grid .npc-card:nth-child(3) { animation-delay: .21s; } .npc-grid .npc-card:nth-child(4) { animation-delay: .29s; } .npc-grid .npc-card:nth-child(5) { animation-delay: .37s; } .npc-grid .npc-card:nth-child(6) { animation-delay: .45s; } .npc-grid .npc-card:nth-child(n+7) { animation-delay: .5s; } .npc-hero { animation: npc-entrada .6s cubic-bezier(.22,.9,.3,1) both; } /* --- 2. Resplandor que sigue a la tarjeta al pasar el mouse --- */ .npc-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at 50% 0%, rgba(88,194,222,.16), transparent 65%); opacity: 0; transition: opacity .35s ease; z-index: 0; } .npc-card:hover::after { opacity: 1; } /* OJO: se excluye .npc-tag porque su posición es absoluta (flota sobre la foto). Sin el :not() la etiqueta "Destacada" se estira como barra y rompe la ficha. */ .npc-card > *:not(.npc-tag) { position: relative; z-index: 1; } /* Elevación más marcada y borde vivo */ .npc-card { transition: transform .28s cubic-bezier(.22,.9,.3,1), border-color .28s, box-shadow .28s; } .npc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(88,194,222,.25); } /* --- 3. Barra superior: se ilumina y recorre al pasar el mouse --- */ .npc-card::before { transition: opacity .3s, height .3s; } .npc-card:hover::before { opacity: 1; height: 4px; } @keyframes npc-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .npc-card.npc-destacada::before, .npc-hero::before { background-size: 200% 100%; animation: npc-flow 4s linear infinite; } /* --- 4. La foto respira: zoom suave + destello diagonal --- */ .npc-foto { position: relative; } .npc-foto img { transition: transform .6s cubic-bezier(.22,.9,.3,1); will-change: transform; } .npc-card:hover .npc-foto img { transform: scale(1.07); } .npc-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 62%); transform: translateX(-120%); transition: transform .8s ease; } .npc-card:hover .npc-foto::after, .npc-hero:hover .npc-foto::after { transform: translateX(120%); } .npc-hero-foto { position: relative; overflow: hidden; } .npc-hero-foto img { transition: transform .7s cubic-bezier(.22,.9,.3,1); } .npc-hero:hover .npc-hero-foto img { transform: scale(1.05); } /* --- 5. Las specs se encienden en cascada --- */ .npc-specs li { transition: background .25s, border-color .25s, transform .25s; } .npc-card:hover .npc-specs li { border-color: rgba(88,194,222,.28); background: rgba(88,194,222,.07); transform: translateX(3px); } .npc-card:hover .npc-specs li:nth-child(1) { transition-delay: .02s; } .npc-card:hover .npc-specs li:nth-child(2) { transition-delay: .06s; } .npc-card:hover .npc-specs li:nth-child(3) { transition-delay: .10s; } .npc-card:hover .npc-specs li:nth-child(4) { transition-delay: .14s; } .npc-card:hover .npc-specs li:nth-child(5) { transition-delay: .18s; } .npc-specs li i { transition: transform .25s, color .25s; } .npc-card:hover .npc-specs li i { color: var(--z1-cian-claro); transform: scale(1.12); } /* El ventilador gira al pasar el mouse */ @keyframes npc-girar { to { transform: rotate(360deg); } } .npc-card:hover .npc-specs li .bi-fan, .npc-hero:hover .npc-hero-spec .bi-fan { animation: npc-girar 2.6s linear infinite; transform-origin: 50% 50%; } /* --- 6. Precio y botón: foco de la venta --- */ .npc-precio { transition: transform .28s cubic-bezier(.22,.9,.3,1), text-shadow .28s; } .npc-card:hover .npc-precio { transform: scale(1.06); transform-origin: left center; text-shadow: 0 0 22px rgba(88,194,222,.45); } .npc-comprar { position: relative; overflow: hidden; } .npc-comprar::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-160%); transition: transform .7s ease; } .npc-card:hover .npc-comprar::after, .npc-comprar:hover::after { transform: translateX(320%); } .npc-cotizar { transition: color .2s, transform .2s; } .npc-cotizar:hover { transform: translateX(3px); } /* --- 7. Etiqueta: leve pulso en las destacadas --- */ @keyframes npc-pulso { 0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.35); } 50% { box-shadow: 0 4px 22px rgba(240,69,90,.55); } } .npc-card.npc-destacada .npc-tag { animation: npc-pulso 2.8s ease-in-out infinite; } .npc-hero-badge { animation: npc-pulso 2.8s ease-in-out infinite; } /* --- 8. Accesibilidad: si el usuario pidió menos movimiento, todo se calma --- */ @media (prefers-reduced-motion: reduce) { .npc-grid .npc-card, .npc-hero { animation: none !important; } .npc-card::before, .npc-hero::before, .npc-tag, .npc-hero-badge { animation: none !important; } .npc-card:hover .npc-specs li .bi-fan { animation: none !important; } .npc-foto img, .npc-hero-foto img, .npc-foto::after, .npc-comprar::after { transition: none !important; } .npc-card:hover { transform: none; } } /* ============================================================ PORTADA — secciones de confianza y venta ============================================================ */ /* Título de sección reutilizable */ .z1-sec-tit { font-weight: 800; color: #fff; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .55rem; } .z1-sec-tit i { color: var(--z1-cian); } /* --- Descripción y disponibilidad en las fichas de PC --- */ .npc-desc { font-size: .84rem; line-height: 1.45; color: var(--z1-cian-claro); font-style: italic; margin: -.35rem 0 .7rem; opacity: .92; } .npc-desc-lg { font-size: .98rem; margin: 0 0 1rem; max-width: 46ch; } .npc-disp { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .7rem; padding: .22rem .6rem; border-radius: 999px; font-size: .73rem; font-weight: 700; color: #9fe6c4; background: rgba(56, 211, 159, .12); border: 1px solid rgba(56, 211, 159, .3); } .npc-disp.urgente { color: #ffb3bd; background: rgba(240, 69, 90, .14); border-color: rgba(240, 69, 90, .38); animation: npc-pulso 2.6s ease-in-out infinite; } .npc-disp i { font-size: .85rem; } /* --- Barra de garantías --- */ .z1-garantias { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1.6rem; } .z1-gar { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; background: var(--z1-panel); border: 1px solid var(--z1-borde); border-radius: 14px; -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); font-size: .87rem; font-weight: 600; color: var(--z1-texto); transition: transform .22s, border-color .22s; } .z1-gar:hover { transform: translateY(-3px); border-color: var(--z1-borde-hover); } .z1-gar i { font-size: 1.45rem; background: var(--z1-grad); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; } /* --- Video --- */ .z1-video { position: relative; padding-top: 56.25%; border-radius: 18px; overflow: hidden; border: 1px solid var(--z1-borde); box-shadow: 0 16px 50px rgba(0,0,0,.5); background: #05070b; } .z1-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- ¿Cómo comprar? (3 pasos) --- */ .z1-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; counter-reset: paso; } .z1-paso { position: relative; padding: 1.5rem 1.2rem 1.2rem; background: var(--z1-panel); border: 1px solid var(--z1-borde); border-radius: 16px; -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); transition: transform .22s, border-color .22s; } .z1-paso:hover { transform: translateY(-4px); border-color: var(--z1-borde-hover); } .z1-paso-n { position: absolute; top: -16px; left: 1.2rem; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--z1-grad); box-shadow: 0 6px 18px rgba(240,69,90,.35); } .z1-paso-t { font-weight: 800; color: #fff; margin: .5rem 0 .35rem; } .z1-paso-d { font-size: .87rem; color: var(--z1-texto); opacity: .75; line-height: 1.5; } /* --- Galería de armados --- */ .z1-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; } .z1-galeria figure { margin: 0; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; border: 1px solid var(--z1-borde); background: #0d1119; } .z1-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.9,.3,1), filter .3s; filter: saturate(.92); } .z1-galeria figure:hover img { transform: scale(1.08); filter: saturate(1.1); } /* --- Marcas --- */ .z1-marcas-tit { text-align: center; color: var(--z1-texto); opacity: .55; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem; } .z1-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; } .z1-marcas span { padding: .45rem 1rem; border-radius: 999px; font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: var(--z1-texto); opacity: .6; border: 1px solid var(--z1-borde); background: rgba(255,255,255,.03); transition: opacity .2s, color .2s, border-color .2s, transform .2s; } .z1-marcas span:hover { opacity: 1; color: var(--z1-cian-claro); border-color: var(--z1-borde-hover); transform: translateY(-2px); } /* --- Preguntas frecuentes --- */ [data-bs-theme=dark] .z1-faq .accordion-item { background: var(--z1-panel); border: 1px solid var(--z1-borde); border-radius: 14px; margin-bottom: .6rem; overflow: hidden; -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); } [data-bs-theme=dark] .z1-faq .accordion-button { background: transparent; color: #fff; font-weight: 700; box-shadow: none; } [data-bs-theme=dark] .z1-faq .accordion-button:not(.collapsed) { color: var(--z1-cian); background: rgba(88,194,222,.06); } [data-bs-theme=dark] .z1-faq .accordion-button::after { filter: invert(1) brightness(1.6); } [data-bs-theme=dark] .z1-faq .accordion-body { color: var(--z1-texto); opacity: .85; font-size: .92rem; } /* --- Botón flotante de WhatsApp --- */ .z1-wa { position: fixed; right: 18px; bottom: 18px; z-index: 1080; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-size: 1.7rem; text-decoration: none; box-shadow: 0 8px 26px rgba(37, 211, 102, .45); transition: transform .22s, box-shadow .22s; } .z1-wa:hover { transform: scale(1.09) translateY(-2px); color: #fff; box-shadow: 0 12px 34px rgba(37, 211, 102, .6); } .z1-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .5); animation: z1-wa-ping 2.4s ease-out infinite; } @keyframes z1-wa-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } @media (max-width: 576px) { .z1-wa { width: 50px; height: 50px; font-size: 1.5rem; bottom: 14px; right: 14px; } } @media (prefers-reduced-motion: reduce) { .z1-wa::before { animation: none; } .npc-disp.urgente { animation: none; } } /* ============================================================ SECCIÓN DE CONTACTO (pie del catálogo) ============================================================ */ .z1-cont-eyebrow { color: var(--z1-cian); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; font-size: .74rem; margin-bottom: .35rem; } .z1-cont-titulo { font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3.1rem); color: #fff; margin: 0 0 1.6rem; letter-spacing: -.01em; } .z1-cont-titulo span { color: var(--z1-cian); text-shadow: 0 0 34px rgba(88, 194, 222, .45); } .z1-cont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; } @media (max-width: 860px) { .z1-cont-grid { grid-template-columns: 1fr; } } /* Columna de datos */ .z1-cont-bloque { margin-bottom: 1.4rem; } .z1-cont-lbl { display: flex; align-items: center; gap: .5rem; color: var(--z1-cian); font-weight: 800; font-size: .95rem; margin-bottom: .4rem; } .z1-cont-lbl i { font-size: 1.05rem; } .z1-cont-txt { color: var(--z1-texto); opacity: .85; margin: 0; line-height: 1.6; font-size: .93rem; } .z1-horario { border-collapse: collapse; } .z1-horario td { padding: .18rem 0; color: var(--z1-texto); font-size: .93rem; } .z1-horario td:first-child { opacity: .7; padding-right: 2.2rem; } .z1-horario td:last-child { font-weight: 600; } .z1-cont-wa { color: #3ddc84; font-weight: 800; font-size: 1.45rem; text-decoration: none; letter-spacing: .01em; } .z1-cont-wa:hover { color: #6ef2a8; } .z1-cont-mail { color: var(--z1-cian); font-weight: 700; text-decoration: none; word-break: break-all; } .z1-cont-mail:hover { color: var(--z1-cian-claro); text-decoration: underline; } .z1-redes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; } .z1-redes a { display: inline-flex; align-items: center; gap: .6rem; color: var(--z1-texto); opacity: .82; text-decoration: none; font-size: .92rem; transition: color .2s, opacity .2s, transform .2s; } .z1-redes a i { font-size: 1.15rem; width: 1.4rem; text-align: center; } .z1-redes a:hover { color: var(--z1-cian); opacity: 1; transform: translateX(4px); } .z1-cont-btn-wa { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; margin-top: 1.6rem; padding: 1rem 1.4rem; border-radius: 999px; font-weight: 800; font-size: 1.02rem; color: #08210f; text-decoration: none; background: linear-gradient(120deg, #35e07f, #22c55e); box-shadow: 0 10px 30px rgba(53, 224, 127, .3); transition: transform .2s, box-shadow .2s, filter .2s; } .z1-cont-btn-wa:hover { transform: translateY(-3px); color: #08210f; filter: brightness(1.06); box-shadow: 0 16px 40px rgba(53, 224, 127, .45); } /* Columna del formulario */ .z1-cont-form { padding: 1.6rem; border-radius: 20px; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); } .z1-cont-form .form-label { font-size: .86rem; color: var(--z1-texto); opacity: .8; margin-bottom: .3rem; } .z1-cont-form .form-control { border-radius: 12px; padding: .7rem .9rem; } .z1-cont-enviar { border: 0; border-radius: 999px; padding: .8rem 2rem; font-weight: 800; color: #06222b; background: linear-gradient(120deg, var(--z1-cian-claro), var(--z1-cian)); box-shadow: 0 10px 30px rgba(88, 194, 222, .35); transition: transform .2s, box-shadow .2s, filter .2s; } .z1-cont-enviar:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 38px rgba(88, 194, 222, .5); } .z1-cont-enviar:disabled { opacity: .6; cursor: progress; } .z1-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Mapa */ .z1-mapa { margin-top: 1.6rem; border-radius: 20px; overflow: hidden; border: 1px solid var(--z1-borde); box-shadow: 0 16px 50px rgba(0, 0, 0, .5); line-height: 0; } .z1-mapa iframe { width: 100%; height: 380px; border: 0; filter: grayscale(.2) contrast(1.05); } @media (max-width: 576px) { .z1-mapa iframe { height: 280px; } } /* Créditos del pie */ .z1-creditos { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--z1-borde); display: flex; justify-content: center; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--z1-texto-suave); } .z1-creditos a { color: var(--z1-cian); text-decoration: none; font-weight: 700; } .z1-creditos a:hover { color: var(--z1-cian-claro); text-decoration: underline; } .z1-cred-sep { opacity: .4; } /* ============================================================ SOBRE NOSOTROS (Conócenos) ============================================================ */ /* --- Aparición al hacer scroll --- */ /* Solo se ocultan si hay JavaScript (clase js-rev). Sin JS, todo se ve. */ .js-rev .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1); } .js-rev .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-rev .reveal { opacity: 1; transform: none; transition: none; } } /* --- Portada --- */ .nos-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); } .nos-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); filter: saturate(.85); animation: nos-zoom 22s ease-in-out infinite alternate; } @keyframes nos-zoom { from { transform: scale(1.08); } to { transform: scale(1.16); } } .nos-hero-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,20,.7) 0%, rgba(11,14,20,.86) 55%, var(--z1-fondo) 100%), radial-gradient(760px 420px at 15% 0%, rgba(240,69,90,.28), transparent 62%), radial-gradient(760px 420px at 85% 10%, rgba(88,194,222,.26), transparent 62%); } .nos-hero-cont { position: relative; z-index: 2; text-align: center; } .nos-eyebrow { color: var(--z1-cian); font-weight: 800; letter-spacing: .34em; text-transform: uppercase; font-size: .78rem; margin-bottom: .7rem; } .nos-h1 { font-weight: 800; font-size: clamp(2.1rem, 6vw, 4.1rem); line-height: 1.05; color: #fff; margin: 0 0 1rem; text-wrap: balance; } .nos-h1 span { background: var(--z1-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(240,69,90,.35)); } .nos-lead { max-width: 66ch; margin: 0 auto; color: var(--z1-texto); opacity: .88; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; } .nos-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; } .nos-dato { min-width: 132px; padding: .9rem 1.2rem; border-radius: 16px; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); transition: transform .25s, border-color .25s; } .nos-dato:hover { transform: translateY(-4px); border-color: var(--z1-borde-hover); } .nos-dato strong { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; background: var(--z1-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .nos-dato span { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--z1-texto); opacity: .6; margin-top: .35rem; } /* --- Bloques --- */ .nos-sec { margin: clamp(3rem, 7vw, 5rem) auto; max-width: 1140px; } .nos-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--z1-cian); background: rgba(88,194,222,.1); border: 1px solid rgba(88,194,222,.28); margin-bottom: .9rem; } .nos-tag-c { margin-inline: auto; } .nos-h2 { font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: #fff; margin: 0 0 1rem; text-wrap: balance; } .nos-p { color: var(--z1-texto); opacity: .82; line-height: 1.75; margin-bottom: .9rem; } .nos-centro { max-width: 72ch; margin-inline: auto; } .nos-firma { color: var(--z1-cian-claro); font-weight: 600; font-style: italic; line-height: 1.6; border-left: 3px solid var(--z1-cian); padding-left: .9rem; margin-top: 1.2rem; } .nos-cierre { text-align: center; max-width: 70ch; margin: 2rem auto 0; color: var(--z1-texto); opacity: .8; line-height: 1.7; } .nos-2col { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (max-width: 900px) { .nos-2col { grid-template-columns: 1fr; } .nos-2col-inv figure { order: 2; } } /* Fotos con marco degradado */ .nos-foto { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 24px 60px rgba(0,0,0,.55); } .nos-foto::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; padding: 1.5px; background: linear-gradient(135deg, var(--z1-rojo), var(--z1-cian)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .nos-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22,.9,.3,1); } .nos-foto:hover img { transform: scale(1.06); } /* --- Frase destacada --- */ .nos-frase { position: relative; max-width: 62ch; margin: 0 auto 2.6rem; text-align: center; padding: 1.6rem 1.4rem; } .nos-frase i { font-size: 2.4rem; color: var(--z1-rojo); opacity: .55; display: block; line-height: 1; } .nos-frase p { font-size: clamp(1.1rem, 2.6vw, 1.55rem); font-weight: 700; color: #fff; line-height: 1.5; margin: .5rem 0 0; text-wrap: balance; } /* --- Tarjetas de filosofía --- */ .nos-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; } .nos-card { position: relative; padding: 1.7rem 1.4rem 1.4rem; border-radius: 20px; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); overflow: hidden; transition: transform .28s cubic-bezier(.22,.9,.3,1), border-color .28s, box-shadow .28s; } .nos-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--z1-grad); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; } .nos-card:hover { transform: translateY(-7px); border-color: var(--z1-borde-hover); box-shadow: 0 22px 50px rgba(0,0,0,.5); } .nos-card:hover::before { transform: scaleX(1); } .nos-card-ico { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: var(--z1-grad); margin-bottom: 1rem; box-shadow: 0 10px 26px rgba(240,69,90,.3); transition: transform .3s; } .nos-card:hover .nos-card-ico { transform: rotate(-6deg) scale(1.08); } .nos-card h3 { font-size: 1.12rem; font-weight: 800; color: #fff; margin-bottom: .55rem; } .nos-card p { font-size: .93rem; color: var(--z1-texto); opacity: .8; line-height: 1.7; margin: 0; } /* --- Lista de asesoría --- */ .nos-check { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .7rem; } .nos-check li { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: 12px; background: var(--z1-panel-2); border: 1px solid var(--z1-borde); color: var(--z1-texto); font-size: .94rem; line-height: 1.5; transition: transform .22s, border-color .22s; } .nos-check li:hover { transform: translateX(5px); border-color: rgba(56,211,159,.35); } .nos-check i { color: #38d39f; font-size: 1.15rem; flex: none; margin-top: .1rem; } /* --- Proceso --- */ .nos-proceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; position: relative; } .nos-paso { position: relative; text-align: center; padding: 1.6rem 1rem 1.2rem; border-radius: 18px; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); transition: transform .28s, border-color .28s; } .nos-paso:hover { transform: translateY(-6px); border-color: var(--z1-borde-hover); } .nos-paso-ico { position: relative; width: 62px; height: 62px; margin: 0 auto .9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--z1-cian); background: rgba(88,194,222,.1); border: 1px solid rgba(88,194,222,.3); transition: transform .3s, background .3s; } .nos-paso:hover .nos-paso-ico { transform: scale(1.07); background: rgba(88,194,222,.18); } .nos-paso-n { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; color: #fff; background: var(--z1-rojo); box-shadow: 0 4px 12px rgba(240,69,90,.5); } .nos-paso h4 { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: .4rem; } .nos-paso p { font-size: .86rem; color: var(--z1-texto); opacity: .75; line-height: 1.6; margin: 0; } /* --- Equipo --- */ .nos-equipo-foto { margin: 0 0 2.2rem; border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 26px 66px rgba(0,0,0,.55); } .nos-equipo-foto::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; padding: 1.5px; background: linear-gradient(135deg, var(--z1-cian), var(--z1-rojo)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .nos-equipo-foto img { width: 100%; display: block; transition: transform .9s cubic-bezier(.22,.9,.3,1); } .nos-equipo-foto:hover img { transform: scale(1.03); } .nos-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; } .nos-miembro { text-align: center; padding: 1.3rem .8rem 1.1rem; border-radius: 16px; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); transition: transform .25s cubic-bezier(.22,.9,.3,1), border-color .25s, box-shadow .25s; } .nos-miembro:hover { transform: translateY(-6px); border-color: var(--z1-borde-hover); box-shadow: 0 18px 42px rgba(0,0,0,.45); } .nos-avatar { width: 62px; height: 62px; margin: 0 auto .8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: .02em; background: var(--z1-grad); box-shadow: 0 8px 22px rgba(0,0,0,.4); transition: transform .3s, box-shadow .3s; } .nos-miembro:hover .nos-avatar { transform: scale(1.09) rotate(-4deg); box-shadow: 0 12px 30px rgba(88,194,222,.45); } .nos-miembro-nom { font-weight: 800; color: #fff; font-size: .95rem; line-height: 1.3; } .nos-miembro-rol { font-size: .78rem; color: var(--z1-cian); opacity: .85; margin-top: .25rem; line-height: 1.4; } /* --- Botones y llamado a la acción --- */ .nos-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 800; text-decoration: none; color: #08210f; background: linear-gradient(120deg, #35e07f, #22c55e); box-shadow: 0 10px 28px rgba(53,224,127,.3); transition: transform .22s, box-shadow .22s, filter .22s; } .nos-btn:hover { transform: translateY(-3px); color: #08210f; filter: brightness(1.06); box-shadow: 0 16px 38px rgba(53,224,127,.45); } .nos-btn-cian { color: #06222b; background: linear-gradient(120deg, var(--z1-cian-claro), var(--z1-cian)); box-shadow: 0 10px 28px rgba(88,194,222,.32); } .nos-btn-cian:hover { color: #06222b; box-shadow: 0 16px 38px rgba(88,194,222,.5); } .nos-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 24px; position: relative; overflow: hidden; background: var(--z1-panel); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); } .nos-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 100% 0%, rgba(88,194,222,.16), transparent 62%), radial-gradient(600px 300px at 0% 100%, rgba(240,69,90,.16), transparent 62%); } .nos-cta > * { position: relative; z-index: 1; } .nos-cta-btns { display: flex; gap: .7rem; flex-wrap: wrap; } /* ============================================================ FOTOS DE PC: se ven COMPLETAS y se amplían al tocarlas ============================================================ */ /* Antes se recortaban (cover). Ahora se ve el equipo entero (contain). */ .npc-foto img, .npc-hero-foto img { object-fit: contain !important; padding: .5rem; } .npc-hero-foto img { padding: .8rem; } /* Indicador de que se puede ampliar */ .npc-foto.ampliable, .npc-hero-foto.ampliable { cursor: zoom-in; } .npc-lupa { position: absolute; right: .55rem; bottom: .55rem; z-index: 3; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(11,14,20,.72); color: var(--z1-cian-claro); font-size: .82rem; border: 1px solid var(--z1-borde); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .npc-foto.ampliable:hover .npc-lupa, .npc-foto.ampliable:focus .npc-lupa, .npc-hero-foto.ampliable:hover .npc-lupa { opacity: 1; transform: none; } /* En celular no hay "hover": se muestra siempre para que se note que se puede tocar */ @media (hover: none) { .npc-lupa { opacity: .85; transform: none; } } .npc-foto.ampliable:focus-visible, .npc-hero-foto.ampliable:focus-visible { outline: 2px solid var(--z1-cian); outline-offset: 3px; } /* --- Visor a pantalla completa --- */ .z1-visor { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 2.5rem 1rem; background: rgba(6, 8, 12, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: zoom-out; opacity: 0; transition: opacity .25s ease; } .z1-visor.abierto { display: flex; opacity: 1; } .z1-visor figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; animation: z1-visor-entra .3s cubic-bezier(.22,.9,.3,1); } @keyframes z1-visor-entra { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .z1-visor img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.7); background: #0d1119; cursor: default; } .z1-visor figcaption { color: var(--z1-texto); font-weight: 700; text-align: center; font-size: .95rem; max-width: 46ch; } .z1-visor-cerrar { position: absolute; top: 1rem; right: 1.2rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--z1-borde); background: rgba(23,28,39,.85); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; } .z1-visor-cerrar:hover { background: var(--z1-rojo); transform: rotate(90deg); } @media (max-width: 576px) { .z1-visor { padding: 3.2rem .6rem 1.5rem; } .z1-visor img { max-height: calc(100vh - 9rem); } .z1-visor-cerrar { top: .6rem; right: .6rem; width: 40px; height: 40px; } } /* La galería de armados también se amplía */ .z1-galeria figure { cursor: zoom-in; } @media (prefers-reduced-motion: reduce) { .z1-visor, .z1-visor figure { transition: none; animation: none; } .z1-visor-cerrar:hover { transform: none; } } .nos-foto[data-zoom], .nos-equipo-foto[data-zoom] { cursor: zoom-in; } /* ============================================================ BOTONES DEL MENÚ — identidad Z1VERSO (vidrio + rojo/cian) ============================================================ */ .z1-nav { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } .z1-navbtn { /* OJO: nada de overflow:hidden aquí. La burbujita del contador vive en top:-6px/right:-6px, o sea FUERA de la caja del botón, y se recortaba (se veía el número a medias). El brillo de :hover no lo necesita: su ::before usa inset:0 con border-radius:inherit, así que ya se queda dentro de las esquinas redondeadas por su cuenta. */ position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .58rem 1.05rem; border-radius: 12px; font-weight: 700; font-size: .92rem; letter-spacing: .01em; white-space: nowrap; color: var(--z1-texto); text-decoration: none; border: 1px solid var(--z1-borde); background: var(--z1-panel); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); transition: color .25s, border-color .25s, transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s; } .z1-navbtn i { font-size: 1.05rem; color: var(--z1-cian); transition: color .25s, transform .25s; } /* Barrido de color al pasar el mouse */ .z1-navbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(120deg, rgba(240,69,90,.22), rgba(88,194,222,.22)); opacity: 0; transition: opacity .28s; } .z1-navbtn:hover, .z1-navbtn:focus-visible { color: #fff; border-color: var(--z1-borde-hover); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(88,194,222,.18); } .z1-navbtn:hover::before, .z1-navbtn:focus-visible::before { opacity: 1; } .z1-navbtn:hover i { color: var(--z1-cian-claro); transform: scale(1.12); } .z1-navbtn:active { transform: translateY(0); } .z1-navbtn:focus-visible { outline: 2px solid var(--z1-cian); outline-offset: 2px; } /* Botón principal (el carrito): degradado de la marca */ .z1-navbtn.principal { color: #fff; border-color: transparent; background: var(--z1-grad); box-shadow: 0 6px 20px rgba(240,69,90,.32); } .z1-navbtn.principal i { color: #fff; } .z1-navbtn.principal::before { background: linear-gradient(120deg, #58c2de, #f0455a); } .z1-navbtn.principal:hover { box-shadow: 0 12px 30px rgba(88,194,222,.42); color: #fff; } /* Contador del carrito */ .z1-navbtn .z1-badge { position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--z1-rojo); font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.45); border: 2px solid var(--z1-rojo); animation: z1-badge-pop .3s cubic-bezier(.22,1.4,.4,1); } @keyframes z1-badge-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } /* En celular: solo iconos para que quepan, con el texto oculto */ @media (max-width: 600px) { .z1-nav { gap: .4rem; } .z1-navbtn { padding: .55rem .7rem; font-size: .82rem; } .z1-navbtn .z1-txt { display: none; } .z1-navbtn.principal .z1-txt { display: inline; } /* el carrito sí conserva su texto */ .z1-navbtn i { font-size: 1.15rem; } } @media (prefers-reduced-motion: reduce) { .z1-navbtn, .z1-navbtn i, .z1-navbtn::before { transition: none; } .z1-navbtn:hover { transform: none; } .z1-navbtn .z1-badge { animation: none; } } /* ============================================================ MENÚ: texto SIEMPRE visible en computadora, y menú desplegable con explicaciones en celular. (Los iconos solos no se entienden: siempre va el texto.) ============================================================ */ /* Anula la regla anterior que escondía el texto en pantallas chicas */ @media (max-width: 600px) { .z1-navbtn .z1-txt { display: inline; } } .z1-solo-movil { display: none !important; } /* el botón ☰ solo en celular */ /* --- Panel desplegable (celular) --- */ .z1-menu-panel { position: absolute; top: calc(100% + 8px); right: 12px; left: 12px; z-index: 1200; padding: .5rem; border-radius: 16px; background: rgba(16, 20, 29, .97); border: 1px solid var(--z1-borde); -webkit-backdrop-filter: var(--z1-blur); backdrop-filter: var(--z1-blur); box-shadow: 0 20px 50px rgba(0,0,0,.6); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; } .z1-menu-panel.abierto { opacity: 1; transform: none; } .z1-menu-item { display: flex; align-items: center; gap: .8rem; padding: .8rem .7rem; border-radius: 12px; text-decoration: none; color: var(--z1-texto); transition: background .18s, transform .18s; } .z1-menu-item + .z1-menu-item { border-top: 1px solid var(--z1-borde); } .z1-menu-item:active, .z1-menu-item:hover { background: rgba(88,194,222,.1); color: #fff; } .z1-menu-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; background: var(--z1-grad); box-shadow: 0 5px 14px rgba(240,69,90,.3); } .z1-menu-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; } .z1-menu-txt strong { font-size: .98rem; color: #fff; } .z1-menu-txt small { font-size: .78rem; color: var(--z1-texto); opacity: .65; } .z1-menu-flecha { color: var(--z1-cian); opacity: .5; font-size: .85rem; } /* --- Cambio a celular --- */ @media (max-width: 820px) { .z1-solo-pc { display: none !important; } /* se esconden los botones sueltos */ .z1-solo-movil { display: inline-flex !important; } .navbar > .container { position: relative; } /* para anclar el panel */ .z1-navbtn.principal .z1-txt, .z1-navbtn.principal span { display: inline; } /* el carrito conserva su texto */ } @media (min-width: 821px) { .z1-menu-panel { display: none !important; } } /* El botón ☰ marcado cuando el menú está abierto */ .z1-navbtn.activo { color: #fff; border-color: var(--z1-cian); background: rgba(88,194,222,.16); } /* IMPORTANTE (capas): la barra superior debe quedar por ENCIMA de la barra de filtros (que usa z-index 1030). Si no, el botón "Categorías" tapa el menú ☰, porque el panel vive dentro de la barra y hereda su capa. */ [data-bs-theme=dark] .navbar.bg-dark, [data-bs-theme=dark] .navbar[class*=bg-dark] { z-index: 1045; } @media (prefers-reduced-motion: reduce) { .z1-menu-panel { transition: none; } } /* ========================================================== FICHA COMPLETA DE UNA PC (pc.php) Cada computadora tiene su propia página: mejor para Google, para Google Ads y para que el visitante vea todo el equipo. ========================================================== */ .pc-migas{font-size:.82rem;color:#8b98a5;margin-bottom:14px;} .pc-migas a{color:var(--z1-cian);text-decoration:none;} .pc-migas a:hover{text-decoration:underline;} .pc-migas i{font-size:.7rem;opacity:.5;margin:0 4px;} .pc-foto{position:relative;background:var(--z1-panel);border:1px solid rgba(255,255,255,.08); border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center; min-height:320px;padding:14px;} .pc-foto img{max-width:100%;max-height:460px;object-fit:contain;} .pc-foto.ampliable{cursor:zoom-in;} .pc-foto.ampliable:hover .npc-lupa{opacity:1;} .pc-seccion{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--z1-cian);margin-bottom:6px;} .pc-nombre{font-size:1.75rem;font-weight:800;line-height:1.15;margin-bottom:10px;text-wrap:balance;} .pc-etiqueta{display:inline-block;color:#111;font-weight:800;font-size:.72rem; padding:3px 10px;border-radius:999px;margin-right:8px;} .pc-desc{color:#c6ced6;margin:12px 0 16px;line-height:1.55;} .pc-precio-caja{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px;} .pc-precio{font-size:2.2rem;font-weight:800;color:#fff;line-height:1;} .pc-precio span{font-size:.85rem;font-weight:600;color:#8b98a5;margin-right:5px;vertical-align:super;} .pc-mensualidad{color:var(--z1-cian);font-size:.95rem;} .pc-botones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px;} .pc-h2{font-size:1.05rem;font-weight:800;margin:26px 0 12px;color:#fff;} .pc-h2 i{color:var(--z1-cian);margin-right:6px;} .pc-tabla{width:100%;border-collapse:collapse;} .pc-tabla th,.pc-tabla td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top;} .pc-tabla th{width:44%;font-weight:600;color:#9aa6b2;font-size:.86rem;white-space:nowrap;} .pc-tabla th i{color:var(--z1-cian);margin-right:6px;} .pc-tabla td{font-weight:700;color:#e8edf2;font-size:.92rem;} .pc-bloque{margin-top:38px;} .pc-planes{width:100%;border-collapse:collapse;font-size:.92rem;} .pc-planes thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:#8b98a5; font-weight:600;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.14);} .pc-planes tbody th{font-weight:600;color:#c6ced6;} .pc-planes td,.pc-planes th{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06); font-variant-numeric:tabular-nums;} .pc-planes tbody tr:hover{background:rgba(88,194,222,.06);} /* Enlace "Ver todos los componentes" en las tarjetas */ .npc-ficha{display:inline-flex;align-items:center;gap:6px;justify-content:center; font-size:.82rem;font-weight:600;color:var(--z1-cian);text-decoration:none; border:1px solid rgba(88,194,222,.35);border-radius:8px;padding:5px 10px; transition:background .15s,border-color .15s;} .npc-ficha:hover{background:rgba(88,194,222,.12);border-color:var(--z1-cian);color:var(--z1-cian);} .npc-acciones{display:flex;flex-direction:column;gap:6px;margin-top:8px;} /* El nombre de la tarjeta ahora es un enlace a su ficha */ .npc-nombre a,.npc-hero-nombre a{color:inherit;text-decoration:none;} .npc-nombre a:hover,.npc-hero-nombre a:hover{color:var(--z1-cian);} @media (max-width:575.98px){ .pc-nombre{font-size:1.4rem;} .pc-precio{font-size:1.8rem;} .pc-tabla th{width:auto;white-space:normal;} } /* ========================================================== NAVEGACIÓN POR CATEGORÍA en "Nuestras PC" Con 90+ equipos la página pesaba demasiado en celular. Ahora la portada ofrece las categorías y cada una carga solo sus equipos (y le da a Google una dirección propia). ========================================================== */ .npc-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;} .npc-cat{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none; background:var(--z1-panel);border:1px solid rgba(255,255,255,.08);border-radius:14px; transition:border-color .15s,transform .15s,background .15s;} .npc-cat:hover{border-color:var(--z1-cian);transform:translateY(-2px);background:rgba(88,194,222,.07);} .npc-cat-foto{flex:0 0 54px;height:54px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center;color:var(--z1-cian);font-size:1.3rem;} .npc-cat-foto img{width:100%;height:100%;object-fit:cover;} .npc-cat-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .npc-cat-txt strong{color:#e8edf2;font-size:.95rem;line-height:1.2;} .npc-cat-txt small{color:#8b98a5;font-size:.78rem;} .npc-cat-flecha{color:var(--z1-cian);opacity:.6;font-size:.85rem;} .npc-cat:hover .npc-cat-flecha{opacity:1;} /* Barra de categorías dentro de una categoría */ .npc-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:22px;} .npc-chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none; font-size:.8rem;color:#c6ced6;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px 12px; transition:all .15s;} .npc-chip:hover{border-color:var(--z1-cian);color:var(--z1-cian);} .npc-chip.activo{background:var(--z1-cian);border-color:var(--z1-cian);color:#06222b;font-weight:700;} .npc-chip-n{font-size:.7rem;opacity:.7;} .npc-chip.activo .npc-chip-n{opacity:.85;} /* ========================================================== RETRATOS DEL EQUIPO (Sobre nosotros) Los círculos ya existían con las iniciales; ahora, cuando la persona tiene foto, se muestra su retrato. El círculo crece porque a 62 px no se distinguían las caras. ========================================================== */ .nos-avatar.con-foto { width: 110px; height: 110px; padding: 3px; /* deja ver el aro de color por detrás */ background: var(--z1-grad); /* el degradado institucional hace de marco */ overflow: hidden; } .nos-avatar.con-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; /* llena el círculo sin deformar la cara */ object-position: center 42%; /* un pelín arriba: así queda centrada la cara */ display: block; background: #0d1117; transition: filter .3s; } /* En reposo, un toque desaturadas para que la cuadrícula se vea pareja aunque las fotos vengan con luz distinta; al pasar el mouse, a todo color. */ .nos-avatar.con-foto img { filter: saturate(.92) contrast(1.02); } .nos-miembro:hover .nos-avatar.con-foto img { filter: saturate(1.08) contrast(1.05); } /* La tarjeta necesita algo más de aire con el círculo grande */ .nos-equipo { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @media (max-width: 575.98px) { .nos-equipo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; } .nos-avatar.con-foto { width: 92px; height: 92px; } } /* --- Gestión de retratos en el panel --- */ .nos-eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .nos-eq-item { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; text-align: center; background: rgba(255,255,255,.03); } .nos-eq-foto { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 8px; overflow: hidden; background: var(--z1-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.4rem; } .nos-eq-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .nos-eq-nom { font-weight: 700; font-size: .86rem; color: #e8edf2; line-height: 1.25; } .nos-eq-rol { font-size: .74rem; color: #8b98a5; margin-bottom: 8px; } .nos-eq-estado { font-size: .72rem; margin-top: 6px; }