/* ===== GLOBAL SETTINGS ===== */
:root { --accent: #ff005e; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
/* Prevent Iconify web components from causing layout shift when loading async */
iconify-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
.dark ::-webkit-scrollbar-track { background: #0a0a0a; }
.dark ::-webkit-scrollbar-thumb { background: #262626; }
/* ===== BACKGROUNDS & FX ===== */
@keyframes swirlRotate { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
.gradient-swirl {
position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.4; pointer-events: none; z-index: 0;
animation: swirlRotate 20s ease-in-out infinite;
will-change: transform;
contain: layout style;
}
.dark .gradient-swirl { opacity: 0.3; }
.gradient-swirl-1 { width:600px; height:600px; background:conic-gradient(from 0deg,#ff005e,#7c3aed,#3b82f6,#ff005e); }
.gradient-swirl-2 { width:400px; height:400px; background:conic-gradient(from 90deg,#10b981,#06b6d4,#8b5cf6,#10b981); }
.gradient-swirl-3 { width:500px; height:500px; background:conic-gradient(from 180deg,#f59e0b,#ef4444,#ec4899,#f59e0b); }
.grid-pattern {
background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
background-size:50px 50px; position: fixed; inset:0; pointer-events: none; z-index: 0;
}
.dark .grid-pattern { background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); }
/* ===== BORDERS & BEAMS ===== */
/* Estilos base para bordes extendidos */
.extended-border-top, .extended-border-bottom { position:absolute; left:-100vw; right:-100vw; height:1px; background:linear-gradient(90deg,transparent,rgba(255,0,94,0.3),transparent); pointer-events:none; }
.extended-border-left, .extended-border-right { position:absolute; top:-100vh; bottom:-100vh; width:1px; background:linear-gradient(180deg,transparent,rgba(255,0,94,0.3),transparent); pointer-events:none; }
.extended-border-top { top:0; } .extended-border-bottom { bottom:0; } .extended-border-left { left:0; } .extended-border-right { right:0; }
.animate-extend-h { animation: extendHorizontal 2s ease-out forwards; }
.animate-extend-v { animation: extendVertical 2s ease-out forwards; }
@keyframes extendHorizontal { 0% { transform:scaleX(0); opacity:0; } 100% { transform:scaleX(1); opacity:1; } }
@keyframes extendVertical { 0% { transform:scaleY(0); opacity:0; } 100% { transform:scaleY(1); opacity:1; } }
.boxed-container { position:relative; }
.beam-runner {
position:absolute; width:100px; height:1px;
background:linear-gradient(90deg,transparent,#ff005e,#fff,#ff005e,transparent);
animation:beamRun 3s ease-in-out infinite; pointer-events:none;
}
@keyframes beamRun { 0% { left:-100px; opacity:0; } 100% { left:calc(100% + 100px); opacity:0; } }
/* ===== TRACING BEAM ===== */
@keyframes traceBorder { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
.tracing-beam { position: relative; }
.tracing-beam::before {
content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
background: linear-gradient(90deg, transparent 0%, transparent 40%, #ff005e 50%, transparent 60%, transparent 100%);
background-size: 200% 200%; animation: traceBorder 4s linear infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* ===== TEXT & CARDS ===== */
.illuminated-text {
color: #ff005e; transition: text-shadow 0.3s ease, color 0.3s ease; cursor: default;
}
.illuminated-text:hover { text-shadow: 0 0 20px rgba(255, 0, 94, 0.6), 0 0 10px rgba(255, 0, 94, 0.4); }
.dark .illuminated-text {
color: white; background: linear-gradient(to right, #ffffff 20%, #ff005e 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dark .illuminated-text:hover { -webkit-text-fill-color: #ff005e; text-shadow: 0 0 25px rgba(255, 0, 94, 0.8), 0 0 15px rgba(255, 0, 94, 0.5); }
.card-glow { position:relative; overflow:hidden; }
.card-glow::before {
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);
transition:left .5s ease; pointer-events:none;
}
.card-glow:hover::before { left:100%; }
.text-transition { transition: color 0.3s ease; }
.fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; }
/* ===== CORNER ACCENTS ===== */
.corner-accent { position:absolute; width:20px; height:20px; pointer-events:none; }
.corner-accent::before, .corner-accent::after { content:''; position:absolute; background:#ff005e; }
.corner-tl::before { top:0; left:0; width:100%; height:1px; }
.corner-tl::after  { top:0; left:0; width:1px; height:100%; }
.corner-tr::before { top:0; right:0; width:100%; height:1px; }
.corner-tr::after  { top:0; right:0; width:1px; height:100%; }
.corner-bl::before { bottom:0; left:0; width:100%; height:1px; }
.corner-bl::after  { bottom:0; left:0; width:1px; height:100%; }
.corner-br::before { bottom:0; right:0; width:100%; height:1px; }
.corner-br::after  { bottom:0; right:0; width:1px; height:100%; }
/* ===== ANIMATE SHINE ===== */
@keyframes shine { 0% { background-position:200% center; } 100% { background-position:-200% center; } }
.animate-shine { background-size:200% auto; animation:shine 4s linear infinite; }
/* ===== INFINITE SCROLL MARQUEE — definido en tailwind.config ===== */
.mask-linear-fade {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* ===== CARD HOVER EFFECT (lifted + color glow) ===== */
.card-hover-effect {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-hover-effect:hover {
  transform: translateY(-6px);
  border-color: rgba(255,0,94,0.4) !important;
  box-shadow: 0 20px 60px -10px rgba(255,0,94,0.18), 0 8px 24px -4px rgba(124,58,237,0.12);
}
/* ===== SCROLL REVEAL ===== */
.fade-in-section {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1);
}
.fade-in-section.visible {
  opacity: 1;
}
/* ===== SWIRL FLOAT (más movimiento al fondo) ===== */
@keyframes swirlFloat {
  0%,100% { transform: rotate(0deg) scale(1) translate(0,0); }
  25%      { transform: rotate(90deg) scale(1.08) translate(30px,-20px); }
  50%      { transform: rotate(180deg) scale(1.05) translate(-20px,30px); }
  75%      { transform: rotate(270deg) scale(1.1) translate(15px,15px); }
}
.gradient-swirl {
  animation: swirlFloat 18s ease-in-out infinite !important;
}
.gradient-swirl-1 { animation-delay: 0s !important; }
.gradient-swirl-2 { animation-delay: -6s !important; }
.gradient-swirl-3 { animation-delay: -12s !important; }
/* ===== MOUSE SPOTLIGHT ===== */
.mouse-spotlight {
  position: fixed; pointer-events: none; z-index: 1;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,94,0.07) 0%, transparent 65%);
  transform: translate(-50%,-50%);
  transition: left 0.12s ease, top 0.12s ease;
  filter: blur(20px);
}
/* ===== SMOOTH SCROLL ===== */
html { scroll-behavior: smooth; }
/* ===== THEME TOGGLE ===== */
.theme-toggle { position: relative; width: 52px; height: 28px; border-radius: 14px; cursor: pointer; transition: all 0.3s ease; }
.dark .theme-toggle { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1); }
.theme-toggle { background: linear-gradient(135deg, #87ceeb 0%, #ffd700 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05); }
.theme-toggle-thumb { position: absolute; top: 2px; width: 24px; height: 24px; border-radius: 50%; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; justify-content: center; }
.dark .theme-toggle-thumb { left: 26px; background: linear-gradient(135deg, #2d2d44 0%, #1a1a2e 100%); }
.theme-toggle-thumb { left: 2px; background: linear-gradient(135deg, #fff9c4 0%, #ffeb3b 100%); }
::selection { background-color: #ff005e; color: white; }

/* infinite-scroll — fallback CSS por si tailwind.config no cargó antes */
@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
}

/* ===== SCROLL OFFSET — compensa el header fijo (64px) ===== */
section[id], footer[id] {
    scroll-margin-top: 64px;
}
.admin-bar section[id], .admin-bar footer[id] {
    scroll-margin-top: 96px;
}

/* ===== ADMIN BAR FIX — el margin-top:32px en html deja un hueco visible ===== */
html {
    background-color: #f5f5f5;
}
html.dark {
    background-color: #020202;
}