/* ==========================================================================
   XNOVA LED — Theme global CSS
   Keyframes y clases utilitarias del diseño. Los layouts van con estilos
   inline en las plantillas (para fidelidad exacta); aquí van interacciones,
   animaciones y ajustes responsive.
   ========================================================================== */

:root {
	--accent: #FEC80F;
	--petrol: #065478;
	--ink: #050608;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.xnova-led-active { background: #050608; color: #C7C6C6; font-family: 'Montserrat', system-ui, sans-serif; overflow-x: hidden; }
body.xnova-led-active a { color: inherit; }
::selection { background: #FEC80F; color: #050608; }

.xn-wrap { max-width: 1320px; margin: 0 auto; padding: 0 30px; }

/* ---------- Keyframes (idénticos al diseño) ---------- */
@keyframes xnFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes xnMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes xnToast { from { transform: translate(-50%,18px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
@keyframes xnRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes xnDrop { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes xnBeam { 0%,100% { opacity: .4; } 50% { opacity: .78; } }
@keyframes xnHeroPan { 0% { transform: scale(1.06) translate(0,0); } 50% { transform: scale(1.14) translate(-1.4%,-1%); } 100% { transform: scale(1.06) translate(0,0); } }
@keyframes xnHeroFade { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes xnSweep { 0% { transform: translateX(-140%) skewX(-20deg); } 60%,100% { transform: translateX(440%) skewX(-20deg); } }
@keyframes xnBeat { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .45; } }
@keyframes xnStreak { 0% { transform: translateX(-135%); } 100% { transform: translateX(135%); } }
@keyframes xnShine { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes xnFootBeam { 0%,100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes xnFootDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .4; } }

/* ---------- Interacciones ---------- */
.xn-nav { transition: color .15s; }
.xn-nav:hover { color: #FEC80F !important; }
.xn-card { transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.xn-card:hover { transform: translateY(-5px); border-color: rgba(254,200,15,.5) !important; box-shadow: 0 22px 50px rgba(0,0,0,.55); }
.xn-tile { transition: border-color .2s, background .2s, transform .2s; }
.xn-tile:hover { border-color: rgba(254,200,15,.55) !important; transform: translateY(-3px); }
.xn-rise { animation: xnRise .7s cubic-bezier(.2,.7,.2,1) both; }
.xn-res:hover { background: rgba(255,255,255,.05) !important; }
.xn-foot-link { transition: color .15s, padding-left .15s; }
.xn-foot-link:hover { color: #FEC80F !important; padding-left: 5px; }
.xn-cta { position: relative; overflow: hidden; }
.xn-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: xnShine 3.6s ease-in-out infinite; pointer-events: none; }
.xn-wa-fab { transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.xn-wa-fab:hover { transform: translateY(-3px) scale(1.03); }

/* Card hover: zoom de imagen y aparición de "quick view" */
.xn-card .xn-zoom { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.xn-card:hover .xn-zoom { transform: scale(1.09); }
.xn-card .xn-qv { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.xn-card:hover .xn-qv { opacity: 1; transform: translateY(0); }

/* Inputs */
.xn-input::placeholder { color: #6E7B80; }
.xn-input:focus { outline: none; border-color: rgba(254,200,15,.5) !important; }
select.xn-sel { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237E8B90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* Scrollbars finas */
.xn-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.xn-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }

/* ---------- Blog / archivo genérico ---------- */
.xn-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.xn-post-card { background: #0B1116; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s; }
.xn-post-card:hover { transform: translateY(-5px); border-color: rgba(254,200,15,.5); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.xn-post-card__media { display: block; height: 190px; overflow: hidden; background: linear-gradient(160deg,#101922,#0E141A); }
.xn-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.xn-post-card__ph { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, rgba(254,200,15,.12), transparent 60%); }
.xn-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.xn-post-card__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.xn-post-card__title { font-family: 'Catamaran'; font-weight: 800; font-size: 19px; line-height: 1.2; margin: 0; }
.xn-post-card__title a { color: #fff; text-decoration: none; }
.xn-post-card__excerpt { font-size: 13.5px; color: #C7C6C6; line-height: 1.55; margin: 0; flex: 1; }
.xn-post-card__link { font-family: 'Catamaran'; font-weight: 700; font-size: 13px; color: var(--accent); text-decoration: none; }

.xn-pagination { margin-top: 34px; }
.xn-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 3px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #0B1116; color: #C7C6C6; text-decoration: none; font-weight: 600; }
.xn-pagination .page-numbers.current { background: var(--accent); color: #050608; border-color: var(--accent); }
.xn-pagination .page-numbers:hover { border-color: var(--accent); }

.xn-page-spacer { height: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
	.xn-hero-grid { grid-template-columns: 1fr !important; }
	.xn-footer-cta-grid { grid-template-columns: 1fr !important; }
	.xn-footer-cols-grid { grid-template-columns: 1fr 1fr !important; }
	.xn-strip-cats { grid-template-columns: repeat(3, 1fr) !important; }
	.xn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.xn-catalog-layout { grid-template-columns: 1fr !important; }
	.xn-compat-console { grid-template-columns: 1fr 1fr !important; }
	.xn-product-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
	.xn-wrap { padding: 0 18px; }
	.xn-footer-cols-grid { grid-template-columns: 1fr !important; }
	.xn-strip-cats { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-grid-4, .xn-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.xn-posts-grid { grid-template-columns: 1fr; }
	.xn-compat-console { grid-template-columns: 1fr !important; }
	.xn-header .xn-search { display: none; }
	.xn-hero-title { font-size: 54px !important; }
	.xn-wa-fab span:last-child { display: none; }
}