/* =========================================================
   Xtellaris — global.css
   Design tokens + estilos base del theme
   ========================================================= */

/* ── 1. Design Tokens (CSS Custom Properties) ─────────────
   Nomenclatura: --xt-{categoría}-{variante}
   ========================================================= */
:root {

	/* Colores de marca */
	--xt-blue:           #1e8eff;
	--xt-blue-dark:      #0a7ae8;
	--xt-blue-darker:    #0561c8;
	--xt-blue-light:     #e8f4ff;
	--xt-blue-lighter:   #f0f8ff;

	/* Escala de grises */
	--xt-gray-950:       #030712;
	--xt-gray-900:       #111827;
	--xt-gray-800:       #1f2937;
	--xt-gray-700:       #374151;
	--xt-gray-600:       #4b5563;
	--xt-gray-500:       #6b7280;
	--xt-gray-400:       #9ca3af;
	--xt-gray-300:       #d1d5db;
	--xt-gray-200:       #e5e7eb;
	--xt-gray-100:       #f3f4f6;
	--xt-gray-50:        #f9fafb;
	--xt-white:          #ffffff;

	/* Colores semánticos */
	--xt-success:        #22c55e;
	--xt-success-light:  #dcfce7;
	--xt-warning:        #f59e0b;
	--xt-warning-light:  #fef3c7;
	--xt-danger:         #ef4444;
	--xt-danger-light:   #fee2e2;
	--xt-info:           #3b82f6;
	--xt-info-light:     #dbeafe;

	/* Dark mode tokens (activados con clase .xt-dark-mode en body) */
	--xt-dark-bg:        #0a0f1e;
	--xt-dark-surface:   #111827;
	--xt-dark-border:    rgba(255, 255, 255, 0.08);

	/* ── Tipografía ── */
	--xt-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--xt-font-mono:      'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

	--xt-text-xs:        0.75rem;   /* 12px */
	--xt-text-sm:        0.8125rem; /* 13px */
	--xt-text-base:      1rem;      /* 16px */
	--xt-text-lg:        1.125rem;  /* 18px */
	--xt-text-xl:        1.25rem;   /* 20px */
	--xt-text-2xl:       1.5rem;    /* 24px */
	--xt-text-3xl:       1.875rem;  /* 30px */
	--xt-text-4xl:       2.25rem;   /* 36px */
	--xt-text-5xl:       3rem;      /* 48px */
	--xt-text-6xl:       3.75rem;   /* 60px */

	--xt-weight-light:   300;
	--xt-weight-normal:  400;
	--xt-weight-medium:  500;
	--xt-weight-semi:    600;
	--xt-weight-bold:    700;
	--xt-weight-extra:   800;
	--xt-weight-black:   900;

	--xt-leading-tight:  1.1;
	--xt-leading-snug:   1.35;
	--xt-leading-normal: 1.5;
	--xt-leading-relaxed: 1.65;
	--xt-leading-loose:  1.85;

	--xt-tracking-tight:  -0.03em;
	--xt-tracking-normal: 0;
	--xt-tracking-wide:   0.05em;
	--xt-tracking-wider:  0.1em;

	/* ── Espaciado ── */
	--xt-space-1:   4px;
	--xt-space-2:   8px;
	--xt-space-3:   12px;
	--xt-space-4:   16px;
	--xt-space-5:   20px;
	--xt-space-6:   24px;
	--xt-space-8:   32px;
	--xt-space-10:  40px;
	--xt-space-12:  48px;
	--xt-space-16:  64px;
	--xt-space-20:  80px;
	--xt-space-24:  96px;
	--xt-space-32: 128px;

	/* ── Border Radius ── */
	--xt-radius-xs:   4px;
	--xt-radius-sm:   6px;
	--xt-radius-md:   10px;
	--xt-radius-lg:   14px;
	--xt-radius-xl:   20px;
	--xt-radius-2xl:  24px;
	--xt-radius-3xl:  32px;
	--xt-radius-full: 9999px;

	/* ── Sombras ── */
	--xt-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
	--xt-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--xt-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--xt-shadow-lg:  0 10px 25px -5px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	--xt-shadow-xl:  0 20px 40px -10px rgba(0, 0, 0, 0.15);
	--xt-shadow-2xl: 0 40px 70px -20px rgba(0, 0, 0, 0.20);
	--xt-shadow-blue: 0 8px 24px -4px rgba(30, 142, 255, 0.35);

	/* ── Transiciones ── */
	--xt-ease:       cubic-bezier(0.4, 0, 0.2, 1);
	--xt-ease-out:   cubic-bezier(0, 0, 0.2, 1);
	--xt-ease-in:    cubic-bezier(0.4, 0, 1, 1);
	--xt-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
	--xt-duration-fast:   150ms;
	--xt-duration-normal: 200ms;
	--xt-duration-slow:   350ms;

	/* ── Z-index ── */
	--xt-z-below:    -1;
	--xt-z-base:      0;
	--xt-z-raised:   10;
	--xt-z-dropdown: 100;
	--xt-z-sticky:   200;
	--xt-z-modal:    300;
	--xt-z-overlay:  400;
	--xt-z-toast:    500;
	--xt-z-cursor:   600;

	/* ── Layout ── */
	--xt-container-sm:   640px;
	--xt-container-md:   768px;
	--xt-container-lg:  1024px;
	--xt-container-xl:  1280px;
	--xt-container-2xl: 1440px;
}

/* ── 2. Base / Reset ──────────────────────────────────────
   Mínimo: sólo lo que Hello Elementor no cubre.
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--xt-font-sans);
	font-size: var(--xt-text-base);
	font-weight: var(--xt-weight-normal);
	line-height: var(--xt-leading-relaxed);
	color: var(--xt-gray-700);
	background-color: var(--xt-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 3. Tipografía base ───────────────────────────────────
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--xt-font-sans);
	font-weight: var(--xt-weight-bold);
	line-height: var(--xt-leading-tight);
	letter-spacing: var(--xt-tracking-tight);
	color: var(--xt-gray-900);
	margin-top: 0;
}

h1 { font-size: clamp(2rem,   5vw,  3.5rem);  font-weight: var(--xt-weight-black); }
h2 { font-size: clamp(1.6rem, 4vw,  2.5rem);  font-weight: var(--xt-weight-extra); }
h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); }
h4 { font-size: var(--xt-text-xl); }
h5 { font-size: var(--xt-text-lg); }
h6 { font-size: var(--xt-text-base); font-weight: var(--xt-weight-semi); }

p {
	margin-top: 0;
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

/* ── 4. Links ─────────────────────────────────────────────
   ========================================================= */
a {
	color: var(--xt-blue);
	text-decoration: none;
	transition: color var(--xt-duration-normal) var(--xt-ease);
}

a:hover {
	color: var(--xt-blue-dark);
}

a:focus-visible {
	outline: 2px solid var(--xt-blue);
	outline-offset: 3px;
	border-radius: var(--xt-radius-xs);
}

/* ── 5. Media ─────────────────────────────────────────────
   ========================================================= */
img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── 6. Formularios base ──────────────────────────────────
   ========================================================= */
input,
textarea,
select,
button {
	font-family: var(--xt-font-sans);
	font-size: var(--xt-text-base);
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--xt-blue);
	outline-offset: 0;
}

/* ── 7. Scrollbar personalizado ───────────────────────────
   ========================================================= */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--xt-gray-100);
}

::-webkit-scrollbar-thumb {
	background: var(--xt-gray-300);
	border-radius: var(--xt-radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--xt-gray-400);
}

/* ── 8. Selection ─────────────────────────────────────────
   ========================================================= */
::selection {
	background-color: var(--xt-blue);
	color: var(--xt-white);
}

/* ── 9. Hello Elementor overrides ─────────────────────────
   Ajustes mínimos sobre el parent theme.
   ========================================================= */

/* Eliminar margin del body que pone Hello Elementor */
.elementor-page .entry-content {
	margin: 0;
}

/* Quitar padding del site-content en páginas Elementor */
body.elementor-page #content.site-content,
body.elementor-page #content > .site-inner {
	padding: 0;
}

/* Header / Footer ocultos cuando se usan los del Template Manager */
body.xtellaris-landing header.site-header,
body.xtellaris-landing footer.site-footer,
body.xtellaris-landing #masthead,
body.xtellaris-landing #colophon {
	display: none !important;
}

/* ── 10. Clases de utilidad ───────────────────────────────
   Ligeras helpers disponibles en Elementor CSS Classes.
   ========================================================= */

/* Visibilidad */
.xt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Animación de entrada (para usar con Elementor animations) */
@keyframes xt-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes xt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes xt-scale-in {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

.xt-animate-fade-up   { animation: xt-fade-up   0.5s var(--xt-ease-spring) both; }
.xt-animate-fade-in   { animation: xt-fade-in   0.4s var(--xt-ease) both; }
.xt-animate-scale-in  { animation: xt-scale-in  0.4s var(--xt-ease-spring) both; }

/* Gradientes de texto */
.xt-text-gradient {
	background: linear-gradient(135deg, var(--xt-blue) 0%, #7b5cff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Backdrop blur helper */
.xt-glass {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dark glass */
.xt-glass-dark {
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── 11. Block Editor Colors ──────────────────────────────
   Clases generadas por WordPress para los colores del theme.
   ========================================================= */
.has-xt-blue-color      { color: var(--xt-blue) !important; }
.has-xt-dark-color      { color: var(--xt-gray-900) !important; }
.has-xt-gray-color      { color: var(--xt-gray-500) !important; }
.has-xt-light-color     { color: var(--xt-gray-100) !important; }
.has-xt-white-color     { color: var(--xt-white) !important; }

.has-xt-blue-background-color   { background-color: var(--xt-blue) !important; }
.has-xt-dark-background-color   { background-color: var(--xt-gray-900) !important; }
.has-xt-gray-background-color   { background-color: var(--xt-gray-100) !important; }
.has-xt-light-background-color  { background-color: var(--xt-gray-50) !important; }
.has-xt-white-background-color  { background-color: var(--xt-white) !important; }