/* ==========================================================================
   PROYECTOS Y REFORMAS A+B — Capa de compatibilidad con Elementor
   --------------------------------------------------------------------------
   El contenido de las páginas es ahora estructura nativa de Elementor, así que
   entre los elementos de la maqueta aparecen dos envoltorios que la maqueta no
   conocía:

     1. Los contenedores (.e-con), que traen su propio display, ancho, relleno
        y separación por defecto.
     2. El envoltorio de cada widget (.elementor-widget), que se cuela entre un
        contenedor flex o grid y su hijo real.

   Esta hoja neutraliza esos valores por defecto para que manden las reglas de
   estilos.css, y devuelve a los envoltorios el papel que tenía el elemento
   original dentro de su flex o de su grid.

   Se carga después de la hoja de Elementor a propósito: así, en los empates de
   especificidad, gana la maqueta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contenedores
   Elementor lee sus propias variables para decidir display, ancho, relleno y
   separación. Se ponen en neutro en lugar de sobrescribir las propiedades
   directamente: si se forzara `display: block` se anularían también los
   `display: grid` y `display: flex` de la maqueta.
   -------------------------------------------------------------------------- */

/* La clase `ab-nodo` va repetida a propósito. Elementor genera, para cada
   página, una hoja propia que fija `--display: flex` en cada contenedor con un
   selector de tres clases (.elementor-217 .elementor-element.elementor-element-XXX)
   y que se sirve después de esta. Repetir la clase sube la especificidad lo
   justo para ganarle; sin ello el <main> se pinta como fila flexible y las
   secciones salen una al lado de otra en vez de apiladas.

   `--flex-direction` se deja en `column` y no en `initial` porque el valor
   inicial de flex-direction es `row`: si alguna vez no se lograra imponer
   `block`, el peor caso debe ser una columna, que se parece a la maqueta, y no
   una fila, que la destruye. */
.elementor .e-con.ab-nodo.ab-nodo {
    --display: block;
    --flex-direction: column;
    --align-items: initial;
    --justify-content: initial;
    --flex-wrap: initial;
    --gap: 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --width: auto;
    --max-width: none;
    --min-height: 0;
    --overflow: visible;

    --margin-top: 0px;
    --margin-right: 0px;
    --margin-bottom: 0px;
    --margin-left: 0px;
    --margin-block-start: 0px;
    --margin-block-end: 0px;
    --margin-inline-start: 0px;
    --margin-inline-end: 0px;

    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
}

/* Si el contenedor se pinta en modo «caja» —porque la versión de Elementor no
   respetara el ancho completo con el que se genera— aparece una capa interior
   entre el contenedor y sus hijos que rompería todas las rejillas. Con
   `display: contents` esa capa desaparece del reparto y los hijos vuelven a
   colgar directamente del contenedor. */
.elementor .e-con.ab-nodo > .e-con-inner {
    display: contents;
}

/* El contenedor deja de ser una capa con posición propia: las secciones de la
   maqueta que colocan hijos en absoluto (el pie de cada foto de la galería)
   necesitan que su referencia siga siendo la de siempre. */
.elementor .e-con.ab-nodo {
    position: static;
}

/* Salvo los que sí la necesitan porque el diseño los usa como referencia. */
.elementor .e-con.ab-nodo.trabajo,
.elementor .e-con.ab-nodo.portada-inicio,
.elementor .e-con.ab-nodo.cabecera {
    position: relative;
}

/* --------------------------------------------------------------------------
   2. Envoltorio de cada widget
   Debe comportarse como el elemento que envuelve: sin separación propia y sin
   estirarse a lo ancho cuando su contenido no lo hacía.
   -------------------------------------------------------------------------- */

/* Clase repetida por el mismo motivo que en los contenedores: la hoja que
   Elementor genera por página fija estos valores con tres clases. */
.elementor .elementor-widget.ab-hoja.ab-hoja {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.elementor .e-con > .elementor-widget.ab-hoja.ab-hoja {
    width: auto;
}

/* El contenedor intermedio que Elementor añade dentro del widget no debe
   introducir caja propia. */
.elementor .elementor-widget.ab-hoja > .elementor-widget-container {
    margin: 0;
    padding: 0;
    background: none;
}

/* Elementor aplica a cada widget la tipografía y el color globales de su kit
   (Ajustes del sitio). Mientras la página entera era un solo widget eso no
   llegaba al contenido; ahora cada párrafo es un widget y sí llega, pisando la
   maqueta. Los envoltorios se vuelven transparentes también para la
   tipografía: así el texto hereda lo que le corresponde de estilos.css. */
.elementor .elementor-widget.ab-hoja,
.elementor .elementor-widget.ab-hoja > .elementor-widget-container {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    text-decoration: inherit;
    color: inherit;
}

/* --------------------------------------------------------------------------
   3. Elementos que eran hijos de un flex y necesitan recuperar su papel
   Al meterse el envoltorio por medio, el que recibe `align-self` o el ancho
   automático pasa a ser el envoltorio y no el elemento original.
   -------------------------------------------------------------------------- */

/* Enlaces de acción y estado de disponibilidad: se ciñen a su texto y se
   alinean al principio de la columna, no ocupan la columna entera. */
.elementor .ab-hoja--enlace-accion,
.elementor .ab-hoja--estado-disponibilidad {
    align-self: flex-start;
    width: auto;
}

/* Botones dentro de un grupo de acciones: cada uno ocupa lo que mide. */
.elementor .ab-hoja--boton {
    width: auto;
}

/* --------------------------------------------------------------------------
   4. Imágenes
   El widget Imagen añade dos capas entre el contenedor y el <img>, así que las
   alturas relativas de la maqueta necesitan encontrar altura en el camino.
   -------------------------------------------------------------------------- */

.elementor .portada-inicio__imagen > .elementor-widget.ab-hoja,
.elementor .portada-inicio__imagen > .elementor-widget.ab-hoja > .elementor-widget-container,
.elementor .portada-inicio__imagen .elementor-widget-image {
    height: 100%;
}

/* Elementor pinta sus imágenes como `inline-block`, lo que deja un hueco bajo
   cada foto por el espacio de la línea base. La maqueta las trata como bloque. */
.elementor .elementor-widget-image.ab-hoja figure,
.elementor .elementor-widget-image.ab-hoja img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   5. Galería filtrable
   El filtro oculta la foto; al estar envuelta por el widget, hay que ocultar
   también el envoltorio para que no quede un hueco vacío en la rejilla.
   -------------------------------------------------------------------------- */

.elementor .elementor-widget.ab-hoja[hidden],
.elementor .elementor-widget[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   6. Editor de Elementor
   Dentro del editor conviene que los bloques vacíos o muy bajos sigan siendo
   seleccionables, y que el marco de selección no descoloque el diseño.
   -------------------------------------------------------------------------- */

body.elementor-editor-active .elementor .e-con.ab-nodo {
    min-height: 0;
}

body.elementor-editor-active .elementor .elementor-widget.ab-hoja {
    min-height: 1em;
}