/*
Theme Name: Soleil Child Theme
Theme URI: https://soleil.axiomthemes.com/
Description: Soleil is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: AxiomThemes
Author URI: https://axiomthemes.com/
Version: 1.25.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: soleil
Template: soleil
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* =============================================================
   SISTEMA VISUAL TALLERES FALCÓN
   -------------------------------------------------------------
   Los colores NO se escriben aquí. Se leen de las variables que
   el tema genera desde el esquema activo (scheme_storage), de
   modo que si el esquema cambia, estos componentes lo siguen
   solos. La tipografía viene de Theme Options (Space Grotesk /
   DM Sans), no de un @import propio.
   ============================================================= */

:root {
	/* Puentes semánticos hacia el esquema del tema */
	--tf-accent:      var(--theme-color-text_link2);
	--tf-accent-dark: var(--theme-color-text_hover2);
	--tf-anchor:      var(--theme-color-text_link);
	--tf-anchor-dark: var(--theme-color-text_hover);
	--tf-ocean:       var(--theme-color-text_link3);
	--tf-ink:         var(--theme-color-text_dark);
	--tf-surface:     var(--theme-color-bg_color);
	--tf-panel:       var(--theme-color-alter_bg_color);
	--tf-rule:        var(--theme-color-bd_color);

	/* Escala de espaciado */
	--tf-space-1: 8px;
	--tf-space-2: 16px;
	--tf-space-3: 24px;
	--tf-space-4: 40px;
	--tf-space-5: 64px;
	--tf-space-6: 96px;
	--tf-space-7: 128px;

	/* Geometría y movimiento */
	--tf-radius: 2px;
	--tf-ease: cubic-bezier(.65, 0, .35, 1);
	--tf-dur-micro: .2s;
	--tf-dur-enter: .4s;
	--tf-dur-story: 1s;
}

/* -------------------------------------------------------------
   Eyebrow — etiqueta de sección
   ------------------------------------------------------------- */
.tf-eyebrow,
.tf-eyebrow p {
	margin: 0 0 var(--tf-space-1);
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tf-ocean);
}

/* Sobre fondos oscuros el eyebrow pasa a Aqua, que ahí sí contrasta */
.scheme_dark .tf-eyebrow,
.scheme_dark .tf-eyebrow p,
.tf-on-dark .tf-eyebrow,
.tf-on-dark .tf-eyebrow p {
	color: var(--tf-accent);
}

/* -------------------------------------------------------------
   Botones Falcón — .tf-btn
   Se aplican por clase, no globalmente, para no alterar los
   botones de WooCommerce ni los formularios existentes.
   ------------------------------------------------------------- */
.tf-btn .elementor-button,
.tf-btn .sc_button,
a.tf-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--tf-space-2) var(--tf-space-4);
	border-radius: var(--tf-radius);
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--tf-dur-micro) var(--tf-ease),
	            border-color var(--tf-dur-micro) var(--tf-ease),
	            transform var(--tf-dur-micro) var(--tf-ease);
}

/* Relleno deslizante desde la izquierda */
.tf-btn .elementor-button::before,
.tf-btn .sc_button::before,
a.tf-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--tf-dur-enter) var(--tf-ease);
}

.tf-btn .elementor-button:hover,
.tf-btn .sc_button:hover,
a.tf-btn:hover {
	transform: translateY(-1px);
}

.tf-btn:hover .elementor-button::before,
.tf-btn .sc_button:hover::before,
a.tf-btn:hover::before {
	transform: scaleX(1);
}

/* Primario — Aqua sólido con texto Ink (7,1:1) */
.tf-btn-primary .elementor-button,
.tf-btn-primary .sc_button,
a.tf-btn-primary {
	background-color: var(--tf-accent);
	border-color: var(--tf-accent);
	color: var(--tf-ink);
}

.tf-btn-primary .elementor-button::before,
.tf-btn-primary .sc_button::before,
a.tf-btn-primary::before {
	background-color: var(--tf-ink);
}

.tf-btn-primary .elementor-button:hover,
.tf-btn-primary .sc_button:hover,
a.tf-btn-primary:hover {
	color: var(--tf-accent);
	border-color: var(--tf-ink);
}

/* Secundario — contorno sobre fondo oscuro */
.tf-btn-secondary .elementor-button,
.tf-btn-secondary .sc_button,
a.tf-btn-secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.tf-btn-secondary .elementor-button::before,
.tf-btn-secondary .sc_button::before,
a.tf-btn-secondary::before {
	background-color: var(--tf-accent);
}

.tf-btn-secondary .elementor-button:hover,
.tf-btn-secondary .sc_button:hover,
a.tf-btn-secondary:hover {
	color: var(--tf-ink);
	border-color: var(--tf-accent);
}

/* -------------------------------------------------------------
   Regla técnica vertical — guía de composición
   ------------------------------------------------------------- */
.tf-rule-v {
	position: relative;
	padding-left: var(--tf-space-3);
}

.tf-rule-v::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: var(--tf-anchor);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .9s var(--tf-ease);
}

.tf-rule-v.tf-in::before {
	transform: scaleY(1);
}

/* -------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--tf-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tf-btn .elementor-button,
	.tf-btn .elementor-button::before,
	.tf-btn .sc_button,
	.tf-btn .sc_button::before,
	a.tf-btn,
	a.tf-btn::before,
	.tf-rule-v::before {
		transition: none;
	}

	.tf-rule-v::before {
		transform: scaleY(1);
	}
}