/*
  theme.css — Tony Ciencia · Minimal Premium Edition
  Monocromático, oscuro por defecto (Tesla / Apple): negro-grafito, superficies
  gris oscuro, texto blanco y grises, bordes de 1px casi invisibles, sin sombras.
  Regla maestra: menos elementos, más claridad.

  Oscuro es el default (:root). El claro solo aplica si el visitante lo eligió
  con el toggle (clase .light en <html>, ver Base.astro).
  Unlayered on purpose — it must always win over Base.astro's `@layer base`
  reset tokens regardless of source order (see the @layer comment there).
*/

:root,
:root.dark {
	/* Superficies */
	--color-bg: #0a0a0b;
	--color-bg-subtle: #111113;
	--color-surface: #17171a;
	--color-border: #2a2a2e;
	--color-border-subtle: #1d1d20;

	/* Texto */
	--color-text: #f5f5f7;
	--color-text-secondary: #a1a1a6;
	/* 6:1 sobre el fondo — WCAG AA para texto pequeño */
	--color-muted: #8e8e93;

	/* "Acento" = blanco. El color de marca es el contraste, no un tono. */
	--color-accent: #f5f5f7;
	--color-accent-hover: #ffffff;
	--color-accent-shadow: var(--color-muted);
	--color-accent-highlight: #ffffff;
	--color-accent-muted: rgba(245, 245, 247, 0.06);
	--color-accent-ring: rgba(62, 106, 225, 0.45);
	--color-on-accent: #0a0a0b;

	/* Único color funcional: foco y estados activos */
	--color-signal: #3e6ae1;

	--glass-bg: rgba(10, 10, 11, 0.78);
	--glass-border: var(--color-border-subtle);

	color-scheme: dark;
}

:root.light {
	--color-bg: #ffffff;
	--color-bg-subtle: #f5f5f7;
	--color-surface: #fafafa;
	--color-border: #d9d9de;
	--color-border-subtle: #ececf0;

	--color-text: #1d1d1f;
	--color-text-secondary: #515154;
	--color-muted: #6e6e73;

	--color-accent: #1d1d1f;
	--color-accent-hover: #000000;
	--color-accent-highlight: #000000;
	--color-accent-muted: rgba(29, 29, 31, 0.05);
	--color-on-accent: #ffffff;

	--glass-bg: rgba(255, 255, 255, 0.8);

	color-scheme: light;
}

:root {
	/* Acentos heredados (categorías, productos): neutralizados a gris a propósito */
	--color-neo-pink: var(--color-text-secondary);
	--color-neo-cyan: var(--color-text-secondary);
	--color-neo-purple: var(--color-text-secondary);
	--color-neo-orange: var(--color-text-secondary);

	/* Estados semánticos */
	--color-success: #30d158;
	--color-warning: #ffd60a;
	--color-error: #ff453a;
	--color-success-bg: rgba(48, 209, 88, 0.1);
	--color-error-bg: rgba(255, 69, 58, 0.1);

	/* Sin gradientes, sin texturas — tokens conservados por compatibilidad */
	--tc-gradient: var(--color-accent);
	--tc-ink-gradient: var(--color-text);
	--tc-gradient-text: none;
	--tc-gradient-subtle: var(--color-accent-muted);
	--tc-dots: none;
	--tc-dots-size: auto;
	--tc-noise: none;
	--tc-grid: none;

	/* Radios suaves y consistentes */
	--radius: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-pill: 999px;
	--radius-full: 999px;

	--border-width-thick: 1px;

	--wide-width: 1120px;
	--content-width: 680px;
	/* Columna única compacta para home y páginas de producto */
	--column-width: 760px;

	--transition-slow: 400ms cubic-bezier(0.2, 0, 0, 1);
	--ease-out: cubic-bezier(0.2, 0, 0, 1);

	/* Sombras: casi inexistentes */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: none;
	--shadow-2xl: none;
	--shadow-premium: none;

	--marquee-gap: 2rem;
	--marquee-speed: 40s;

	--spacing-32: 8rem;
	--spacing-40: 10rem;
}

html {
	text-rendering: optimizeLegibility;
}

body {
	background: var(--color-bg);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--color-signal);
	outline-offset: 3px;
}

:where(button, input, textarea, select) {
	font: inherit;
}

::selection {
	background: var(--color-text);
	color: var(--color-bg);
}

.tc-shell {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--spacing-6);
}

/* Columna única compacta */
.tc-column {
	max-width: var(--column-width);
	margin-inline: auto;
	padding-inline: var(--spacing-6);
}

/* Eyebrow: texto pequeño gris, sin caja ni punto */
.tc-eyebrow {
	display: inline-block;
	width: fit-content;
	color: var(--color-muted);
	font-size: var(--font-size-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Segunda línea en gris — jerarquía por contraste, no por color */
.tc-gradient-text {
	color: var(--color-muted);
}

.tc-card {
	position: relative;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	background: var(--color-bg-subtle);
	overflow: hidden;
	transition: border-color var(--transition-fast, 160ms ease), background var(--transition-fast, 160ms ease);
}

.tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font-size: var(--font-size-sm);
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.tc-btn:active {
	opacity: 0.8;
}

.tc-btn--primary {
	background: var(--color-accent);
	color: var(--color-on-accent) !important;
}

.tc-btn--primary:hover {
	background: var(--color-accent-hover);
}

.tc-btn--secondary {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text) !important;
}

.tc-btn--secondary:hover {
	border-color: var(--color-text-secondary);
}

.tc-section {
	padding-block: clamp(4.5rem, 10vw, 8rem);
}

.tc-section-title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.04em;
}

.tc-section-copy {
	max-width: 60ch;
	color: var(--color-text-secondary);
	font-size: var(--font-size-md);
	line-height: 1.6;
}

@media (max-width: 640px) {
	.tc-shell,
	.tc-column {
		padding-inline: var(--spacing-4);
	}

	.tc-btn {
		width: 100%;
	}
}

/* ════════════════════════════════════════════════════════════════
   TYPE SCALE — fuente de verdad única
   Base.astro (@layer base) ya no redeclara --font-size-xs..3xl ni
   --tracking-tight/--leading-tight. Si necesitas tocar el type scale, es acá.
   ════════════════════════════════════════════════════════════════ */
:root {
	--font-size-2xs: clamp(0.69rem, 0.67rem + 0.10vw, 0.74rem);
	--font-size-xs:  clamp(0.78rem, 0.75rem + 0.14vw, 0.84rem);
	--font-size-sm:  clamp(0.875rem, 0.85rem + 0.16vw, 0.94rem);
	--font-size-base: clamp(1rem, 0.97rem + 0.22vw, 1.0625rem);
	--font-size-md:  clamp(1.0625rem, 1.03rem + 0.24vw, 1.1875rem);
	--font-size-lg:  clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
	--font-size-xl:  clamp(1.5rem, 1.32rem + 0.9vw, 1.95rem);
	--font-size-2xl: clamp(1.9rem, 1.55rem + 1.7vw, 2.7rem);
	--font-size-3xl: clamp(2.4rem, 1.8rem + 3vw, 3.75rem);

	--leading-tight: 1.06;
	--leading-snug: 1.3;
	--leading-prose: 1.7;
	--tracking-tight: -0.025em;
	--tracking-tighter: -0.04em;

	--font-stack: var(--font-sans, "Inter"), -apple-system, BlinkMacSystemFont, "SF Pro Text",
		"Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
	--font-heading-stack: var(--font-sans, "Inter"), -apple-system, BlinkMacSystemFont,
		"SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

body {
	font-family: var(--font-stack);
	font-weight: 400;
	font-size: var(--font-size-base);
	line-height: var(--leading-prose);
	letter-spacing: -0.011em;
	font-feature-settings: "cv11", "ss01", "calt", "kern";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading-stack);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	text-transform: none;
	text-wrap: balance;
	color: var(--color-text);
}
h1 { font-size: var(--font-size-3xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--font-size-2xl); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { text-wrap: pretty; }

/* ─── Lectura de artículo (scoped a <article>) ─── */
article {
	--measure: 42rem;
}
article p,
article li {
	font-size: var(--font-size-md);
	line-height: 1.75;
	color: var(--color-text);
}
article > p,
article > h2,
article > h3,
article > ul,
article > ol,
article > blockquote,
article > figure {
	max-width: var(--measure);
}
article p { margin-block: 0 1.15em; }
article h2 { margin-block: 1.9em 0.55em; }
article h3 { margin-block: 1.4em 0.4em; }
article a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-muted);
	transition: text-decoration-color 160ms ease;
}
article a:hover {
	text-decoration-color: var(--color-text);
}
article blockquote {
	margin-inline: 0;
	padding-inline-start: 1.1rem;
	border-inline-start: 2px solid var(--color-border);
	color: var(--color-text-secondary);
	font-style: normal;
}

article img,
article :where(figure) img {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
}

article pre {
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
}

.tc-stat, [class*="stat"] { font-variant-numeric: tabular-nums; }

/* ── Efectos (Base.astro los activa; sin JS o con "reducir movimiento" no hacen nada) ── */

/* Aparición al hacer scroll: [data-reveal] recibe .reveal y luego .is-visible */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Luz que sigue al cursor en tarjetas y filas */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.tc-card,
	.line-item,
	.svc,
	.spotlight {
		background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--color-text) 6%, transparent), transparent 70%);
	}
}

/* Mascota de Merkhify: aparece y flota al pasar por el servicio (en táctil, al entrar en pantalla) */
.merkhify-mascot {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	transform: translateY(14px) scale(0.85) rotate(-6deg);
	transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
	filter: drop-shadow(0 18px 40px rgba(68, 177, 255, 0.35));
}

:is(a, article, li):is(:hover, :focus-within) > .merkhify-mascot,
:is(a, article, li):is(:hover, :focus-within) .merkhify-mascot {
	opacity: 1;
	transform: none;
	animation: merkhify-float 3.2s ease-in-out 320ms infinite;
}

/* En pantallas táctiles no hay "pasar por encima": la mascota aparece al entrar en pantalla. */
@media (hover: none) {
	.merkhify-mascot {
		opacity: 1;
		transform: none;
		animation: merkhify-float 3.2s ease-in-out 320ms infinite;
	}
}

@keyframes merkhify-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.merkhify-mascot { transition: none; animation: none !important; }
}