/* ==========================================================================
   Skole + Elementor
   1) Valores de respaldo de los colores globales de Elementor (si el kit
      aún no tiene los colores Skole, los widgets igual se ven bien).
   2) Clases CSS de marca. Se aplican en Elementor › Avanzado › Clases CSS.
   ========================================================================== */

:root {
	--e-global-color-primary: #8c2470;
	--e-global-color-secondary: #1c2566;
	--e-global-color-text: #1f2250;
	--e-global-color-accent: #e4ef5c;
	--e-global-color-skplum: #8c2470;
	--e-global-color-sknavy: #1c2566;
	--e-global-color-skblue: #3854a0;
	--e-global-color-skviol: #6b2fa0;
	--e-global-color-skmag: #c02ba0;
	--e-global-color-sklime: #e4ef5c;
	--e-global-color-skpeach: #fcd4ae;
	--e-global-color-skmist: #f4f0f9;
	--e-global-color-sktext: #454872;
}

/* El tema no añade márgenes extra al contenido hecho con Elementor */
.elementor-page .site-main { padding: 0; }
.elementor .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* skole-pinceladas — trazos de pintura a los lados de un contenedor
   (usa imágenes de fondo; si el cliente quiere otra imagen de fondo, quita la clase) */
.e-con.skole-pinceladas {
	background-image: url("../img/brand/brush-izq.svg"), url("../img/brand/brush-der.svg") !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: left top, right top !important;
	background-size: clamp(40px, 9vw, 150px) 100%, clamp(40px, 9vw, 150px) 100% !important;
}

/* skole-pildora — título en píldora con doble aro (leyenda principal) */
.skole-pildora .elementor-heading-title {
	display: inline-block; padding: .35em .9em .3em; border-radius: 26px;
	background: var(--e-global-color-skplum);
	box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--e-global-color-skviol);
	max-width: 17ch;
}

/* skole-subrayado — teléfono grande subrayado */
.skole-subrayado .elementor-heading-title {
	display: inline-block; padding-bottom: .12em;
	background: linear-gradient(var(--e-global-color-skviol), var(--e-global-color-skviol)) bottom / 100% 4px no-repeat;
}
.skole-subrayado .elementor-heading-title a { color: inherit; }

/* skole-barra — título de sección con barra ciruela debajo */
.skole-barra .elementor-heading-title::after {
	content: ""; display: block; width: 72px; height: 6px; margin-top: .3em;
	background: var(--e-global-color-skplum); border-radius: 3px;
}
.skole-barra.elementor-widget-heading[style*="center"] .elementor-heading-title::after,
.elementor-widget-heading.skole-barra-centro .elementor-heading-title::after { margin-inline: auto; }

/* skole-valores — recuadro durazno con borde magenta */
.skole-valores .elementor-heading-title {
	display: inline-flex; flex-direction: column; align-items: center;
	background: var(--e-global-color-skpeach); border: 3px solid var(--e-global-color-skmag);
	border-radius: 14px; padding: .7rem 1.4rem;
}

/* skole-foto-hero — foto con recuadro de valores encimado */
.skole-foto-hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 40%; }
@media (max-width: 767px) { .skole-foto-hero img { aspect-ratio: 4 / 3; } }

/* skole-etiqueta — etiqueta tipo píldora (lima) */
.skole-etiqueta .elementor-heading-title {
	display: inline-flex; align-items: center; gap: .5em;
	background: var(--e-global-color-sklime); color: var(--e-global-color-sknavy);
	padding: .35em .9em; border-radius: 999px;
}

/* skole-desliza — fila con desplazamiento horizontal (tarjetas, fotos) */
.e-con.skole-desliza { min-width: 0; max-width: 100%; }
.skole-desliza > .e-con-inner, .e-con.skole-desliza:not(:has(> .e-con-inner)) {
	flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: thin; scrollbar-color: var(--e-global-color-sklime) transparent;
	padding-bottom: 12px;
}
.skole-desliza > .e-con-inner > .elementor-element,
.e-con.skole-desliza > .elementor-element { flex-shrink: 0; scroll-snap-align: start; }

/* skole-tarjeta — tarjeta de mensaje (widget Caja de imagen) */
.skole-tarjeta .elementor-image-box-wrapper {
	background: #fff; border-radius: 18px; overflow: hidden; height: 100%;
	display: flex; flex-direction: column; text-align: left;
}
.skole-tarjeta .elementor-image-box-img { margin: 0 !important; width: 100% !important; }
.skole-tarjeta .elementor-image-box-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .35s ease; }
.skole-tarjeta .elementor-image-box-content { padding: .9rem 1.1rem 1.1rem; border-top: 6px solid var(--e-global-color-sklime); flex: 1; }
.skole-tarjeta .elementor-image-box-title { margin: 0; }
.skole-tarjeta a:hover img { transform: scale(1.04); }

/* skole-letra — letra dentro de círculo lima (modelo U·H·S) */
.skole-letra .elementor-heading-title {
	width: 1.35em; aspect-ratio: 1; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--e-global-color-sklime);
}

/* skole-recuadro — título en recuadro blanco con borde violeta */
.skole-recuadro .elementor-heading-title {
	display: inline-block; background: #fff; border: 3px solid var(--e-global-color-skviol);
	padding: .2em .6em; border-radius: 10px;
}

/* skole-rombos — lista con viñetas en forma de rombo */
.skole-rombos .elementor-icon-list-icon i,
.skole-rombos .elementor-icon-list-icon svg { transform: rotate(45deg) scale(.7); }

/* skole-inclinada — foto ligeramente girada con marco blanco */
.skole-inclinada img { border: 5px solid #fff; box-shadow: 0 14px 30px rgba(28, 37, 102, .25); transform: rotate(-2deg); }

/* skole-vertical — fotos en proporción 3:4 */
.skole-vertical img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.skole-tarjeta img { transition: none; }
}