/* ============================================================
   Puente Elementor ↔ CSS original de PH Silverbay
   ============================================================
   ORDEN DE CARGA (crítico, lo fija inc/mu-plugin phsilverbay-assets.php):

       1. CSS de Elementor  (frontend.min.css, kit)
       2. ESTE ARCHIVO      → devuelve los envoltorios a un estado neutro
       3. CSS original      (variables, base, components, sections, responsive)

   Los tres niveles usan selectores de UNA sola clase, así que todos empatan en
   especificidad (0,1,0) y **decide el orden**: lo último que carga, gana.

   Por eso aquí NO se usa `:where()` (especificidad 0: perdería contra Elementor)
   ni selectores compuestos como `.elementor-page .e-con` (0,2,0: le ganaría al
   CSS original y volvería a romper el diseño). Un cambio de especificidad en
   este archivo rompe la cadena entera.

   Regla de oro: aquí no se maqueta nada. Solo se neutraliza.
   ============================================================ */

/* 1. Containers de Elementor → transparentes para el layout.
      Elementor los pinta como flex con padding y gap propios; el layout real
      lo dictan .hero, .reasons-section, .container, etc. */
.e-con,
.e-con-inner {
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  gap: 0;
  --width: auto;
  --content-width: auto;
  --padding-block: 0;
  --padding-inline: 0;
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --margin-block: 0;
  --margin-inline: 0;
  --gap: 0;
  /* El kit de Elementor declara `.e-con { --container-max-width: 1140px }`,
     directamente sobre el container: eso pisa el :root de variables.css, que
     por herencia nunca llega. Con `inherit` el container vuelve a tomar el
     valor de la cadena de ancestros (1200px), sin duplicar el número aquí. */
  --container-max-width: inherit;
  --container-padding: inherit;
  --flex-direction: initial;
  --justify-content: initial;
  --align-items: initial;
}

/* 2. Envoltorios de widget → transparentes */
.elementor-widget,
.elementor-widget-container {
  margin: 0;
  padding: 0;
  width: auto;
  /* `position: static` es necesario, no cosmético. Elementor deja los
     envoltorios en `position: relative`, y eso los convierte en el ancestro de
     referencia de cualquier hijo absoluto. `.city-lights` es
     `position:absolute; height:50%`: medía contra un envoltorio de 0px de alto
     y desaparecía, en vez de medir contra .hero (900px → 450px). */
  position: static;
}

/* 3. Tipografía de los encabezados.
      ------------------------------------------------------------
      En el HTML original la clase iba EN el propio <h1>/<h2>, así que el
      elemento recibía las reglas de etiqueta (h1..h6 de base.css) Y las de su
      clase (.hero-title, .section-title).

      Elementor pone la clase en el <div> envoltorio, no en el encabezado. Al
      romperse esa suma, el <h1> se quedaba con la tipografía del tema (Manrope)
      en vez de Cormorant Garamond.

      La solución tiene dos mitades:
        a) el envoltorio recibe lo que base.css daba a h1..h6, para que la clase
           del original (.hero-title, .section-title) siga aplicando encima;
        b) el <h1> hereda del envoltorio en vez de obedecer al kit de Elementor,
           que declara su tipografía con `.elementor-widget-heading
           .elementor-heading-title` (0,2,0) y si no se neutraliza gana siempre. */
.elementor-widget-heading {
  font-family: var(--font-heading);
  color: var(--primary-dark);
  line-height: var(--lh-h2);
}

/* El peso sí depende del nivel del encabezado, y el envoltorio no lo conoce.
   `:has()` mira qué etiqueta hay dentro. Solo se declara font-weight: tocar
   font-size aquí le ganaría por especificidad a .hero-title / .section-title. */
.elementor-widget-heading:has(h1) { font-weight: var(--fw-bold); }
.elementor-widget-heading:has(h2) { font-weight: var(--fw-semibold); }
.elementor-widget-heading:has(h3) { font-weight: var(--fw-semibold); }

/* El selector lleva body.pagelayer-body a propósito: Pagelayer publica CSS
   inline con `body.pagelayer-body h2 { ... }` (0,1,1), que le ganaba a un
   `.elementor-heading-title` pelado (0,1,0). Se notaba sobre todo en móvil,
   donde .section-title baja a 28px pero el <h2> se quedaba en los 45px de
   Pagelayer, y cada sección crecía más de 100px.

   Va acotado a .elementor-heading-title (los widgets heading) y NO a h1..h6 en
   general: los encabezados dentro de widgets HTML conservan la clase en el
   propio elemento y deben seguir mandando ellos (.reason-card h3, etc.). */
body.pagelayer-body .elementor-heading-title,
.elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* 4. Lo mismo para el text-editor, que envuelve en su propio <div> */
.elementor-widget-text-editor {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* 5. Contenedores que no deben ocupar espacio propio: navbar (que es fixed en
      el diseño original), footer, botón flotante de WhatsApp y modales.
      `display: contents` los saca del árbol de cajas sin tocar a sus hijos. */
.cpr-static-overlay {
  display: contents;
}

/* 6. El kit de Elementor redefine variables de layout sobre el <body>.
      Las custom properties se heredan por CERCANÍA, no por especificidad: al
      estar en <body> le ganan al :root de variables.css aunque este cargue
      después. Con `inherit` el body vuelve a tomar el valor de :root, sea cual
      sea — sin duplicar aquí ningún número.

      Selector body.elementor-page (0,1,1) para superar a .elementor-kit-NNN (0,1,0).
      No colisiona con el CSS original, que declara estas variables en :root. */
body.elementor-page {
  --container-max-width: inherit;
  --container-padding: inherit;
}

/* 7. Pagelayer (el builder del resto del sitio) inyecta tipografía global con
      `body.pagelayer-body { font-family: Manrope }` y equivalentes por etiqueta.
      Especificidad (0,1,1) y (0,1,2): le ganan al `body` y a los `h1..h6` sin
      prefijo de base.css, así que la landing heredaba la fuente del tema.

      Se reponen los valores del CSS original con la misma forma de selector,
      acotados a .elementor-page para no alterar el resto del sitio. Solo se
      toca font-family: los tamaños siguen saliendo del CSS original. */
body.elementor-page.pagelayer-body {
  font-family: var(--font-body);
}

body.elementor-page.pagelayer-body h1,
body.elementor-page.pagelayer-body h2,
body.elementor-page.pagelayer-body h3,
body.elementor-page.pagelayer-body h4,
body.elementor-page.pagelayer-body h5,
body.elementor-page.pagelayer-body h6 {
  font-family: var(--font-heading);
}

/* 8. Logo del hero.
      ------------------------------------------------------------
      `frontend.min.css` de Elementor trae `.elementor img { max-width: 100% }`,
      con especificidad (0,1,1). La regla original `.hero-logo { max-width:300px }`
      es (0,1,0): pierde, y el logo se renderizaba a 1430x514 en vez de 300x108.

      No se puede resolver neutralizando la regla de Elementor: cualquier
      selector que le gane a (0,1,1) le ganaría también a `.hero-logo` y volvería
      a romperlo. La salida es SUBIR de rango la regla original, replicándola
      aquí con `.elementor` delante — (0,2,0) le gana a (0,1,1).

      Es el ÚNICO caso del sitio con este problema: el resto de reglas de imagen
      (.nav-logo img, .gallery-item img, .carousel-slide img, .model-image img,
      .footer-brand .footer-logo) ya son (0,1,1) o más y ganan por orden de carga.

      Los valores replican sections.css:77 y responsive.css (líneas 134, 389,
      518 y 577). Si cambian allí, hay que actualizarlos aquí. */
.elementor img.hero-logo {
  max-width: 300px;
  width: 100%;
}

@media (max-width: 768px) {
  .elementor img.hero-logo { max-width: 280px; }
}

@media (max-width: 640px) {
  .elementor img.hero-logo { max-width: 220px; }
}

@media (max-width: 380px) {
  .elementor img.hero-logo { max-width: 180px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .elementor img.hero-logo { max-width: 200px; }
}