/*
Theme Name:   DONIVISS
Theme URI:    https://doniviss.com
Description:  Tema hijo de Hello Elementor para DONIVISS. Reformas, proyectos y licencias en Gipuzkoa. Construido por MD Marketing.
Author:       MD Marketing
Author URI:   https://mdmarketing.es
Template:     hello-elementor
Version:      1.0.0
Text Domain:  doniviss-child
Tags:         elementor
*/

/* Los colores, tipografias y espaciados NO se definen aqui.
   Viven en los globales del kit de Elementor (tarea 2.3 del plan de produccion),
   para que se editen desde el editor y no haya dos fuentes de verdad.
   Este fichero es solo para lo que Elementor no puede expresar. */
/* ============================================================================
   QA responsive de movil - 21 de septiembre de 2026
   ----------------------------------------------------------------------------
   Este bloque se anade a style.css del tema hijo. Vive aqui, y no en el
   custom_css de cada elemento, porque cada defecto se repite en las 85 URL y
   en los cinco idiomas: una regla por clase de elemento cubre las cinco
   plantillas de cabecera y las cinco de pie, que comparten los mismos
   `element_id`. Comprobado el 21-sep: las plantillas 32, 76, 77, 78 y 79
   llevan los mismos ids, y las 33, 80, 81, 82 y 83 tambien.

   La excepcion es la rejilla de las tarjetas de servicio de la portada: ese
   defecto esta DENTRO del `custom_css` del propio elemento, asi que se corrige
   alli con scripts/parche-ajustes.php y no se tapa desde aqui.

   Medido a 320, 360, 390 y 414 px antes y despues. Los numeros estan en
   doniviss/STATUS.md.
   ========================================================================= */

/* --- 1. Palabras largas que se salian de su caja -------------------------
   Medido: la pagina eu/erreformak-jabekideen-komunitateentzat desbordaba
   137 px a 320 px por la palabra "komunitatearentzat". Otras once paginas
   desbordaban entre 1 y 70 px, casi todas en euskera y portugues.
   `hyphens:auto` parte la palabra con guion donde el navegador tiene reglas
   del idioma (Polylang ya pone el `lang` correcto); `overflow-wrap` es el
   ultimo recurso para los idiomas sin reglas. Ninguna de las dos hace nada
   mientras la palabra quepa, asi que no cambia ninguna pagina que ya estaba
   bien. NO se toca el tamano de letra de ningun titular: eso es decision de
   JC, y esta anotado como pendiente. */
.elementor-heading-title,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.e-n-accordion-item-title-text {
	overflow-wrap: break-word;
	hyphens: auto;
	/* Sin este limite, `hyphens:auto` parte tambien palabras que si caben:
	   el titular en euskera de erreformak-jabekideen-komunitateentzat salia
	   con CUATRO guiones. Con el limite sale con uno, y solo en la palabra
	   que de verdad no entra. Comprobado que sigue sin desbordar a 320, 360,
	   390 y 414 px. Orden: minimo de la palabra, minimo antes del guion,
	   minimo despues. */
	hyphenate-limit-chars: 12 6 4;
}

@media (max-width: 767px) {

	/* --- 2. La cabecera estrangulaba el logotipo ----------------------
	   Medido: el ancho natural del logotipo a 20 px de alto es 150 px.
	   Se pintaba a 28 px a 320, 68 a 360, 98 a 390 y 122 a 414, porque la
	   columna del menu reclamaba 167 px aunque en movil solo se ve la
	   hamburguesa. A 320 px el nombre DONIVISS quedaba a un cuarto de su
	   tamano. Ahora la columna del logotipo se mide por su contenido y la
	   del menu por el boton. */
	.elementor-element-dc0df8c {
		--e-con-grid-template-columns: auto minmax(44px, 1fr) auto !important;
	}

	/* Y aqui esta la causa de raiz de lo anterior: el panel del menu es un
	   bloque ESTATICO dentro del widget, asi que su ancho (156 px mas relleno)
	   era lo que obligaba a la columna a medir 167 px. Sacandolo del flujo, la
	   columna puede medir lo que mide el boton y el logotipo recupera su sitio.
	   Se ancla a la derecha: 220 px de panel entran a 320 px de pantalla con
	   8 px de margen, comprobado a los cuatro anchos.
	   El selector nombra `nav.elementor-nav-menu__container` a proposito: la
	   clase `elementor-nav-menu--dropdown` la llevan TAMBIEN los `ul.sub-menu`,
	   y una regla mas ancha se los llevaba por delante. */
	.elementor-element-4048a6d nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: auto !important;
		right: 0 !important;
		width: 220px !important;
	}

	/* --- 3. Zonas de toque por debajo de 44 x 44 px -------------------
	   Se agranda el area, nunca la letra. */

	/* Hamburguesa: era 33 x 33 en las 85 URL. */
	.elementor-element-4048a6d .elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Selector de idioma: cada idioma era 60 x 36. */
	.elementor-element-b5e21c7 .cpel-switcher__lang > a {
		min-height: 44px;
		box-sizing: border-box;
	}

	/* Enlace del logotipo de la cabecera: 149 x 20 en las 85 URL. */
	.elementor-element-efade43 > a {
		min-height: 44px;
		align-items: center;
	}

	/* Todas las listas de enlaces, no solo las del pie. Son el mismo widget
	   (icon-list) y el mismo defecto: 23 px de alto en el pie de las 85 URL y
	   25 px en las listas de "paginas relacionadas" de las paginas de
	   servicio. Una regla por clase de widget las coge todas, incluidas las
	   que se anadan manana; nombrarlas por id dejaba fuera nueve. */
	.elementor-widget-icon-list .elementor-icon-list-item > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* En el pie, ademas, se quita el relleno inferior del elemento de lista y
	   esa altura pasa al enlace: asi el paso sube de 39 a 52 px y no a 60, el
	   enlace mide 44 y conserva los 8 px de separacion con el siguiente.
	   Medido: el pie pasa de 1151 a 1408 px a 360 px de ancho, no a 1496. */
	.elementor-element-dd3eb43 .elementor-icon-list-items .elementor-icon-list-item:not(:last-child),
	.elementor-element-610dd25 .elementor-icon-list-items .elementor-icon-list-item:not(:last-child),
	.elementor-element-9b67912 .elementor-icon-list-items .elementor-icon-list-item:not(:last-child) {
		padding-bottom: 0 !important;
	}

	/* Logotipo del pie, que no es una lista sino una imagen con enlace. */
	.elementor-element-d6ebfd4 > a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Telefonos escritos dentro de un bloque de texto: median 280 x 31. */
	.elementor-element-2fb3603 a,
	.elementor-element-bcc6fb1 a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Enlaces con aspecto de boton que median 24 y 25 px de alto. */
	.elementor-element-cb1b738 .elementor-button,
	.elementor-element-333dc81 .elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}
/* ============================================================================
   UX de movil - 21 de septiembre de 2026 (segunda tanda, pedida por JC)
   ----------------------------------------------------------------------------
   Tres arreglos que salieron de mirar la web en un telefono de verdad, no de
   medirla. Van aqui, detras del bloque del QA, por la misma razon que aquel:
   las cinco cabeceras y los cinco pies comparten `element_id`, y el contenedor
   del hero es `198e421` en las once landings, asi que una regla por clase
   cubre las once paginas y sus cinco idiomas de una vez.

   Medido antes y despues a 320, 360, 390 y 414 px. Numeros en
   doniviss/STATUS.md.
   ========================================================================= */

@media (max-width: 767px) {

	/* --- 1. "De principio a fin": los puntos se estiraban a todo el ancho ---
	   En escritorio la seccion es una linea de tiempo horizontal: un rail de
	   1 px y cuatro puntos de 16 x 16 con radio 999 centrados sobre cada
	   pastilla. En movil el rail se oculta (lo hace el custom_css de 4c0dcca)
	   y los cuatro pasos se apilan, pero el punto seguia siendo hijo de un
	   contenedor en columna: se estiraba a 191 px y se veia como una barra
	   negra solida encima de cada rotulo.

	   Aqui la linea de tiempo se gira 90 grados en vez de romperse: cada paso
	   pasa a ser una fila (punto a la izquierda, pastilla a la derecha) y se
	   dibuja un rail vertical que los une. El bloque baja de 364 a 198 px. */
	.elementor-element-ddb6bf2 {
		position: relative;
		gap: 14px !important;
		align-items: stretch !important;
	}
	.elementor-element-ddb6bf2::before {
		content: '';
		position: absolute;
		left: 7px;              /* el centro de un punto de 16 px */
		/* Empieza y acaba en el CENTRO del primer y del ultimo punto, no en el
		   borde del bloque: una linea de tiempo que se pasa del ultimo paso
		   parece que sigue. 18,5 px es la mitad de la fila, que mide 37 en los
		   cinco idiomas y a los cuatro anchos (medido). */
		top: 18.5px;
		bottom: 18.5px;
		width: 1px;
		background: var( --e-global-color-dvlinea, #D8D1C7 );
	}
	.elementor-element-ddb6bf2 > .e-con {
		flex-direction: row !important;
		align-items: center !important;
		gap: 14px !important;
		width: 100%;
	}
	.elementor-element-ddb6bf2 > .e-con > .e-con:first-child {   /* el punto */
		/* El punto trae del escritorio un `margin-bottom:23px`, que era el aire
		   entre el y su pastilla cuando iban en columna. En la fila ese margen
		   entra en la caja que se centra, asi que el punto se subia 11 px y
		   quedaba descolgado del rotulo. Medido: con el margen, centros en
		   8 y 20; sin el, los dos en 19. */
		margin: 0 !important;
		flex: 0 0 16px;
		width: 16px;
		max-width: 16px;
		height: 16px;
		min-height: 16px;
		position: relative;
		z-index: 1;             /* por encima del rail */
	}
	.elementor-element-ddb6bf2 > .e-con > .e-con:last-child {    /* la pastilla */
		flex: 0 1 auto;
	}

	/* --- 2. La cabecera dejaba de estar al bajar -----------------------
	   Era `position:absolute`, asi que se quedaba arriba del todo y para ir a
	   otra pagina habia que volver a subir la pagina entera. Ahora queda fija.
	   Transparente mientras se esta arriba, que es como estaba pensada sobre
	   la foto del hero; solida y mas baja (88 -> 64 px) en cuanto se baja, que
	   es cuando pasa por encima de contenido claro y el logotipo blanco
	   dejaria de leerse. La clase la pone assets/js/cabecera-movil.js.

	   `!important` en `position` porque el `custom_css` del propio contenedor
	   declara `absolute` con mas especificidad que una regla por clase. */
	.elementor-element-dc0df8c {
		position: fixed !important;
	}
	body.dv-cabecera-posada .elementor-element-dc0df8c {
		background: var( --e-global-color-secondary, #1E1E1D );
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		box-shadow: 0 1px 0 rgba( 255, 255, 255, .10 );
	}

	/* --- 3. El hero de las landings ponia toda la letra y la foto al final ---
	   Medido en /reformas-para-comunidades/ a 390 px: el hero mide 1.396 px,
	   de los cuales 888 son texto, y la imagen no empezaba hasta el pixel
	   1.032, con la pantalla en 800. El visitante abria la pagina y no veia una
	   sola foto. Ahora la imagen sube justo detras del titular grande y
	   empieza en el 439.

	   Como se hace sin tocar el arbol: la imagen es HERMANA de la columna de
	   texto, no hija, asi que `order` por si solo solo permite ponerla antes o
	   despues de TODO el texto. Disolviendo la columna con `display:contents`,
	   sus cinco widgets pasan a ser hermanos de la imagen y ya se pueden
	   intercalar. La columna tenia `gap:0`, asi que no se pierde separacion.

	   `:has()` es el guardarrail: /solicitar-presupuesto/ comparte el id del
	   contenedor pero su segundo hijo es un formulario, no una imagen, y no
	   debe tocarse. Comprobado: sigue midiendo 1.678 px, igual que antes.

	   `align-items: stretch` NO es adorno. El contenedor trae
	   `align-items:center`, que en una rejilla es el eje vertical y no hace
	   nada, pero al pasar a flex en columna se vuelve el eje horizontal: sin
	   esta linea la imagen de /sobre-doniviss/ encogia de 350 a 240 px. */
	.elementor-element-198e421 > .e-con-inner > .e-con:has( > .elementor-widget-image ) {
		display: flex !important;
		flex-direction: column;
		gap: 0;
		align-items: stretch !important;
	}
	.elementor-element-198e421 > .e-con-inner > .e-con:has( > .elementor-widget-image ) > .e-con {
		display: contents;
	}
	/* rotulo y titular */
	.elementor-element-198e421 > .e-con-inner > .e-con:has( > .elementor-widget-image ) > .e-con > :nth-child(-n+2) {
		order: 1;
	}
	/* la imagen, con el aire que antes ponia el `row-gap` de la rejilla */
	.elementor-element-198e421 > .e-con-inner > .e-con:has( > .elementor-widget-image ) > .elementor-widget-image {
		order: 2;
		margin-block: 28px;
	}
	/* parrafo, botones y enlaces */
	.elementor-element-198e421 > .e-con-inner > .e-con:has( > .elementor-widget-image ) > .e-con > :nth-child(n+3) {
		order: 3;
	}

	/* La misma idea para /proyecto-y-licencia-de-obra/, que es la unica pagina
	   con otra estructura: su rejilla es el propio `.e-con-inner`, y la imagen
	   va envuelta en un contenedor mas, asi que el selector de arriba no la ve.
	   Medido: la imagen empezaba en el pixel 904, con la pantalla en 800.
	   Las otras dos raices del sitio no entran aqui: `0911aed` es la portada,
	   que a JC le gusta como esta, y las tres paginas legales comparten
	   `198e421` pero no tienen imagen, asi que `:has()` no dispara en ellas. */
	.elementor-element-280f9f8 > .e-con-inner {
		display: flex !important;
		flex-direction: column;
		gap: 0;
		align-items: stretch !important;
		/* `display:contents` se lleva por delante el relleno del elemento que
		   disuelve, y esa columna tenia `120px 20px 56px`. Medido: sin
		   devolverlo aqui la pagina encogia 177 px y el texto se iba al borde.
		   Va con los mismos valores a proposito, no con otros redondos. */
		padding: 120px 20px 56px;
	}
	.elementor-element-280f9f8 > .e-con-inner > .e-con:last-child { padding-inline: 0; }
	.elementor-element-280f9f8 > .e-con-inner > .e-con:first-child { display: contents; }
	.elementor-element-280f9f8 > .e-con-inner > .e-con:first-child > :nth-child(-n+2) { order: 1; }
	.elementor-element-280f9f8 > .e-con-inner > .e-con:last-child  { order: 2; margin-block: 28px; }
	.elementor-element-280f9f8 > .e-con-inner > .e-con:first-child > :nth-child(n+3) { order: 3; }
}

/* ============================================================================
   Margen lateral entre 1025 y 1303 px - 25 de septiembre de 2026 (decidido por JC)
   ----------------------------------------------------------------------------
   Por debajo de 1025 cada seccion lleva 32 px de relleno lateral (tablet) o 20
   (movil). Por encima, el contenido va en una caja de 1240 px sin relleno. Entre
   los dos, la caja llena la pantalla y el texto toca el borde: 0 px medidos a
   1025, 1100 y 1200, y 3 px de desborde a 1025.

   `max()` respeta el relleno de la seccion que ya tenga mas de 32 px. El tope es
   1303 = 1240 + 2 x 32: desde ahi la caja ya deja ese margen sola.

   Probado inyectado antes de escribirlo: margen de 0 a 32 px, desborde de 3 a 0,
   y 1024, 1304 y 1440 sin cambios. Prueba en
   doniviss/web/.build/qa-movil-20260921/franja-1025/.
   ========================================================================= */

@media (min-width: 1025px) and (max-width: 1303px) {
	.e-con.e-parent {
		padding-left: max(32px, var(--padding-left, 0px)) !important;
		padding-right: max(32px, var(--padding-right, 0px)) !important;
	}
}


/* ============================================================================
   Bloque [cmplz-manage-consent] de /cookies/ - 10 de octubre de 2026 (JC)
   ----------------------------------------------------------------------------
   Complianz solo da estilo a sus casillas dentro del banner (.cmplz-cookiebanner).
   En la pagina de cookies el mismo marcado salia en crudo: casillas del sistema y
   flechas sueltas debajo de cada categoria, en los 5 idiomas.

   Aqui: una fila por categoria con filete de 1 px, el nombre a la izquierda, el
   interruptor y la flecha a la derecha, y la descripcion al desplegar. Colores y
   foco del design system. El interruptor es pildora, el unico radio que la marca
   admite para controles de este tipo.

   Cambiar el interruptor guarda la eleccion al momento: lo hace Complianz, este
   CSS no toca su comportamiento. Twenty 250103a0.
   ========================================================================= */

/* 560 px: a todo el ancho del texto (760) el interruptor quedaba lejos de su nombre.
   Complianz ya limitaba las filas a unos 485 px y el filete de arriba no casaba. */
#cmplz-manage-consent-container {
	max-width: 560px;
	margin: 20px 0 8px;
	border-top: 1px solid var(--dv-linea, #D8D1C7);
}
#cmplz-manage-consent-container .cmplz-categories { display: block; width: 100%; max-width: none; }
#cmplz-manage-consent-container .cmplz-category {
	width: 100%;
	max-width: none;
	border-bottom: 1px solid var(--dv-linea, #D8D1C7);
}
#cmplz-manage-consent-container .cmplz-category-header {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 8px 0;
}
#cmplz-manage-consent-container .cmplz-category-title {
	flex: 1 1 auto;
	font-weight: 500;
	color: var(--dv-tinta, #1E1E1D);
}
#cmplz-manage-consent-container .cmplz-always-active {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dv-texto-suave, #63605A);
}

/* Interruptor: la casilla real sigue ahi, invisible y encima, para que el clic,
   el teclado y el lector de pantalla funcionen igual que antes. */
#cmplz-manage-consent-container .cmplz-banner-checkbox {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
}
#cmplz-manage-consent-container .cmplz-consent-checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
#cmplz-manage-consent-container .cmplz-label {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 999px;
	/* Apagado: pista blanca con borde y bola en texto suave (5,3:1 sobre el hueso;
	   la linea sola daba 1,2:1 y casi no se veia). Encendido: pista bronce y bola
	   blanca. Se distinguen por color y por posicion, no solo por una de las dos. */
	border: 1px solid var(--dv-texto-suave, #63605A);
	background: var(--dv-blanco, #FFFFFF);
	transition: background-color .15s ease, border-color .15s ease;
}
#cmplz-manage-consent-container .cmplz-label::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--dv-texto-suave, #63605A);
	transition: transform .15s ease, background-color .15s ease;
}
#cmplz-manage-consent-container .cmplz-consent-checkbox:checked + .cmplz-label {
	border-color: var(--dv-bronce, #56421D);
	background: var(--dv-bronce, #56421D);
}
#cmplz-manage-consent-container .cmplz-consent-checkbox:checked + .cmplz-label::after {
	background: var(--dv-blanco, #FFFFFF);
	transform: translateX(20px);
}
#cmplz-manage-consent-container .cmplz-consent-checkbox:focus-visible + .cmplz-label {
	box-shadow: 0 0 0 2px var(--dv-hueso, #EDE6E1), 0 0 0 4px var(--dv-bronce, #56421D);
}
/* Funcional va siempre activo: se ve encendido y no invita a pulsarlo. */
#cmplz-manage-consent-container .cmplz-always-active .cmplz-consent-checkbox { cursor: default; }
#cmplz-manage-consent-container .cmplz-always-active .cmplz-label {
	border-color: var(--dv-bronce-claro, #8A7346);
	background: var(--dv-bronce-claro, #8A7346);
}
#cmplz-manage-consent-container .cmplz-always-active .cmplz-label::after {
	background: var(--dv-blanco, #FFFFFF);
	transform: translateX(20px);
}

/* Flecha que despliega la descripcion: boton de 44 px de lado. */
#cmplz-manage-consent-container .cmplz-category-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0 -10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--dv-texto, #3D3C39);
	cursor: pointer;
}
#cmplz-manage-consent-container .cmplz-category-toggle:hover { background: var(--dv-arena, #E4DCCB); }
#cmplz-manage-consent-container .cmplz-category-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--dv-hueso, #EDE6E1), 0 0 0 4px var(--dv-bronce, #56421D);
}
#cmplz-manage-consent-container .cmplz-category-toggle .cmplz-icon { display: inline-flex; }
#cmplz-manage-consent-container .cmplz-category-toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	transition: transform .15s ease;
}
#cmplz-manage-consent-container .cmplz-category-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

#cmplz-manage-consent-container .cmplz-description {
	padding: 0 54px 16px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dv-texto-suave, #63605A);
}
#cmplz-manage-consent-container .cmplz-description[hidden] { display: none; }

@media (max-width: 767px) {
	#cmplz-manage-consent-container .cmplz-always-active { font-size: 13px; }
	#cmplz-manage-consent-container .cmplz-description { padding-right: 0; }
}