/* Puente entre el marcado de Elementor y el diseño del sitio.
 *
 * site.css es idéntico al styles.css del sitio a código y así debe seguir: es la
 * referencia. Pero ese CSS supone marcado propio —<p class="section__eyebrow">,
 * <a class="btn btn--yellow">— y Elementor no funciona así: envuelve cada widget
 * en un div y crea su propio elemento dentro, de modo que la clase del diseño cae
 * en el envoltorio y no en el elemento que hay que pintar.
 *
 * Todo lo que se estila por descendencia (.cta-final h2, .historia p, .page-hero h1)
 * funciona solo y no aparece aquí. Este archivo cubre únicamente los casos en que la
 * clase iba sobre el elemento mismo.
 */

/* --- Modo edición ---------------------------------------------------------------
 * Las secciones entran con una animación: «.reveal» arranca en opacity 0 y un
 * IntersectionObserver de main.js les pone «.is-revealed» cuando asoman en pantalla.
 * Dentro del editor de Elementor eso no ocurre —el observador se engancha una sola
 * vez al cargar, y cualquier widget que se vuelva a dibujar al editarlo nace sin
 * marcar— así que todos los textos quedan invisibles y la página parece vacía.
 * En modo edición se muestran siempre. En el sitio publicado la animación sigue igual.
 */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal {
  opacity: 1;
  transform: none;
}

/* --- Títulos nativos -----------------------------------------------------------
 * Lo único que Elementor impone y estorba es «line-height: 1» en su título.
 * Se devuelve la herencia con la MISMA especificidad que usa Elementor (una clase),
 * de modo que cualquier regla del sitio con más peso —.cta-final h2, .page-hero h1—
 * siga mandando. Forzar aquí también tamaño, peso o color rompería justamente esas.
 */
.dll-site .elementor-heading-title {
  line-height: inherit;
}

/* Y cuando el título nativo es de verdad un h1..h4, hereda del cuerpo (1,55) en vez
 * del 1,1 que site.css le da a los encabezados, porque la regla de Elementor tiene
 * más peso que «h1, h2, h3, h4». Se repite aquí ese único valor.
 */
.dll-site h1.elementor-heading-title,
.dll-site h2.elementor-heading-title,
.dll-site h3.elementor-heading-title,
.dll-site h4.elementor-heading-title {
  line-height: 1.1;
}

/* --- Elementos cuya clase de diseño cae en el envoltorio ------------------------
 * Casos como .section__eyebrow o .patrimonio__text, donde el CSS del sitio estiliza
 * el elemento mismo. Con Elementor la clase queda fuera, así que hay que empujar la
 * tipografía hacia dentro. Se listan uno a uno a propósito: una regla general
 * pisaría las secciones que sí se estilan por descendencia.
 */
.dll-site .section__eyebrow .elementor-heading-title,
.dll-site .patrimonio__eyebrow .elementor-heading-title,
.dll-site .patrimonio__cite .elementor-heading-title,
.dll-site .section__lead .elementor-widget-container,
.dll-site .section__lead .elementor-widget-container p,
.dll-site .patrimonio__text .elementor-widget-container,
.dll-site .patrimonio__text .elementor-widget-container p {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  text-align: inherit;
}

/* .section__title se usa sobre encabezados de verdad. Ahí sólo hay que empujar el
 * tamaño y la alineación: la familia y el peso ya se los da «h1, h2, h3, h4» de
 * site.css, y forzar herencia los convertiría en texto corriente.
 */
.dll-site .section__title .elementor-heading-title {
  font-size: inherit;
  margin: 0;
  text-align: inherit;
}

/* --- Márgenes de los elementos con clase de diseño en el envoltorio -------------
 * Elementor anula el margen inferior de todo widget dentro de un contenedor con
 * «.e-con .elementor-widget.elementor-widget», duplicando la clase para pesar más.
 * Se restituyen los del diseño. Valores copiados de site.css.
 */
.dll-site .e-con .elementor-widget.section__eyebrow {
  margin-block-end: 6px;
}

.dll-site .e-con .elementor-widget.patrimonio__eyebrow {
  margin-block-end: 4px;
}

.dll-site .e-con .elementor-widget.patrimonio__text {
  margin-block-end: 12px;
}

/* Elementor da ancho completo a sus widgets y se lleva por delante el ancho de
 * lectura del párrafo de entrada.
 */
.dll-site .e-con .elementor-widget.section__lead {
  margin-inline: auto;
  max-width: 56ch;
}

/* --- Imágenes nativas: Elementor las centra por su cuenta ----------------------- */
.dll-site .elementor-widget-image {
  text-align: inherit;
}

/* --- Botones nativos -----------------------------------------------------------
 * La variante (btn--yellow, btn--red, btn--outline) se pone en el envoltorio del
 * widget desde Elementor; aquí se traduce al <a> que genera. Los colores salen de
 * las mismas variables que usa site.css, así que cambiar la paleta desde Elementor
 * sigue afectando a los dos marcados por igual.
 */
.dll-site [class*="btn--"] .elementor-button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.98rem;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.2px;
  /* Elementor fija line-height:1 en su botón; el del sitio hereda el 1,55 del cuerpo. */
  line-height: inherit;
  padding: 14px 26px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}

.dll-site .btn--yellow .elementor-button {
  background: var(--yellow);
  box-shadow: 0 10px 22px rgba(255, 199, 44, 0.45);
  color: var(--red-dark);
}

.dll-site .btn--yellow .elementor-button:hover {
  background: var(--yellow-dark);
  transform: translateY(-2px);
}

.dll-site .btn--red .elementor-button {
  background: var(--red);
  box-shadow: var(--shadow-pop);
  color: #fff;
}

.dll-site .btn--red .elementor-button:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
}

.dll-site .btn--outline .elementor-button {
  background: transparent;
  border: 2px solid var(--red);
  color: var(--red-dark);
}

.dll-site .btn--outline .elementor-button:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
}

/* --- Imágenes nativas ----------------------------------------------------------
 * Clases como .patrimonio__seal o .historia__single fijan tamaño sobre el <img>.
 * Con el widget de imagen caen en el envoltorio, así que el <img> tiene que
 * llenarlo para que el resultado sea el mismo.
 */
.dll-site .elementor-widget-image img {
  display: block;
  height: 100%;
  width: 100%;
}

/* --- Alineación de las secciones centradas -------------------------------------
 * Elementor declara «.e-con-full { text-align: var(--text-align) }» en su propia
 * hoja, que WordPress imprime DESPUÉS de site.css y con la misma especificidad, así
 * que gana y deja el texto a la izquierda. Se restituye el centrado con más peso.
 * Es la única duplicación de valores de diseño que hay en este archivo.
 */
.dll-site .e-con.page-hero,
.dll-site .e-con.cta-final,
.dll-site .e-con.page-hero > .e-con-inner,
.dll-site .e-con.cta-final > .e-con-inner {
  text-align: center;
}

/* --- Rejillas ------------------------------------------------------------------
 * Mismo problema que la alineación: Elementor pinta «display» y «gap» en sus
 * contenedores con variables propias y su hoja carga después, así que convierte en
 * flex de 20px cualquier rejilla del diseño. Aquí se restituyen las tres de Nosotros
 * con más peso. Los valores están copiados de site.css —líneas 547, 1523 y 1609— y
 * hay que tocarlos si allí cambian.
 */
.dll-site .e-con.patrimonio__inner {
  align-items: center;
  display: grid;
  gap: 46px;
  grid-template-columns: auto 1fr;
}

.dll-site .e-con.historia__grid {
  align-items: center;
  display: grid;
  gap: 54px;
  grid-template-columns: 0.85fr 1.15fr;
}

.dll-site .e-con.street__grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Al subir la especificidad de las reglas de arriba también nos cargamos las consultas
 * de medios que las colapsan en pantallas chicas, así que hay que repetirlas con el
 * mismo peso y en los mismos puntos de quiebre. site.css, líneas 1366 y 1646.
 * street__grid no aparece: su «auto-fit» ya se adapta solo.
 */
@media (max-width: 980px) {
  .dll-site .e-con.historia__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .dll-site .e-con.patrimonio__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* --- Contenedores de sección ---------------------------------------------------
 * Los contenedores de Elementor traen su propio ancho máximo, relleno y separación.
 * Las secciones del sitio ya los definen, así que se neutralizan.
 */
.dll-site .e-con.dll-seccion {
  --container-max-width: none;
  gap: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.dll-site .e-con.dll-seccion > .e-con-inner {
  gap: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

/* --- Ancho y relleno de cada sección -------------------------------------------
 * La regla de arriba deja los contenedores a cero para quitarles lo que Elementor
 * trae de fábrica, pero con eso también se lleva por delante el «max-width» y el
 * «padding» que site.css define para cada sección, y el contenido se pega al borde.
 * Aquí se devuelven, con el peso suficiente para ganarle. Los valores están copiados
 * de site.css y hay que tocarlos si allí cambian.
 */
.dll-site .e-con.hero,
.dll-site .e-con.page-hero,
.dll-site .e-con.historia,
.dll-site .e-con.categorias,
.dll-site .e-con.street,
.dll-site .e-con.ubicacion {
  margin-left: auto;
  margin-right: auto;
  max-width: 1220px;
}

.dll-site .e-con.hero {
  padding: 56px 24px 40px;
}

.dll-site .e-con.page-hero {
  padding: 60px 24px 30px;
}

.dll-site .e-con.packs,
.dll-site .e-con.testi {
  padding: 70px 24px;
}

.dll-site .e-con.historia,
.dll-site .e-con.categorias {
  padding: 70px 24px;
}

.dll-site .e-con.street {
  padding: 70px 24px 80px;
}

.dll-site .e-con.ubicacion {
  padding: 20px 24px 80px;
}

.dll-site .e-con.patrimonio {
  padding: 64px 24px;
}

.dll-site .e-con.cta-final {
  margin-left: auto;
  margin-right: auto;
  max-width: 860px;
  padding: 80px 24px;
}

/* --- Rejillas de la portada ----------------------------------------------------
 * Mismo caso que las de Nosotros. Valores copiados de site.css.
 */
.dll-site .e-con.hero__inner {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1.05fr 0.95fr;
}

.dll-site .e-con.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.dll-site .e-con.testi-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 40px auto 0;
  max-width: 1220px;
}

@media (max-width: 980px) {
  .dll-site .e-con.hero__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .dll-site .e-con.hero {
    padding: 34px 18px 30px;
  }
}