/*
 * Theme Name: Hello Elementor Talquistina
 * Description: Tema hijo de Hello Elementor para el subsite Talquistina
 * Template: hello-elementor
 * Version: 1.0.8
 * Author: Lacer
 */

/* ==========================================================================
   [tq] Mobile — bloque rosa "Más de 60 años" a altura de contenido
   El widget Slides fija height:400px en móvil y el contenido (con padding
   lateral de 100px) desbordaba. Se pasa toda la cadena de Swiper a altura
   automática: el slide-bg pasa a absoluto (pintaba en flujo y empujaba al
   inner) y el inner queda en flujo con padding lateral reducido (50px,
   compatible con el marco blanco a 35px). El contents se ensancha al 100%
   (el widget lo limitaba y estrechaba el texto).
   ========================================================================== */

@media (max-width: 767px) {
	.elementor-element-f91a8dd .swiper,
	.elementor-element-f91a8dd .swiper-container,
	.elementor-element-f91a8dd .swiper-wrapper {
		height: auto !important;
	}

	.elementor-element-f91a8dd .swiper-slide {
		height: auto !important;
		min-height: 0 !important;
		position: relative !important;
	}

	.elementor-element-f91a8dd .swiper-slide-bg {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	.elementor-element-f91a8dd .swiper-slide-inner {
		position: relative !important;
		padding: 60px 50px !important;
	}

	.elementor-element-f91a8dd .swiper-slide-contents {
		width: 100% !important;
		max-width: none !important;
	}
}

/* ==========================================================================
   [tq] Footer / relacionados — imágenes de producto sin deformar
   El loop 1166 (footer y productos bajo cada post) forzaba las imágenes a
   un alto fijo con fill: las no cuadradas se deformaban (visible sobre
   todo en iOS). Se respeta la proporción natural.
   ========================================================================== */

.e-loop-item.elementor-1166 img {
	height: auto;
	object-fit: contain;
}

/* ==========================================================================
   [tq] Blog — títulos con <strong> y plantilla de post (paridad Origen)
   Los títulos de post llevan <strong> en la primera parte (puesto en el
   contenido por Nico). En Origen esa parte va en MARRÓN #84774e y el resto
   en rosa, con el mismo peso; en los listados (módulo posts de la Home,
   distribuidora del Blog y relacionados bajo cada post) el título va
   uniforme, sin bold ni cambio de color.
   - Listados: el widget Posts usa h2.elementor-post__title; las cards de
     la Home usan h3.elementor-heading-title con el strong como hijo
     directo. OJO: no meter <strong> decorativo en headings de Elementor
     (el selector de abajo lo neutraliza a propósito).
   - Single post (plantilla 538): strong del h1 en marrón; h2/h3 del
     contenido en rosa y bold (spec de Gemma).
   ========================================================================== */

/* Listados: neutralizar bold y color del strong del título */
.elementor-post__title strong,
.elementor-heading-title > strong {
	font-weight: inherit;
	color: inherit;
}

/* Single post: primera parte del título (strong) en marrón, peso uniforme */
.single-post .elementor-widget-theme-post-title .elementor-heading-title > strong {
	color: #84774e;
	font-weight: inherit;
}

/* Single post: títulos internos del contenido en rosa y bold */
.single-post .elementor-widget-theme-post-content h2,
.single-post .elementor-widget-theme-post-content h3 {
	color: #f29daf;
	font-weight: 700;
}

/* ==========================================================================
   [tq] Footer — centrado de logos y menú legales en tablet/móvil
   Paridad con Origen (verificado a 390px y 800px): los logos Lacer +
   Talquistina van centrados como grupo y cada enlace del menú legal va
   centrado en su línea. En desktop (>1024px) no se toca nada.
   f040b0b = contenedor flex de los dos logos; 30c9732 = nav-menu legales.
   ========================================================================== */

@media (max-width: 1024px) {
	[data-elementor-type="footer"] .elementor-element-f040b0b {
		justify-content: center;
	}

	[data-elementor-type="footer"] .elementor-element-30c9732 .elementor-nav-menu a {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   [tq] Home — testimonios (paridad Origen)
   Clase .testimonio añadida a mano en Elementor a los contenedores de
   testimonial (heading + widget testimonial). Origen: cita 22px rosa,
   autor 22px oliva (#84774e), título 44px oliva (ya correcto en Destino).
   ========================================================================== */

.testimonio .elementor-testimonial-content {
	font-size: 22px;
	line-height: 1.5;
}

.testimonio .elementor-testimonial-name {
	font-size: 22px;
	line-height: 1.5;
	color: #84774e;
}

/* ==========================================================================
   [tq] Home — bloque rosa "Más de 60 años" (paridad Origen .roseBox)
   Widget Slides elementor-f91a8dd dentro del section elementor-74a60df.
   Origen: bg #ffe8ed, radius 10, marco blanco 1px a 35px del borde,
   esquina inferior-derecha recortada en blanco (220×377 desktop, 64×110
   móvil), título 44px/400 con margen 30, texto 16px/400. Los párrafos
   del texto van con <br><br> en el contenido del slide (no tocar).
   El shape divider del section se oculta (Origen no lo tiene).
   ========================================================================== */

.elementor-element-74a60df .elementor-shape {
	display: none;
}

.elementor-element-f91a8dd {
	position: relative;
	overflow: hidden;
	border-radius: 10px !important;
}

/* Marco blanco interior */
.elementor-element-f91a8dd::before {
	content: '';
	position: absolute;
	inset: 35px;
	border: 1px solid #fff;
	z-index: 2;
	pointer-events: none;
}

/* Esquina inferior-derecha recortada */
.elementor-element-f91a8dd::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 64px;
	height: 110px;
	background: #fff;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	z-index: 3;
}

.elementor-element-f91a8dd .swiper-slide .elementor-slide-description {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.elementor-element-f91a8dd::after {
		width: 220px;
		height: 377px;
	}

	.elementor-element-f91a8dd .swiper-slide .elementor-slide-heading {
		font-size: 44px;
		font-weight: 400;
		line-height: 1.1;
		margin-bottom: 30px;
	}
}

/* ==========================================================================
   [tq] Loop de productos (Home y página Productos) — paridad con Origen
   Scope: SOLO el template de loop del listado principal (elementor-851).
   OJO: el footer usa otro loop-grid con items type-producto (template
   elementor-1166) que NO debe recibir estos estilos — no scopear por
   type-producto.
   Replica de talquistina.com (.productsList__item):
   - gradiente blanco→rosa por bloque
   - corte diagonal: triángulo blanco ::before con clip-path a ALTURA
     COMPLETA del bloque (en Origen el border-trick de 500px ≈ altura
     total de sus items; aquí los items son más altos → proporcional)
   - disposición intercalada imagen/texto (impar: imagen izquierda)
   - separación blanca de 30px entre bloques
   El template traía su propio gradiente en el contenedor raíz y un shape
   divider SVG: ambos se anulan (los sustituyen el gradiente y el ::before
   del item). nth-of-type y no nth-child: el 1.er hijo del loop es un
   <style> oculto.
   ========================================================================== */

.elementor-loop-container > .e-loop-item.elementor-851 {
	position: relative;
	background: linear-gradient(180deg, #fff 0%, #fff 44%, #ffeaee 100%);
	overflow: hidden;
}

/* Separación blanca entre bloques (Origen: margin-bottom 30px) */
.elementor-loop-container:has(> .e-loop-item.elementor-851) {
	row-gap: 30px;
}

.elementor-loop-container > .e-loop-item.elementor-851 .elementor-shape {
	display: none;
}

/* Contenido por encima del triángulo; sin el gradiente propio del template */
.elementor-loop-container > .e-loop-item.elementor-851 > .e-con {
	background: none !important;
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.elementor-loop-container > .e-loop-item.elementor-851::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #fff;
		clip-path: polygon(45% 100%, 100% 0, 100% 100%);
	}

	.elementor-loop-container > .e-loop-item.elementor-851:nth-of-type(even)::before {
		clip-path: polygon(0 0, 55% 100%, 0 100%);
	}

	/* Impar: imagen a la izquierda (como Origen); par: imagen a la derecha */
	.elementor-loop-container > .e-loop-item.elementor-851:nth-of-type(odd) > .e-con > .e-con-inner {
		flex-direction: row-reverse;
	}
}

/* ==========================================================================
   [tq] Miniatura de producto en dropdown del menú desktop (rollover)
   Imagen inyectada por inc/tq-menu-thumbs.php (<a> + <img> en cada <li>).
   Paridad con Origen: img 120px visible solo en :hover del item, ≥1025px.
   Como en Origen, la img va DENTRO del panel: el ul se ensancha con
   max-content + padding-right y el fondo del panel queda tras la imagen.
   ========================================================================== */

.tq-menu-thumb {
	display: none;
}

@media (min-width: 1025px) {
	/* Ensanchar el panel para alojar la miniatura dentro (como en Origen).
	   Elementor/SmartMenus fuerza un ancho de ~156px por stylesheet (sin
	   inline), con los textos nowrap desbordando: max-content lo corrige
	   y el padding-right reserva la columna de la imagen. */
	.elementor-nav-menu--main ul.sub-menu:has(.tq-menu-thumb) {
		width: max-content !important;
		min-width: 310px;
		padding-right: 150px;
	}

	/* El <li> no debe ser contenedor de posicionamiento: la miniatura se
	   ancla al panel del dropdown (ul.sub-menu, ya position:absolute). */
	.elementor-nav-menu--main ul.sub-menu li:has(> .tq-menu-thumb) {
		position: static;
	}

	.elementor-nav-menu--main ul.sub-menu .tq-menu-thumb {
		position: absolute;
		top: 20px;
		right: 15px;
		width: 120px;
		height: auto;
		pointer-events: none;
	}

	.elementor-nav-menu--main ul.sub-menu li:hover > .tq-menu-thumb {
		display: block;
	}
}