/* ════════════════════════════════════════════════════════════════════
   WEBLYM · «ESTADÍSTICAS»                                       (11/10)

   La cuarta sección de la portada: el titular y su lema a la izquierda y,
   a la derecha, el vídeo del panel de estadísticas, como una tarjeta con
   sus esquinas redondeadas y un borde fino.

   ── DE DÓNDE SALEN LOS NÚMEROS ─────────────────────────────────────
   De medir la referencia del 11/10 (853 px de ancho, la portada a unos
   1250 de ventana: «Contáctanos» mide ahí 77 × 22 de sus 124 × 36).
   Llevadas a `--u`, el píxel de la referencia de 1088 que usan las demás
   secciones: el texto empieza en 44, el vídeo en 390 y mide 884 de
   ancho. OJO CON EL ZOOM DEL 90 % (landing.css): `--u` sale de `100vw`,
   que no lo lleva, y luego se pinta al 90 %, así que la pantalla mide
   1088 / 0,9 = 1209 unidades y no 1088. Con eso el último 5 % del vídeo
   —el canto derecho de la ventana— queda fuera, que es lo que enseña la
   imagen. Por encima de 1440 la sección deja de crecer y se centra como
   las demás.
   MÁS PEQUEÑO Y ENTERO (11/10, pedido: «es demasiado grande», con borde y
   esquinas): de 884 a 680 de ancho y ya no se sale por el canto —un borde
   cortado por la pantalla se vería roto—. Va pegado a la derecha con el
   mismo margen que el texto a la izquierda (44).
   ════════════════════════════════════════════════════════════════════ */

/* «GESTIONA TU TIENDA» (11/10, pedido): la sección que lleva dentro las
   estadísticas —y, más adelante, los productos—, con la cabecera de
   siempre (`.prueba__cabeza`, de prueba.css) encima del primer bloque. */
.gestion {
  --u: calc(min(100vw, 1920px) / 1088);
  max-width: 1920px;
  margin: 0 auto;
}

.datos {
  --u: calc(min(100vw, 1920px) / 1088);
  position: relative;
  max-width: 1920px;
  /* El alto es el del vídeo (680 × 912 / 1920), que va en absoluto. */
  height: calc(680 * var(--u) * 912 / 1920);
  /* Arriba, el aire entre la cabecera de la sección y el bloque. */
  margin: calc(56 * var(--u)) auto calc(120 * var(--u));
}

/* EL TEXTO, CENTRADO A LO ALTO EN EL VÍDEO y un poco por encima: en la
   referencia su centro cae algo más arriba que el del vídeo (19 unidades
   con el vídeo grande; 15 con el de ahora, en la misma proporción). */
.datos__texto {
  position: absolute;
  left: calc(44 * var(--u));
  top: 50%;
  transform: translateY(calc(-50% - 15 * var(--u)));
}

.datos__titulo {
  margin: 0;
  font-size: max(24px, calc(34 * var(--u)));
  font-weight: 400;
  line-height: 1.2;
}

/* LOS SALTOS DE LÍNEA VAN ESCRITOS, como en las cabeceras de arriba: son
   los de la referencia. */
.datos__lema {
  margin: calc(11 * var(--u)) 0 0;
  font-size: max(12px, calc(17.5 * var(--u)));
  line-height: 1.24;
  color: var(--tinta-suave);
}

/* EL RESPLANDOR DE DETRÁS DEL VÍDEO (11/10, pedido: «la sombra con colores
   similares al del vídeo, como más arriba»). La receta de
   `.prueba__escenario::before` —un degradado elíptico con las mismas
   cuatro paradas y la misma fuerza, 1,3 veces el ancho y 1,5 el alto de lo
   que rodea—, en el azul del canto del vídeo (medido en su cartel:
   140, 176, 246). Centrado en el vídeo: 44 de margen más la mitad de sus
   680. Detrás de todo y sin clics. */
.datos::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: calc(384 * var(--u));
  top: 50%;
  width: calc(680 * var(--u) * 1.3);
  height: calc(680 * var(--u) * 1.3 * 912 / 1920 * 1.5);
  transform: translate(50%, -50%);
  background: radial-gradient(
    closest-side,
    rgb(140 176 246 / 0.2) 45%,
    rgb(140 176 246 / 0.11) 68%,
    rgb(140 176 246 / 0.035) 86%,
    rgb(140 176 246 / 0) 100%
  );
  pointer-events: none;
}

.datos__video {
  position: absolute;
  right: calc(44 * var(--u));
  top: 0;
  display: block;
  width: calc(680 * var(--u));
  height: auto;
  aspect-ratio: 1920 / 912;
  /* La tarjeta: el radio en proporción al vídeo y el borde fino de la
     casa (el gris de «Contáctanos», más suave: va alrededor de una
     ventana que ya trae el suyo). `border-box` para que el borde no
     cambie la proporción. */
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  border-radius: calc(16 * var(--u));
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════
   «FINANZAS» (12/10, pedido): el segundo bloque, EN ESPEJO del de
   estadísticas —la imagen a la izquierda y el texto a la derecha—. Misma
   tarjeta (la imagen mide lo mismo que el vídeo, 1920 × 912) y mismos
   márgenes, dados la vuelta.
   ── LOS NÚMEROS ────────────────────────────────────────────────────
   · La imagen, a 44 del canto izquierdo, como el vídeo del derecho.
   · El texto se ANCLA POR LA DERECHA, a 44 del canto, como el de
     estadísticas por la izquierda: así es espejo exacto mida lo que mida
     (en inglés las líneas son otras). Se probó empezándolo a 764 y quedaba
     a 42 px de la imagen, contra los 155 que hay en el bloque de arriba.
   · Sin aire arriba: el bloque de encima ya deja sus 120 por debajo.
   · El resplandor es el VERDE del canto de la imagen, medido como el
     azul: la media de su halo da 133, 167, 83, y con el mismo ajuste que
     llevó 162, 190, 246 a 140, 176, 246 sale 114, 155, 83. Centrado en
     la imagen: 44 + 680 / 2 = 384 desde la izquierda.
   ════════════════════════════════════════════════════════════════════ */
.datos--al-reves {
  margin-top: 0;
}

.datos--al-reves .datos__texto {
  left: auto;
  right: calc(44 * var(--u));
}

.datos--al-reves::before {
  right: auto;
  left: calc(384 * var(--u));
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgb(114 155 83 / 0.2) 45%,
    rgb(114 155 83 / 0.11) 68%,
    rgb(114 155 83 / 0.035) 86%,
    rgb(114 155 83 / 0) 100%
  );
}

.datos__imagen {
  position: absolute;
  left: calc(44 * var(--u));
  top: 0;
  display: block;
  width: calc(680 * var(--u));
  height: auto;
  aspect-ratio: 1920 / 912;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  border-radius: calc(16 * var(--u));
  object-fit: cover;
}

/* ── MÓVIL (12/10, pedido) ───────────────────────────────────────────
   En una columna y en píxeles (el porqué, en ia.css): cada bloque es su
   texto y, debajo, su tarjeta de lado a lado con 20 px de margen. Los
   dos en el MISMO orden —texto y luego imagen—: el espejo de ordenador
   no tiene sentido en una columna, y alternarlo obligaría a leer en
   zigzag. El resplandor se queda, centrado en la tarjeta. */
@media (max-width: 640px) {
  .gestion {
    padding-top: 64px;
  }

  .datos,
  .datos--al-reves {
    height: auto;
    margin: 36px 0 0;
    padding: 0 20px;
  }

  .datos--al-reves {
    margin-top: 48px;
  }

  .datos__texto,
  .datos--al-reves .datos__texto {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }

  .datos__titulo {
    font-size: 24px;
  }

  .datos__lema {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.35;
  }

  .datos__video,
  .datos__imagen {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 18px;
    border-radius: 12px;
  }

  /* El resplandor, debajo de la tarjeta: arranca donde acaba el texto, así
     que se cuelga del pie del bloque y no de su centro. */
  .datos::before,
  .datos--al-reves::before {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -20%;
    width: 130%;
    height: 90%;
    transform: translateX(-50%);
  }
}