/* Base de estilos para las paginas INS_ICP* de instore.es.
   Bloques heredados de la pagina INS_SERVICIO-CAMPANAS PLV (52738), ya probados:
   antetitulos con rayita, tarjetas de proyectos, boton 'Ver mas proyectos' y acordeon FAQ.
   Los estilos de boton (.btn-instore, .btn-destacado) viven en el style.css global. */

/* 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%; }
}

/* 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; }


/* 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;
}


/* ======================================================================
   Bloques propios de las paginas ICP
   ====================================================================== */

/* Botones del hero: en Figma los dos miden 541x91 sobre 1920 -> 338x57 aqui,
   con el texto centrado. Sin esto cada uno coge el ancho de su texto. */
.btn-icp .elementor-button {
	width: 338px;
	justify-content: center;
	text-align: center;
}
.btn-icp .elementor-button .elementor-button-content-wrapper {
	justify-content: center;
	width: 100%;
}
@media (max-width: 767px) {
	.btn-icp .elementor-button { width: 100%; }
}

/* Las tres fotos bajo las tarjetas crema vienen con proporciones distintas
   (544x304, 552x310, 555x306). Se recortan a la misma caja. */
.icp-card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 544 / 304;
	object-fit: cover;
}

/* Citas: las tres cajas grises a la misma altura aunque el texto sea desigual,
   con el cargo y la marca pegados abajo (en Figma miden 576x483 las tres).
   Mismo patron que .proy-col: la columna exterior en flex y la seccion interior
   estirada; si no, cada caja coge la altura de su propio texto. */
.testi-col > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.testi-col > .elementor-widget-wrap > .elementor-section {
	flex: 1 1 auto;
	display: flex;
}
.testi-col > .elementor-widget-wrap > .elementor-section > .elementor-container,
.testi-col > .elementor-widget-wrap > .elementor-section .elementor-column {
	width: 100%;
}
.testi-col .elementor-widget-wrap > .elementor-widget-text-editor:first-child {
	flex: 1 0 auto;
}

/* Filas de pasos (solucion INSTORE / como trabajamos): en escritorio llevan una
   linea vertical entre columnas. Elementor pinta ese borde sobre
   .elementor-widget-wrap, no sobre la columna. Al apilarse en movil la vertical
   no tiene sentido: se quita y se pone una horizontal debajo de cada paso. */
@media (max-width: 767px) {
	.icp-step-col > .elementor-widget-wrap {
		border-left: none !important;
	}
	.icp-step-col:not(:last-child) {
		border-bottom: 1px solid #9F9B9B !important;
	}
}

/* Circulos de marcas (ICP3): en Figma son elipses de 204px sobre 1920 -> 128px
   aqui, con el nombre centrado dentro. */
.logo-circulo p {
	background: #EEE9DB;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 auto;
	padding: 0 14px;
	box-sizing: border-box;
	line-height: 1.2;
}
@media (max-width: 767px) {
	.logo-circulo p { width: 104px; height: 104px; font-size: 15px; }
}

/* Fotos de los bloques con numero gigante: misma caja para todas. */
.icp-num-img img {
	display: block;
	width: 100%;
	aspect-ratio: 664 / 488;
	object-fit: cover;
}

/* Boton centrado bajo una frase de banda negra. */
.btn-icp-centro .elementor-widget-container { text-align: center; }
.btn-icp-centro .elementor-button { display: inline-flex; }

/* Boton blanco del hero y de las bandas negras. No puede usar .btn-destacado
   porque esa clase (style.css global) impone el fondo dorado. */
.btn-icp-blanco .elementor-button {
	background-color: #FFFFFF !important;
	color: #000000 !important;
	border: none;
}
.btn-icp-blanco .elementor-button:hover {
	background-color: #EEE9DB !important;
	color: #000000 !important;
}

/* ======================================================================
   INICIO 2026-09-18 — Citas: de la linea de separacion hacia abajo, todo
   alineado entre las tres tarjetas aunque una cita ocupe mas lineas.
   Ya existia `.testi-col ... text-editor:first-child{flex:1 0 auto}` para
   que la cita se comiera el hueco sobrante, pero no hacia nada porque el
   `.elementor-widget-wrap` de la caja gris no era flex. Esto lo arregla.
   ====================================================================== */
.testi-col .elementor-section .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
}
/* FIN 2026-09-18 — citas alineadas por abajo */

/* ======================================================================
   INICIO 2026-09-18 — Botones del hero: mismo alto y mismo ancho.
   El dorado lleva ademas `.btn-destacado` (style.css global), que le sube
   la letra a 19px; con el borde de 1px salia 63px de alto contra 58 del
   blanco. Se igualan tipografia y caja: Figma 541x91 -> 338x57.
   ====================================================================== */
.btn-icp .elementor-button { font-size: 17px; }

@media (min-width: 768px) {
	.btn-icp .elementor-button {
		height: 57px;
		padding-top: 0;
		padding-bottom: 0;
		align-items: center;
		justify-content: center;
	}
}
@media (max-width: 767px) {
	/* El primer boton lleva 16px de margen a la derecha para separarlo del
	   segundo; al apilarse sobra y lo dejaba 16px mas estrecho. */
	.btn-icp > .elementor-widget-container { margin-right: 0 !important; }
	.btn-icp .elementor-button {
		font-size: 15px;
		height: 52px;
		padding-top: 0;
		padding-bottom: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
}
/* FIN 2026-09-18 — botones del hero */