/* ORDEN OBLIGATORIO: este fichero va DESPUES del CSS de Elementor y ANTES
 * de site.css. Los selectores llevan una sola clase a proposito: empatan en
 * especificidad con Elementor (y ganan por orden) y pierden contra site.css,
 * que es quien debe decidir el diseno.
 */

/* Puente Elementor -> diseño original de la notaría.
 *
 * Elementor marca cada contenedor con .e-con/.e-flex y les impone su propio
 * flex, que pisa los 59 display:grid/flex de site.css. Y envuelve cada widget
 * en .elementor-widget-container, con lo que los hijos directos que esperan
 * los grid y los :nth-child del diseño dejan de ser los elementos reales.
 *
 * Aquí se devuelve el control a site.css.
 */

/* 1. Los contenedores de Elementor dejan de imponer layout.
 *    Los que llevan una clase del diseño reciben el suyo de site.css. */
.e-con,
.e-con-full,
.e-parent,
.e-child {
	display: block;
	/* Los contenedores de Elementor son flex-direction:column por defecto, y el
	 * diseño da por hecho el `row` del navegador: cuando site.css dice
	 * `display:flex` sin dirección, esperaba una fila. `unset` NO devuelve row
	 * (hereda), así que se fija el valor inicial de forma explícita. Era la
	 * causa de que los botones del hero salieran apilados y al 100% de ancho. */
	flex-direction: row;
	--flex-direction: row;
	align-items: normal;
	justify-content: normal;
	gap: normal;
	width: auto;
	max-width: none;
	min-height: 0;
	padding: 0;
	margin: 0;
	--width: auto;
	--gap: 0px;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* 2. El envoltorio del widget desaparece del layout: así los hijos del grid
 *    vuelven a ser el h2, el p o la img, y no un div intermedio. */
.elementor-widget-container {
	display: contents;
}

/* 3. Los widgets sí siguen contando como hijo (el CSS los estiliza por su
 *    clase), pero sin el ancho ni el margen que Elementor les pone. */
.elementor-widget {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* 4. Elementor centra y limita el ancho del contenido de la página. El diseño
 *    maqueta a sangre completa y pone sus propios .wrap. */
.elementor,
.elementor-section-wrap,
.elementor-section,
.elementor-container,
.elementor-widget-wrap {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* 5. Astra añade su propio contenedor alrededor del contenido. */
.ast-container,
#primary,
.entry-content {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: block;
}

.entry-content > * {
	margin-block: 0;
}

/* 6. El texto va dentro de un text-editor; su <p> es el que el diseño estiliza.
 *    El widget en sí no debe añadir nada. */
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-image,
.elementor-widget-button,
.elementor-widget-html {
	color: inherit;
	font: inherit;
	line-height: inherit;
}

/* 7. El botón del diseño es un <a class="btn">. Elementor lo envuelve en
 *    .elementor-button-wrapper y le pone su propia piel: se retira. */
.elementor-button-wrapper {
	display: contents;
}

.elementor-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	border-radius: 0;
	text-align: inherit;
}

.elementor-button-content-wrapper,
.elementor-button-text {
	display: contents;
}

/* 8. La imagen del diseño lleva sus propias medidas. */
.elementor-widget-image figure,
.elementor-image {
	margin: 0;
	display: contents;
}

/* 9. El acordeón nativo sustituye al de site.js: conserva la piel del diseño
 *    reutilizando las mismas variables. */
.elementor-accordion {
	border: 0;
}

.elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--rule);
}

.elementor-tab-title {
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(15px, 1.6vw, 17px);
	color: var(--primary);
	background: none;
	padding: 22px 0;
	border: 0;
}

.elementor-tab-title a {
	color: inherit;
}

.elementor-tab-content {
	border: 0;
	padding: 0 0 22px;
	color: var(--text);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.75;
}

/* 10. En el editor de Elementor los contenedores deben seguir siendo
 *     seleccionables, o la notaria no puede pinchar en ellos. */
.elementor-editor-active .e-con {
	min-height: 20px;
}

/* 11. Ancho completo en toda la cadena de Astra y WordPress.
 *     Astra limita el contenido a 1200px (--ast-normal-container-width) en
 *     varios eslabones a la vez, y algunos con !important. El diseño maqueta a
 *     sangre y centra con sus propios .wrap, así que aquí se abre todo.
 *     Es el único sitio del puente donde hace falta !important: hay que deshacer
 *     un !important de WordPress (.is-layout-constrained). */
#page,
#content,
.site-content,
#primary,
.content-area,
.ast-container,
.entry-content,
.elementor,
.ast-separate-container,
.ast-plain-container {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

/* Los hijos directos del contenido tampoco se recortan ni se centran solos:
 *     el diseño ya decide qué va estrecho y qué va a sangre. */
.entry-content > *,
.is-layout-constrained > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Astra deja hueco para su cabecera y su pie, que aquí no se usan. */
.site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* 12. El corte a 1200px no era ningún max-width.
 *     Astra pone .site-content en display:flex, así que #primary queda como
 *     flex item con `flex: 0 1 auto` y se encoge al ancho de su contenido — los
 *     .wrap de 1200px — arrastrando con él el fondo de todas las secciones.
 *     Medido: .site-content 1440px, #primary 1200px, max-width none en ambos. */
.site-content {
	display: block;
}

#primary,
.content-area {
	flex: 1 1 100% !important;
	width: 100% !important;
}

/* 13. El botón: la clase .btn viaja al <a> (ver inc-elementor.php), así que el
 *     div del widget no debe pintar nada ni ocupar sitio. Sin esto sale el
 *     borde por triplicado y cada botón se come una fila entera, porque
 *     `.hero-actions .btn{width:100%}` se aplica sobre el envoltorio. */
.elementor-widget-button {
	display: contents;
}

/* 14. Refuerzo de la dirección del flex con dos clases (0,2,0), por si alguna
 *     regla de Elementor con más peso vuelve a imponer column. Los contenedores
 *     que el diseño quiere en columna lo declaran en site.css, que va después. */
.e-flex.e-con,
.e-flex.e-con-full {
	flex-direction: row;
}

/* 15. Astra 4.x pinta su propio pie con el Footer Builder (#colophon, el
 *     'Powered by Astra'). No lo quita remove_action porque no usa
 *     astra_footer_markup, así que se retira del layout: el diseño trae su
 *     propio pie, servido desde parts/bottom.html. */
#colophon,
.site-footer,
.ast-footer-overlay {
	display: none !important;
}

/* 16. EL EDITOR DE ELEMENTOR NECESITA CAJAS.
 *
 *     Las reglas de arriba usan `display: contents` para que el frontend salga
 *     idéntico al diseño original: así los hijos de un grid vuelven a ser el
 *     h2 o la img, y no un div intermedio de Elementor. El precio es que el
 *     elemento deja de tener caja — y sin caja, Elementor no puede dibujar el
 *     recuadro de selección ni los tiradores, así que en el editor los widgets
 *     no se ven ni se pueden pinchar.
 *
 *     Dentro del editor se devuelven las cajas. La maqueta se ve algo distinta
 *     de la definitiva mientras se edita (los contenedores ocupan su sitio),
 *     pero se puede trabajar. El frontend no cambia: estas reglas solo aplican
 *     con body.elementor-editor-active. */
body.elementor-editor-active .elementor-widget-container,
body.elementor-editor-active .elementor-button-wrapper,
body.elementor-editor-active .elementor-button-content-wrapper,
body.elementor-editor-active .elementor-button-text,
body.elementor-editor-active .elementor-widget-image figure,
body.elementor-editor-active .elementor-image,
body.elementor-editor-active .elementor-widget-button {
	display: revert !important;
}

/* Los contenedores vuelven a tener alto y aire, para poder seleccionarlos y
 * soltar widgets dentro. */
body.elementor-editor-active .e-con,
body.elementor-editor-active .e-con-full,
body.elementor-editor-active .e-parent,
body.elementor-editor-active .e-child {
	min-height: 30px;
	padding: 4px;
}

/* Y el contorno de cada widget, que el reset de arriba dejaba invisible. */
body.elementor-editor-active .elementor-widget {
	min-height: 20px;
}

/* 17. EN EL EDITOR, LAS ANIMACIONES SE APAGAN.
 *
 *     El diseño esconde lo animado con `.js-on .reveal { opacity: 0 }` y lo
 *     revela un IntersectionObserver al entrar en pantalla. Dentro del iframe
 *     del editor de Elementor ese observer no dispara, así que el contenido se
 *     queda a opacidad 0 para siempre: los widgets están y se pueden
 *     seleccionar, pero el lienzo se ve vacío.
 *
 *     Aquí se deja todo visible mientras se edita, igual que hace el propio
 *     diseño con prefers-reduced-motion. El frontend no cambia: estas reglas
 *     solo aplican con body.elementor-editor-active. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-fade,
body.elementor-editor-active .reveal-zoom,
body.elementor-editor-active .reveal-left,
body.elementor-editor-active .reveal-right,
body.elementor-editor-active .reveal-stagger,
body.elementor-editor-active .reveal-stagger > *,
body.elementor-editor-active .elementor-invisible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}