/*
 * Aliances Experience - capa de marca que vale para todo el sitio.
 *
 * Aqui solo lo que no puede vivir en una clase global v4 porque el marcado no
 * es nuestro: los botones de los formularios de Elementor, que son v3 y no
 * aceptan clases globales.
 *
 * Todo cuelga de las custom properties --ae-* que emite el Kit, asi que un
 * cambio de token repinta tambien esto.
 */

/* ---------------------------------------------------------------------------
 * Botones de formulario
 *
 * El selector lleva el widget delante a proposito: Elementor escribe su propio
 * hover por elemento con cuatro clases, y sin esa quinta esto no gana — y
 * pelearlo con !important deja el boton imposible de matizar desde el editor.
 *
 * Mismo estado normal y mismo hover que el boton solido de la marca
 * (ae-btn-solid), con los colores leidos del Figma de la portada: el fondo pasa
 * a rosa palido y el texto al color de marca, manteniendo el borde. Vale para
 * los formularios de Elementor Pro esten donde esten — portada, contacto o
 * cualquier pagina que se monte manana.
 * ------------------------------------------------------------------------ */

.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button,
.elementor .elementor-widget.elementor-widget-form .elementor-form button[type="submit"],
.elementor .elementor-widget.elementor-widget-form form.elementor-form .elementor-button {
	/* Rosa claro de produccion (.btn-alianzas), no el acento del kit. */
	border: 1px solid #E6B7B2;
	border-radius: 8px;
	background-color: #E6B7B2;
	color: #fff;
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button:hover,
.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button:focus-visible,
.elementor .elementor-widget.elementor-widget-form .elementor-form button[type="submit"]:hover,
.elementor .elementor-widget.elementor-widget-form .elementor-form button[type="submit"]:focus-visible {
	border-color: #D4A39D;
	background-color: #D4A39D;
	color: #fff;
}

/* El texto y el icono heredan el color del boton, que es lo que cambia. */
.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button:hover .elementor-button-text,
.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button:hover .elementor-button-icon,
.elementor .elementor-widget.elementor-widget-form .elementor-form button[type="submit"]:hover .elementor-button-text {
	color: inherit;
}

/* Mientras se envia, el boton no responde: se nota que esta ocupado. */
.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button[disabled],
.elementor .elementor-widget.elementor-widget-form .elementor-form .elementor-button.elementor-button-state {
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * Enlaces con filete (ae-link-underline)
 *
 * El filete iba como border-bottom mas un relleno inferior, y el boton atomico
 * de v4 impone al enlace una altura fija: con box-sizing: border-box, relleno y
 * borde quedaban DENTRO de esa altura y la linea acababa cruzando las letras.
 * Comprobado que no hay forma de ganarle desde fuera — ni con padding ni con
 * height en !important la caja se mueve.
 *
 * Asi que el filete deja de ser un borde y pasa a ser lo que siempre debio ser:
 * el subrayado del propio texto, separado con text-underline-offset. No depende
 * de la caja, sigue al texto si cambia de tamano y se corta solo en los
 * descendentes.
 * ------------------------------------------------------------------------ */

.elementor a.ae-link-underline,
.elementor .ae-link-underline.e-button-base {
	padding-bottom: 0;
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ae-line);
	text-underline-offset: 7px;
	transition: color 250ms ease, text-decoration-color 250ms ease;
}

.elementor a.ae-link-underline:hover,
.elementor a.ae-link-underline:focus-visible {
	text-decoration-color: var(--ae-accent-dark);
}

/* ---------------------------------------------------------------------------
 * Selector de idioma incrustado en una lista de iconos
 *
 * En la barra superior el switcher entra como plantilla dentro del texto de un
 * item de la lista, asi que arrastra dos cosas ajenas: el contenedor de la
 * plantilla, que es de bloque y estira la fila, y la hoja legacy-dropdown de
 * WPML, que dibuja un desplegable falso de 15,5em con borde gris y fondo
 * blanco. Eso es el recuadro que salia junto a CONTACTO.
 *
 * Aqui se desmonta esa caja para que el toggle sea un item mas de la lista:
 * hereda tipografia y color de los hermanos y lleva un galon fino en vez del
 * triangulo relleno. El desplegable si conserva panel propio, porque flota
 * sobre el contenido y necesita fondo para leerse.
 * ------------------------------------------------------------------------ */

.elementor-icon-list-text > .elementor,
.elementor-icon-list-text > .elementor > .e-con,
/*
 * El widget en si NO entra aqui: `elementor-hidden-mobile` lo oculta con
 * `display: none` y un `display: flex` de dos clases se lo comeria. Como su
 * padre ya es flex, el widget se ajusta al contenido sin que lo toquemos.
 */
.elementor-icon-list-text .elementor-widget-wpml-language-switcher > .elementor-widget-container,
.elementor-icon-list-text .wpml-elementor-ls {
	display: flex;
	align-items: center;
	width: auto;
	min-height: 0;
	/* El contenedor de widget de Elementor recorta: sin esto el panel no asoma. */
	overflow: visible;
}

.elementor-icon-list-text .wpml-ls,
.elementor-icon-list-text .wpml-ls-legacy-dropdown,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click {
	width: auto;
}

/* El toggle deja de ser un boton y pasa a ser texto: mismo aire que los demas. */
.elementor-icon-list-text .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0 1.1em 0 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	transition: color 250ms ease;
}

.elementor-icon-list-text .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover,
.elementor-icon-list-text .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:hover,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:focus {
	background: transparent;
	color: var(--ae-accent);
}

/*
 * WPML dibuja la flecha con un triangulo de bordes solidos. Se reaprovecha el
 * mismo pseudo-elemento como galon: dos lados de 1px girados 45 grados, que es
 * lo que pide el diseno y ademas sigue al color del texto.
 */
.elementor-icon-list-text .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle::after {
	right: 0;
	top: calc(50% - 0.34em);
	width: 0.38em;
	height: 0.38em;
	border: 0;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	border-image: none;
	transform: rotate(45deg);
}

/* El panel flotante: ancho por contenido, sin el borde superior del legacy. */
.elementor-icon-list-text .wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
	right: auto;
	left: 0;
	min-width: 100%;
	border: 1px solid var(--ae-line, #cdcdcd);
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.elementor-icon-list-text .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a {
	border: 0;
	padding: 8px 14px;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
}

.elementor-icon-list-text .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover,
.elementor-icon-list-text .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:focus,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a:hover,
.elementor-icon-list-text .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a:focus {
	background: transparent;
	color: var(--ae-accent);
}


/* ---------------------------------------------------------------------------
 * Etiquetas flotantes de los formularios (orbitalia-theme)
 *
 * El tema dibuja la etiqueta con un pseudo-elemento sobre el contenedor del
 * campo -.orb-float--pseudo::before, con content: attr(data-orb-label)-, y ahi
 * no llega la tipografia del input: el pseudo cuelga de un div sin fuente
 * propia, asi que salia en Times New Roman y en negro. Solo el campo de fecha
 * se veia bien, porque ese conserva el placeholder nativo del input.
 *
 * Arreglo de sitio. El arreglo de raiz es del tema: que floating-labels.css
 * copie la fuente y el color del campo al pseudo.
 * ------------------------------------------------------------------------ */

.orb-float.orb-float--pseudo::before,
.orb-float > .elementor-field-label {
	font-family: var(--ae-font-body), sans-serif;
	font-weight: 300;
	color: var(--ae-body);
}

/* ---------------------------------------------------------------------------
 * Pop-up de asesoramiento (4163 es / 4488 ca)
 *
 * El contenedor v4 trae los 10 px de relleno por defecto de Elementor, y el
 * pop-up no lleva marco: se veia una franja blanca alrededor de la foto.
 *
 * El borde de los campos venia del gris azulado por defecto de Elementor
 * (#69727d). En produccion es un gris neutro, que es lo que se recupera aqui.
 * ------------------------------------------------------------------------ */

.elementor .elementor-element-pop-row {
	padding: 0;
}

.elementor .elementor-element-pop-form .elementor-field-textual {
	border-color: #ddd;
}

/* ---------------------------------------------------------------------------
 * Campos que no entran en la etiqueta flotante
 *
 * El de fecha lo monta flatpickr y conserva su placeholder nativo, asi que no
 * pasa por el pseudo del tema y salia en peso 400 mientras las etiquetas van en
 * 300. Se iguala aqui para que los cinco campos del formulario se lean igual.
 * ------------------------------------------------------------------------ */

.elementor .elementor-field-textual::placeholder {
	font-weight: 300;
	color: var(--ae-body);
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * Fondo bajo la etiqueta flotante
 *
 * Al flotar, la etiqueta se apoya en el borde superior del campo y el borde le
 * cruza el texto. El tema lo resuelve a partir de la 0.8.1 midiendo el fondo
 * del campo y publicandolo en --orb-float-bg; Ros va con la 0.7.0, asi que aqui
 * se da el blanco del campo como valor por defecto. Cuando entre la 0.8.1, la
 * variable del tema manda y esta regla deja de pintar nada distinto.
 *
 * El relleno lateral se compensa con margen negativo para que el texto no se
 * mueva al activarse el campo.
 * ------------------------------------------------------------------------ */

.orb-float:focus-within > .elementor-field-label,
.orb-float.is-filled > .elementor-field-label,
.orb-float:has(input:not(:placeholder-shown)) > .elementor-field-label,
.orb-float:has(textarea:not(:placeholder-shown)) > .elementor-field-label,
.orb-float.orb-float--pseudo:focus-within::before,
.orb-float.orb-float--pseudo.is-filled::before,
.orb-float.orb-float--pseudo:has(input:not(:placeholder-shown))::before,
.orb-float.orb-float--pseudo:has(textarea:not(:placeholder-shown))::before {
	background: var(--orb-float-bg, #fff);
	padding-inline: var(--orb-float-bg-pad, 0.4em);
	margin-inline-start: calc( -1 * var(--orb-float-bg-pad, 0.4em) );
}

/* ---------------------------------------------------------------------------
 * Grid de guias de la portada (widget guias-grid)
 *
 * En el Figma (249:120, y 7070-8020) las tres tarjetas no son iguales: una
 * columna estrecha a la izquierda con la foto alta, y a la derecha dos
 * tarjetas, la de arriba en horizontal —foto a un lado, texto al otro— y la de
 * abajo con la foto apaisada y el texto debajo. Todas salen de la misma
 * plantilla de loop item, asi que la variacion solo puede vivir aqui, en
 * nth-child: ni las clases globales v4 ni el editor saben contar hermanos.
 *
 * Medidas del Figma sobre una banda de 1406: columnas 541 y 828 con 37 de
 * separacion; dentro de la tarjeta horizontal, 352 de foto y 438 de texto, otra
 * vez con 37; y 44 entre las dos filas de la derecha. Van en fr para que el
 * reparto aguante cualquier ancho de banda.
 *
 * La foto de la izquierda no lleva proporcion propia a proposito: crece con
 * flex hasta donde llegue la columna derecha, y asi los dos textos de abajo
 * arrancan a la misma altura pase lo que pase con los excerpts. Con su 532/830
 * se desalinearia unos pixeles en cuanto cambiara el ancho.
 *
 * El widget cuela un <style> como primer hijo de la rejilla, asi que se cuenta
 * con nth-of-type y no con nth-child, que iria corrido una posicion.
 *
 * El :has() cuenta las tarjetas: con tres, esta composicion; con cualquier otro
 * numero el widget se queda con su rejilla normal en vez de descolocarse.
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.elementor .elementor-element-guias-grid .elementor-grid:has(> .e-loop-item:nth-of-type(3):last-child) {
		grid-template-columns: 541fr 828fr;
		/* El widget fija grid-auto-rows en 340px; aqui manda el contenido. */
		grid-template-rows: auto auto;
		grid-auto-rows: auto;
		column-gap: 37px;
		row-gap: 44px;
	}

	.elementor .elementor-element-guias-grid .elementor-grid:has(> .e-loop-item:nth-of-type(3):last-child) > .e-loop-item:nth-of-type(1) {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.elementor .elementor-element-guias-grid .elementor-grid:has(> .e-loop-item:nth-of-type(3):last-child) > .e-loop-item:nth-of-type(2) {
		grid-column: 2;
		grid-row: 1;
	}

	.elementor .elementor-element-guias-grid .elementor-grid:has(> .e-loop-item:nth-of-type(3):last-child) > .e-loop-item:nth-of-type(3) {
		grid-column: 2;
		grid-row: 2;
	}

	/* Tarjeta alta: la foto se come el hueco que dejan titulo, excerpt y enlace. */
	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(1) > .guia-card {
		height: 100%;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(1) > .guia-card > a:first-child {
		position: relative;
		flex: 1 1 auto;
		min-height: 0;
	}

	/*
	 * La foto va absoluta dentro de su enlace. Si se queda en el flujo, el grid
	 * le pregunta cuanto mide de minimo, la foto contesta con su proporcion
	 * natural (aqui 950px) y esa altura acaba estirando la fila de la derecha:
	 * las fotas dejan de terminar a la vez. Fuera del flujo no opina, y la
	 * columna izquierda se limita a rellenar lo que marca la derecha.
	 */
	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(1) .guia-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * Tarjeta horizontal. La foto ocupa las cuatro filas de la izquierda y el
	 * texto va en la columna derecha a partir de la segunda: la primera fila es
	 * 1fr y hace de muelle, que es lo que apoya el bloque de texto en el borde
	 * inferior de la foto, como en el diseno.
	 */
	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) > .guia-card {
		display: grid;
		grid-template-columns: 352fr 438fr;
		grid-template-rows: 1fr auto auto auto;
		column-gap: 37px;
		row-gap: 0;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) > .guia-card > a:first-child {
		grid-area: 1 / 1 / 5 / 2;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) > .guia-card > h3 {
		grid-column: 2;
		grid-row: 2;
		margin-block-end: 6px;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) > .guia-card > p {
		grid-column: 2;
		grid-row: 3;
		margin-block-end: 14px;
	}

	/*
	 * En grid, el align-self: start que traen los enlaces solo mira en vertical:
	 * en horizontal el enlace se estiraba a toda la columna y su text-align
	 * center dejaba el texto al medio. justify-self lo pega a la izquierda,
	 * como en las otras dos tarjetas, que son flex.
	 */
	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) > .guia-card > a:last-child {
		grid-column: 2;
		grid-row: 4;
		justify-self: start;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(2) .guia-img {
		aspect-ratio: 352 / 430;
		height: auto;
		object-fit: cover;
	}

	.elementor .elementor-element-guias-grid .e-loop-item:nth-of-type(3) .guia-img {
		aspect-ratio: 828 / 356;
		height: auto;
		object-fit: cover;
	}

	/*
	 * Los textos de las dos tarjetas de abajo tienen que arrancar a la misma
	 * altura, y eso solo pasa si ocupan lo mismo: la columna estrecha parte el
	 * excerpt en dos lineas y la ancha en una. Se fija en dos —las que tiene el
	 * diseno— y lo que sobre se corta.
	 */
	.elementor .elementor-element-guias-grid .guia-card > p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 52px;
	}
}

/* ---------------------------------------------------------------------------
 * Mensajes de validacion de los formularios
 *
 * Elementor Pro los pinta a 1em -16 px, el mismo cuerpo que el texto del
 * campo-, en el rojo de Bootstrap (#d9534f), con interlineado 1 y un aspa de
 * eicons delante: el aviso pesaba mas que el propio formulario. Se bajan a la
 * escala de la etiqueta flotante, al rojizo del kit (--ae-accent, 4.7:1 sobre
 * blanco) y sin aspa: el texto ya dice que pasa y el borde del campo, donde.
 *
 * El de exito sigue la misma escala en el color de marca: es el cierre del
 * formulario y no tiene por que salir en el verde de Bootstrap.
 * ------------------------------------------------------------------------ */

.elementor .elementor-widget-form .elementor-form .elementor-message {
	margin: var(--ae-space-xs, 8px) 0 0;
	font-family: var(--ae-font-body), sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
}

.elementor .elementor-widget-form .elementor-form .elementor-message::before {
	content: none;
}

.elementor .elementor-widget-form .elementor-form .elementor-message.elementor-message-danger {
	color: var(--ae-accent);
}

.elementor .elementor-widget-form .elementor-form .elementor-message.elementor-message-success {
	color: var(--ae-ink);
}

/* El campo que falla se marca con el mismo rojizo que su mensaje. */
.elementor .elementor-widget-form .elementor-field-group.elementor-error .elementor-field-textual {
	border-color: var(--ae-accent);
}

/*
 * Un mensaje bajo un campo alarga su grupo y la fila entera se estira a esa
 * altura. El grupo vecino centra el input en vertical, pero la etiqueta
 * flotante del tema va pegada arriba, asi que se separaban: en el pop-up salia
 * «Nombre» arriba y su campo 50 px mas abajo. Cada grupo mide lo suyo.
 */
.elementor .elementor-form-fields-wrapper > .elementor-field-group.orb-float {
	align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * Aspa de borrar del buscador
 *
 * El input del widget search-form es type=search, y Chrome le pinta su propio
 * boton de borrar: un aspa gruesa en el azul de acento del sistema, que no
 * pega con nada del sitio. Se sustituye por un aspa fina dibujada con mascara,
 * asi toma el color de marca (--ae-ink) y se puede atenuar como la lupa.
 * Firefox no pinta boton y Safari entiende el mismo pseudo.
 * ------------------------------------------------------------------------ */

.elementor-widget-search-form .elementor-search-form__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	margin-inline-start: 8px;
	background-color: var(--ae-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.elementor-widget-search-form .elementor-search-form__input::-webkit-search-cancel-button:hover {
	opacity: 1;
}

/* En el hero de la pagina de resultados el campo va en blanco sobre la foto
   (ae-busqueda.css): el aspa tambien, y algo mas opaca que en la cabecera
   porque sobre foto se lee peor. */
.elementor .ae-hero-cat .elementor-search-form__input::-webkit-search-cancel-button {
	background-color: #fff;
	opacity: 0.85;
}

.elementor .ae-hero-cat .elementor-search-form__input::-webkit-search-cancel-button:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Buscador de la cabecera: salto al teclear
 *
 * El kit reserva scroll-padding-top: 110px en html para que los anclajes no
 * queden bajo la cabecera sticky. Pero el buscador vive dentro de esa cabecera,
 * a 73 px del borde: al teclear, Chrome intenta sacar el cursor de la franja
 * reservada, sube la pagina, la cabecera sube con ella y el cursor sigue en el
 * mismo sitio, asi que en cada pulsacion la pagina salta hacia arriba. No lo
 * provoca ningun script (se instrumentaron scrollTo, scrollIntoView y compania
 * y no hubo llamadas) ni el overflow del campo.
 *
 * Mientras el buscador de la cabecera tiene el foco no hay franja que
 * respetar; al salir del campo vuelve el padding del kit y los anclajes siguen
 * igual.
 * ------------------------------------------------------------------------ */

html:has(.elementor-location-header .elementor-search-form__input:focus) {
	scroll-padding-top: 0;
}

/* ---------------------------------------------------------------------------
 * Colecciones de la portada (col-card-1..5)
 *
 * Diseno de septiembre de 2026 (Figma 278:589): el titulo va encima de la foto
 * y, al pasar el raton, la foto se oscurece con un fundido (negro al 54 %) y
 * aparecen dentro las subcategorias, en Jost 500 mayusculas con tracking
 * 0.14em. Sustituye al acordeon de «Ver modelos».
 *
 * La capa es un e-flexbox (col-ov-N) dentro del envoltorio de la foto. El
 * fundido depende del hover de la tarjeta, que es un estado del padre, y eso
 * no se puede expresar con estilos v4: por eso vive aqui.
 *
 * Sin raton (movil, tablet, cualquier pantalla tactil) no hay hover que
 * esperar: la capa pasa al flujo y las subcategorias salen como lista bajo la
 * foto, sin oscurecerla. Cada tarjeta lleva como mucho seis subcategorias mas
 * «Ver todas» hacia la categoria madre, que es lo que cabe en la foto a
 * 1440 px. Las dos cosas las decidio el usuario el 2026-09-10.
 * ------------------------------------------------------------------------ */

.elementor .elementor-element-colecciones :has(> [data-id^="col-ov-"]) {
	position: relative;
}

.elementor .elementor-element-colecciones [data-id^="col-ov-"] {
	display: flex;
	padding: 0;
}

/* e-button trae fondo, relleno y radio de boton; aqui es un enlace de texto. */
.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a {
	display: block;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--ae-font-body), sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 200ms ease;
}

@media (hover: hover) and (min-width: 1025px) {
	.elementor .elementor-element-colecciones [data-id^="col-ov-"] {
		position: absolute;
		inset: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(4px, 1vw, 22px);
		padding: 20px 16px;
		background: rgba(0, 0, 0, 0.54);
		text-align: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 400ms ease;
	}

	/* focus-within: quien navega con teclado tambien ve la capa al tabular. */
	.elementor .elementor-element-colecciones [data-id^="col-card-"]:hover [data-id^="col-ov-"],
	.elementor .elementor-element-colecciones [data-id^="col-ov-"]:focus-within {
		opacity: 1;
		pointer-events: auto;
	}

	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a {
		color: #fff;
		font-size: clamp(12px, 0.95vw, 14px);
		line-height: 1.3;
		letter-spacing: 0.14em;
	}

	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a:hover,
	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a:focus-visible {
		color: var(--ae-accent-light);
	}

	/*
	 * Hay titulos que parten en dos lineas a 1440 px («Anillos de Compromiso»,
	 * «Aliances de Casament») y bajaban su foto 33 px respecto a las demas. Las
	 * tarjetas se estiran a la misma altura y apoyan titulo y foto abajo: las
	 * fotos quedan alineadas y el titulo corto gana aire por encima. Solo aqui,
	 * con la capa fuera del flujo; en tactil la lista va debajo y descuadraria.
	 */
	.elementor .elementor-element-colecciones .elementor-element-col-grid {
		align-items: stretch;
	}

	.elementor .elementor-element-colecciones [data-id^="col-card-"] {
		justify-content: flex-end;
	}

	/* El diseno pide solo fundido y oscurecido: la foto deja de hacer zoom. */
	.elementor .elementor-element-colecciones [data-id^="col-img-"]:hover {
		transform: none;
	}
}

/*
 * Sin raton (movil, tablet, tactil): el diseno movil del Figma (370:411).
 * Foto apaisada, el titulo debajo y un desplegable -«Ver modelos de
 * alianza»- que abre la lista de subcategorias. Lo pidio el disenador el
 * 2026-09-10; sustituye a la lista siempre visible.
 *
 * El envoltorio de la foto se disuelve con display: contents para que foto,
 * titulo, boton (col-tg-N) y lista (col-ov-N) sean hermanos y se puedan
 * ordenar sin mover elementos en la plantilla. La lista solo se pliega cuando
 * el script de col-dd ha marcado la seccion (.col-dd-listo): sin JavaScript
 * se queda a la vista.
 */
@media (hover: none), (max-width: 1024px) {
	.elementor .elementor-element-colecciones [data-id^="col-card-"] {
		gap: 0;
	}

	.elementor .elementor-element-colecciones [data-id^="col-card-"] > div:has(> [data-id^="col-ov-"]) {
		display: contents;
	}

	.elementor .elementor-element-colecciones [data-id^="col-card-"] a:has(> [data-id^="col-img-"]),
	.elementor .elementor-element-colecciones [data-id^="col-card-"] div > [data-id^="col-img-"] {
		order: 1;
	}

	/* 370 x 238 en el Figma movil: la vertical de escritorio ocupaba la pantalla. */
	.elementor .elementor-element-colecciones img[data-id^="col-img-"] {
		aspect-ratio: 370 / 238;
		height: auto;
		object-fit: cover;
	}

	.elementor .elementor-element-colecciones [data-id^="col-t-"] {
		order: 2;
		margin-block-start: 10px;
		font-size: 26px;
	}

	.elementor .elementor-element-colecciones [data-id^="col-tg-"] {
		order: 3;
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 10px;
		min-width: 0;
		min-height: 0;
		margin: 2px 0 0;
		padding: 4px 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-family: var(--ae-font-body), sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 26px;
		letter-spacing: 0;
		text-transform: none;
		color: #8C8079;
		cursor: pointer;
	}

	/* La flecha: gira al abrir. */
	.elementor .elementor-element-colecciones [data-id^="col-tg-"]::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 250ms ease;
	}

	.elementor .elementor-element-colecciones [data-id^="col-card-"].is-open [data-id^="col-tg-"]::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.elementor .elementor-element-colecciones [data-id^="col-tg-"]:focus-visible {
		outline: 2px solid var(--ae-accent);
		outline-offset: 2px;
	}

	.elementor .elementor-element-colecciones [data-id^="col-ov-"] {
		order: 4;
		position: static;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 4px 0 8px;
	}

	/*
	 * Efecto slide: la lista se despliega animando la altura maxima (0 a 420
	 * px, holgado para los 7 enlaces con dos lineas en catalan) y el fundido.
	 * max-height y no height: auto porque animar a auto solo lo hace Chrome
	 * reciente. Plegada queda en visibility: hidden, que la saca del orden de
	 * tabulacion y del lector de pantalla; el retraso de visibility deja
	 * terminar la animacion de cierre antes de ocultarla.
	 */
	.elementor .elementor-element-colecciones.col-dd-listo [data-id^="col-ov-"] {
		overflow: hidden;
		max-height: 420px;
		opacity: 1;
		visibility: visible;
		transition: max-height 350ms ease, opacity 250ms ease, padding 350ms ease, visibility 0s;
	}

	.elementor .elementor-element-colecciones.col-dd-listo [data-id^="col-card-"]:not(.is-open) [data-id^="col-ov-"] {
		max-height: 0;
		padding-block: 0;
		opacity: 0;
		visibility: hidden;
		transition: max-height 350ms ease, opacity 250ms ease, padding 350ms ease, visibility 0s linear 350ms;
	}

	/* Jost Regular 16 px en el color de enfasis del kit (pedido el 2026-09-10;
	   antes el gris #8C8079 del menu), el mismo cuerpo que el texto del
	   desplegable («Ver estilos de anillo»), sin versalitas: las mayusculas
	   espaciadas son solo de la capa de escritorio. Lo fijo el usuario el
	   2026-09-10 (primero 14 px, como el Figma; luego 16). 8 px arriba y abajo:
	   cada enlace da ~38 px de alto para el dedo. */
	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a {
		padding-block: 8px;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.4;
		letter-spacing: 0;
		text-transform: none;
		color: var(--e-global-color-accent);
	}

	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a:hover,
	.elementor .elementor-element-colecciones [data-id^="col-ov-"] > a:focus-visible {
		color: var(--ae-accent);
	}
}

/* Con raton y en escritorio el desplegable no existe: manda el hover. */
@media (hover: hover) and (min-width: 1025px) {
	.elementor .elementor-element-colecciones [data-id^="col-tg-"] {
		display: none;
	}
}

/* El widget del script no pinta nada: que no ocupe hueco en la columna. */
.elementor [data-id="col-dd"] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .elementor-element-colecciones [data-id^="col-tg-"]::after,
	.elementor .elementor-element-colecciones.col-dd-listo [data-id^="col-ov-"],
	.elementor .elementor-element-colecciones.col-dd-listo [data-id^="col-card-"]:not(.is-open) [data-id^="col-ov-"] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Etiqueta flotante: encoger al subir, en todos los formularios
 *
 * El tema reduce la etiqueta a --orb-float-size-active (75 % del campo) al
 * flotar, pero su regla pesa 0,3,0 y las hojas del sitio fijan el tamano de la
 * etiqueta con mas peso: ae-contacto.css (.ae-form ... > label, 0,4,1) y el CSS
 * propio de cada widget. Resultado: la etiqueta subia pero no encogia. La
 * portada y Nosotros lo arreglaban en el custom_css de su widget; Contacto y
 * cualquier formulario nuevo no. Aqui va para todos los widgets de formulario,
 * con 0,5,0 para ganar a esas hojas.
 *
 * Los pop-ups dibujan la etiqueta con el ::before del tema, que no tiene
 * tamano propio en ninguna hoja y ya encogia: no hace falta tocarlos.
 * ------------------------------------------------------------------------ */

.elementor .elementor-widget-form .orb-float:focus-within > .elementor-field-label,
.elementor .elementor-widget-form .orb-float.is-filled > .elementor-field-label,
.elementor .elementor-widget-form .orb-float:has(input:not(:placeholder-shown)) > .elementor-field-label,
.elementor .elementor-widget-form .orb-float:has(textarea:not(:placeholder-shown)) > .elementor-field-label {
	font-size: var(--orb-float-size-active, 0.75em);
	letter-spacing: 1px;
}

/* ---------------------------------------------------------------------------
 * Buscador de la cabecera: lupa que despliega la barra
 *
 * Pedido el 2026-09-10: en vez de la caja, una lupa; al pulsarla la barra se
 * despliega ahi mismo, sobre la cabecera, sin pop-up. El boton lo crea el
 * script del widget hdr-search-js (cabeceras 103 y 4538), que marca el widget
 * con .ae-busca-listo: sin JavaScript no se marca y la caja se queda como
 * estaba.
 *
 * La barra va en absoluto, encima del hueco que hay hasta el logo: la
 * cabecera reparte sus hijos con space-between y, si el buscador creciera en
 * el flujo, el logo dejaria de estar centrado. El ancho se limita para que en
 * tablet tampoco llegue al logo. Se despliega de izquierda a derecha con
 * clip-path y un fundido; cerrada queda en visibility: hidden, fuera del orden
 * de tabulacion.
 * ------------------------------------------------------------------------ */

/* Solo desde 768 px: por debajo el widget lo oculta su propio CSS (en movil
   la cabecera tiene otra lupa), y un display aqui lo volvia a mostrar. */
@media (min-width: 768px) {
	.elementor-location-header .elementor-element-hdr-search.ae-busca-listo {
		position: relative;
		display: flex;
		align-items: center;
	}
}

/* Mismo trazo fino y mismo color que los iconos de cuenta y carrito. */
.elementor-location-header .ae-busca-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ae-ink);
	cursor: pointer;
	transition: background-color 200ms ease;
}

.elementor-location-header .ae-busca-toggle svg {
	width: 22px;
	height: 22px;
}

.elementor-location-header .ae-busca-toggle:hover,
.elementor-location-header .ae-busca-toggle[aria-expanded="true"] {
	background: var(--ae-tint);
}

.elementor-location-header .ae-busca-toggle:focus-visible {
	outline: 2px solid var(--ae-accent);
	outline-offset: 2px;
}

.elementor-location-header .elementor-element-hdr-search.ae-busca-listo .elementor-search-form {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 48px;
	/* 50vw - 180: medio logo (111) + la lupa (48) + aire; a 900 px pisaba el logo. */
	width: min(300px, calc(50vw - 180px));
	transform: translateY(-50%);
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	visibility: hidden;
	transition: clip-path 350ms ease, opacity 250ms ease, visibility 0s linear 350ms;
}

.elementor-location-header .elementor-element-hdr-search.ae-busca-abierto .elementor-search-form {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	visibility: visible;
	transition: clip-path 350ms ease, opacity 250ms ease, visibility 0s;
}

/* Al enfocar el campo, el widget entero recibia un contorno negro de 2 px:
   la barra tapaba su lado derecho y quedaban dos rayas alrededor de la lupa.
   Se quita del widget y el foco se marca dentro de la barra, con un filete
   en el color de acento. */
.elementor-location-header .elementor-element.elementor-element-hdr-search.ae-busca-listo:focus-within {
	outline: none;
}

.elementor-location-header .elementor-element-hdr-search.ae-busca-abierto .elementor-search-form__container:focus-within {
	box-shadow: inset 0 0 0 1px var(--ae-accent);
}

/* La lupa ya esta fuera: el icono macizo del formulario sobra. */
.elementor-location-header .elementor-element-hdr-search.ae-busca-listo .elementor-search-form__icon {
	display: none;
}

.elementor-location-header .elementor-element-hdr-search.ae-busca-listo .elementor-search-form__input {
	padding-inline-start: 16px;
}

/* El widget del script no pinta nada. */
.elementor-location-header [data-id="hdr-search-js"] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-element-hdr-search.ae-busca-listo .elementor-search-form,
	.elementor-location-header .elementor-element-hdr-search.ae-busca-abierto .elementor-search-form {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Fila de idioma del menu movil (drilldown)
 *
 * El selector de WPML vive en el bloque de enlaces de raiz como una fila mas,
 * y el plugin le da el mismo alto que al resto (min-height de 44 px, display
 * flex). Pero su propia regla generica del switcher -pensada para cuando va en
 * el pie- fuerza display: inline-flex !important y min-height: auto !important
 * a cualquier enlace de WPML, y el !important gana aunque la otra sea mas
 * especifica: la fila se quedaba en 22 px y el hueco del menu no cuadraba.
 *
 * Solo el toggle: las opciones del desplegable llevan su propio alto. El
 * arreglo de raiz es acotar esa regla al pie en el plugin (1.27.0).
 * ------------------------------------------------------------------------ */

.elementor-location-header .drilldown-active nav.elementor-nav-menu--dropdown li.drilldown-root-links .drilldown-root-link--wpml .wpml-ls a.wpml-ls-item-toggle {
	display: flex !important;
	min-height: var(--drilldown-root-links-row-height, 44px) !important;
}

/* ---------------------------------------------------------------------------
 * Cabecera del drilldown: boton «Volver» sin relleno
 *
 * El relleno del boton (8 px) lo quita el control Padding del widget hdr-nav
 * (cabeceras 103/4538). Queda el margen de 6 px de la flecha, que el plugin
 * suma al gap de 8 px del boton: aqui se quita y flecha y texto quedan a 8 px.
 * Las columnas laterales de la barra miden lo que el boton, asi que lo que se
 * recorta aqui lo gana el titulo, por los dos lados.
 * ------------------------------------------------------------------------ */

.elementor-location-header .drilldown-active .drilldown-header .drilldown-back-icon {
	margin-right: 0;
}


/* ---------------------------------------------------------------------------
 * Pop-ups de Elementor: sin salto al abrirse (CLS)
 *
 * Elementor Pro carga dialog.min.css y popup.min.css solo cuando se abre el
 * primer pop-up. Hasta que llegan, el contenedor .dialog-lightbox-widget se
 * pinta un fotograma a 0x0 y luego pasa a pantalla completa: Chrome lo cuenta
 * como desplazamiento de disenno. Medido el 2026-09-16 en /alianzas-de-boda/ con
 * el pop-up de asesoramiento: 0,99 de CLS. Con estas cuatro reglas desde el
 * inicio, 0. Son las mismas que pone dialog.min.css, adelantadas.
 * ------------------------------------------------------------------------ */
.elementor-popup-modal.dialog-lightbox-widget {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Hero de la portada: recorte ligero en movil (16-09-2026)
 *
 * La caja mide 624 px de alto con fondo cover centrado, asi que en un movil solo
 * se ve la franja central del original de 1729x910. -movil.webp es esa franja
 * (720x910, 31 KB frente a 139 KB): mismo encuadre hasta ~490 px de ancho. El
 * degradado repite el de la version mobile de Elementor (local-64/4462).
 * El corte de 480 px va a juego con AE_HERO_MOVIL_MAX en ae-imagenes-optimizadas.php,
 * que precarga cada version con su media.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	body.home .elementor .hero-base {
		background-image: linear-gradient(0deg, rgba(42,29,25,0.82) 0%, rgba(42,29,25,0.45) 45%, rgba(42,29,25,0) 80%), url("/wp-content/uploads/2026/08/alianzas-de-boda-oro-pareja-novios-campo-movil.webp");
	}
}

/* ---------------------------------------------------------------------------
 * reCAPTCHA v3 en los formularios (16-09-2026)
 *
 * El campo va con la insignia «inline» y se saca del flujo sin display:none
 * (Google necesita el nodo renderizado para ejecutar el invisible). La
 * insignia flotante chocaria con WhatsApp y el aviso de cookies; Google permite
 * ocultarla si el formulario lleva el texto legal, que va en un campo HTML
 * (.ae-recaptcha-aviso) justo antes del boton.
 * ------------------------------------------------------------------------- */
.elementor-form .elementor-field-type-recaptcha_v3 {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap;
}

.elementor-form .ae-recaptcha-aviso {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: inherit;
	opacity: .72;
}

.elementor-form .ae-recaptcha-aviso a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Flecha del desplegable del menu principal: mismo color que el texto.
 *
 * El hover y el activo del widget hdr-nav fijan solo `color` (global 931819a,
 * blanco) y no `fill`, asi que el svg de la flecha seguia con el fill oscuro
 * del estado normal. Con currentColor la flecha sigue al texto en todos los
 * estados, y en cualquier cabecera que use el widget.
 */
.elementor-nav-menu--main .elementor-item .sub-arrow svg {
	fill: currentColor;
}