/*
Theme Name:   Marketing Divertido 2026
Theme URI:    https://www.marketingdivertido.es/
Description:  Tema hijo de Hello Elementor para la web 2026 de Marketing Divertido. Marca, fuentes y la ficha de casos de éxito.
Author:       Marketing Divertido
Author URI:   https://www.marketingdivertido.es/
Template:     hello-elementor
Version:      1.0.2
Requires PHP: 7.4
Text Domain:  md-2026
*/

:root {
	--md-gris: #3f3d37;
	--md-gris-medio: #6f6c64;
	--md-gris-suave: #8a877f;
	--md-rosa: #e34c7b;
	--md-rosa-hover: #c73763;
	--md-azul: #8dccc4;
	--md-azul-texto: #4a8a81;
	--md-amarillo: #e3e35c;
	--md-linea: #f0eeea;
	--md-fondo-suave: #fafaf8;
	--md-blanco: #ffffff;
	--md-fuente-titulos: "Chloe", "Josefin Sans", "Montserrat", sans-serif;
	--md-fuente-texto: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--md-fuente-mano: "Caveat", cursive;
}

body {
	color: var(--md-gris);
	font-family: var(--md-fuente-texto);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--md-rosa); }
a:hover, a:focus { color: var(--md-rosa-hover); }

::selection { background: var(--md-amarillo); color: var(--md-gris); }

:focus-visible {
	outline: 2px solid var(--md-rosa);
	outline-offset: 3px;
}

/* Subrayado de rotulador amarillo: <span class="md-subrayado">palabra</span> */
.md-subrayado {
	background: linear-gradient(transparent 58%, rgba(227, 227, 92, .6) 58%, rgba(227, 227, 92, .6) 94%, transparent 94%);
	padding: 0 .12em;
}

/* Nota manuscrita: añadir la clase md-nota al widget */
.md-nota,
.md-nota .elementor-heading-title {
	font-family: var(--md-fuente-mano);
	color: var(--md-rosa);
	transform: rotate(-2deg);
}

/* Píldora: añadir la clase md-chip al widget */
.md-chip .elementor-heading-title {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--md-azul);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
}

/* Fotos del equipo: blanco y negro, a color al pasar el cursor.
   En pantallas táctiles (sin cursor) se ven siempre a color. */
.md-foto-equipo img {
	filter: grayscale(100%);
	transition: filter .5s ease;
}
.md-foto-equipo:hover img,
.md-foto-equipo:focus-within img {
	filter: grayscale(0);
}
@media (hover: none) {
	.md-foto-equipo img { filter: none; }
}

/* Cabecera fija con desenfoque */
.md-cabecera {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}