/* Detalles de la página "servicio vm y escaparatismo nueva" (52700) que no se pueden
   expresar con los ajustes de Elementor. Lo carga functions.php solo en esta página.
   Para revertir: borrar este archivo. */

/* Preguntas frecuentes: el "+" va dentro de un círculo dorado (Figma: 36px, borde 2px #B89246) */
.elementor-widget-accordion .elementor-accordion-icon {
	width: 26px !important;
	height: 26px;
	border: 2px solid #B89246;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #B89246;
	position: relative;
	flex: 0 0 26px !important;
	min-width: 26px !important;
	max-width: 26px !important;
	padding: 0 !important;
	box-sizing: border-box;
}
.elementor-widget-accordion .elementor-accordion-icon svg,
.elementor-widget-accordion .elementor-accordion-icon i {
	font-size: 13px;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	color: #B89246;
	display: block;
}
.elementor-widget-accordion .elementor-accordion-item {
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 1px solid #C2C2C2;
}
.elementor-widget-accordion .elementor-tab-title {
	padding-left: 0;
	padding-right: 0;
}
.elementor-widget-accordion .elementor-tab-content {
	border-top: 0;
	padding-left: 0;
	padding-right: 0;
}

/* El signo +/- del acordeón es dorado en Figma, no negro */
.elementor-widget-accordion .elementor-accordion-icon i,
.elementor-widget-accordion .elementor-accordion-icon svg,
.elementor-widget-accordion .elementor-accordion-icon svg path {
	color: #B89246 !important;
	fill: #B89246 !important;
}

/* Botón "Ver más proyectos": en Figma mide 541x91 sobre 1920 -> 338x57 aquí.
   El ancho del widget no llega al enlace, así que se fija aquí. */
.btn-ver-proyectos .elementor-button {
	width: 338px;
	max-width: 100%;
}
@media (max-width: 767px) {
	.btn-ver-proyectos .elementor-button { width: 100%; }
}

/* ---- Ajustes de composición (2026-09-14) ---- */

/* Las tres fotos de servicios tienen proporciones distintas (0,996 / 0,971 / 0,952).
   Se unifican a la más baja recortando por el centro, para que la fila no baile. */
.card-img img {
	aspect-ratio: 948 / 952;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Lo mismo en proyectos (1,458 / 1,440 / 1,448) y, de paso, display:block elimina
   la línea blanca de 1px bajo la foto: la dejaba el hueco de línea base del inline-block. */
.proy-img img {
	aspect-ratio: 1152 / 790;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Las tres tarjetas negras, a la misma altura aunque su texto tenga distinta longitud */
.proy-col > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.proy-col > .elementor-widget-wrap > .elementor-section {
	flex: 1 1 auto;
	display: flex;
}
.proy-col > .elementor-widget-wrap > .elementor-section > .elementor-container,
.proy-col > .elementor-widget-wrap > .elementor-section .elementor-column {
	width: 100%;
}

/* Botón "Ver más proyectos" centrado bajo la tarjeta central.
   El widget debe ocupar todo el ancho: si lleva _element_width:auto se pega a la izquierda
   y ni text-align ni margin:auto tienen efecto. */
.btn-ver-proyectos {
	width: 100% !important;
	max-width: 100% !important;
}
.btn-ver-proyectos .elementor-widget-container { text-align: center; }
.btn-ver-proyectos .elementor-button {
	display: inline-flex;
	margin: 0 auto;
	float: none;
}

/* Signos + / - del acordeón: el tamaño lo manda el <span> que envuelve al svg,
   no el svg. Se anula ahí y se centra con flex. */
.elementor-widget-accordion .elementor-accordion-icon span {
	font-size: 0 !important;
	line-height: 0 !important;
}
.elementor-widget-accordion .elementor-accordion-icon svg {
	width: 11px !important;
	height: 11px !important;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Al fijar un ancho al <a>, su contenido (que va en flex) se queda a la izquierda.
   Hay que centrarlo también por dentro, en el enlace y en su wrapper. */
.btn-ver-proyectos .elementor-button,
.btn-ver-proyectos .elementor-button .elementor-button-content-wrapper {
	justify-content: center;
	text-align: center;
}

/* ---- Preguntas frecuentes ---- */

/* La línea corta va a la IZQUIERDA del antetítulo, no debajo (Figma: 56x2 px a 1920 -> 35px de ancho; grosor 1px por decisión de Raúl).
   Usa currentColor: en Figma cada línea es del mismo color que su texto (negra en los
   antetítulos sobre fondo claro, dorada en PREGUNTAS FRECUENTES y TU PRÓXIMA CAMPAÑA). */
.ante-linea p {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ante-linea p::before {
	content: "";
	display: block;
	width: 35px;
	height: 1px;
	background: currentColor;
	flex: 0 0 35px;
}

/* Aire entre pregunta y separador. Figma: 224px entre líneas sobre 1920 -> 140px aquí,
   con la pregunta de 28px de alto quedan 56px arriba y abajo. */
.elementor-widget-accordion .elementor-tab-title {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}
@media (max-width: 767px) {
	.elementor-widget-accordion .elementor-tab-title {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}
}
/* y separador también encima de la primera pregunta */
.elementor-widget-accordion .elementor-accordion-item:first-child {
	border-top: 1px solid #C2C2C2;
}

/* ======================================================================
   Preguntas frecuentes como TOGGLE (todas cerradas al cargar).
   El toggle usa otras clases que el acordeón: .elementor-toggle-*
   ====================================================================== */
.faq-toggle .elementor-toggle-item {
	border: 0;
	border-bottom: 1px solid #C2C2C2;
	margin: 0 !important;
}
.faq-toggle .elementor-toggle-item:first-child { border-top: 1px solid #C2C2C2; }

/* Pregunta e icono en la misma fila, centrados en vertical entre sí */
.faq-toggle .elementor-tab-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 56px 0 !important;
	border: 0 !important;
	line-height: 1.35 !important;
}
.faq-toggle .elementor-toggle-title {
	order: 1;
	flex: 1 1 auto;
	line-height: 1.35 !important;
}
.faq-toggle .elementor-tab-content {
	border: 0 !important;
	padding: 0 0 40px !important;
}

/* Icono: círculo dorado con el signo pequeño y centrado */
.faq-toggle .elementor-toggle-icon {
	order: 2;
	position: relative;
	float: none !important;
	flex: 0 0 26px;
	width: 26px !important;
	height: 26px;
	border: 2px solid #B89246;
	border-radius: 50%;
	box-sizing: border-box;
	margin: 0 !important;
	line-height: 0;
}
.faq-toggle .elementor-toggle-icon span { font-size: 0 !important; line-height: 0 !important; }
.faq-toggle .elementor-toggle-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 11px !important;
	height: 11px !important;
	fill: #B89246 !important;
}

@media (max-width: 767px) {
	.faq-toggle .elementor-tab-title { padding: 22px 0 !important; gap: 14px; }
	.faq-toggle .elementor-tab-content { padding-bottom: 24px !important; }

	/* Tarjetas de servicios y de proyectos: al apilarse en móvil necesitan aire entre ellas */
	.card-col,
	.proy-col { margin-bottom: 24px; }
	.card-col:last-child,
	.proy-col:last-child { margin-bottom: 0; }
}

/* El toggle no hereda el tamaño de título del acordeón: salía a 31px en escritorio.
   Figma: 36px sobre 1920 -> 22px aquí; 17px en móvil. */
.faq-toggle .elementor-toggle-title {
	font-size: 22px !important;
	font-weight: 600 !important;
}
@media (max-width: 767px) {
	.faq-toggle .elementor-toggle-title { font-size: 17px !important; }
}
/* Los span del icono llevan position propia y descentraban el signo 10px.
   Se anula solo position; nunca display, que es lo que oculta el signo que no toca. */
.faq-toggle .elementor-toggle-icon span { position: static !important; }
/* Elementor da al svg del toggle un margin-left:-5px que lo descentraba dentro del círculo */
.faq-toggle .elementor-toggle-icon svg { margin: 0 !important; }

/* Los estilos de botón (.btn-instore, .btn-destacado) viven en el style.css global. */

/* Tarjetas negras de proyectos: el enlace "Tengo un proyecto similar →" pegado abajo,
   a la misma altura en las tres aunque el texto de cada tarjeta ocupe distinto.
   El interior de la tarjeta pasa a columna flexible y el último widget (el enlace)
   se lleva todo el espacio sobrante por arriba. */
.proy-tarjeta { display: flex; }
.proy-tarjeta > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap !important;
	height: 100%;
}
.proy-tarjeta > .elementor-widget-wrap > .elementor-widget:last-child {
	margin-top: auto !important;
}

/* Logos de clientes con marco, copiado de la página Servicios Eventos (52464), medido allí:
   caja 192x114 px, borde 2px #B89246, logo de 100px centrado, 12px entre cajas y 20px entre filas. */
.logo-caja {
	padding: 10px 6px !important;
}
.logo-caja > .elementor-widget-wrap {
	border: 2px solid #B89246;
	height: 114px;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.logo-caja .elementor-widget-icon {
	margin: 0 !important;
	width: auto;
}
@media (max-width: 767px) {
	/* 3 por fila en móvil: 8px entre cajas y logo de 70px */
	.logo-caja { padding: 6px 4px !important; }
	.logo-caja > .elementor-widget-wrap { height: 84px; }
}
/* El icono va en línea y deja hueco de línea base: descentraba el logo ~5px en vertical */
.logo-caja .elementor-icon-wrapper,
.logo-caja .elementor-icon {
	line-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.logo-caja .elementor-icon svg { display: block; }
/* La causa real del descentrado vertical: .elementor-widget-wrap lleva flex-wrap:wrap y
   align-content:flex-start, así que align-items:center no basta. */
.logo-caja > .elementor-widget-wrap {
	flex-wrap: nowrap !important;
	align-content: center !important;
}


/* ---- Ajustes Figma servicios INSTORE · 14-10-2026 ---- */