/* =========================================================================
   Telecomatik — CSS del tema
   Variables = theme.json. Aquí: refinamientos, estilos de bloques propios,
   compatibilidad con WooCommerce/TutorLMS, y micro-interacciones.
   ========================================================================= */

:root {
	--tk-navy:        #0A1628;
	--tk-navy-deep:   #050D1A;
	--tk-navy-soft:   #12243F;
	--tk-cyan:        #1CE4FF;
	--tk-cyan-soft:   #7EEEFF;
	--tk-blue:        #2A8FFF;
	--tk-blue-deep:   #1262C9;
	--tk-white:       #F4F8FF;
	--tk-gray-100:    #E4ECF7;
	--tk-gray-300:    #A8B8CC;
	--tk-gray-500:    #5A6B82;
	--tk-gray-700:    #2E3D54;
	--tk-radius:      14px;
	--tk-radius-lg:   20px;
	--tk-ease:        cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; }

body {
	background: var(--tk-navy);
	color: var(--tk-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--tk-cyan); color: var(--tk-navy-deep); }

a { transition: color .18s var(--tk-ease); }

/* ---------- Site header ---------- */
.tk-site-header {
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	background: rgba(5, 13, 26, 0.78) !important;
	border-bottom: 1px solid rgba(28, 228, 255, 0.08);
	z-index: 100;
}
.tk-site-header .wp-block-site-title a { color: var(--tk-white); text-decoration: none; }
.tk-site-header .wp-block-navigation a {
	color: var(--tk-gray-100) !important;
	font-weight: 500;
	position: relative;
}
.tk-site-header .wp-block-navigation a:hover { color: var(--tk-cyan) !important; }

/* ---------- Site footer ---------- */
.tk-site-footer { border-top: 1px solid rgba(28, 228, 255, 0.08); }
.tk-footer-list a {
	color: var(--tk-gray-300);
	text-decoration: none;
}
.tk-footer-list a:hover { color: var(--tk-cyan); }

/* ---------- Buttons ---------- */
/* Botón primario: gradient explícito en CSS para que NO dependa de theme.json,
   que en algunas versiones de WP no aplica el gradient en color.gradient. */
.wp-block-button:not(.is-style-ghost):not(.is-style-cyan-outline) .wp-block-button__link {
	background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-blue) 100%) !important;
	color: var(--tk-navy-deep) !important;
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	font-weight: 600;
	box-shadow: 0 6px 22px rgba(28, 228, 255, 0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
	transition: transform .18s var(--tk-ease), box-shadow .18s var(--tk-ease), filter .18s var(--tk-ease);
}
.wp-block-button:not(.is-style-ghost):not(.is-style-cyan-outline) .wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	box-shadow: 0 10px 28px rgba(28, 228, 255, 0.32), inset 0 0 0 1px rgba(255,255,255,0.14);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--tk-white) !important;
	box-shadow: inset 0 0 0 1.5px rgba(168, 184, 204, 0.35);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--tk-cyan);
	color: var(--tk-cyan) !important;
}
.wp-block-button.is-style-cyan-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--tk-cyan) !important;
	box-shadow: inset 0 0 0 1.5px var(--tk-cyan);
}

/* ---------- Service cards ---------- */
.wp-block-group.is-style-service-card {
	transition: transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), border-color .22s var(--tk-ease);
	position: relative;
	overflow: hidden;
}
.wp-block-group.is-style-service-card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(28,228,255,0.10), transparent 50%);
	opacity: 0;
	transition: opacity .35s var(--tk-ease);
	pointer-events: none;
}
.wp-block-group.is-style-service-card:hover {
	transform: translateY(-4px);
	border-color: rgba(28, 228, 255, 0.45) !important;
	box-shadow: 0 22px 50px rgba(5,13,26,0.45), 0 0 0 1px rgba(28, 228, 255, 0.18);
}
.wp-block-group.is-style-service-card:hover::before { opacity: 1; }

/* ---------- Glass card ---------- */
.wp-block-group.is-style-glass-card {
	background: rgba(18, 36, 63, 0.55) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(28, 228, 255, 0.12) !important;
	border-radius: var(--tk-radius-lg) !important;
}

/* ---------- Separator glow ---------- */
.wp-block-separator.is-style-glow {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(28,228,255,0.5) 50%, transparent 100%) !important;
	box-shadow: 0 0 16px rgba(28, 228, 255, 0.35);
}

/* ---------- Heading gradient style ---------- */
.wp-block-heading.is-style-gradient {
	background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-blue) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- WooCommerce overrides ---------- */
.tk-wc-main { color: var(--tk-white); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	color: var(--tk-white);
	font-family: 'Space Grotesk', system-ui, sans-serif !important;
	font-weight: 600;
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
	color: var(--tk-cyan) !important;
	font-weight: 700;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-blue) 100%) !important;
	color: var(--tk-navy-deep) !important;
	border-radius: 999px !important;
	padding: .8rem 1.5rem !important;
	font-weight: 600 !important;
	border: 0;
	transition: transform .18s var(--tk-ease), box-shadow .18s var(--tk-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(28,228,255,0.32);
}
.woocommerce ul.products li.product {
	background: var(--tk-navy-soft);
	border: 1px solid rgba(28,228,255,0.12);
	border-radius: var(--tk-radius);
	padding: 1.25rem !important;
	transition: transform .22s var(--tk-ease), border-color .22s var(--tk-ease);
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	border-color: rgba(28,228,255,0.4);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: var(--tk-navy-soft) !important;
	color: var(--tk-white) !important;
	border: 1px solid rgba(28,228,255,0.18) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tk-cyan) !important;
	color: var(--tk-navy-deep) !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--tk-navy-soft) !important;
	color: var(--tk-white) !important;
	border-top-color: var(--tk-cyan) !important;
}

/* ---------- Tutor LMS overrides ---------- */
.tutor-course-card,
.tutor-card {
	background: var(--tk-navy-soft) !important;
	border: 1px solid rgba(28, 228, 255, 0.12) !important;
	border-radius: var(--tk-radius) !important;
	color: var(--tk-white) !important;
}
.tutor-course-card a,
.tutor-card a { color: var(--tk-white); }
.tutor-btn,
.tutor-btn-primary {
	background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-blue) 100%) !important;
	color: var(--tk-navy-deep) !important;
	border: 0 !important;
	border-radius: 999px !important;
}

/* ---------- Focus visible ---------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--tk-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Responsive ajustes ---------- */
@media (max-width: 768px) {
	.tk-site-header .wp-block-navigation { font-size: 1rem; }
	.wp-block-cover { min-height: 480px !important; }
}

/* =========================================================================
   Clases utilitarias del tema (usadas en patrones por clase, no inline)
   ========================================================================= */

/* Padding consistente entre secciones */
.tk-section {
	padding-block: clamp(4rem, 8vw, 7rem) !important;
	padding-inline: clamp(1rem, 4vw, 2rem) !important;
}
.tk-section-heading { margin-bottom: 3rem; }

/* Eyebrow text (etiquetita de sección en cyan, uppercase) */
.tk-eyebrow {
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	margin: 0 0 1rem !important;
}

/* Títulos y leads de sección */
.tk-section-title {
	font-size: clamp(2rem, 4vw + 1rem, 3.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	margin: 0 0 1rem !important;
}
.tk-section-lead {
	color: var(--tk-gray-300) !important;
	font-size: 1.1rem !important;
	line-height: 1.6;
	max-width: 60ch;
	margin-inline: auto;
}
.tk-section-divider {
	border: 0 !important;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(28,228,255,0.45) 50%, transparent 100%) !important;
	box-shadow: 0 0 16px rgba(28,228,255,0.3);
	margin-block: clamp(2rem, 5vw, 4rem) !important;
}

/* Gradient inline en spans */
.tk-grad {
	color: var(--tk-cyan); /* fallback navegadores sin background-clip */
	background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-blue) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
}
.tk-highlight { color: var(--tk-cyan); }
.tk-price     { color: var(--tk-cyan); font-weight: 700; }

/* ---------- Hero ---------- */
.tk-hero {
	min-height: 620px;
	padding-block: clamp(5rem, 12vw, 9rem) !important;
}
.tk-hero-title {
	font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.05 !important;
	margin-block: 1.25rem 1.5rem !important;
}
.tk-hero-lead {
	color: #cfd9e6 !important;
	font-size: clamp(1.05rem, 1.3vw + 0.5rem, 1.35rem) !important;
	line-height: 1.6 !important;
	margin-bottom: 2.5rem !important;
	max-width: 60ch;
	margin-inline: auto;
}
.tk-hero-tags p {
	color: var(--tk-gray-500) !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
}
.tk-hero-tags { gap: 2rem; }

/* ---------- Service card ---------- */
.tk-service-card {
	background: var(--tk-navy-soft);
	border: 1px solid rgba(28, 228, 255, 0.18);
	border-radius: 16px;
	padding: 2rem !important;
	transition: transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), border-color .22s var(--tk-ease);
	position: relative;
	overflow: hidden;
	height: 100%;
}
.tk-service-card:hover {
	transform: translateY(-4px);
	border-color: rgba(28, 228, 255, 0.45);
	box-shadow: 0 22px 50px rgba(5,13,26,0.45), 0 0 0 1px rgba(28, 228, 255, 0.18);
}
.tk-service-icon {
	font-size: 2.25rem;
	line-height: 1;
	margin-bottom: 1rem;
}
.tk-service-title {
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.75rem !important;
}
.tk-service-desc {
	color: #cfd9e6 !important;
	margin: 0 0 1rem !important;
	line-height: 1.6;
}
.tk-service-features {
	color: var(--tk-gray-300) !important;
	font-size: 0.95rem !important;
	margin: 0 0 1rem !important;
	padding-left: 1.2rem;
	line-height: 1.7;
}
.tk-service-cta {
	margin: 1rem 0 0 !important;
}
.tk-service-cta a {
	color: var(--tk-cyan) !important;
	font-weight: 600;
	text-decoration: none;
}
.tk-service-cta a:hover { color: var(--tk-cyan-soft) !important; }

/* ---------- Step card (proceso) ---------- */
.tk-step-card {
	padding: 0 !important;
}
.tk-step-number {
	color: var(--tk-cyan);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
	font-family: 'Space Grotesk', system-ui, sans-serif;
}
.tk-step-title {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.5rem !important;
}
.tk-step-desc {
	color: var(--tk-gray-300) !important;
	margin: 0 !important;
}

/* ---------- CTA Consultoría ---------- */
.tk-cta-cover {
	padding-block: clamp(4rem, 8vw, 7rem) !important;
}
.tk-cta-title {
	font-size: clamp(2rem, 4vw + 1rem, 3.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
}
.tk-cta-lead {
	color: #cfd9e6 !important;
	font-size: 1.15rem !important;
	margin: 1rem auto 2rem !important;
	max-width: 60ch;
}

/* ---------- Bio (Sobre mí) ---------- */
.tk-bio-photo img { border-radius: 20px !important; }
.tk-bio-note {
	color: var(--tk-gray-500) !important;
	font-size: 0.85rem !important;
	margin-top: 0.75rem !important;
}
.tk-bio-title {
	font-size: clamp(2rem, 4vw + 1rem, 3.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	margin: 0.75rem 0 1.25rem !important;
}
.tk-bio-text {
	color: #cfd9e6 !important;
	font-size: 1.1rem !important;
	line-height: 1.65;
}

/* ---------- Stat (números bio) ---------- */
.tk-stat-number {
	color: var(--tk-cyan);
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
	font-weight: 700;
	line-height: 1;
	font-family: 'Space Grotesk', system-ui, sans-serif;
}
.tk-stat-label {
	color: var(--tk-gray-300) !important;
	margin: 0 !important;
}

/* ---------- Footer ---------- */
.tk-site-footer {
	padding-block: 4rem 2rem !important;
	padding-inline: clamp(1rem, 4vw, 2rem) !important;
	border-top: 1px solid rgba(28, 228, 255, 0.08);
}
.tk-footer-tagline {
	color: var(--tk-gray-300) !important;
	margin: 0.5rem 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.6;
}
.tk-footer-heading {
	color: var(--tk-cyan) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem !important;
}
.tk-footer-list { line-height: 2; margin: 0 !important; padding: 0; }
.tk-footer-list a { color: var(--tk-gray-300); text-decoration: none; }
.tk-footer-list a:hover { color: var(--tk-cyan); }
.tk-footer-divider {
	border: 0 !important;
	height: 1px;
	background: rgba(168,184,204,0.12) !important;
	margin-block: 2rem 1.5rem !important;
}
.tk-footer-copy {
	color: var(--tk-gray-500) !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
}