/*
 * iLED - Tipografia fluida para laptops y pantallas medianas.
 *
 * Por que: el breakpoint "Laptop" de Elementor llega a 1650px y los titulos de TheGem
 * (.title-xlarge, .title-h1 ... .title-h6) estan en px fijos hasta ~1199px, asi que en
 * laptops (1280-1600px, o 1920px con escalado de Windows) se ven grandes y alargan la pagina.
 *
 * Que hace: entre 1650px y 1024px el tamano baja de forma gradual del valor de escritorio
 * a un minimo compacto; entre 1023px y 768px se queda en ese minimo. Debajo de 768px
 * no se toca (manda la tipografia movil de TheGem).
 * Formula: clamp(MIN, MIN + (MAX - MIN) * (100vw - 1024px) / 626, MAX).
 *
 * Especificidad baja a proposito: los tamanos puestos en un widget de Elementor siguen mandando.
 *
 * Tipografia: global (todo el sitio) desde 2026-11-10, tras aprobar la prueba en la Home.
 * Las reglas con body.page-id-39076 / body.page-id-41457 son solo de la Home (banner y carrusel).
 * No editar los custom-*.css de esta carpeta: los genera TheGem.
 */

/* Banner principal (41c47b0): debe verse completo en una pantalla.
   Se usa svh (alto de pantalla con la barra del navegador visible) en lugar de vh: en el
   telefono vh cambia al hacer scroll (la barra se oculta) y el contenido "saltaba" de tamano.
   Elementor no tiene breakpoints por altura, por eso va aqui. */
body.page-id-39076 .elementor-element.elementor-element-41c47b0,
body.page-id-41457 .elementor-element.elementor-element-41c47b0 {
	--min-height: 100svh;
}

/* Puntos del carrusel del banner: segun el orden de carga, Swiper les daba ancho completo
   pero se conservaba el corrimiento -50%, y a veces aparecian pegados a la izquierda.
   Se fijan centrados en cualquier caso (se conserva el ajuste vertical de -8px). */
body.page-id-39076 .elementor-element-b9a3c61 .swiper-pagination.swiper-pagination-horizontal,
body.page-id-41457 .elementor-element-b9a3c61 .swiper-pagination.swiper-pagination-horizontal {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	transform: translateY(-8px) !important;
	text-align: center;
}

/* Movil: el carrusel del banner ocupa todo el ancho menos 20px de margen por lado
   (ancho fijo: no depende del alto de pantalla, asi los puntos quedan siempre centrados). */
@media (max-width: 767px) {
	body.page-id-39076 .elementor-element.elementor-element-b9a3c61,
	body.page-id-41457 .elementor-element.elementor-element-b9a3c61 {
		width: calc(100% - 40px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Movil: el banner debe caber en una pantalla en cualquier telefono. Todo se calcula con svh
   (alto con la barra del navegador visible), que NO cambia al hacer scroll. No usar media
   queries por alto: en el telefono el alto cambia al ocultarse la barra y las reglas se
   activaban/desactivaban (el titulo saltaba de 1 a 2 lineas y el logo cambiaba de tamano). */
@media (max-width: 767px) {
	body.page-id-39076 .elementor-element.elementor-element-eb5bd98,
	body.page-id-41457 .elementor-element.elementor-element-eb5bd98 {
		padding-top: clamp(40px, calc(10svh - 22px), 80px);
	}
	/* Logo circular: imagen que gira (210px) + logo central (80px, posicion absoluta).
	   La fila (d149488) tiene padding 10px 21px en movil: se suma para centrar el logo. */
	body.page-id-39076 .elementor-element.elementor-element-18f5068,
	body.page-id-41457 .elementor-element.elementor-element-18f5068 {
		width: min(210px, 20svh);
		max-width: min(210px, 20svh);
	}
	body.page-id-39076 .elementor-element.elementor-element-18f5068 img,
	body.page-id-41457 .elementor-element.elementor-element-18f5068 img {
		width: 100%;
		height: auto;
	}
	body.page-id-39076 .elementor-element.elementor-element-434eeda,
	body.page-id-41457 .elementor-element.elementor-element-434eeda {
		width: min(80px, 7.6svh) !important;
		left: calc(21px + min(210px, 20svh) / 2 - min(80px, 7.6svh) / 2) !important;
		top: calc(10px + min(210px, 20svh) / 2 - min(80px, 7.6svh) / 2) !important;
		right: auto !important;
		bottom: auto !important;
		margin: 0 !important;
	}
	body.page-id-39076 .elementor-element.elementor-element-434eeda img,
	body.page-id-41457 .elementor-element.elementor-element-434eeda img,
	body.page-id-39076 .elementor-element.elementor-element-434eeda a,
	body.page-id-41457 .elementor-element.elementor-element-434eeda a {
		width: 100%;
		height: auto;
	}
	body.page-id-39076 .elementor-element.elementor-element-f818487 .thegem-heading,
	body.page-id-41457 .elementor-element.elementor-element-f818487 .thegem-heading {
		font-size: min(46px, 5svh);
	}
	body.page-id-39076 .elementor-element.elementor-element-fe4cf97 .thegem-heading,
	body.page-id-41457 .elementor-element.elementor-element-fe4cf97 .thegem-heading {
		font-size: min(50px, 5.4svh);
	}
}

/* El titulo extra grande (p. ej. "15,000+") baja hasta 1920px: entre 1651 y ~1750px no cabia
   a 70px en su columna del diseno de escritorio. */
@media (min-width: 768px) and (max-width: 1919px) {
	body .title-xlarge {
		font-size: clamp(50px, calc(50px + 20 * ((100vw - 1024px) / 896)), 70px);
		line-height: 1.143;
	}
}

@media (min-width: 768px) and (max-width: 1650px) {
	body .title-h1 {
		font-size: clamp(38px, calc(38px + 12 * ((100vw - 1024px) / 626)), 50px);
		line-height: 1.38;
	}
	body .title-h2 {
		font-size: clamp(26px, calc(26px + 9 * ((100vw - 1024px) / 626)), 35px);
		line-height: 1.286;
	}
	body .title-h3 {
		font-size: clamp(23px, calc(23px + 5 * ((100vw - 1024px) / 626)), 28px);
		line-height: 1.5;
	}
	body .title-h4 {
		font-size: clamp(20px, calc(20px + 4 * ((100vw - 1024px) / 626)), 24px);
		line-height: 1.583;
	}
	body .title-h5 {
		font-size: clamp(16px, calc(16px + 4 * ((100vw - 1024px) / 626)), 20px);
		line-height: 1.5;
	}
	body .title-h6 {
		font-size: clamp(15px, calc(15px + 1 * ((100vw - 1024px) / 626)), 16px);
		line-height: 1.5625;
	}
}

/* Megamenu de Productos (26555 ES / 41479 EN): en laptops la tarjeta deja ~110px al titulo y
   "especiales" no cabia. El titulo baja de 24px (1650px) a 18px (1280px). */
@media (max-width: 1650px) {
	.elementor-26555 .thegem-te-post-title .post-title,
	.elementor-41479 .thegem-te-post-title .post-title {
		font-size: clamp(18px, calc(18px + 6 * ((100vw - 1280px) / 370)), 24px);
		line-height: 1.45;
	}
}

/* Landing SEM (36452): banner con formulario en 100vh. El formulario GoUp mide ~740px fijos;
   en laptops chicas se reducen las dos columnas del banner para que todo quepa.
   Se decide por ANCHO (no por alto): el alto cambia al hacer scroll cuando la barra del
   navegador se oculta (moviles, tablets, simuladores) y el contenido "saltaba" de tamano.
   Laptops de <=1400px de ancho suelen tener 720-768px de alto. */
body.page-id-36452 .elementor-element.elementor-element-6cb012a {
	--min-height: 100svh;
}
@media (min-width: 1025px) and (max-width: 1300px) {
	body.page-id-36452 .elementor-element.elementor-element-9a1451e,
	body.page-id-36452 .elementor-element.elementor-element-4ef6dd9 {
		zoom: 0.78;
	}
	body.page-id-36452 .elementor-element.elementor-element-6cb012a {
		padding-top: 110px;
	}
}
@media (min-width: 1401px) and (max-width: 1650px) {
	body.page-id-36452 .elementor-element.elementor-element-6cb012a {
		padding-top: 115px;
	}
}
@media (min-width: 1301px) and (max-width: 1400px) {
	body.page-id-36452 .elementor-element.elementor-element-9a1451e,
	body.page-id-36452 .elementor-element.elementor-element-4ef6dd9 {
		zoom: 0.82;
	}
	body.page-id-36452 .elementor-element.elementor-element-6cb012a {
		padding-top: 115px;
	}
}

/* Tarjetas horizontales (Home "Que ofrecemos" y landing SEM "Por que elegir iLED?") entre 1025 y
   1299px: las palabras largas del titulo ("Garantizamos", "Refacciones") se montaban sobre el
   texto. En ese rango el titulo toma mas ancho y baja un poco de tamano. */
@media (min-width: 1025px) and (max-width: 1299px) {
	body.page-id-39076 .elementor-element-bd16831 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-bd16831 > .elementor-widget:nth-child(2),
	body.page-id-39076 .elementor-element-ae0e498 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-ae0e498 > .elementor-widget:nth-child(2),
	body.page-id-39076 .elementor-element-5b90367 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-5b90367 > .elementor-widget:nth-child(2),
	body.page-id-39076 .elementor-element-ceb7f96 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-ceb7f96 > .elementor-widget:nth-child(2),
	body.page-id-39076 .elementor-element-5b14616 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-5b14616 > .elementor-widget:nth-child(2),
	body.page-id-39076 .elementor-element-547bd08 > .elementor-widget:nth-child(2),
	body.page-id-41457 .elementor-element-547bd08 > .elementor-widget:nth-child(2),
	body.page-id-36452 .elementor-element-4a914c4 > .elementor-widget:nth-child(2),
	body.page-id-36452 .elementor-element-47d7516 > .elementor-widget:nth-child(2),
	body.page-id-36452 .elementor-element-61e1865 > .elementor-widget:nth-child(2),
	body.page-id-36452 .elementor-element-7f83891 > .elementor-widget:nth-child(2) {
		width: 41% !important;
		max-width: 41% !important;
	}
	body.page-id-39076 .elementor-element-bd16831 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-bd16831 > .elementor-widget:nth-child(3),
	body.page-id-39076 .elementor-element-ae0e498 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-ae0e498 > .elementor-widget:nth-child(3),
	body.page-id-39076 .elementor-element-5b90367 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-5b90367 > .elementor-widget:nth-child(3),
	body.page-id-39076 .elementor-element-ceb7f96 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-ceb7f96 > .elementor-widget:nth-child(3),
	body.page-id-39076 .elementor-element-5b14616 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-5b14616 > .elementor-widget:nth-child(3),
	body.page-id-39076 .elementor-element-547bd08 > .elementor-widget:nth-child(3),
	body.page-id-41457 .elementor-element-547bd08 > .elementor-widget:nth-child(3),
	body.page-id-36452 .elementor-element-4a914c4 > .elementor-widget:nth-child(3),
	body.page-id-36452 .elementor-element-47d7516 > .elementor-widget:nth-child(3),
	body.page-id-36452 .elementor-element-61e1865 > .elementor-widget:nth-child(3),
	body.page-id-36452 .elementor-element-7f83891 > .elementor-widget:nth-child(3) {
		width: 37% !important;
		max-width: 37% !important;
	}
	body.page-id-39076 .elementor-element-bd16831 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-bd16831 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-39076 .elementor-element-ae0e498 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-ae0e498 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-39076 .elementor-element-5b90367 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-5b90367 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-39076 .elementor-element-ceb7f96 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-ceb7f96 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-39076 .elementor-element-5b14616 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-5b14616 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-39076 .elementor-element-547bd08 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-41457 .elementor-element-547bd08 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-36452 .elementor-element-4a914c4 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-36452 .elementor-element-47d7516 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-36452 .elementor-element-61e1865 > .elementor-widget:nth-child(2) .thegem-heading,
	body.page-id-36452 .elementor-element-7f83891 > .elementor-widget:nth-child(2) .thegem-heading {
		font-size: clamp(22px, calc(22px + 4 * ((100vw - 1025px) / 274)), 26px) !important;
	}
}