/* Hoja de estilos de diseño claro

Tabla de contenido

* Variables globales
* Botón para cambiar estilo
* General
* Logo
* Página Header
* Si la clase "tt-section-bg-on" está activada en el elemento padre para modo claro
* Clase tt-Ggrid categorías del nav
* Acordeón horizontal
*/


/* -------------------- *
 * Variables globales
/* -------------------- */
body.tt-lightmode-on {
	/* General */
	--tt-dark-color: #ec12af; /* Color letras menús deslizantes */
	--tt-light-color: #d90f0f; /* en modo color claro circulo botón arriba página. */
	--tt-bg-color: #ffffff; /* fondo página color modo claro, tanto para el nav y la página */
	--tt-text-color: #212121; /* color de texto modo oscuro para el nav y la página */
	--tt-text-muted-color: #666666; /*variable para color animación de texto. */
	--tt-border-color: #666666; /* color separación linea del footer. */
	--tt-linear-text-bg-color: rgb(0, 0, 0.2); /* color texto cabecera parrafos. */
	/* Color Seguidor puntero, ball */
	--tt-ball-border-color: #beddfa; /* Color borde bola cursor. */
}


/* ------------------------------------------------------------- *
 * Botón para cambiar estilo de tema claro/oscuro
/* ------------------------------------------------------------- */
.tt-style-switch {
	position: relative;
	margin-left: 40px;
}
@media (max-width: 1024px) {
	.tt-style-switch {
		margin-left: 0;
		margin-right: 20px;
	}
}

.tt-style-switch-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: rgb(179 179 179 / 35%); /* Fondo botón modo claro */
	line-height: 1;
	font-size: 15px;
	cursor: pointer;
	border-radius: 100%;
	transition: background-color .3s, color .3s;
}


.tt-stsw-dark {
	display: none;
}
body.tt-lightmode-on .tt-stsw-dark {
	display: block;
}


body.tt-lightmode-on .tt-stsw-light {
	display: none;
}


@media (max-width: 1024px) {
	#tt-header.tt-header-alter .tt-style-switch {
		margin-left: 0;
		margin-right: 25px;
	}
}


.tt-text-reveal > span {
	-webkit-background-clip: text;
	background-clip: text;
	background-repeat: no-repeat;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 100%;
	will-change: background-size;
}



/* ------------ *
 * General
/* ------------ */

/* Selection */
body.tt-lightmode-on ::selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color);
}
body.tt-lightmode-on ::-moz-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Firefox */
}
body.tt-lightmode-on ::-webkit-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Safari */
}


/* ----------- *
 * Logo
/* ----------- */

body.tt-lightmode-on .tt-logo-light {
	display: none;
}
body.tt-lightmode-on .tt-logo-dark {
	display: block;
}


/* ---------------------- *
 * Página header
/* ---------------------- */

/* Si la imagen de fondo del encabezado de la página es clara (y solo si existe) -------- */
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) {
	color: var(--tt-light-color);
}

/* Hacer el logo dark */
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light {
	display: none;
}
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark {
	display: block;
}

/* Hacer los elementos del menú oscuros (solo para pc) ----- */
@media (min-width: 1025px) {
	body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a, 
	body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > .tt-submenu-trigger > a {
		color: var(--tt-light-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-submenu-master > .tt-submenu-trigger > a::after {
		background-color: var(--tt-light-color);
	}
}

/* Cambiar el color del texto del botón que activa el menú móvil */
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text {
	color: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before, 
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after {
	background-color: var(--tt-light-color);
}

/* Hacer los botones del encabezado oscuros */
@media (min-width: 1025px) { 
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary {
		background-color: var(--tt-light-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary > *, 
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary > *::after {
		color: var(--tt-dark-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-light-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline > *, 
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline > *::after {
		color: var(--tt-light-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link > *, 
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link > *::after {
		color: var(--tt-light-color);
	}
	body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-line {
		background-color: var(--tt-light-color);
	}
}

/* Hacer los elementos del encabezado de la página oscuros */
body.tt-lightmode-on.ph-bg-is-light-on #page-header,
body.tt-lightmode-on.ph-bg-is-light-on #page-header a {
	color: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-scroll-down text {
	fill: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-scroll-down .tt-scrd-icon {
	color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .ph-share-trigger,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .ph-share-buttons > ul > li a {
	color: var(--tt-light-color);
}

/* Hacer los botones del encabezado de la página oscuros */
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary {
	background-color: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary > *, 
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary > *::after {
	color: var(--tt-dark-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline {
	box-shadow: inset 0 0 0 2px var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline > *, 
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline > *::after {
	color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner {
	color: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:hover, 
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:focus {
	color: #FFF;
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-link > *, 
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-link > *::after {
	color: var(--tt-light-color);
}
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-line {
	background-color: var(--tt-light-color);
}



/* -------------------------------------------------------------------------------- *
 * Si la clase "tt-section-bg-on" está activada en el elemento padre MODO CLARO.
/* -------------------------------------------------------------------------------- */

body.tt-lightmode-on .tt-section-bg-on {
	color: var(--tt-dark-color);
}

body.tt-lightmode-on .tt-text-reveal > span {
    color: var(--tt-dark-color);
    -webkit-text-fill-color: rgba(33, 33, 33, 0.2);
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 100%;
    will-change: background-size;
}

/* Botones ------ */
body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary {
	background-color: var(--tt-dark-color);
}
body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary > *, 
body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary > *::after {
	color: var(--tt-light-color);
}

body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline {
	box-shadow: inset 0 0 0 2px var(--tt-dark-color);
}
body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline > *, 
body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline > *::after {
	color: var(--tt-dark-color);
}


/* ------------------------------------------------------------- *
 * tt-Ggrid
/* ------------------------------------------------------------- */

/* tt-Ggrid categorias fondo color del nav ------ */
body.tt-lightmode-on .ttgr-cat-nav {
	background-color: transparent;
	/*background-color: rgb(229, 227, 220, 0.3);*/
}


/* ------------------------------------------------------------- *
 *  Acordeón Horizontal
/* ------------------------------------------------------------- */
/* Horizontal acordeón alternativa (sin efecto en pantallas pequeñas) */
@media (min-width: 1025px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child.inactive {
		background-color: var(--tt-bg-color);
		color: var(--tt-text-color);
		border-color: var(--tt-border-color);
	}
}

/* Horizontal acordeón (efectos solo con hover alternativo!)  para pantallas pequeñas*/
@media (max-width: 1024px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *:after {
		color: var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item-count::before {
		opacity: .6;
	}
}