/* realesdea8.com — hero de /quienes-somos/ (página 862), unificado con el de
 * /blog/ y /servicios/ el 2026-08-14: misma foto, mismo alto mínimo, misma
 * tipografía de h1 y el mismo filete dorado. Es Elementor puro (no un
 * shortcode propio como servicios): se sobreescribe por selector de widget.
 *
 * Sin entradilla a propósito: esta página no tenía ningún texto de
 * presentación dentro del hero (el h2 "¿Quién está detrás de 8Reales?" es un
 * encabezado de contenido real, no una entradilla de hero) y mover contenido
 * cambia el significado de la página. Si algún día se quiere una, hay que
 * escribirla primero.
 *
 * OJO, FRAGILIDAD CONOCIDA: los selectores van por `.elementor-862` (el ID de
 * la página) y por el ID interno del widget (`ad6804d`, `8508d8f`), que
 * Elementor genera y guarda en `_elementor_data`. Verificado el 2026-08-14 que
 * coinciden en pruebas y en producción — probablemente porque pruebas es un
 * clon de la BD de producción. Si algún día se reescribe el hero a mano en el
 * editor de una de las dos, esos IDs pueden cambiar y esta hoja dejaría de
 * aplicar sin dar ningún error.
 */

/* La sección ya usa la misma foto como fondo (Elementor, classic background);
   aquí solo se homogeneiza alto, velo y tipografía. El negro de abajo es el
   mismo fallback que en blog/servicios si la foto no cargara. */
.elementor-862 .elementor-element.elementor-element-ad6804d {
  background-color: #231f20;
  position: relative;
}

.elementor-862 .elementor-element.elementor-element-ad6804d > .elementor-container {
  min-height: clamp(200px, 19.8vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Elementor le mete a la columna un margen vertical propio (30px de base,
   50px por debajo de 767px) para su ritmo por defecto: sin anularlo, el hero
   sale más alto en móvil que el de /blog/ y /servicios/ (222px medido a
   500px de ancho en vez de 200). El espaciado lo controla desde aquí el
   padding del h1, así que este margen sobra en las tres anchuras. */
.elementor-862 .elementor-element.elementor-element-71eb033 > .elementor-element-populated {
  margin: 0 !important;
}

/* Velo MEDIDO igual que en blog/servicios (ver design.md): .34/.48 deja la
   foto legible y el texto muy por encima del contraste mínimo. */
.elementor-862 .elementor-element.elementor-element-ad6804d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(18, 14, 11, .34), rgba(18, 14, 11, .48));
}

/* El h1 y su filete van por encima del velo. */
.elementor-862 .elementor-element.elementor-element-8508d8f {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: clamp(28px, 3vw, 40px) clamp(18px, 3vw, 40px);
}

.elementor-862 .elementor-element.elementor-element-8508d8f .elementor-heading-title {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff !important;
}

/* El filete dorado del handoff, como pseudo-elemento: aquí no hay un <span>
   propio en el marcado (a diferencia del hub del blog) para colgarlo. */
.elementor-862 .elementor-element.elementor-element-8508d8f::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  background: linear-gradient(90deg, #c59b4a, #dcc794, #c59b4a);
  transform-origin: center;
  animation: r8qs-rule .9s cubic-bezier(.2, .7, .3, 1) .2s both;
}

@keyframes r8qs-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .elementor-862 .elementor-element.elementor-element-8508d8f::after { animation: none; }
}