/**
 * Laura Haro — clases reutilizables para Elementor.
 *
 * Se aplican desde Elementor › Avanzado › Clases CSS.
 * Los colores y tipografías vienen de los globales del Kit
 * (var(--e-global-…)); edítalos en Ajustes del sitio, no aquí.
 */

:root {
	--lh-ease: cubic-bezier(.16, 1, .3, 1);
	--lh-dur-color: 150ms;
	--lh-dur-move: 240ms;
	--lh-radius-card: 16px;
	--lh-radius-pill: 999px;
	--lh-shadow-rest: 0 1px 2px rgba(0, 0, 0, .04);
	--lh-shadow-hover: 0 8px 24px rgba(0, 0, 0, .08);
	--lh-focus: 0 0 0 3px var(--e-global-color-primary);
}

/* ---------- Botones ----------
 * El botón por defecto (primary) se define en el Kit › Botones.
 * Variantes: lh-btn--secondary | lh-btn--outline | lh-btn--ghost | lh-btn--inverse
 * Tamaños:   lh-btn--sm (40px) | lh-btn--lg (56px)   (md 48px = por defecto)
 * Ancho completo: lh-btn--block
 */
.elementor-button {
	transition:
		background-color var(--lh-dur-color) ease,
		border-color var(--lh-dur-color) ease,
		color var(--lh-dur-color) ease,
		transform var(--lh-dur-move) var(--lh-ease);
}
.elementor-button:active { transform: scale(.98); }
.elementor-button:focus-visible {
	outline: 3px solid var(--e-global-color-primary);
	outline-offset: 4px;
}
.elementor-button .elementor-button-content-wrapper { align-items: center; gap: 8px; }
/* El icono toma el color del texto en todas las variantes. */
.elementor-button .elementor-button-icon svg { fill: currentColor; }

.elementor-widget.lh-btn--secondary .elementor-button {
	background-color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-lhwhite);
}
.elementor-widget.lh-btn--secondary .elementor-button:hover,
.elementor-widget.lh-btn--secondary .elementor-button:focus-visible {
	background-color: var(--e-global-color-lhink800);
	border-color: var(--e-global-color-lhink800);
	color: var(--e-global-color-lhwhite);
}

.elementor-widget.lh-btn--outline .elementor-button {
	background-color: transparent;
	border-color: var(--e-global-color-lhbordst);
	color: var(--e-global-color-secondary);
}
.elementor-widget.lh-btn--outline .elementor-button:hover,
.elementor-widget.lh-btn--outline .elementor-button:focus-visible {
	background-color: transparent;
	border-color: var(--e-global-color-secondary);
	color: var(--e-global-color-secondary);
}

.elementor-widget.lh-btn--ghost .elementor-button {
	background-color: transparent;
	border-color: transparent;
	color: var(--e-global-color-secondary);
}
.elementor-widget.lh-btn--ghost .elementor-button:hover,
.elementor-widget.lh-btn--ghost .elementor-button:focus-visible {
	background-color: var(--e-global-color-lhbgalt);
	border-color: transparent;
	color: var(--e-global-color-secondary);
}

/* Para bandas magenta o negras. */
.elementor-widget.lh-btn--inverse .elementor-button {
	background-color: var(--e-global-color-lhwhite);
	border-color: var(--e-global-color-lhwhite);
	color: var(--e-global-color-secondary);
}
.elementor-widget.lh-btn--inverse .elementor-button:hover,
.elementor-widget.lh-btn--inverse .elementor-button:focus-visible {
	background-color: var(--e-global-color-lhmag50);
	border-color: var(--e-global-color-lhmag50);
	color: var(--e-global-color-secondary);
}
.elementor-widget.lh-btn--inverse .elementor-button:focus-visible { outline-color: var(--e-global-color-lhwhite); }

.elementor-widget.lh-btn--sm .elementor-button {
	padding: 7.5px 16px;
	font-size: var(--e-global-typography-lhbtnsm-font-size);
}
.elementor-widget.lh-btn--lg .elementor-button {
	padding: 12.5px 32px;
	font-size: var(--e-global-typography-lhbtnlg-font-size);
}
.elementor-widget.lh-btn--block .elementor-button { width: 100%; justify-content: center; }

/* ---------- Tarjeta ----------
 * Contenedor con borde, radio 16, sombra suave y elevación en hover.
 * lh-card--hover agrega la elevación (para tarjetas enlazadas).
 */
.lh-card {
	background-color: var(--e-global-color-lhwhite);
	border: 1px solid var(--e-global-color-lhborder);
	border-radius: var(--lh-radius-card);
	box-shadow: var(--lh-shadow-rest);
}
.lh-card--hover {
	transition: transform var(--lh-dur-move) var(--lh-ease), box-shadow var(--lh-dur-move) var(--lh-ease);
}
.lh-card--hover:hover,
.lh-card--hover:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--lh-shadow-hover);
}

/* ---------- Ancho de lectura ----------
 * lh-measure (68ch) para texto corrido, lh-measure--narrow (48ch).
 */
.lh-measure,
.elementor.elementor .e-con > .elementor-element.lh-measure { max-width: 68ch; }
.lh-measure--narrow,
.elementor.elementor .e-con > .elementor-element.lh-measure--narrow { max-width: 48ch; }

/* ---------- Header sticky con blur ---------- */
.lh-glass {
	background-color: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
}
.lh-glass.elementor-sticky--effects { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }

/* ---------- Accesibilidad ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--e-global-color-primary);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Logo invertido ----------
 * Logo negro → blanco sobre fondos oscuros (footer, bandas negras).
 */
.lh-invert img { filter: brightness(0) invert(1); }

/* ---------- Menú ----------
 * lh-nav en el widget Menú: botón hamburguesa con área táctil de 48 px.
 */
.lh-nav .elementor-menu-toggle {
	min-width: 48px;
	min-height: 48px;
	justify-content: center;
}

/* ---------- Proporción de imagen ----------
 * En el widget Imagen: lh-ratio-4-5 (retrato), lh-ratio-4-3 (territorio),
 * lh-ratio-16-9 (destacada), lh-ratio-16-10 (tarjeta). Recorta con object-fit.
 */
.lh-ratio-4-5 img,
.lh-ratio-4-3 img,
.lh-ratio-16-9 img,
.lh-ratio-16-10 img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.lh-ratio-4-5 img { aspect-ratio: 4 / 5; }
.lh-ratio-4-3 img { aspect-ratio: 4 / 3; }
.lh-ratio-16-9 img { aspect-ratio: 16 / 9; }
.lh-ratio-16-10 img { aspect-ratio: 16 / 10; }

/* ---------- Formulario ----------
 * lh-form en el widget Formulario: icono de correo y teléfono dentro del campo.
 */
.lh-form input[type="email"],
.lh-form input[type="tel"] {
	padding-left: 48px;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 20px 20px;
}
.lh-form input[type="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6F76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
.lh-form input[type="tel"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6F76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ---------- Línea de tiempo ----------
 * Contenedor padre: lh-timeline. Cada hito (contenedor en fila): lh-timeline__item,
 * con un widget Icono (vista "apilado", forma cuadrada) + un contenedor de texto.
 * La línea vertical que une los marcadores la dibuja esta clase.
 * Para el hito actual, cambia los colores del widget Icono en Elementor.
 */
.lh-timeline__item { position: relative; }
.lh-timeline__item::after {
	content: "";
	position: absolute;
	left: 23px;
	top: 56px;
	bottom: -40px;
	width: 2px;
	background-color: var(--e-global-color-lhdivide);
}
.lh-timeline__item:last-child::after { display: none; }

/* Contorno blanco: botón sobre la banda magenta (variante de la v4). */
.elementor-widget.lh-btn--outline-inverse .elementor-button {
	background-color: transparent;
	border-color: var(--e-global-color-lhwhite);
	color: var(--e-global-color-lhwhite);
}
.elementor-widget.lh-btn--outline-inverse .elementor-button:hover,
.elementor-widget.lh-btn--outline-inverse .elementor-button:focus-visible {
	background-color: var(--e-global-color-lhwhite);
	border-color: var(--e-global-color-lhwhite);
	color: var(--e-global-color-primary);
}
.elementor-widget.lh-btn--outline-inverse .elementor-button:focus-visible { outline-color: var(--e-global-color-lhwhite); }

/* Elemento de menú solo para móvil (p. ej. Contacto, que en desktop es botón).
 * Se aplica en Apariencia › Menús › Clases CSS del elemento. */
.elementor-nav-menu--main .elementor-nav-menu li.lh-menu-mobile-only { display: none; }

/* Sombra de foto destacada (retratos del hero). */
.lh-shadow img { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.lh-ratio-1-1 img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.lh-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
	accent-color: var(--e-global-color-primary);
}

/* ---------- Documento legal ----------
 * lh-legal-doc en el widget Editor de texto: bloques en retícula con 24 px,
 * H2 en tamaño H3. La fecha de actualización va en los encabezados de la sección.
 */
.lh-legal-doc { display: grid; gap: 24px; }
.lh-legal-doc > * { margin: 0; }
.lh-legal-doc h2 {
	margin: 32px 0 0;
	font-size: var(--e-global-typography-lhh3-font-size);
	line-height: var(--e-global-typography-lhh3-line-height);
	font-weight: var(--e-global-typography-lhh3-font-weight);
	letter-spacing: var(--e-global-typography-lhh3-letter-spacing);
}
.lh-legal-doc ul { padding-left: 32px; display: grid; gap: 8px; color: var(--e-global-color-secondary); }
.lh-legal-doc li::marker { color: var(--e-global-color-primary); }

/* Recuadro de aviso (borde punteado magenta). */
.lh-notice {
	padding: 32px;
	border: 1px dashed var(--e-global-color-primary);
	border-radius: 16px;
	background-color: var(--e-global-color-lhwhite);
}
.lh-notice p:last-child { margin-bottom: 0; }

/* ---------- Tarjeta de eje (hover magenta) ----------
 * lh-feature en el contenedor de la tarjeta. El fondo de hover se define
 * en Elementor (Fondo › Hover); esta clase pasa los textos y el icono a blanco.
 */
.e-con.lh-feature { transition: background-color var(--lh-dur-color) ease; }
.e-con.lh-feature:hover .elementor-widget .elementor-heading-title,
.e-con.lh-feature:hover .elementor-widget-text-editor { color: var(--e-global-color-lhwhite); }
.e-con.lh-feature:hover .elementor-widget-icon .elementor-icon {
	background-color: rgba(255, 255, 255, .1);
	color: var(--e-global-color-lhwhite);
	fill: var(--e-global-color-lhwhite);
}
.e-con.lh-feature:hover .elementor-widget-icon .elementor-icon svg { fill: var(--e-global-color-lhwhite); }

/* ---------- Badge de categoría ----------
 * lh-badge en un widget Encabezado (texto o etiqueta dinámica).
 */
.lh-badge .elementor-heading-title,
.lh-badge .elementor-heading-title a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 16px;
	border-radius: var(--lh-radius-pill);
	background-color: var(--e-global-color-lhmag50);
	color: var(--e-global-color-lhmag800);
}

/* ---------- Filtros en forma de cápsula ----------
 * lh-tags en el widget Menú (horizontal). Colores y tipografía en Elementor.
 */
.lh-tags .elementor-nav-menu--main .elementor-item {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-lhborder);
	border-radius: var(--lh-radius-pill);
	background-color: var(--e-global-color-lhwhite);
	display: inline-flex;
	align-items: center;
}
.lh-tags .elementor-nav-menu--main .elementor-item:hover { background-color: var(--e-global-color-lhbgalt); }
.lh-tags .elementor-nav-menu--main .elementor-item.elementor-item-active,
.lh-tags .elementor-nav-menu--main .current-menu-item > .elementor-item {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-lhwhite);
}
.lh-tags .elementor-nav-menu { flex-wrap: wrap; gap: 16px; }

/* ---------- Cuerpo del artículo ----------
 * lh-articulo en el widget Contenido de la entrada.
 */
.lh-articulo { display: grid; gap: 24px; font-size: var(--e-global-typography-lhbodyl-font-size); line-height: 1.6; }
.lh-articulo > * { margin: 0; }
.lh-articulo h2 {
	margin-top: 32px;
	font-size: var(--e-global-typography-lhh4-font-size);
	line-height: 1.6;
}
.lh-articulo ol, .lh-articulo ul { padding-left: 32px; display: grid; gap: 16px; }
.lh-articulo li::marker { color: var(--e-global-color-primary); font-weight: 700; }
.lh-articulo strong { color: var(--e-global-color-secondary); }
.lh-articulo blockquote {
	margin: 24px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--e-global-color-primary);
	font-style: italic;
	font-size: var(--e-global-typography-lhh4-font-size);
	line-height: 1.6;
	color: var(--e-global-color-secondary);
}
.lh-articulo blockquote p { margin: 0; }
.lh-articulo blockquote cite { display: block; margin-top: 16px; font-size: 14px; font-style: normal; color: var(--e-global-color-lhmuted); }

/* Entradilla del artículo y breadcrumb. */
.lh-dek .elementor-heading-title { font-style: italic; }
.lh-breadcrumb { font-size: 14px; }
.lh-breadcrumb a { color: var(--e-global-color-secondary); font-weight: 500; text-decoration: none; }
.lh-breadcrumb .last { color: var(--e-global-color-lhmuted); }

/* Tarjeta enlazada: el contenedor completo es el enlace. */
a.e-con.lh-card { color: inherit; text-decoration: none; overflow: hidden; }
.elementor-nav-menu--main .elementor-nav-menu li:has(+ li.lh-menu-mobile-only) > .elementor-item { margin-inline-end: 0; }

/* Texto resaltado en magenta dentro de un Encabezado: <span class="lh-accent">…</span> */
.lh-accent { color: var(--e-global-color-primary); }

/* Botón como enlace de texto (p. ej. "Ver el logro →"). */
.elementor-widget.lh-btn--link .elementor-button {
	padding: 0;
	min-height: 0;
	border: 0;
	background-color: transparent;
	color: var(--e-global-color-primary);
	font-size: 14px;
	line-height: 22px;
	vertical-align: top;
}
.elementor-widget.lh-btn--link .elementor-button .elementor-button-content-wrapper { gap: 4px; }
.elementor-widget.lh-btn--link .elementor-button:hover,
.elementor-widget.lh-btn--link .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--e-global-color-accent);
}
.elementor-widget.lh-btn--link .elementor-button-icon svg { width: 16px; height: 16px; }

/* Video con radio y recorte (widget Video dentro de un contenedor con esta clase). */
.lh-video-frame { overflow: hidden; }
.lh-nowrap .elementor-heading-title { white-space: nowrap; }

/* El último párrafo del Editor de texto no agrega margen extra al bloque. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Imágenes recortadas con enlace: el enlace ocupa todo el ancho. */
[class*="lh-ratio-"] a { display: block; }

/* ---------- Flotado suave ----------
 * lh-float, lh-float--b, lh-float--c en widgets Imagen decorativos.
 * Se desactiva con prefers-reduced-motion (regla global de arriba).
 */
@keyframes lh-float { 0%, 100% { transform: translateY(-12px); } 50% { transform: translateY(12px); } }
.lh-float img { animation: lh-float 6.4s ease-in-out infinite; }
.lh-float--b img { animation-duration: 5.2s; animation-delay: -1.4s; }
.lh-float--c img { animation-duration: 7.1s; animation-delay: -2.6s; }

/* ---------- Base tipográfica (igual que la v4) ---------- */
body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Velo inferior sobre la portada del video (antes de reproducir). */
.lh-video-frame .elementor-custom-embed-image-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
}
.elementor-widget.lh-btn--link, .elementor-widget.lh-btn--link .elementor-button-wrapper { line-height: 0; }

/* Imagen como bloque (sin hueco de línea), p. ej. el wordmark del footer. */
.lh-block-img img { display: block; width: 100%; height: auto; }

/* El widget Icono no agrega altura de línea extra alrededor del icono. */
.elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }
.lh-form .elementor-field-group textarea.elementor-field-textual { padding-top: 16px; padding-bottom: 16px; }
.lh-form .elementor-field-type-acceptance { min-height: 48px; display: flex; align-items: center; }

/* Acordeón: el título respeta el interlineado de su tipografía global (H5). */
.lh-accordion .e-n-accordion-item-title-text { line-height: var(--e-global-typography-lhh5-line-height); }
.lh-breadcrumb .rank-math-breadcrumb p { margin: 0; line-height: 1.6; }
.lh-accordion .e-n-accordion-item-title { column-gap: 24px; }
.lh-accordion .e-n-accordion-item-title-icon { width: 24px; justify-content: center; }
.elementor-element.lh-block-img { flex-shrink: 0; }